Challenge Overview
Welcome to "PMI Pet Foods Responsive Wordpress Theme Development Challenge". In this challenge, we need your help to create wordpress theme based on our HTML5 prototype provided in challenge attachment for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations. Read more details below and Join with us NOW!!
As part of this challenge you will need to document all WordPress, PHP, HTML5, CSS3, and JavaScript codes. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery for this challenge.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive wordpress themes for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations
Primary Goal
- We are looking for your help to help us create wordpress themes for our PMI Pet Food website.
- We'll focus on Desktop and Mobile version in this challenge (Tablet will share same layout like desktop).
Competition Task Overview
The main task of this competition is to develop Responsive wordpress themes based on the provided HTML5 prototype. Your themes creation must work properly in all the required browsers and able to simplify our user to update the website content.
Screen Requirements
00 General Requirements
- All pages content should be editable in WP Admin. No hardcoded content in template files.
- Replicate the design of the approved prototype for all pages.DO NOT break any functionalities or layout from the current prototype!!
- Your themes must match the colors and structure of the provided prototype.
- 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.
- Test in all the required browsers.
- Navigation should utilize the built-in menu of wordpress
- Page layout should be responsive. Our focus for this challenge will be on desktop and mobile browsers
- You are allowed to use Bootstrap, use Bootstrap's ".container" class for the page content width.
- Images should be considered as content, make sure they are not css backgrounds nor hard coded in template files.
- Use correct template file name based on WordPress Template Hierarchy. That is front-page.php for the homepage, page-$slug.php or custom template for page type, single-$posttype.php for custom post types single pages, etc
- All images, that are not hero-type images, need to be sized appropriately for high-dpi (aka retina) screens. This would include all logos specifically. And if any icons are used and they not in a vector format (like a font or svg) these will also need to be high-dpi (aka retina) screen ready.
01. Home Screen
Prototype References "home-screen.html" and "home-option-screen.html"
- We have two version of homepage, please make sure to create both of them
- In this page we are looking to provide informations on our brand for our visitor.
- This screen will be split into 5 differents section, where user will be able to view it everytime they scroll down the homepage. Also, notice the right side of navigation in this page.
- From this page the user will be able to view all sub brands related to our brand, - Each sub brand will display the corresponding page title, featured image as tile background, and a short description that should come from a custom field on that particular page:
-- Red Flannel (content must comes from their respective page)
-- Exclusive (content must comes from their respective page)
-- Infinia (content must comes from their respective page)
- Clicking on a sub brand will take the user to sub brand details page.
02. Sub Brand Screen
Prototype References "sub-brand.html"
- In this page we are looking to provide information on sub brand.
- From this page the user will be able to view all products related to this sub brand.
- Please provide variety of screen to view the products (Slide, Grid, List)
- The products content needs to be dynamic and needs to be easily added by user (increase the product display or reduce it), user should be able to perform CRUD action to any products
- Clicking on a product will take the user to product details page.
03. Product Details Screen
Prototype References "product-details.html"
- In this page we are looking to provide information on product.
- Please make sure capture and provide tab view for "Guaranteed Analysis, Ingredients, Feeding Guideline"
- All tab view contents needs to be dynamic and can be easily updated (every details content should have their own tabs view).
- From this page we will have an input field with a label saying "Find a Retailer near you":
-- There are two input field, use placeholder text "Zip Code" (textbox) and "Radius" (selectbox).
-- "Search" button that will take user to Retailer Locator page.
04. Retailer Locator Screen
Prototype References "retailer-locator.html"
- In this page, show all possible/near retailors on Google map.
- Upon hovering on each pin provide store information:
-- Name.
-- Address.
-- Telephone Number.
-- Website.
-- What else we can show here? A placeholder for photo?
- Also show the results as a table under the map.
- Above the table we need the same input field used in product details page for the ability to search for a different address.
05. Contact Us Screen
Prototype References "contact-us.html"
- Show a Google map with our location on it; any place for now (needs some input form to enter location coordinate via admin section).
- We need a form:
-- Full Name.
-- Email Address.
-- Subject.
-- Your Message.
-- "Send Message" button.
- Contact Us form needs to be working
Browsers Requirements:
- Desktop: IE11+ above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet should share same layout like desktop storyboard
Documentation Provided:
- Storyboards
- Prototype
Wordpress:
- version 4.6
- Advance Custom Field is the recommended plugin for Custom Fields.
- You are allowed to use plugins and/or frameworks that you think is best to use for the themes, just make sure to discuss it with us first in the forum!!
HTML5:
- HTML should be valid HTML5 compliant.
- 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.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap or Zurb Foundation for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
- Wordpress Theme source code that includes PHP template, CSS, JS, and Images files including all the required plugins.
- Sample data and Deployment guide.
As part of this challenge you will need to document all WordPress, PHP, HTML5, CSS3, and JavaScript codes. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and jQuery for this challenge.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive wordpress themes for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations
Primary Goal
- We are looking for your help to help us create wordpress themes for our PMI Pet Food website.
- We'll focus on Desktop and Mobile version in this challenge (Tablet will share same layout like desktop).
Competition Task Overview
The main task of this competition is to develop Responsive wordpress themes based on the provided HTML5 prototype. Your themes creation must work properly in all the required browsers and able to simplify our user to update the website content.
Screen Requirements
00 General Requirements
- All pages content should be editable in WP Admin. No hardcoded content in template files.
- Replicate the design of the approved prototype for all pages.DO NOT break any functionalities or layout from the current prototype!!
- Your themes must match the colors and structure of the provided prototype.
- 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.
- Test in all the required browsers.
- Navigation should utilize the built-in menu of wordpress
- Page layout should be responsive. Our focus for this challenge will be on desktop and mobile browsers
- You are allowed to use Bootstrap, use Bootstrap's ".container" class for the page content width.
- Images should be considered as content, make sure they are not css backgrounds nor hard coded in template files.
- Use correct template file name based on WordPress Template Hierarchy. That is front-page.php for the homepage, page-$slug.php or custom template for page type, single-$posttype.php for custom post types single pages, etc
- All images, that are not hero-type images, need to be sized appropriately for high-dpi (aka retina) screens. This would include all logos specifically. And if any icons are used and they not in a vector format (like a font or svg) these will also need to be high-dpi (aka retina) screen ready.
01. Home Screen
Prototype References "home-screen.html" and "home-option-screen.html"
- We have two version of homepage, please make sure to create both of them
- In this page we are looking to provide informations on our brand for our visitor.
- This screen will be split into 5 differents section, where user will be able to view it everytime they scroll down the homepage. Also, notice the right side of navigation in this page.
- From this page the user will be able to view all sub brands related to our brand, - Each sub brand will display the corresponding page title, featured image as tile background, and a short description that should come from a custom field on that particular page:
-- Red Flannel (content must comes from their respective page)
-- Exclusive (content must comes from their respective page)
-- Infinia (content must comes from their respective page)
- Clicking on a sub brand will take the user to sub brand details page.
02. Sub Brand Screen
Prototype References "sub-brand.html"
- In this page we are looking to provide information on sub brand.
- From this page the user will be able to view all products related to this sub brand.
- Please provide variety of screen to view the products (Slide, Grid, List)
- The products content needs to be dynamic and needs to be easily added by user (increase the product display or reduce it), user should be able to perform CRUD action to any products
- Clicking on a product will take the user to product details page.
03. Product Details Screen
Prototype References "product-details.html"
- In this page we are looking to provide information on product.
- Please make sure capture and provide tab view for "Guaranteed Analysis, Ingredients, Feeding Guideline"
- All tab view contents needs to be dynamic and can be easily updated (every details content should have their own tabs view).
- From this page we will have an input field with a label saying "Find a Retailer near you":
-- There are two input field, use placeholder text "Zip Code" (textbox) and "Radius" (selectbox).
-- "Search" button that will take user to Retailer Locator page.
04. Retailer Locator Screen
Prototype References "retailer-locator.html"
- In this page, show all possible/near retailors on Google map.
- Upon hovering on each pin provide store information:
-- Name.
-- Address.
-- Telephone Number.
-- Website.
-- What else we can show here? A placeholder for photo?
- Also show the results as a table under the map.
- Above the table we need the same input field used in product details page for the ability to search for a different address.
05. Contact Us Screen
Prototype References "contact-us.html"
- Show a Google map with our location on it; any place for now (needs some input form to enter location coordinate via admin section).
- We need a form:
-- Full Name.
-- Email Address.
-- Subject.
-- Your Message.
-- "Send Message" button.
- Contact Us form needs to be working
Browsers Requirements:
- Desktop: IE11+ above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet should share same layout like desktop storyboard
Documentation Provided:
- Storyboards
- Prototype
Wordpress:
- version 4.6
- Advance Custom Field is the recommended plugin for Custom Fields.
- You are allowed to use plugins and/or frameworks that you think is best to use for the themes, just make sure to discuss it with us first in the forum!!
HTML5:
- HTML should be valid HTML5 compliant.
- 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.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap or Zurb Foundation for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
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.
Final Submission Guidelines
SUBMISSION GUIDELINES:- Wordpress Theme source code that includes PHP template, CSS, JS, and Images files including all the required plugins.
- Sample data and Deployment guide.