Challenge Overview
Welcome to the Land O'Lakes - Purina Mills Merchandising Responsive UI Prototype Challenge! The goal of this challenge is to build an HTML prototype based from the provided storyboard and to built using Zurb Foundation. The output of this HTML prototype challenge will be using as input for WordPress development.
Create the following pages based on the provided storyboards and details outlined below.
- Logo should be image tag (not via CSS background). Ideally, it should be similar to WordPress custom logo code markup. Ideal code is like this:
<a href="./index.html" class="custom-logo-link">
<img src="path/to/logo.png" class="custom-logo" alt="Company Name">
</a>
- Do not put class names on p tags (those will be used for paragraph text copy) , wrap them in div tag and use nth child or nth-of-type to style the p tag respectively.
- Use img tag with descriptive alt attribute for image content. See code requirements below for more information.
- Header
-- Header is comprised of primary and secondary navigation sections. All links will lead to their respective pages.
--- Home link to main page.
--- Feed Ingredients, Energy, Grains, and Oilseeds link to Product Details for now.
--- Service links to Services page
--- Education will be dead link for now.
- Search UI must be implemented, its functionality is out of scope. This will pass a keyword to a search results page in the next phase.
- Footer
-- Ask Merchandiser button leads to Merchandiser page.
-- Product & Experts links will lead to Product Details page for now.
-- Purina links will lead to their respective pages, other will be dead links.
-- Client Login button leads to Login page.
-- logo will be image content.
1. Home page
a. Hero section
- Image should be css background and fill 100% of the screen width.
- “Change Location” is dead link.
- “Get Updates” UI must be implemented whiles its functionality is out of scope. This will pass e-mail info to a newsletter form in next phase.
b. Search section
- Clicking on the "Products from A-Z" or "Product Categories" buttons should smoothly scroll the user's screen down to the "Products from A-Z" or "Product Categories" content section.
- Quick Search is an auto-suggest field. When the user starts to type, suggest keywords will populate. When the user selects a keyword from the Quick Search options, they will be automatically taken to the Product detail page. Need to simulate this functionality.
c. Products (A-Z) section
- Each product item will be linked to Product Details page.
- The “More Product Under…” will be dead link.
d. Product Categories section
- Image will be content
- Each product item will be linked to Product Details page.
- The “More … Product” will be dead link.
e. Feed Ingredients section
- This section will be carousel. Please conform to code requirements under Operability.
- Slide header, description, and quote will be text content, and the image is also content and not CSS background.
- Use dummy content for other slide
On Tablet screen
a. Products (A-Z) section
- There is an alphabetical jump list located at the top of the page. When user clicks on any of the letter, it will scroll down to its corresponding section.
On Mobile screen
a. Products (A-Z) section
- The alphabetical jump list is now located at the right side.
- Show only 2 letter section at a time. This part should be scrollable.
b. Product Categories section
- This section becomes carousel. Please conform to code requirements under Operability.
c. Feed Ingredients section
- This section becomes carousel. Please conform to code requirements under Operability.
2. Product Details page
a. Main content section
- Main header, category header, price data, content description is text content.
b. Merchandiser section
- Photos are image content
- Name, address, email, merchandiser details are text content. Please obfuscate e-mail address via javascript to reduce spam to merchandisers.
- Upon interaction with the contact button, the email listed will be passed as a recipient parameter to the Contact form on the Contact page.
c. Related Products section
- Each product item will be linked to Product Details page.
- The “More Product Under…” will be dead link.
d. Related Education section
- Images and links are content
- Each items should be clickable. Use dead link for now.
e. Oilseed section
- This section will be carousel
- Image is content
- Use dummy content for other slide
On Mobile screen
- The merchandiser, related products, and related education sections becomes carousel. Please conform to code requirements under Operability.
3. Merchandiser page
- This page will list merchandisers grouped by category.
- The tab part will act as a filter, clicking any of the filter will show only their corresponding merchandiser.
- The Location tab
-- This will list all merchandisers by state (sort order: State Name, then Merchandiser Name).
-- Above the Merchandiser list (but below the tabs), a dropdown menu should appear.
--- Label: Location
--- Select Options: All or State Name option
- Simulate the “Load More” button to load additional merchandisers.
On Mobile screen
- There will be an alphabetical jump list located at the right side of the page. When user clicks on any of the letter, it will scroll down to its corresponding section.
4. Services page
- Header and descriptions should be treated as text content and the icons should be treated as image content and not CSS background.
- “Request” button will be dead link for now.
On Mobile screen
- Each section with icons becomes collapsible. Any or all can be expanded or collapsed at the same time. Please conform to code requirements under Operability.
5. Contact Us page
- Prototype the page as it is, contact form sending functionality is out of scope.
6. About page
- The icons should be treated as image content.
- The big image can be background image in CSS.
- Meet Merchandising team photos are also image content. Please conform to code requirements under Operability.
On Mobile screen
- Each section with icons becomes collapsible. Any or all can be expanded or collapsed at the same time.
- Meet Merchandising section becomes carousel.
7. Resources page
- Each item at the top section are clickable. Image should be treated as content.
- Links at the bottom section are dead links.
On Mobile screen
- Top section becomes carousel. Please conform to code requirements under Operability.
8. Login page
- Prototype the UI as it is.
- Form should be able to submit field values. Right now, the form action can be pointed to it self. Actual login functionality is out of scope.
- Provide comments on the page elements to give clear explanation of the 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 or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
- All HTML code naming should not have any conflicts or errors.
- Validate your code - reviewers may accept minor validation errors, but please leave detailed comments if necessary. Validate with a tool like http://validator.w3.org
- Use double quotes for attributes. i.e. <img src=”image.jpg” alt=””>
- Use strong and em tags instead of bold and italic tags.
- Navigation elements (i.e. header navigation list) and itemized content should be presented in an unordered list and each item should be a list item.
CSS
- You are allowed to use SCSS or LESS CSS Pre-Processor.
- You required to use Zurb Foundation, the use of Bootstrap and other CSS framework are not accepted.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- 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.
- Keep CSS (LESS or SCSS in case you use preprocessor) clean and easy to read. i.e.
#selector-1 span,
#selector-2 span {
background: #fff;
color: #000;
}
- Use ems instead of px for font sizing
- Selectors should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent”).
- Define styles for default, active, hover, and focus states for all links, form fields, and focusable content. All navigable elements should have highlighted or outlined states when interacted with.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use jQuery.
- Streamline the use of JS plugins, please see http://foundation.zurb.com/sites/docs/v/5.5.3/javascript.html for more info.
- No inline Javascript - all functionality must be placed in an external javascript file.
- Keep JS clean and easy to read.
- Do not leave console log statements or errors in your code.
- Required to validate your code with http://jshint.com
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- You should identify what is image content vs styling. Use img tag for content and not as CSS background.
- All images must contain an alt attribute i.e. <img src=”image.jpg” alt=””>. If the image is decorative, leave the alt attribute empty (i.e. alt=””) but do not remove the alt attribute. If the image has text within it or supporting information that must be conveyed, enter this text into the alt attribute (i.e. alt=”Items marked with asterisks are currently unavailable”).
Comments
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
Headers
- Use semantically correct tags- use H tags for headers, etc.
-- Headers must also follow logical or nested order (i.e. H1 should be the first header, followed by H2, and H3 for content related to H2). Organize headers the way you would a table of contents.
Forms
- All form fields (input, select, textarea, etc.) must have labels and be associated explicitly. Form elements must have a unique ID and its label must have a unique FOR. The “for” and the “id” in both tags must match. Example: <label for=”name”>Name</label><input id=”name” name=”field-name” type=”text”>
- Required form fields need to be noted with asterisk and upon error, be highlighted and provide messaging regarding the error.
Text
- Do not rely purely on visual cues and use wording such as "Click,” “See,” or “View” in link call to actions. This wording may be irrelevant to users accessing the site on assistive technologies who may not have these capabilities.
- Link text should be unique and descriptive and should not be redundant on a page. This helps users on assistive technologies easily identify the content it will lead to and avoid confusion between similarly titled link names.
-- If link text is too long or does not fit within the design, wrap the descriptive text in a span for screen readers so that they may receive additional context. i.e. <a href=”/products/corn”>More Info<span class=”show-for-sr”> about Corn Products</span></a>
Operability
-- All functionality (links, forms, carousels, accordions, etc.) must be usable and navigable on a mouse and a keyboard.
--- If content is toggle opened or revealed upon interaction like in an accordion or a modal, it should receive keyboard focus and the user should be able to access and close the content as needed and return to the regular flow of the page.
--- If content is advanced to the next slide like in a carousel, mechanisms must be in place for a user to move forward or backwards, stop the slide via a button or on focus/hover, or switch quickly to another slide via pagination.
---- User must also be able to drag the carousel to move next or forward on mobile.
-- Provide a way for users to bypass sections and skip directly to main content. You may add a hidden but keyboard accessible skip link to the top of the page for this functionality. i.e. <a href=”#main-content” class=”skip”>Skip to main content</a> / add ID to main content <div id=”main-content”>…</div>
Desktop
- IE11 & Edge
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Tablet & Mobile
- Latest Safari
- Latest Chrome
Final Submission Guidelines
This prototype requires to be built using Zurb Foundation and responsive. Keep in mind that the output of this challenge will be use for Wordpress development.Create the following pages based on the provided storyboards and details outlined below.
Page Requirements
0. Overall pages- Logo should be image tag (not via CSS background). Ideally, it should be similar to WordPress custom logo code markup. Ideal code is like this:
<a href="./index.html" class="custom-logo-link">
<img src="path/to/logo.png" class="custom-logo" alt="Company Name">
</a>
- Do not put class names on p tags (those will be used for paragraph text copy) , wrap them in div tag and use nth child or nth-of-type to style the p tag respectively.
- Use img tag with descriptive alt attribute for image content. See code requirements below for more information.
- Header
-- Header is comprised of primary and secondary navigation sections. All links will lead to their respective pages.
--- Home link to main page.
--- Feed Ingredients, Energy, Grains, and Oilseeds link to Product Details for now.
--- Service links to Services page
--- Education will be dead link for now.
- Search UI must be implemented, its functionality is out of scope. This will pass a keyword to a search results page in the next phase.
- Footer
-- Ask Merchandiser button leads to Merchandiser page.
-- Product & Experts links will lead to Product Details page for now.
-- Purina links will lead to their respective pages, other will be dead links.
-- Client Login button leads to Login page.
-- logo will be image content.
1. Home page
a. Hero section
- Image should be css background and fill 100% of the screen width.
- “Change Location” is dead link.
- “Get Updates” UI must be implemented whiles its functionality is out of scope. This will pass e-mail info to a newsletter form in next phase.
b. Search section
- Clicking on the "Products from A-Z" or "Product Categories" buttons should smoothly scroll the user's screen down to the "Products from A-Z" or "Product Categories" content section.
- Quick Search is an auto-suggest field. When the user starts to type, suggest keywords will populate. When the user selects a keyword from the Quick Search options, they will be automatically taken to the Product detail page. Need to simulate this functionality.
c. Products (A-Z) section
- Each product item will be linked to Product Details page.
- The “More Product Under…” will be dead link.
d. Product Categories section
- Image will be content
- Each product item will be linked to Product Details page.
- The “More … Product” will be dead link.
e. Feed Ingredients section
- This section will be carousel. Please conform to code requirements under Operability.
- Slide header, description, and quote will be text content, and the image is also content and not CSS background.
- Use dummy content for other slide
On Tablet screen
a. Products (A-Z) section
- There is an alphabetical jump list located at the top of the page. When user clicks on any of the letter, it will scroll down to its corresponding section.
On Mobile screen
a. Products (A-Z) section
- The alphabetical jump list is now located at the right side.
- Show only 2 letter section at a time. This part should be scrollable.
b. Product Categories section
- This section becomes carousel. Please conform to code requirements under Operability.
c. Feed Ingredients section
- This section becomes carousel. Please conform to code requirements under Operability.
2. Product Details page
a. Main content section
- Main header, category header, price data, content description is text content.
b. Merchandiser section
- Photos are image content
- Name, address, email, merchandiser details are text content. Please obfuscate e-mail address via javascript to reduce spam to merchandisers.
- Upon interaction with the contact button, the email listed will be passed as a recipient parameter to the Contact form on the Contact page.
c. Related Products section
- Each product item will be linked to Product Details page.
- The “More Product Under…” will be dead link.
d. Related Education section
- Images and links are content
- Each items should be clickable. Use dead link for now.
e. Oilseed section
- This section will be carousel
- Image is content
- Use dummy content for other slide
On Mobile screen
- The merchandiser, related products, and related education sections becomes carousel. Please conform to code requirements under Operability.
3. Merchandiser page
- This page will list merchandisers grouped by category.
- The tab part will act as a filter, clicking any of the filter will show only their corresponding merchandiser.
- The Location tab
-- This will list all merchandisers by state (sort order: State Name, then Merchandiser Name).
-- Above the Merchandiser list (but below the tabs), a dropdown menu should appear.
--- Label: Location
--- Select Options: All or State Name option
- Simulate the “Load More” button to load additional merchandisers.
On Mobile screen
- There will be an alphabetical jump list located at the right side of the page. When user clicks on any of the letter, it will scroll down to its corresponding section.
4. Services page
- Header and descriptions should be treated as text content and the icons should be treated as image content and not CSS background.
- “Request” button will be dead link for now.
On Mobile screen
- Each section with icons becomes collapsible. Any or all can be expanded or collapsed at the same time. Please conform to code requirements under Operability.
5. Contact Us page
- Prototype the page as it is, contact form sending functionality is out of scope.
6. About page
- The icons should be treated as image content.
- The big image can be background image in CSS.
- Meet Merchandising team photos are also image content. Please conform to code requirements under Operability.
On Mobile screen
- Each section with icons becomes collapsible. Any or all can be expanded or collapsed at the same time.
- Meet Merchandising section becomes carousel.
7. Resources page
- Each item at the top section are clickable. Image should be treated as content.
- Links at the bottom section are dead links.
On Mobile screen
- Top section becomes carousel. Please conform to code requirements under Operability.
8. Login page
- Prototype the UI as it is.
- Form should be able to submit field values. Right now, the form action can be pointed to it self. Actual login functionality is out of scope.
Code Requirements
HTML / HTML5- Provide comments on the page elements to give clear explanation of the 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 or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
- All HTML code naming should not have any conflicts or errors.
- Validate your code - reviewers may accept minor validation errors, but please leave detailed comments if necessary. Validate with a tool like http://validator.w3.org
- Use double quotes for attributes. i.e. <img src=”image.jpg” alt=””>
- Use strong and em tags instead of bold and italic tags.
- Navigation elements (i.e. header navigation list) and itemized content should be presented in an unordered list and each item should be a list item.
CSS
- You are allowed to use SCSS or LESS CSS Pre-Processor.
- You required to use Zurb Foundation, the use of Bootstrap and other CSS framework are not accepted.
- Use Media Queries to load different styles for each page and do NOT build a different page for different device/layout.
- Provide comments on the CSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All CSS naming should not have any conflicts.
- As possible use CSS styles when creating all styling whenever possible, avoid image usage.
- 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.
- Keep CSS (LESS or SCSS in case you use preprocessor) clean and easy to read. i.e.
#selector-1 span,
#selector-2 span {
background: #fff;
color: #000;
}
- Use ems instead of px for font sizing
- Selectors should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent”).
- Define styles for default, active, hover, and focus states for all links, form fields, and focusable content. All navigable elements should have highlighted or outlined states when interacted with.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use jQuery.
- Streamline the use of JS plugins, please see http://foundation.zurb.com/sites/docs/v/5.5.3/javascript.html for more info.
- No inline Javascript - all functionality must be placed in an external javascript file.
- Keep JS clean and easy to read.
- Do not leave console log statements or errors in your code.
- Required to validate your code with http://jshint.com
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- You should identify what is image content vs styling. Use img tag for content and not as CSS background.
- All images must contain an alt attribute i.e. <img src=”image.jpg” alt=””>. If the image is decorative, leave the alt attribute empty (i.e. alt=””) but do not remove the alt attribute. If the image has text within it or supporting information that must be conveyed, enter this text into the alt attribute (i.e. alt=”Items marked with asterisks are currently unavailable”).
Comments
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
Headers
- Use semantically correct tags- use H tags for headers, etc.
-- Headers must also follow logical or nested order (i.e. H1 should be the first header, followed by H2, and H3 for content related to H2). Organize headers the way you would a table of contents.
Forms
- All form fields (input, select, textarea, etc.) must have labels and be associated explicitly. Form elements must have a unique ID and its label must have a unique FOR. The “for” and the “id” in both tags must match. Example: <label for=”name”>Name</label><input id=”name” name=”field-name” type=”text”>
- Required form fields need to be noted with asterisk and upon error, be highlighted and provide messaging regarding the error.
Text
- Do not rely purely on visual cues and use wording such as "Click,” “See,” or “View” in link call to actions. This wording may be irrelevant to users accessing the site on assistive technologies who may not have these capabilities.
- Link text should be unique and descriptive and should not be redundant on a page. This helps users on assistive technologies easily identify the content it will lead to and avoid confusion between similarly titled link names.
-- If link text is too long or does not fit within the design, wrap the descriptive text in a span for screen readers so that they may receive additional context. i.e. <a href=”/products/corn”>More Info<span class=”show-for-sr”> about Corn Products</span></a>
Operability
-- All functionality (links, forms, carousels, accordions, etc.) must be usable and navigable on a mouse and a keyboard.
--- If content is toggle opened or revealed upon interaction like in an accordion or a modal, it should receive keyboard focus and the user should be able to access and close the content as needed and return to the regular flow of the page.
--- If content is advanced to the next slide like in a carousel, mechanisms must be in place for a user to move forward or backwards, stop the slide via a button or on focus/hover, or switch quickly to another slide via pagination.
---- User must also be able to drag the carousel to move next or forward on mobile.
-- Provide a way for users to bypass sections and skip directly to main content. You may add a hidden but keyboard accessible skip link to the top of the page for this functionality. i.e. <a href=”#main-content” class=”skip”>Skip to main content</a> / add ID to main content <div id=”main-content”>…</div>
Browsers Requirements
Please ensure that the site displays and functions appropriately on browsers in desktop computers, tablet and mobile devices.Desktop
- IE11 & Edge
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Tablet & Mobile
- Latest Safari
- Latest Chrome