Challenge Overview
Project Overview
Microbac is a commercial laboratory testing company that performs variaty testing service for their customer. Some services provided by them are environmental testing of air, food testing, agrochemical testing, physical and consumer product testing, antimicrobial efficacy testing and pharmaceutical testing. Currently there are four Laboratory Information Management System (LIMS) that client have to manage these testing operations and they want to define an efficient solution for providing central data from these 4 LIMS for their customer to gather the service results.
Competition Task Overview
We have previously build the desktop website for this application and in this contest we need your help to convert the storyboard into working prototype. The wireframe is provided to get the flow of the application, the storyboard has higher priority than wireframe in cases of design conflicts but the complete workflow shown in the wireframes must be implemented.
We only need this to work in portrait mode for phones (iphones, android phones, windows phones, etc).
Key Requirements
- 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 background should be fluid and the content should be fixed horizontally and fluid vertically.
- Implement hover state for all buttons and links.
- Implement sorting, grouping and paginating in table.
- Implement a nice transition effect when showing a tooltips.
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 all major phones.
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 & JQuery Mobile JavaScript libraries for this contest.
Browser Requirements
- Chrome on iPhone/Android phones
- Firefox on Android phones
- Safari on iPhone
- IE Mobile on Windows Phones
Documentation Provided
- Wireframes
- Storyboard
- Desktop Version UI Prototype
Final Submission Guidelines
Submission Deliverables
- The complete prototype that covers all screens, note we want a separate prototype for mobile, do not mix it with the desktop version prototype.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.