Challenge Overview
Welcome to "AppXpress Wordpress - Marketplace Responsive Update pt. 1 ". In this challenge we need your help to update existing appxpress.com pages.
The goal of this challenge is to update existing home and how it works page theme based on storyboard.
Page Requirements and Instructions :
Overall
- Setup instruction is provided in forum
- Since Storyboard PSD file too big, please download it on google drive and link is provided in forum
- Latest wordpress theme source can be downloaded from the contest.
- Header, main navigation, and footer should be as existing theme. We will update them on next phase
- Premium (purchased) font on storyboard, (i.e : Myriad Pro) should replaced with existing web font
- All content should be editable in wp admin
- Responsive view should be handled on client side (css media queries) as existing page work
- All images should be treated as content and not a CSS image background
- Footer text and icon links should be editable in wp admin
- the solution will work responsively across devices and honor the existing framework installed with the theme
- the page requirements are relatively not hard, please note to pay attention to the submission deliverables below
01. Home Page
current page : https://appxpress.com/
- Any graphic (including as background) should managed from wp-admin
- Any graphic (i.e : smartwatch image) which as background should be fluid any screen resolution in order to prevent cut off effect if screen width bigger than 1200px
- Icons (gear, box, gallery icon) can be hardocoded in template as existing
How Does it Work
Button is not cutted smoothly on corners, please make it smooth
Button should link to how it work page described below
What can i Build
Button is not cutted smoothly on corners, please make it smooth
What will you build
Button should bring user to app builder
- Builder source is not included in the theme. It is actively being worked as a separate project.
Customer Story
carousel should be editable and extentable, it is close similar to Case Study section on current home page (see TakeOff360 item)
- Please be sure this carousel work fine on tablet and mobile device
- We are currently using WonderPlugin's carousel plugin, but are open to other suggestions.
02. How it Works Page
current page : none, but it is very close similar to current home page so you can replicate it as new template.
This new page has three sub pages and each page should be as their own page and template
Overview
- as parent page
- URL : http://siteurl/howitworks
Process
- URL : http://siteurl/howitworks/process
- Label below icon should be as text
- Extension icons (.PDF,.DMG,.DOC, etc) can be hardcoded in template
Samples
- URL : http://siteurl/samples
- Existing Samples page would become a child of How It Works page.
- Update existing sample page to match to storyboard
Required Wordpress environment and plugins:
- Wordpress 3.9.2 https://wordpress.org/download/
- WooDojo http://www.woothemes.com/woodojo/
- Woo Sidebars http://www.woothemes.com/woosidebars/
- Video Lightbox plugin https://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700
HTML/CSS Requirements
- Your HTML code must be HTML5 compliant
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors.
- The generated CSS file from LESS file should be validated for errors
- Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Browsers Requirements
- Tablet browsers
- Mobile Phone browsers
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Latest FF Mac & PC
- IE9+
Final Submission Guidelines
- A zip file contain a wordpress theme, exported data, and deployment guide
- A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types.
- You must include any necessary plug-in files along with the necessary configuration settings.