1. INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN

2. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media queries Apply to different screen sizes, platforms and orientations Example: http://artequalswork.com http://css-tricks.com http://www.evolveartistic.com

3. MOBILE LAYOUT Larger font size Smaller image Larger links/buttons, especially for touchscreen Content: usually one column Use percentages, instead of px

5. MEDIA QUERY Method 1: In Html if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

6. MEDIA QUERY Method2: In CSS More efficient

7. MIN-WIDTH & MAX-WIDTH min-width: If anything is below this limit, the style sheet link or styles will be ignored. max-width: Anything above the maximum browser or screen width specified would not apply to the respective media query. min-device-width and max-device-width

8. RESOURCES http://lab.maltewassermann.com/viewport-resizer/ http://alistapart.com/article/responsive-web-design

9. ACTIVITY Download the zip folder: https://www.dropbox.com/s/gdoxkslmnahmb3a/lab 7.zip Use the mockup for lab prep to edit main.css & mobile.css to make the page responsive to different screen sizes (&mobile version)