Проект
Mobile HTML5 template
Objectives:
To be created HTML5 template that will be able to run within mobile devices web view. Template must fit different orientation, screen sizes, screen types and Android device types. Expect is developer to propose the best way to complete maximum responsiveness with below requirements.
Vitals:
- Name: SPT-0162 LEGACY2 Template
- Documents: Detailed requiremnts in Google Docs
- Source control: Assembla/GIT
- Ticketing/debugging/UAT: Assembla
- Builds&releases: HTML - index.html + folder with assets. Must run locally with no online references
- Technology: CSS3, HTML5, JavaScript (Minimum usage of 3-th party frameworks)
- Targeted browsers: Chrome for Android - 40x, Firefox for Android - 39x
- Min OS version: Android 4.4x
Requirements:
- Use best responsive practices to fit the most mobile screens
- Template must be done using strictly CSS3, HTML5 and JS only
- Primary use CSS3 Viewport units required with fallback to @media rules
- Only permitted CSS library is Bootstrap
- Template must be kept with min use of JS libraries
- Only permitted JS library is JQuery (each plugin will be considered separately)
- All proposed 3-th party JS and CSS libraries must be approved by project manager prior any use
- Template must have different layout composition for portrait / landscape orientations, screen sizes and DPI
- Targeted screen sizes: <4”, 4”, 5,2’, 6-7”, 7-9”, 10”, >10”
- Targeted device types: Android smartphones, tablets, phablets, Android PC, Android TV
- Showing scroller on full screen view is not acceptable at all
- Content must fit horizontally and vertically 100%
- Support of TTF/OTF fonts required
- For testing can be use on of targeted browsers, but for finals template must work within app web view
Design:
Template must adapt if non-mandatory value is missing. We will provide example of different content configuration. We will provide images with 6 or more layouts for following devices with pixel ratio:
- 1.5 (+reversed): 540x960, 480x800, 480x720, 540x960
- 2 (+reversed): 768x1280, 720x1280, 800x1280
- 3 (+reversed): 1080x1920, 1440x2560
Detailed documentations will be available as a next step.