Mobile Web Design
3 credits
| HTML and CSS are valid | 10 |
| Mockup maintains original sites branding | 20 |
| Mockup is responsive from mobile through 1200px sizes with at least 3 breakpoints | 20 |
| Mockup maintains good appearance and usability through size ranges | 30 |
| Required images and and font included and funcioning | 20 |
| Total | 100 pts |
The create a responsive design for an existing site
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.
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.