Challenge Overview
Welcome to the Halo Landing Page Responsive Wordpress Theme Build Challenge!
For this Challenge, the goal is to build the WP theme for 1(one) Landing Page based on the provided storyboard and with the features outlined below.
Your Prototype must match the "look and feel" of the provided storyboard. All HTML5 and CSS3 should be standardized, validated and follow best practices. Images should be optimized for the web JPGs, GIFs and PNGs) and used appropriately.
Create your theme according to the WordPress template heirarchy http://codex.wordpress.org/Template_Hierarchy.
Final Submission Guidelines
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, it's categories, and more.
A proper understanding of the way WordPress selects template files to display the various pages on your site is essential. If you seek to customize an existing WordPress theme, this article aims to help you decide which template file needs editing.
Theme Build References:
Tutorial- Building Custom WordPress Theme:
http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
The WordPress Codex (a guide to template tags)
http://codex.wordpress.com/
Wordpress Developers Toolbox
http://www.smashingmagazine.com/2008/09/15/wordpress-developers-toolbox/
TECHNOLOGY GUIDELINES:
1. Wordpress
- Provide ALL installation step by step, create details notes needed for your WordPress Theme
- 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.
- 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
- Only use custom fields when appropriate. Do not over use them. It is advisable to use Custom Field Template plugin if in case you use custom fields. We want it to be easy for a non-technical editor to update content on the pages, so as much as possible the pages that are relatively simple content should be editable by updating the page content.
- A user should be able to edit the site without the need of an Super Admin privileges
2. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.
3. CSS3
- The design should work with fluid/flexible nature, so the prototype supports both Portrait and Landscape orientation
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
4. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
5. IMAGES
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference
FOR REVIEWERS:
When reviewing this prototype, Reviewer should look at:
- There is customization involved within this Challenge - please document your Theme and how to install it for the Client and the Reviewers.
- Does the Theme match the Storyboard design?
- Does the Theme work well in all the required browsers?
- If a Client was to implement this Theme - did it work at first without major Final Fixes?
- Did the submitter provide adequate installation notes?
- Overall - would the client be able to use this Theme with some minor fixes?
Halo Landing Page Requirements
Documentation Provided:
Storyboard.zip: Storyboard Screens and PSD file
https://www.dropbox.com/s/2pvldizjbptuo8u/Storyboard.zip
Before you start!
- Please check Responsive Parallax Site before you start creating Wordpress Theme, play around how best practice site works
- Your submission need show fluid solution on every screen width, fyi: minimum width must set at 320px (mobile view)
- Keep in mind when resize the width of this landing page, all background image, layout, etc must support responsive layout.
1. Preloader
- Refer site reference, we need use preloader on page load.
- All images, css, js files need preloaded
- You can use existing styles for preloader, and number percentages.
- After preloader done, then landing page show up
2. Up and Down (Keyboard Press)
- Page load by show top slideshow by default
- When user press up and down, page need scrolling up and down based on sections
- After click up and down, you also need set active state current active section on navigation
3. Landing Page
screenshot: 01-1_Landing Page.png
- This is how Halo landing page look and feel
- Use White Theme for your submission (screenshot: 01-2_Landing Page_Alternate.png). Detail specification information below area based on Black theme screenshots.
- Halo Landing Page divided by:
4. Header
- Header background will floating when user scrolling down and up
- All header area will be fluid as browser width
- Logo should be uploadable from the WP Admin, and it should be linked to homepage.
- Logo placed in the left side and main navigation in the right side
5. Navigation
- Navigations should used the wp menu feature
- Notice there’s active state after click some menu
- Mimic how scrolling effect on site references works, make sure transition running smooth
- Scrolling up and down need dynamically works when user reach bottom or top section
- There’s a vertical dotted in the right side as indicator current active section. Also, user can navigate to section based on top to bottom order
- This vertical dotted will move as user scrolling down and up
- We need ability to add new menu navigation and must can modify to linked to some expected section, also new vertical dotted
- When user scrolling from top to bottom, active state on navigation will active as current section on page
Navigation (Mobile Version)
- When resize into ipad mobile browser width (768px), desktop navigation will transform into mobile version
- We not provide mobile storyboard we need your help show us how mobile navigation works.
- For mobile version, you need transform the main navigation similar like this site technique.
- Place logo in the left side and white stacked icon in the right side
- Use white background with menu navigation stacked vertically and divided thin line
6. Main Slideshow
screenshot: 02-1_Parallax Slide.png
- This main slideshow area placed below the header area
- For the slideshow, it should be continuous loop.
- Slideshow image and captions should be editable in WP Admin, and it should also support unlimited items
- Remember, background image need resizable on every screen width, refer Responsive Parallax Site
- All text and button need editable in WP Admin
- Show us easy way to set Button href target in WP Admin
- Dotted navigation will automatically created based on selected active slides.
- Click dotted navigation will slide based on slide order
- Follow how transition works for images and text dynamic show up when navigate each slide. refer Responsive Parallax Site
- Show us random image and text placement so we’re aware the differences when navigate from slide to slides
- Show us creative hover state on slideshow button, refer Responsive Parallax Site. we’re open to any cool ideas represent the hover state.
- User scrolling to Register section (screenshot: 02-2_Parallax Slide.png)
- When user on this Main Slideshow area, user can navigate slideshow by press left and right on keyboard
Main Slideshow (Mobile Version)
- Refer Responsive Parallax Site how slideshow image and text resized in proper ratio for mobile version
- Also you need make sure buton not look too big when resized
- Dotted pagination remain in the right side
7. Register
screenshot: 02-3_Parallax Slide.png
- This Register section, user can scrolling down to this section by top navigation or vertical floating dotted in the top right
- Register area scroll starting point should placed below header part. This apply for other sections.
- Background image and title should be editable in WP Admin
- Remember, background image need resizable on every screen width, refer Responsive Parallax Site
- At first time user scrolled to this area, you need show simple animation effect to displays all text.
- Hover effect on Register button, show smooth fade effect to reverse the background and text color
- All text and button need editable in WP Admin
- Show us easy way to set Register button href target in WP Admin
- Background image should editable from WP Admin
Register (Mobile version)
- On mobile version, all text and button need remain centered
- Background image and text resized in proper ratio for mobile version
8. Our Members
screenshot: 02-4_Parallax Slide.png
- At first time user scrolled to this area, all thumbnails show up one by one in fast mode
- Remember, background image need resizable on every screen width, refer Responsive Parallax Site
- You also need show simple animation effect to displays text, Join Our Community button and the socials icons
- Join in Our Community button, social icons and links need editable via WP Admin
- Make sure when we add new icon, placement remain centered
- Scrolling to next section(screenshot: 02-5_Parallax Slide.png)
Our Member (Mobile version)
- You just need make all text, icons and button centered
- Background image will resizable and adapt mobile screen width
9. Events
screenshot: 02-6_Parallax Slide.png
- This is scrolling end for Event section
- Add/Edit/Delete Event should edited via WP Admin
- Show us easy way to set calendar date, event title, and place in WP Admin
- Dotted navigation will automatically created based on selected active slides.
- Similar like slideshow you need follow how transition works for images and text dynamic show up when navigate each slide. refer Responsive Parallax Site
- Show us random calendar date title and text so we’re aware the differences when navigate from slide to slides
- Show us creative hover state on Email and Sign up button, refer Responsive Parallax Site. we’re open to any cool ideas represent the hover state.
- When user on this Main Slideshow area, user can navigate slideshow by press left and right on keyboard
Events (Mobile version)
- Background will resizeable as screen width
- Date, Event title and Input remain in the right side, make sure all content fits within minimum width (320px)
10. Next Generation
screenshot: 02-7_Parallax Slide.png
- This Next Generation section
- How title and image first load effect look?
- All text and button need editable in WP Admin
- Show us easy way to edit text and main image of this section
- Join in Our Community button, social icons and links need editable via WP Admin
- Scrolling to next section (screenshot: 02-8_Parallax Slide.png)
Event Generation (Mobile version)
- text and image will resizable as screen width
- If Join Community not fit within minimum width, please make them stacked
11. Products
screenshot: 02-9_Parallax Slide.png
- Think about how effect for this section look when displaying the devices. Should they show up one by one?
- Also how the title look?
- All text and device graphics should editable via Admin WP
- How Hungry for More Info buttons show up?
- Need hover effect for View FAQ and Download buttons, you can use smooth fade effect with reversed background color and text
- Scrolling effect to next section(screenshot: 02-10_Parallax Slide.png)
Products (Mobile version)
- Device graphics and text will resizeable as browsers width
- Hungry for more info need remain in 1 line on mobile version look
12. What They Say
screenshot: 02-11_Parallax Slide.png
- Thumbnails show up one by one
- Center thumbnail show information by default
- When clicked another thumbnails, clicked thumbnails show actual color, and the other thumbnails turn to blue overlay. text will changed. fyi: text remain in centered
- All thumbnails and details information need editable via WP Admin
- If add more thumbnails, make sure section remain in 1 line
What They Say (Mobile version)
- Thumbnails need placed centered on browser width
- You can make all thumbnails stacked vertically
- Click each thumbnails displayed details information right below clicked thumbnails
13. Partners
screenshot: 02-12_Parallax Slide.png
- Logo need show up one by one.
- All logos and links need editable via WP Admin
- If add more thumbnails, make sure section remain in 1 line
Partners (Mobile version)
- You can make all logo stacked vertically-
14. Footer
- Footer title should editable from the WP Admin
Footer (Mobile version)
- Not much difference, footer remain centered with
15. Create Additional Menu and Section via WP Admin
- We need way to add new menu and sections on Landing page
- After menu added how to display on landing page
- How to set the link target to scroll to the sections
- On WP Admin, we want to ability to:
-- config the image background,
-- Header style,
-- Body style,
-- call to action button,
-- Text color.
-- Text and Button Alignment
- Any other possibilities?
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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.
Browsers Requirements:
- IE9
- IE10
- Safari latest version
- Firefox latest version
- Chrome latest version
- Safari Browsers on iPad
- Safari Browsers on iPhone