Challenge Overview
Project Overview
For this UI Prototype challenge, we need your help to update an existing prototype by following all requirements described in the provided documents.
Please note the existing prototype uses fluid layout for Desktop and Tablet browsers. In this challenge you must makre sure all pages work properly in all these required platforms and browsers.
Competition Task Overview
This challenge is mainly about upating the existing prototype to add new pages for threshold / smtp configuration and updating user profile.
Please register to get full details from the following documents provided in the challenge forum:
- WATCH_1.1_Challenge_4_User_Interface.docx
- You can ignore any details regarding code integration in this document and only focus on creating the prototype pages matching the design
- ui-prototypes-for-watch-1.1-0.22.zip
- Make sure you check ui-prototypes-for-watch-1.1-0.22.pptx first to see how the pages flow
- Base prototype upon which you should add / implement the new pages. Please use a "N01" prefix for all new htmls added or modified in this challenge.
Client Priorities
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
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.
Timeline
This challenge has a shortened timeline for review / appeals / appeals response, please make sure you don't miss the deadlines.
Browsers
- Safari latest version on Mac
- Firefox latest version on Mac / Windows
- Chrome latest version on Mac / Windows
- IE 11+ on Windows
- Safari / Chrome on iPad (landscape and portrait views)
Final Submission Guidelines
Submission Deliverables
- Updated prototype that covers all requirements
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.