Responsive Mockup

100 points

Responsive Mockup

Requirements

HTML and CSS are valid10
Mockup maintains original sites branding20
Mockup is responsive from mobile through 1200px sizes with at least 3 breakpoints20
Mockup maintains good appearance and usability through size ranges30
Required images and and font included and funcioning20
Total100 pts

Resources

Objective

The create a responsive design for an existing site

Instructions

Overview

Create a responsive layout/design for an existing website (www.okhighered.org) using the mobile-first design strategy. If you have an existing mobile layout from a previous lab you can begin with it, otherwise you'll need to begin by creating a mobile layout for the site you're working with. Next, take your mobile layout and improve it so that it becomes responsive, adding as many breakpoints as your design requires, such that the layout will remain composed and useable up to a size of 1200 pixels wide.

Your new design will need to maintain the same general branding of the site that you're basing your design on but you're not required to maintain the exact same appearance. Instead, you should attempt to take the original design and improve on making it more mobile friendly at all sizes.

Extras

To make things more exciting your design will need to include at least 3 images and 1 custom font, either from the original site if they have them, or of your choosing if they don't. Be conscious of the total file size with all of your code, images, and font included.