Challenge Overview
Welcome to BlueArrow - Mobile App HTML5 UI Prototype challenge. In this challenge we need your help to convert the provided storyboard to HTML5 Prototype and specification document that explains details functionality of each screens.
Project Overview
BlueSky Resourcing is one of the largest recruitment services provider and pioneering leading edge approaches to delivering complex staffing initiatives and outsourced recruitment services. They provide blue collar resources for its client on a permanent, temporary or contract basis. To expand their services, they are going to build a mobile application for the candidate that is visually impressive, intuitive, simple to use and provides anything a candidate needs at their fingertips.
Resources
- Storyboard.
- Specifications Document.
General Requirements
- Use orientation lock to support only Portrait view on iPhone.
- Use full screen mode implementation for this application.
- User can save prototype app url into home screen and open later the app in full screen. (when viewinng on the phone we want it to be full screen/no browser chrome visible)
- Set navigation section as fixed at top and bottom of the page, only page content will be scrollable.
- Use tap events instead of click events.
Code Requirements
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.
- Each of the HTML pages need adapted for both tablet and phone layout.
CSS3
- 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.
- You must use CSS media query for phone.
Javascript
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean indentation for all JavaScript code so future developers can follow the code.
- If you need to use an additional JS plugin not supplied by Bootstrap, try to find a jQuery solution.
Image
- As mentioned above, all imagery should either be vector (SVG), or twice the pixel size it appears to be, to account for retina displays.
- Other imagery should balance visual quality with file size via compression.
- If you decide to utilize an image sprite for your icons, please reference one of these methods for retina display compatibility:
-- raster image sprites: http://www.andreasnorman.com/how-to-easily-create-image-sprites-for-retina-displays/
Browser Requirement
Safari Browser on iPhone.
Target Device
iPhone 6, iPhone 5, iPhone 4.
Final Submission Guidelines
Submit your solution into the Online Review.