Challenge Overview
Welcome to the “AutoGuys Website Code Updates UI Prototype Challenge”. We have been running a series of challenges to create the front-end Responsive code for the AutoGuys website. In this challenge, we need to pivot and update the provided code base with new designs.
This is going to be a single challenge where we need you to create the Desktop, Tablet and Phone views. We are providing updated storyboard designs for the 3 devices and need you to update the code base accordingly. This challenge is focused on creating the code for 3 single pages: Do it Yourself (DIY), Product Detail Page (PDP) and Cart Summary in the NEW design.
Let us know if you have any questions
This challenge is focused on updating (efficiently) the AutoGuys HTML/CSS to the updated design. We are just asking for a simple front end coding without the need of adding any extra javascript coding. This will be handed off to a development team to integrate into Hybris.
Competition Task Overview
The main task of this competition is to create the Responsive HTML5 code based on the provided user interface designs.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required 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.
- Test in all the required browsers.
Required Screens
This challenge will be focused on coding 3 single pages:
- Do it Yourself (DIY)
- Product Detail Page (PDP) and
- Cart Summary.
We are looking to create these screens as Responsive (Desktop/Tablet/Phone)
1) Desktop Screens
1.1) DIY Page: Refer to “DIY_PRP.zip” for current code.
Desktop storyboards reference: “09-DIY-Results.jpg” and “10-DIY-Results-List.jpg”
Mobile storyboard reference: from “02-Mobile-DIY-Filters.jpg” to “03-Mobile-DIY-Results.jpg”
Tablet storyboard reference: “01-Tablet-DIY-Results-Grid@2x.jpg” and “02-Tablet-DIY-Results-List@2x.jpg”
- We need to replicate this page for the 3 devices.
- There’s no need to show the real iteration or real filtering features as this will be handled on the backend. You just really need to focus on creating a good HTML/CSS layout.
- We need to show both grid and list views, as are represented on provided storyboards.
1.2) PDP Page: Refer to “Products PDP.zip” for current code.
Desktop storyboards reference: “14-Product-Detail.jpg”
Mobile storyboard reference: “04-Mobile-PDP.jpg”
Tablet storyboard reference: “03-Tablet-PDP@2x.jpg”
- We need to replicate this page for the 3 devices.
- Quantity field must be a number only field.
- Specifications and Customer Reviews tabs must change. No need to show real information.
1.3) Cart Summary: Refer to “Cart_Summary.zip” for current code.
Desktop storyboards reference: “16-Cart-Summary.jpg”
Mobile storyboard reference: “05-Mobile-Cart-Summary.jpg”
Tablet storyboard reference: “04-Tablet-Cart-Summary@2x.jpg”
- We need to replicate this page for the 3 devices.
- Quantity field must be a number only field.
Considerations
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages on the site. You will need to create them by grabbing it out from the current code or creating a new one based on the provided storyboards.
- A page can be linked like this: A result from DIY page should go to a Product Detail Page, and “Add to Cart” button should go to “Cart Summary”. This is just for demo iteration.
2) Tablet and Phone Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens under the Mobile/Tablet folders for the look and feel reference.
Media Queries Breakpoints
Desktop: Update the breakpoints based on their current site standards:
max-width: 1280px;
min-width: 1024px;
Tablet: You must show tablet views on resolutions below 1024px.
Mobile: 375px
Provided Resources
On this challenge you will be working with the following resources:
- Screen captures of the current site.
- Tablet and Phone views with PSD.
- Provided code base
- PDF with branding details.
Image Requirements
- 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.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You must use LESS for CSS pre-processing (Required)
- To achieve Responsiveness, please do not use width/height sizes in pixels, instead use percentages of the screen: max always percentage or rem based style coding
- 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.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can only use the following frameworks/libraries in this challenge.
Bootstrap 3
Grunt (mandatory)
Less (mandatory)
JQuery 2.1.1 (mandatory)
Enquire.js
OWL Carousel
BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safar
This is going to be a single challenge where we need you to create the Desktop, Tablet and Phone views. We are providing updated storyboard designs for the 3 devices and need you to update the code base accordingly. This challenge is focused on creating the code for 3 single pages: Do it Yourself (DIY), Product Detail Page (PDP) and Cart Summary in the NEW design.
Let us know if you have any questions
Final Submission Guidelines
Background informationThis challenge is focused on updating (efficiently) the AutoGuys HTML/CSS to the updated design. We are just asking for a simple front end coding without the need of adding any extra javascript coding. This will be handed off to a development team to integrate into Hybris.
Competition Task Overview
The main task of this competition is to create the Responsive HTML5 code based on the provided user interface designs.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required 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.
- Test in all the required browsers.
Required Screens
This challenge will be focused on coding 3 single pages:
- Do it Yourself (DIY)
- Product Detail Page (PDP) and
- Cart Summary.
We are looking to create these screens as Responsive (Desktop/Tablet/Phone)
1) Desktop Screens
1.1) DIY Page: Refer to “DIY_PRP.zip” for current code.
Desktop storyboards reference: “09-DIY-Results.jpg” and “10-DIY-Results-List.jpg”
Mobile storyboard reference: from “02-Mobile-DIY-Filters.jpg” to “03-Mobile-DIY-Results.jpg”
Tablet storyboard reference: “01-Tablet-DIY-Results-Grid@2x.jpg” and “02-Tablet-DIY-Results-List@2x.jpg”
- We need to replicate this page for the 3 devices.
- There’s no need to show the real iteration or real filtering features as this will be handled on the backend. You just really need to focus on creating a good HTML/CSS layout.
- We need to show both grid and list views, as are represented on provided storyboards.
1.2) PDP Page: Refer to “Products PDP.zip” for current code.
Desktop storyboards reference: “14-Product-Detail.jpg”
Mobile storyboard reference: “04-Mobile-PDP.jpg”
Tablet storyboard reference: “03-Tablet-PDP@2x.jpg”
- We need to replicate this page for the 3 devices.
- Quantity field must be a number only field.
- Specifications and Customer Reviews tabs must change. No need to show real information.
1.3) Cart Summary: Refer to “Cart_Summary.zip” for current code.
Desktop storyboards reference: “16-Cart-Summary.jpg”
Mobile storyboard reference: “05-Mobile-Cart-Summary.jpg”
Tablet storyboard reference: “04-Tablet-Cart-Summary@2x.jpg”
- We need to replicate this page for the 3 devices.
- Quantity field must be a number only field.
Considerations
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages on the site. You will need to create them by grabbing it out from the current code or creating a new one based on the provided storyboards.
- A page can be linked like this: A result from DIY page should go to a Product Detail Page, and “Add to Cart” button should go to “Cart Summary”. This is just for demo iteration.
2) Tablet and Phone Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens under the Mobile/Tablet folders for the look and feel reference.
Media Queries Breakpoints
Desktop: Update the breakpoints based on their current site standards:
max-width: 1280px;
min-width: 1024px;
Tablet: You must show tablet views on resolutions below 1024px.
Mobile: 375px
Provided Resources
On this challenge you will be working with the following resources:
- Screen captures of the current site.
- Tablet and Phone views with PSD.
- Provided code base
- PDF with branding details.
Image Requirements
- 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.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You must use LESS for CSS pre-processing (Required)
- To achieve Responsiveness, please do not use width/height sizes in pixels, instead use percentages of the screen: max always percentage or rem based style coding
- 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.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can only use the following frameworks/libraries in this challenge.
Bootstrap 3
Grunt (mandatory)
Less (mandatory)
JQuery 2.1.1 (mandatory)
Enquire.js
OWL Carousel
BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safar