Week 4 - Media Queries and Responsive Design
- Class A Media Queries
- Class B Responsive Design - Mobile First
- In this unit I will demonstrate how to build a "responsive" HTML5 page that uses the "Mobile First" strategy. You will learn how to add media queries to web pages, and add additional CSS sheets designating phone, tablet, and desktop styling.
- Your php based site is due today. Please submit your url to the dropbox on D2L.
- Design a web page that is responsive to different devices, with different style sheets for phone, tablet and desktop.
- Please review the mobile first techniques used here in this fully responsive webpage.
- I stripped the flexible images out of the above siteJust flexible image example here
- Not included on this page is a nav bar using jQuery to toggle on and off a "hamburger" style collapsible navigation. Here is a demo for you to use. View source code and css. Read text on page for explanation of jQuery and CSS"
- View Browser and Monitor statistics
- View iphone resolution info
- View What is my screen resolution?
- View Common Device Breakpoints
- View Breakpoints and importan pixel ratio targets for retina
- View Responsive Examples
- View Responsive Navigation Examples and Tutorials
- View Pixel dimensions for various devices.
- Read Responsive Design Ch 1-4 (Yellow Book)
- Read Why You Need to Prioritize Responsive Design by Forbes
- Read Ten Things You Need to Know about Responive Design by Adobe Developer Connection
- Read The State of Responsive Web Design by Smashing Magazine
- Read AboutThe Reader feature in Safari 5
- Read Responsive Web Design Is Not the Future
- Read Mobile First by Luke W
Simpe Code examples for demonstration
- View 1. NO media queries. Notice that on mobile devices the text becomes impossibly small.
- View 2. Device Width media queries. Notice that the landscape and portrait displays are the same color on each device.
- View 3. Screen Width media queries NO Viewport Meta TAg. Notice that even though I have min and max set, every single page is blue.
- View 4. Screen Width media queries WITH the Viewport meta tag. Notice that the color changes when you rotate the device.
- View 5. Media Queries embedded in the separate style sheets. AND the crutch code for IE (Backwards compatible with OLD Internet Explorer)
- View 6. Media Queries with just min and max valuesin the html head. (Works with all modern browsers)
- View 7. Media Queries with just min values in the external css sheets. This is the mobile first approach you should model.(Works with all modern browsers)
- View 8. A page containing a div set to a percentage width.
- View 9. A page containing a div with a set width of 960 pixels.
- My videos are available on itunes. Following is the link:
Once there clicking on the blue links "View in iTunes" will allow you to do so. If you don't have iTunes installed it's easy and free.
05b_Resp_DeviceWidth.mp4 (being updated)