Mobile Web Design
3 credits
| All HTML, CSS, and JS code is valid | 5 |
| Responsive design is complete and reasonably like mockups | 30 |
| Images are optimized | 10 |
| CSS is optimized | 10 |
| JS is optimized | 10 |
| Cache use is optimized | 10 |
| Grunt optimization task is setup and works | 10 |
| Progressive enhancement has been used to improve form controls for touch based interfaces | 15 |
| Total | 100 pts |
To build an optimized responsive site
For this lab you'll be creating a single page responsive web application that you will then need to optimize for load speed.
To get you started the attached zip file contains a basic html file, image files, javascript, and some css code, along with 3 mockup images. You will need to begin by creating your own stylesheet that you will include along with the stylesheets already present to make this page responsive. Your responsive layouts for the page should match the mockup images as closely as possible. The small mockup image should cover sized below 550px wide, the medium layout should cover sizes below 900px wide, and the large image would be for sizes above 900px wide. One of the stylesheets that is already included (planet_images.css) already handles switching the image files that are used at the 900px breakpoint.
Once your responsive layouts are complete, you will need to optimize the site for fast load times. You should optimize images, concatenate CSS and JS files, minify CSS and JS files, setup application cache use, and perform any other actions that you find will increase the speed that the page becomes useable.
To get full points on the lab you will need to turn in a site that contains the needed grunt setup so that it can be optimized with a grunt command. Your grunt task should include all of the optimization steps listed above and should result in a directory called 'dist' that is ready to be uploaded to a server.
Use progressive enhancement techniques to improve the usability of the form controls for touch based interfaces. You may create your own form components or use published form components. Do not use form component code written by other students in the class.
Turn in all files needed for your assignment to function and make no assumptions that I already have any needed files, however, you may need to delete the node_modules directory to make your submission small enough to submit.