DGM2740 Principles of Web Languages
This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
Unit03 Responsive Design
- Review desktop horizontal navigation.
- Review phone simple button navigation.
- Review using a gradient image in the body element (600px tall X 10px wide)
- Review resizing an image inside a figure tag.
- Practice uploading a site to the class subdomain using Dreamweaver
- Build a non-square logo and save as a 24bit PNG.
- Implement a scrolling element using overflow: auto.
- Demonstrate properly sizing images for a responsive site (no massive images)
- Testing a web page download speed fast it downloads
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.
- The mobile marker is exploding and will one day be the predominate means of accessing web information.
- 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).
- There are capabilities that phones have that desktops don't have such as GPS and Cameras.
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
- Watch An Introduction to this Unit
- Watch An example using media = print
- Watch An overview of a responsive site using the mobile first approach
- Watch Review the responsive start files
- Watch Building the page header
- Watch Build responsive navigation
- Watch Add a Gradient Background to the Desktop
- Watch Build the page footer
- Watch Add a 100% wide graphic that scales to the browser width.
- Watch Add a image with text wrap
- Watch Create two articles
- Watch Display the articles to appear in two columns
- Watch Testing your work in various browsers
- Watch the 11 videos in the Introduction of "Mobile First Responsive Web Design" by Jon Flanders on PLURALSITE (28:37)
- Checkout this website Resize My Browser that resizes your browser for various device sizes.
- View Screen fly which previews the height and width of various devices
- Read "A simple Guide to Responsive Design by Adam
- Read the history of Clearing Floats by Nick
- Checkout a student recommended site on CSS authoring
- Download the HTML5 start template which includes the CSS Reset and the Natural Box Model
- Complete the responsive design assignment. Please base your assignment on the phone, tablet and desktop wireframes provided. The colors are up to you but they better NOT match mine.
- Read Responsive Design Ch 1-4 (Yellow Book)
- Complete the Quiz for this Unit
Answer the following Questions based on reading the yellow book and turn it in to Canvas.
- Chapter 1-What are three ways to handle responsive design?
- Chapter 2-After reading this chapter, try creating a pixel based design and then converting it to em. Let me know how it worked.
- Chapter 3-What are a couple of things you must be careful of when creating graphics that will become flexible?
- Chapter 4-One paragraph summary
View an example of responsive design. See it on your phone, tablet and desktop.