Challenge Overview
Welcome to the FreeBeer FNoL HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application using AngularJS and Bootstrap development frameworks.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
Final Submission Guidelines
IMPORTANT!
- This application will use Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code.
- Remember, when resize browsers into mobile screen width, all widgets need transform into fluid mobile layout
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
CODE VERSIONS & STANDARDS
- Please use versions provided in this document - (Link to code versions)
- Use DRY coding principles where posssible
- Keep all styling out of the HTML and in CSS
- Keep the application CSS separate from Bootstrap or theme CSS
- Limit use of ID tags - make use of classes rather than ID's
Files Downloadables
Storyboard.zip - Storyboard screens and PSD files
Challenge Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all required browsers - (use HTML5shiv to support IE9 version). This prototype will become an Angular application in subsequent challenges.
UI Prototype Page Requirements
Below are the required pages for this prototype. Each page is laid out in Desktop > Tablet > Mobile view and should respond to standard window sizes.
1. Login
screenshot: Desktop-1.png
- Header blue background bar will be fluid as browser screen width
- When resize browser, background image need use existing size.
- Logo placed in the left side, put link to landing page
- User ID & Password show default value. Use "email address" in place of "User ID". On cursor focus, value need to be hidden
- Use custom design for checkbox. Click remember me will need toggle on/off the checkbox
- Forgot Password will page to enter email address
- Login button, provide hover state. Click this button will take user to “Loss Report” page explained below.
- Put dead link for Social icons.
- Copyright is plain text
- Put dead link for Terms and Policy
- Register button will show another “ Become Member” form (screenshot: Desktop-2.png)
- Use same solution for input values.
- Match input content
- Register button will be dead link
- Click Login button will show up Login from
Tablet Version
screenshot: screenshot: tablet-1.png & screenshot: tablet-2.png
- Remember to disable hover state of any buttons/link for tablet version.
- You need make sure background image displayed correctly when viewed on tablet size.
Mobile Version
screenshot: Mobile-login.png
- Remember to disable hover state of any buttons/link for tablet version.
- on Mobile version, logo need displayed centered on header bar
- “Your Home...” text hidden for mobile version
- Then use fluid background for Login box.
- Apply same solution for “Become Member” form. You can grab form content from desktop version
- After click Login button, on Mobile version, User will see Landing page that will transform main navigation in desktop version into grid button format.
- Call Now button placed below the grid buttons
2. Step 1 - Loss Report
screenshot: Desktop-3-1.png
- This page show up after user logged in
- Need apply fluid solution for this page
Header
- Notice the logo smaller on this page
- Logo always place in the left side
- Main navigation show up in the right side
- Logout button take user to login page
- Notice active state for New Claim menu
- My Policy, Upload Photo and My Profile can be dead links
Sidebar
- Sidebar need use fluid height
- You can set fixed width for sidebar
- Blue colored link is active step
- Grey colored link is inactive/incomplete menu
- Call Now button will always display in the bottom
Main Content
- Content area need fluid as browser width
- Progress Step displayed on top side
- Green colored rounded is active step
- Match style for all form field (dropdown/datepicker/radio and textarea)
- Next button always fixed in the bottom
Tablet Version
screenshot: tablet-3-1.png
- For tablet version, sidebar will be hidden by default
- User can access left sidebar by click menu button (screenshot: tablet-3-1-sidebar.png)
- Make sure when sidebar show up, content area not breaking.
Mobile Version
screenshot: Mobile-updated1.png
- For mobile version, header area will be different.
- Welcome message and main navigation menu will be hidden
- In the left side, there’s menu button to access sidebar menu (screenshot: Mobile-updated5.png)
- Make sure when sidebar show up, content area not breaking.
- Then page title displayed in center
- Take photo button displayed in ther right side
- Policy Number information placed below the header
- Progress step width adapt smaller size screen
- Notice progress step only show 4 steps.
- Notice the label and input display stacked for mobile version.
- Match content placement for all input rows
- Next button no need fixed placement, it show up when user scrolling the page
3. Step 2 - Contact Information
screenshot: Desktop-3-2.png
- This is 2nd step to filled Contact Information
- Completed step use dark blue color
- In the sidebar, you can see active and completed step use blue color link.
- Match input form style and content
- Notice there’s Back button in the left that will take user to previous completed page
Tablet Version
screenshot: tablet-3-2.png
- Not have differences than desktop version, just need make sure page not break when open sidebar
Mobile Version
screenshot: Mobile-updated2.png
- Match form placement for mobile version
4. Step 3 - Location of Lost
screenshot: Desktop-3-3.png
- For this step, content area divided by 2 columns
- Match form style and content for Location of Lost
- In the right side user can upload photo. click this button will show browser open dialog
- After open dialog, simulate when there’s some uploaded thumbnails in Evidence of Lost
- Click “x” button will remove the thumbnails
- Click Next button take user to next step.
Tablet Version
screenshot: tablet-3-3.png
- "Upload Photo" on the desktop view should become “Browse Photo” and "Take Photo" on tablet version because the camera will be used on this device.
Mobile Version
screenshot: Mobile-updated3.png
- Browse and Upload Photo placed on top for mobile version
- "Upload Photo" on the desktop view should become “Browse Photo” and "Take Photo" on tablet version because the camera will be used on this device.
5. Step 4 - Involved Parties & Details
screenshot: Desktop-3-4-1.png
- This is the last step of New Claim
- There’s “+” button that will allow user add new details
- On “Mark Miller” row, when click pencil button, user can edit data (screenshot: Desktop-3-4-2.png)
- Match form content and value
- in the right side, user can fill Additional information
- Click Next button take user to next step.
Tablet Version
screenshot: tablet-3-4-1.png
- Tablet will use same functionality like desktop version
- Edit should show up the hidden form (screenshot: tablet-3-4-2.png)
Mobile Version
screenshot: Mobile-updated4.png
- Match placement of Involved Parties form and additional information
- Click the pencil button will need show the box, make sure box fit with fluid layuot
6. Review Claim
screenshot: Desktop-3-5_1.png
- Policy Number bar show up on top
- Show Adjuster Information
- Fraud Statement show up in the right side
- User need click the checkbox before Submit button enabled (screenshot: Desktop-3-5_2.png)
Tablet Version
screenshot:tablet-3-5.png
- Match layout like desktop version
Mobile Version
screenshot: No storyboard created
- Mimic Step 4 layout with updated Review Claim content
Client Priorities (The items that are considered highest prototype 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.
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.
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.
- You MUST use SASS/LESS to make the CSS code clean, provide source files on your submission.
- 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.
Desktop Browsers Requirements
Windows & Mac OS
- IE10
- Safari (version 7)
- Firefox (version 32)
- Chrome (version 35)
Tablet/Mobile
- Safari Browsers on iPad (iOS7)
- Safari Browsers on iPhone (iOS7)
- Android Browsers (4.2)
Development Framework Requirements
Bootstrap (version 3)
AngularJS
HTML5shiv