Responsive 

WEb Design 

101

1. Was ist RWD?

not responsive:

http://www.nzz.ch/


responsive:

http://www.bostonglobe.com/


demo:

http://liquidapsive.com/

2. Geschichte






3. Bestandteile

Fluid Grids



Beispiel

Demo

Media Queries



In em's please!



Beispiel

Demo

Flexible Images ( & Video )



 Demo

Responsive Images


Schwierigkeiten:

  • SEO
  • Bandbreite
  • Rückwärtskompatibilität
  • Art Direction

Lösungen:
  • Info an Server, Server entscheidet
  • JavaScript
  • srcset
  • <picture>


-> polyfill picturefill by Scott Jehl

Srcset & Sizes Erklärt



feature detection


Beispiel Touch
Beispiel Modernizr

4. Techniken

Relative Einheiten

  • %
  • em
  • vw
  • vh
statt px

"In many ways, every time we use a pixel value in CSS 

we’re rasterizing what was a fully-scalable web"

Trent Walton


Flexbox ( & Grid Layout)



  • Unabhängikeit der HTML-Reihenfolge
  • App-like UI's


Demo

Mobile first



hinzufügen statt wegnehmen

Breakpoints aufgrund des inhalts

Aspect Ratio



Responsive Darstellung von:
  • Youtube- / Vimeo-Videos
  • Google Maps
  • iFrames
  • Sonstige


Demo

Typographie

Ziel: 45 bis 75 Zeichen pro Linie

1) CSS (manuell über Media Queries):
Schriftgrösse aufgrund der root font-size mit em
Demo

2) CSS (automatisch)
Schriftgrösse aufgrund der Fensterbreite mit vw
Demo

3) JavaScript (automatisch)
Schriftgrösse aufgrund der Containerbreite
Demo

4) Webcam :-)
Demo

Viewport Metatag


<meta name="viewport" content="width=device-width, initial-scale=1">




Media Queries in JavaScript



if (window.matchMedia('(min-width: 45em)').matches) {

    // do something...

}

5. links

People

Trent Walton
Filament Group
Brad Frost

Resources

Responsive Images:
1, 2, 3, 4

Flexbox, Grid

Responsive Typography:
12, 3

Danke!

Fragen?

Made with Slides.com