Challenge Overview
Welcome to the AppXpress Marketplace WordPress Theme Development Challenge! AppXpress Marketplace is an Appirio newest approach to bring structured approach in developing mobile application.
The goal of this challenge is to create a website based on the provided WordPress theme, storyboard, and details outlined in this challenge. The end result should be fully functional WordPress theme with all its data editable/configurable through WP-Admin.
Final Submission Guidelines
We are looking to migrate the supplied PSD design mockups over to a wordpress driven website. We have provided source files and an approach for the work. The competitor that focuses on the native features of wordpress and plugins provided below to deliver the design will also be making it easy to maintain over time by minimizing custom code whenever possible.
The base theme will give you a good start with access to the templates, CSS, and functions necessary to build to the specifications. Page Layouts and Widgets should also provide an easy framework to work with and will allow non-technical users to update the site without having to manage any custom code.
General Rules
- Please leverage the native Wordpress and Plugin functions available through their respective configuration dashboard(s) as much as possible. Avoid writing custom code whenever possible.
- We realize there are many reasons where you will NEED TO write custom code. That is ok, but make sure you clearly insert the necessary code comments and document your work.
- We would like to maintain the base theme as the starting point for updating the themes layout to support the mockup designs.
- Please document any additional files created within the theme source files and/or any code updates.
- It is important to utilize the theme's LESS file to generate the necessary CSS styles.
Page Requirements and Instructions
Overall
- main navigation should utilize wp nav menu
- all content should be editable in wp admin
- all images should be treated as content and not a CSS image background
- footer text and icon links should be editable in wp admin
- "Stay Informed" is a way for user to subscribe, you can use plugin for this
- 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
1) Home
- see "AppXpress – Homepage.psd" file for reference
- all "Learn More" button leads to "Have a Question" page
- all "Get Started" button leads to "Get Started" page
- "AppXpress Marketplace" section:
-- "Video Tour" button and the image with "play" icon opens up a video lightbox, you can use sample youtube video for the content
- "Select your devices" section:
-- "Learn More" button leads to "Have a Question" page
- "Define your app" section:
-- the wysiwyg editor is actually an image and not real editor
2) Have a Question?
- see "AppXpress – Have a Question.psd" file for reference
- bottom right part is a contact form, you can use plugin for this, ideally contact form 7
3) Features
- see "AppXpress – Features.psd" for reference
- all content should be editable and there should be a way for the client to enter unlimited number of "Features" section
4) Get Started
- see "AppXpress – Get Started.psd" for reference
- all "Select" buttons are deadlinks for now
- "Learn More" button leads to "Have a question" page
All source files are included below:
- PSD Mockups
- Fonts
- Sitemap
- 'Hub' Wordpress Theme Files
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
Submission Deliverables
- Provide a link to your wordpress staging site of your work, please note that a supplied URL is preferred
- A 1-2 minute video demo of your solution.
- Description of any plugins used outside of the supplied list.
- Description of any custom coding that has been done outside of the supplied theme
- Detailed deployment instructions.
- 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.
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
- IE9+
- Latest FF Mac & PC
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Tablet browsers
- Mobile Phone browsers