Eine kurze Einführung zum Thema "responsive webdesign" von Rüdiger von Selzam (studioselzam) zum Souper Tuesday powered by Oseon.

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
CSS-­‐ 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
Anfangs-­‐
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”
‣ Rollover-­‐Effekte
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
-­‐
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