Challenge Overview
Project Overview
We already have a WordPress site running at BrivoLabs.com, however this site only works well on desktop / laptop computers. The purpose of this contest is to transform this site to a fully responsive web site that works / looks good on tablets and mobile phones too.
Competition Task Overview
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, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, its categories, and more.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
Should you have any questions, ask early in the forum.
Key Requirements
- Create a new theme or update the provided theme based is at your discretion. The target is to have a site that supports computers, tablets and mobile phones. And the desktop view should look identical to the current site.
- Test in all the required browsers.
- Provide ALL installation step by step, create details notes needed for your WordPress Theme.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Create a Theme based on the provided Storyboard PSDs and existing WordPress Theme.
- All content (headings, text, etc...) should be dynamic and editable via the WordPress Admin backend.
- DO NOT just create static HTML/PHP templates and have them served up by WordPress - you much create the Admin functionality.
- Backend functionality of the current webiste should NOT be broken.
- Notice there is a file called "Nest Menu.png" in the mobile storyboards. This is the reaction we'd like to happen when the menu icon is pressed. Essentially we would want "Brivo Labs" to replace "nest". As for the menu items, we would like to have the anchored links to be one color and the dropdown links to be another to distinguish them from one another.
Detailed Requirements
All pages shown in the storybards and currently in the existing site must be implemented.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation 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, JavaScript, 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.
- Current website code has some inline CSS, please move them to external CSS file.
Specific Wordpress Requirements
In addition to following Wordpress standards and best practices, please note the following requirements.
- General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
- Make proper use of the Wordpress Menu system.
- The editor must function as expected by our content editors. When then set styles via the rich editor, it should preview and display correctly on the site. This includes inserting images into posts, formatting fonts, positioning text around images, etc.
- Do not hardcode URL paths. Everything should be relative.
- Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
- Use sidebars when appropriate. We should be able to add widgets to sidebars.
- Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.
JavaScript Libraries/Plugins
JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.
Browser Requirements
- IE8, IE9+
- FF 7+
- Safari 5+
- Chrome Latest
- Chrome / Safari on tablets / phones
References
Current website:
Tutorial- Building Custom WordPress Theme:
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme
The WordPress Codex (a guide to template tags)
Wordpress Developers Toolbox
http://www.smashingmagazine.com/2008/09/15/wordpress-developers-toolbox/
Documentation Provided
Register to see attachments in contest forum.
Final Submission Guidelines
Submission Deliverables
- A WordPress theme is a folder with new name mentioned above and 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, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, its categories, and more.
- You must include Deployment Guide.
- You must include All Assets and PHP files from provided theme into your theme, and please make sure the existing menus, pages, blog still work properly.
- You must include any necessary plug-in files along with the necessary configuration settings.
- You must include your new exported XML file.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.