Unit03-Responsive Design

What you will learn

There are a couple of approaches that a designer can use when building a flexible site that works on desktops, tablets, and phones. One approach is to design a beautiful desktop site and then add media queries that dehance (opposite of enhance) the page to work on a smaller devices. Another approach is to start with three or more specific designs (desktop, tablet landscape, tablet portrait, phone landscape, phone portrait) and then create a separate CSS style sheets to handle each layout. The more layouts you specify the more responsive your site but the work increases as well. Don't over do it! Finally you can start by designing for mobile first and then enhance for larger devices. Luke Wroblewski argues in his article "Mobile First" that there are three good reasons to design for mobile first.

1. The mobile marker is exploding and will one day be the predominate means of accessing web information.
2. Designing for mobile first forces you to focus. Since I have started using this approach in my work I have found that it makes me think more about navigation.
3. There are capabilities that phones have that desktops don't have such as GPS and Cameras.

Tutorials

In this unit I will demonstrate how to build a "responsive designed" HTML5 page that uses the "Mobile First" strategy. The finished page that we create will use media queries and work on IE 7 and 8. First, I will walk your through an HTML 5 template I build. This template works on old versions of IE. Second, I will add some sample content and setup the page to have two columns. Third I will build the CSS for phones. Then I will add some HTML for flexible images and wrap up with tablet and then desktop CSS.

Download the HTML5 template

In part 1 of this tutorial I review how to use css to build a page using hacks for Internet Explorer. I start with the reset.css and then add a phone-default.css. Next I add another style sheet that is applied ONLY after the screen width passes 481px, Finally I add a style sheet that is added ONLY after the browser width passes 1141px. The end result is that on a phone the first two (reset and phone-default) stye sheets are used, while on a tablet three (reset, phone-default, and tablet) style sheets are used and finally on a desktop all four (reset, phone-default, tablet, and desktop) are used.

Watch 2740_03c_template

In part 2 we add title info, rows with columns, and navigation structures. If you watch close you will see where I made a mistake which does not cause me problems until I start formatting the CSS for tablet. I will demonstrate a technique for debugging in Dreamweaver in "CSS for Tablet part 1"

Watch 2740_03d_content

In part 3 (Phone1) I demonstrate how to structure the CSS for the navigation. You can learn more about converting pixels to em's from PXtoEM

Watch 2740_03e_phoneCSS1

In part 4 (Phone2) I demonstrate how to structure the CSS for the rest of the phone layout.

Watch 2740_03f_phoneCSS2

In part 5 I demonstrate how to properly size a img file and then how to make it scale to fit the changing width of the browser window.

Watch 2740_03g_images

In part 6 (Tablet1) I demonstrate my enhancements for tablet starting with the navigation area.

Watch 2740_03h_tabletCSS1

In part 7 (Tablet2) I demonstrate my enhancements for tablet including making the two columns float side by side.

Watch 2740_03i_tabletCSS2

In part 8 I demonstrate my enhancements for the desktop including a background gradient and menu size changes.

Watch 2740_03j_desktopCSS

Paul