Download
responsive design n.
Skip this Video
Loading SlideShow in 5 Seconds..
RESPONSIVE DESIGN PowerPoint Presentation
Download Presentation
RESPONSIVE DESIGN

RESPONSIVE DESIGN

124 Vues Download Presentation
Télécharger la présentation

RESPONSIVE DESIGN

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. RESPONSIVE DESIGN INFO1300 LAB7 OCT.11TH

  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

  4. 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.

  5. Media query • Method2: In CSS • More efficient

  6. 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

  7. Resources • http://lab.maltewassermann.com/viewport-resizer/ • http://alistapart.com/article/responsive-web-design

  8. 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)