Creative Director Rüdiger von Selzam, studioselzam: Einführung in das Thema "Responsive Webdesign" auf Oseon's SouperTuesday am 27.11.12

1. Willkommen zum

2. Souper'Tuesday'am'27.11.2012
Responsive Webdesign
studioselzam

3. Überblick
‣Was$ist$“responsive”?
‣Ein$paar$Zahlen
‣So$sieht’s$aus
‣Die$Zutaten
‣Das$Rezept
‣Ausblick

4. “responsive”
ansprechbar, reaktionsfähig

5. http://www.core.form-ula.com/2008/05/17/skylite001/

6. http://www.core.form-ula.com/2008/05/17/skylite001/

7. http://www.core.form-ula.com/2008/05/17/skylite001/

8. In unserem
Fall ...

9. Content in verschiedenen Kontexten

10. Ein paar Zahlen

11. Ein paar Zahlen
Mobile Webnutzung heute
15%
33% 6%
67%
80%
Internet&Nutzer*mit*Handy Smartphones Tablets
Rund ein Drittel der Internet-Nutzer in Rund ein Fünftel des Internet-Traffics
Deutschland gehen auch mit dem in den USA wird über mobile Geräte
Handy ins Internet. FORSA genutzt. CHITIKA

12. Ein paar Zahlen
Mobile Webnutzung in der Zukunft
http://www.q4blog.com/2012/07/11/cisco-systems-report-mobile-traffic-doubled-and-smart-phone-use-tripled-in-2011/

13. Ein paar Zahlen
Wir nutzen etliche Formate und Bildschirmgrößen
768 x 1024 540 x 960
1024 x 768
1280 x 800
320 x 568
480 x 320
320 x 480 1440 x 900 1920 x 1080 2560 x 1440
960 x 540
768 x 1024
1280 x 800
800 x 1280 1440 x 900
960 x 540 540 x 960 1024 x 768
1366 x 768

14. So sieht’s aus

15. Responsive Websites
Am Bildschirm simuliert
‣ http://resizemybrowser.com/

16. Responsive Websites
Beispiel: Sony Mobile
‣ http://www.sonymobile.com/de/

17. Responsive Websites
Beispiel:
edenspiekermann
‣ http://edenspiekermann.com/de/

18. Responsive Websites
Beispiel:
Simon Collison
‣ http://colly.com/

19. Die Zutaten

20. Die Zutaten
Responsive Websites bestehen aus:
HTML MEDIA QUERIES CSS
5 3
‣ HTML%(Hypertext%Markup% ‣ Media%Queries%fragen' ‣ CSS%(Cascading%Stylesheets)'
Language)%beschreibt'die' Geräteeigenschaften'ab'und'stellen' beschreiben'die'Darstellung'einer'
inhaltliche'Struktur'einer'Website' die'darauf'zugeschnittenen'CSSN Website'mit'Farben,'Verläufen,'Layout'
im'Browser Eigenschaften'bereit. (Formen,'Größen'und'Positionen)'und'
Schriften.

21. Die Zutaten
Media Queries und diverse Stylesheets
erzeugen die Responsive Website
HTML
Auswahl'des'Stylesheets Responsive'Website
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS CSS
CSS
MEDIA QUERIES
Ständige'Abfrage'der'Geräteeigenschaften

22. Die Zutaten
Brauche ich für jedes Gerät ein eigenes CSS?
CSS
CSS CSS CSS 3
3 3 3
CSS
3 CSS
CSS 3
3
CSS
CSS CSS 3
3 3
CSS
3
CSS CSS CSS CSS
3 3 3 3

23. Die Zutaten
Zum Glück nicht! Ich brauche “Fluid Grids”.
‣ Umrechnung:harter:Pixelwerte:in:Prozente
‣ Definierung:von:AnfangsA:und:Endpunkten

24. Die Zutaten
Fluid Grid Beispiele
‣ http://www.lottanieminen.com

26. Die Zutaten
Fluid Grid Beispiele
‣ http://crushlovely.com

27. Die Zutaten
Fluid Grid Beispiele
‣ http://stephencaver.com

28. Das Rezept

29. Das Rezept
Breakpoints definieren
1024+ 1023 – 768 767 – 480 bis 479

30. Das Rezept
“mobile first”
4
1 2 3
CSS CSS CSS CSS
bis 479 767 – 480 1023 – 768 1024+

31. Kochstunde
Warum “mobile first”?
‣ Wegen des geringen Platzes auf mobilen Geräten,
müssen Inhalte und Features von Anfang an stark
priorisiert werden
➡ “Weniger ist mehr” tut dann auch der Desktop
Website gut
‣ Man kann sich eher auf die Möglichkeiten von “Mobile”
einlassen
➡ Wie kann ich GPS, Orientierung des Gerätes und
Umgebungsinformationen sinnvoll nutzen?
‣ Man entwickelt vom Einfachen zum Komplexen
➡ sauberer Quellcode, mit weniger Bugs und weniger
Problemen

32. People are increasingly fed up with
the sheer amount of crap that they
have to deal with on web pages.
Luke Wroblewski - “mobile first” Prophet

33. Das Rezept
Verwendung von Bildern
200kb
30kb
‣ Desktop%Thumbnail ‣ Mobile%Thumbnail
580'x'420'ca.'200kb 280'x'200'ca.'30kb
‣ Um:lange:Ladezeiten:zu:vermeiden,:müssen:Bilder:in:
unterschiedlichen:Größen:bereitgestellt:werden.

34. Das Rezept
Typografie
‣ Schriftgrößen müssen grundsätzlich auf das
jeweilige Gerät angepasst werden
‣ Das Hauptkriterium zur Bestimmung der
Schriftgröße ist die Lesedistanz
‣ Auch Zeilenabstände müssen bei größerer
Lesedistanz vergrößert werden
‣ Bei sehr kleiner Schrift (Smartphones) sollte http://informationarchitects.net/blog/responsive-typography-the-basics/
die Laufweite der Schrift vergrößert werden
‣ Bei der Gestaltung von Desktop Websites
werden häufig zu kleine Schriftgrößen
verwendet

35. Das Rezept
Weitere Herausforderungen von
“responsive webdesign”
‣ RolloverAEffekte:sind:auf:Touchscreens:nicht:sinnvoll:
‣ Neben:verschiedenen:Bildschirmgrößen:bringen:
unterschiedliche:mobile:Browser:eigene:Tücken:mit:sich,:
die:Funktion:und:Darstellung:der:“responsive”:Site:
beeinträchtigen:können
‣ Lange:Ladezeiten:sind:gerade:im:Mobile:Bereich:ein:“No:Go”
‣ Retina:Displays:(zunehmend:im:Smartphone:und:Tablett:
Bereich:vertreten):verlangen:aber:nach:hochaufgelöstem:
Bildmaterial
‣ Ausgiebige:Tests:auf:allen:erdenklichen:Devices:sind:nahezu:
unmöglich:A:d.h.:nicht:zu:viele:Experimente:wagen

36. “
Web design is engineering:
it’s not about finding perfection,
it’s finding the best compromise.
Oliver Reichenstein - “responsive” Prophet

37. Ausblick

38. Ausblick
RVLT
‣ http://rvlt.com/

39. Rüdiger'von'Selzam'/'www.studioselzam.com
studioselzam