WRA 410 Advanced Web Authoring :: Unit 3, Module 2

Module 2: Responsive Design

In this module, you will create a responsive design using .html and .css file. The goal is to better understand how to use CSS media calls that specify different styles for different user device "viewports" (e.g. mobile vs. widescreen monitor). To do this, you'll review how to create container objects, label them, and style them.

text editor, access to the internet, and patience

Start by reviewing this set of slides Don't try to memorize it all. But familiarize yourself with the concepts of a viewport and how the Media Calls allow the browser to use different style rules for different viewport sizes.

Download this zip file with a simple, sample responsive design. View it here. Resize it to see it working. Be sure to look at the source too.

Using any kind of prototyping tool, design a simple responsive page. You should have a few container objects that change for different viewports. The content is up to you. Draw two versions of your design - one for a screen and one for a mobile viewport. Save those for your portfolio.

Now make the magic happen! Create your responsive page, using my sample as a guide. The code below will help you with the CSS. NOTE: your containers may be named differently than mine...that's up to you. But if they are, you'll have to adjust your code to make it work!

Have a look at your design in different formats using. The Responsinator.

When you are happy with your design, upload and link it to your portfolio. Then write a short description (a paragraph) of what transformations you created to make the page responsive.