Challenge Overview
Project Overview:
Welcome to the FAST!! 96Hrs - eBay Intranet Homepage Responsive HTML5 UI Prototype! The goal of this challenge is to create a Responsive HTML5 UI Prototype application for mobile and desktop browsers based on provided wireframes and style guidelines using AngularJS framework and Bootstrap.
As part of this challenge you may need to document all HTML5/CSS3/JavaScript code for future implementation references. .
IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided wireframes. Please consider the existing intranet-mockup app as base and reuse HTML/JS/CSS code assets in this new prototype app. Your prototype must follow web accessibility as per "WebAccessibilityChecklist.pdf" and other two accessibility pdf files in Accessibility-Guidelines.zip file during code implementations.
We don't actually have the design for this challange - we have wireframes plus design guidelines. Please also note that the "Some_Design_Guidelines_WS.potx" should be used as a style guide for colors/fonts for this challenge.
Required Pages:
Below are the required pages for this prototype.
1. Desktop Wireframe:
- Home page header content
- Show search input and profile image at right-top.
- Followed by Title which can be extended to three lines.
- Show username and date on last line.
- Show "Like", "Share", "Comment" on right side.
- Home page main content
- Show image placeholder.
- Followed by dummy text paragraph.
- Global Nav
- Show text "INTRANET" in two lines at left side.
- Nav list (My HR, Employee Services, Legal, One Company) at right side.
- Global nav - inspired by reference site.
- Left Nav - Collapsible Menu
- Show collapsible menu below global menu - (default 'News' should be expanded).
- Menus - My Tools, News, Widgets, Videos.
- Collapsible menu - inspired by reference site.
- Follow the wireframe for more information.
- Show 'News' content without thumbnails - inspired by reference site.
2. Mobile Wireframe:
- Home page
- Show Left nav icon, Logo, Search icon at header.
- Show image placeholder.
- Followed by Title and some dummy text.
- Left Nav
- Show profile image with profile completion progress.
- Followed by alerts and approvals.
- Global navigation list - My HR, Employee Services, Legal, One Company.
- Left nav list - My Tools, News, Widgets, Videos.
- News page
- Show page title as 'News'.
- News list with title and aging - inspired by reference site.
Specific HTML/CSS/JavaScript Requirements:
- HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 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.
- Please follow the Web Accessibility Checklist provided by the client (WebAccessibilityChecklist.pdf).
Font Requirements:
Use font - Arial.
JavaScript Requirements:
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. We would like to use following JavaScript libraries:
Browsers Requirements:
- IE 9+ Browsers on PC - (should be functional on IE 8 version)
- Latest Safari Browser on iPad, MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
Documentation Provided:
Attached documents: Wireframes.zip, Accessibility-Guidelines.zip, intranet-mockup.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.