I N F O 1 3 0 0 L A B 7 O C T. 1 1 T H

RESPONSIVE DESIGN

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.comhttp://css-tricks.comhttp://www.evolveartistic.com

MOBILE LAYOUT

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

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.

MEDIA QUERY

• Method2: In CSS• More efficient

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

RESOURCES

• http://lab.maltewassermann.com/viewport-resizer/

• http://alistapart.com/article/responsive-web-design

ACTIVITY

• Download the zip folder: https://www.dropbox.com/s/gdoxkslmnahmb3a/lab7.zip

• Use the mockup for lab prep to edit main.css & mobile.css to make the page responsive to different screen sizes (&mobile version)