Johannes Brosi | Mayflower


Responsive Design

whoami?



Johannes Brosi

Wirtschaftsinformatiker (B.SC., FH)
Schwerpunkt Medieninformatik
Developer Mayflower GmbH

10+ Jahre Erfahrung im Web

Kontakt: me@brosi.me

Tech?



  • Slid.es (Wysiwyg für Reveal.js)
  • Reveal.js
  • Phonegap
  • Bluestacks

+ custom HTML / CSS / JS :)

Um was geht's?



  • Entstehung
  • Warum jetzt?
  • Mythen
  • So viele Auflösungen \o/
  • Von Mediaqueries & Co
  • Hilfreiche Techniken
  • Häufige Fehler
  • Was bringt die Zukunft?

Entstehung



Prägung des Begriffes durch Ethan Marcotte

  • 2010 Erste Verwendung des Begriffes
  • 2011 Buch "Responsive Webdesign"
  • 2012 Zunehmende Bedeutung
  • 2013 als "Jahr des Responsive Webdesigns"

Trend




Was ist Responsive Design?




Responsive Design beschreibt ein Konzept, z.B. eine Webseite bestmöglich auf die Gegebenheiten der jeweiligen Browser & Geräte anzupassen und reagieren zu lassen.


Warum jetzt?



  • Nur ein Buzzword? 
  • Trend einfach auslassen?
  • Wir brauchen das nicht?
  • Ist es nicht schon zu spät?

Nein, im Gegenteil!

Marktverschiebung


Desktop PC und Laptop laut Studie bald unter 20% Marktanteil!








Quelle: IDC Quarterly Forecast

Couch-Commerce


Weiterhin extremes Wachstum zu erwarten, v.a. im Tablet-Bereich.








Quelle: eMarketer, Jan 2013

Apple vs Android



2013: Android schlägt Apple bei den Verkaufszahlen und dem Marktanteil!




Betriebssysteme?



Android und Tablet ignorieren? Eher nicht.







Quelle Gartner, Grafik Heise

"Es wird noch schlimmer"



  • Auflösungen explodieren (Quad-HD)
  • Maus vs Touch vs Gesten vs ...?
  • OS mit Touch (!)
  • Weitere Geräte (Fernseher, Auto, ...)?
  • Erwartungshaltung der Kunden/Besucher
  • Zunehmendes Vertrauen in Mobile

Was erwarten die Besucher?



Responsive Design?
Separate Mobile Site?
Mediaqueries?
CSS Framework?
Polyfill?
...

Was erwarten die Besucher wirklich?



Dass es funktioniert!

  • überall,
  • schnell,
  • nahtlos ins OS eingepasst

Mythen



Responsive Design ist noch so jung, da kann es noch gar nicht so viele Mythen geben? (Erster Mythos!)







Grafik Jacob Bryant (Wikimedia)

#1: RD Unabhängig vom Rest? (1/2)



Dann machen wir erstmal weiter wie gewohnt und am Schluss kann man's ja zur Not immer noch Responsive machen.


Nein! Kann im Verhältnis extrem kostspielig werden!

#1: RD Unabhängig vom Rest? (2/2)



Klassisches Vorgehen:
  • Planung -> Wireframe -> Design -> Umsetzung -> Produkt

Nein! Alle an einen Tisch!


Optimales Vorgehen: Ähnlich PDCA.
  • Planung -> Prototyp -> Prüfen -> Korrigieren


Grafik: Karn G. Bulsuk

#2: Vom Desktop zu Mobile? (1/2)



Nein: Mobile First!


Designing for mobile first forces you to embrace these contraints to develop an eleganz mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business.

Luke Wroblewski, Mobile First

#2: vom Desktop zu Mobile (2/2)



Mobile first:

  • Auf essentielle Elemente fokussieren
  • mit geringster Auflösung anfangen
  • Elemente ausrichten
  • Schritt für Schritt zu den höheren Auflösungen wechseln
  • Entsprechend weitere Elemente anreichern.

#3: Support für alle Devices?



Nein: Progressive Enhancement!

  • Schlanke Basisversion mit essentiellen Features
  • Für spezifische Geräte Zusatzfeatures nachladen

#4: RD nur für Aussehen?



Nein: Es geht um das komplette Verhalten der Seite/App und beinhaltet auch viel UX. Touch, ...

So viele Auflösungen \o/



Von 320x240 bis  7680x4800 Pixel

Seitenverhältnisse von 5:4 bis 17:9

Landscape, Portrait

DPI von 120 bis 640

... Und das ist noch nicht das Ende!

Um einen Eindruck zu bekommen...



Und da ist noch kein Quad-HD dabei :)








Quelle: Flooch (Wikipedia)

Sinnvolle Breakpoints?



Klassisch:
  • 320 Pixel (iPhone Hochformat)
  • 480 Pixel (iPhone Querformat)
  • 768 Pixel (iPad Hochformat)
  • 1024 Pixel (iPad Querformat)
  • ...

Und Android?


Sinnvollere Breakpoints!



Meta:
  • ~10 Worte pro Zeile
  • ~45 - 75 Zeichen Pro Zeile

Je nach Schriftart/Schriftgröße die Breakpoints testen.
Breakpoint, sobald's "nicht mehr gut" aussieht.


-> Content gibt Breakpoints vor.

Vergiss nicht die DPI!



Mini-Displays mit Full-HD machen in 5-spalten Optik keinen Sinn!


Der Text wird dann nämlich bei so vielen schmalen Spalten unter Umständen sehr schwer, wenn überhaupt leserlich sein. Davon ist abzuraten. Selbst die drei Spalten hier sind schon sehr schwierig.

Media-Queries


Momentan einzige Möglichkeit via CSS auf die phys. Gegebenheiten der Devices einzugehen (Querverweis WURFL :)).

Einbinden via link-tag:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 800px)" />

Oder direkt im CSS:
@media only screen and (min-width: 800px) {
  /* hier dann die Anweisungen */ }

Mediaquery: Auflösung



Die Anweisungen gelten für alle Geräte mit einer breite von weniger als 800px.

@media only screen and (min-width: 800px) {
  /* hier dann die Anweisungen */ }

Neben  min-width auch max-width sowie  min-height und max-width möglich.

Mediaquery: Auflösungsverhältnis



Mediaquery nach Auflösung liefert teils vermeintlich falsche Ergebnisse!

ddpx = numbers of dots per pixel unit
(ersetzt device-pixel-ratio) 

@media (min-resolution: 1.3dppx) {
    //Anweisungen
}

Mediaquery: DPI



dpi = dots per inch

@media (min-resolution: 96dpi) {
    //Anweisungen
}

Ausrichtung und Gerätetyp




@media (orientation: landscape) {
    //Anweisungen
}
bzw. portrait 

@media screen {
    //Anweisungen
}
bzw. print, handheld, braille, tv, speech, projection, ... 

Queries kombinieren


BNF: 
media_query_list: <media_query> [, <media_query> ]*

media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]*

Beispiel: 
@media print and (min-width: 320px),       screen and (min-resolution: 96dppx) {
    //Anweisungen
}

Exotische Queries



Löst insbesondere Probleme mit Desktop-Zooming

@media (min-width: 20em) {
    //Anweisungen
}

Entspricht "im Normalfall" etwa 320px (320 / 16 = 20).

Browser-Unterstützung



Ab IE 9 alle gängigen Browser!


Grafik: Chris (Wikimedia)

Browser-Unterstützung nachrüsten



Respond JS

#see
https://github.com/scottjehl/Respond


Vorsicht: IE 6-8 bringen viele weitere Probleme mit sich :)

Testing !!



Wie kann man Responsive am besten testen?
-> Nicht im Photoshop!


-> Prototyping(!)
-> Browser-Plugins

Bildalternativen für hohe DPI



Bilder mit zu niedriger Auflösung schauen auf Geräten mit hoher DPI nicht gut aus.

Umgekehrt ist das zwar kein Problem...

Aber Vorsicht: "Doppelte" Auflösung = 4fache Größe (2 Dimensionen)!

Gerade bei mobilen Ansichten kann man nicht von einem Breitbandzugang ausgehen!

Polyfills



Fehlende Features in älteren Browsern via JS nachrüsten (oder alte Bugs beheben).

  • Insbesondere bei alten IEs sehr zu empfehlen
  • Beispiel: Respond.js (für MediaQueries im alten IE)
  • Beispiel: selectivizr.js (für CSS3 Selektoren im alten IE)

Überlegen was man braucht, dann Polyfill suchen! Mittlerweile ist die Auswahl groß.

CSS Sprites



Viele, meist kleine Grafiken in einer Bilddatei zusammengefasst.

  • Verringert HTTP-Requests drastisch
  • Mit z.B. Compass kein großer Aufwand
  • Kann besser gecached werden

Aber vorsicht: Kann auch nach hinten losgehen! Dateien nicht zu groß wählen!

Icon-Fonts



Icons und Grafiken direkt aus einer Schrift?

  • Vektorformat, d.h. beliebig skalierbar
  • viele fertige Pakete vorhanden (<3 Fontawesome!)
  • nach belieben erweiterbar!

Frameworks



Frameworks können eine große Hilfe sein!

Siehe Vortrag von Sven Wolfermann zu RWD/SASS. Morgen 13:45.

Häufiger Fehler: Touch vergessen?



Buttons, etc. reagieren auf Click, nicht aber auf Touch-Event.

Häufiger Fehler: Hover zu wichtig?



Hover-Effekte gehen nur mit der Maus :). 

Gegebenenfalls wichtige Informationen gehen für Touch-User verloren.

Häufiger Fehler: Zu viele Targets



Auf Zielgruppe achten / analysieren. Insbesondere altere IEs können teuer werden.
Grafik: ALT1040 (Flickr)

Häufiger Fehler: Fixe Layouts



Wie bereits erwähnt: Späteres "responsive machen" erheblich schwieriger! 

  • Mobile First! 
  • Responsive Layouts von den Designern/Agenturen kaufen/verlangen!
  • Relative Größenangaben (em, %, ...)

Häufiger Fehler: Form-Falle



Große / mehrstufe Formulare funktionieren auf mobile nicht! 

Was kostet der Spaß?



Nachdem wir nun wissen was Responsive Design ist, können wir sagen was es kostet?

Kostenfaktor Design...



  • Mehrere Designvorlagen (Breakpoints)
  • Verschiedene Content-Repräsentationen
  • Styleguide nicht mehr Pixelgenau/automatisiert
  • Zusätzliche Prototypen nötig?

Kostenfaktor Tests



  • Keine  vollautom. Tools für Responsive-Testing
  • Manuelles Testen!
  • Anschaffungskosten Testgeräte


Kostenfaktor Inhalte



  • Verschiedene Variationen der Inhalte (lang/kurz/mittel?)
  • (Bilder in verschiedenen Auflösungen)

Kostenfaktor technische Umsetzung



  • Je Breakpoint zusätzliches CSS
  • Zusätzliches Know-How nötig
  • Designvorlagen schwieriger zu lesen

Unter'm Strich



Es kostet so viel wie ein Auto....

Ohne weitere Angaben ist keine genauere Aussage möglich...
Rechte Grafik: Xavigivax (Wikimedia)

Was bringt die Zukunft?



Von allem etwas mehr :)

  • Devices
  • Auflösungen/DPI/Seitenverhältnisse
  • Eingabe-/Steuerungsmechanismen
  • Touchfähige Betriebssysteme
  • Umsatz über Mobile
  • Support in den Frameworks
  • Support in den Standards (Mediaqueries & Co)
  • Apps (!) (Web-Apps, Hybrid-Apps, Metro-Apps, ...)

Zeit für Fragen :)



Falls doch nicht genug Zeit bleibt:

Mail: me@brosi.me

Responsive Design

By Johannes Brosi

Made with Slides.com

Responsive Design

Gehalten am 28.10.2013 auf der International PHP Conference 2013 / Webtech Conference 2013 in München.

  • 2,624

More from Johannes Brosi