DGM2740 Principles of Web Languages

This course was built by Dr. Paul Cheney for the Digital Media Department at UVU

Unit03 Responsive Design

Objectives

Overview

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 and important content (chop the fluff).
  3. There are capabilities that phones have that desktops don't have such as GPS and Cameras.

Learning Activities

In this unit I will demonstrate how to build a "responsive" HTML5 page that uses the "Mobile First" strategy. The finished page that we create will use media queries and work on IE 7, 8, 9, and 10. 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 . 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.

During these tutorials, I will review how to use css to build a page using hacks for Internet Explorer 7 and 8. 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 exceeds 481px, Finally I add a style sheet that is added ONLY after the browser width exceeds 1141px. The end result is that on a phone the first two (reset and phone-default) style 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.

All videos listed below are available on Udemy

Assignments

Reflection Questions

Answer the following Questions based on reading the yellow book and turn it in to Canvas.

Example

View an example of responsive design. See it on your phone, tablet and desktop.