Spring 2015

Lab06
Planet Weight Project

Due: Thursday May 07, 2015 11:59 PM

Lab06 - Planet Weight Project

Requirements

All HTML, CSS, and JS code is valid5 pts
Responsive design is complete and reasonably like mockups30 pts
Images are optimized10 pts
CSS is optimized10 pts
JS is optimized10 pts
Cache use is optimized10 pts
Grunt optimization task is setup and works10 pts
Progressive enhancement has been used to improve form controls for touch based interfaces15 pts
Total100 pts

Resources

Objective

To build an optimized responsive site

Instructions

For this lab you'll be creating a single page responsive web application that you will then need to optimize for load speed.

Responsive Layout

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.

Optimizations

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.

Automation

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.

Progressive Enhancement

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.

Submission

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.