Challenge Overview
Project Overview
CPR is a web app that will provide great benefit to customers:
- Better product data avaialable online leads to more requests for quotes, more specific inquiries, and a higher likelihood they will complete the transaction
- More catalogs to search from provides more opportunities to buy
- Existing customers calling their salesperson, store or call center with a question will appreciate getting answers on the first call and not be bounced around from person to person
- e-Procurement solution setup and maintenance times will be decreased
Competition Task Overview
For this challenge, we need to convert the provided wireframes / storyboard to a clickable prototype. All pages are in scope.
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.
Key Requirements
- We want to use CPR_Wireframes.zip as the master wireframes but use the Advanced Search Section from CPR_Wireframes_202048_AdvancedSearch.zip, make sure your prototype properly address this.
- We're making some minor updates to the storyboard, the winner will need to integrate these in final fixes.
- Test in all the required browsers.
- 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.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- The result of this UI Prototype contest will run under Website platform.
- Background must have covered all browser screen area.
- Provide hover style for any buttons/link etc.
- Make sure breadcrumbs and all navigation area works in any page.
- All transition, animation for modal window, notification must emphasized great user experience.
- We need clear documentation of the code.
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.
JavaScript Libraries/Plugins
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 the JQuery JavaScript library for this contest.
- If you want to use other libraries you need to get approval first.
Browser Requirements
- IE 8+ (Primary)
- Firefox latest on Mac / Windows
- Safari latest on Mac / Windows
- Chrome latest on Mac / Windows
- Minimum resolution: 1024 x 768 with fluid layout.
Documentation Provided
- Wireframes
- Storyboard
Final Submission Guidelines
Submission Deliverables
- Your submission must be a single zip file containing all the files necessary to view and run your submission properly (i.e.images, css, html, and javascript files.)
Submission Guidelines
- Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.