Sprachen
Seiten
Rechtliche
Willkommen zum
Souper Tuesday am 27.11.2012
Responsive Webdesign
s t u d i o s e l z a m
Überblick
‣Was ist “responsive”?‣Ein paar Zahlen‣So sieht’s aus‣Die Zutaten‣Das Rezept‣Ausblick
“responsive”ansprechbar, reaktionsfähig
http://www.core.form-ula.com/2008/05/17/skylite001/
http://www.core.form-ula.com/2008/05/17/skylite001/
http://www.core.form-ula.com/2008/05/17/skylite001/
In unserem Fall ...
Content in verschiedenen Kontexten
Ein paar Zahlen
Ein paar Zahlen
Mobile Webnutzung heute
Rund ein Drittel der Internet-Nutzer in Deutschland gehen auch mit dem Handy ins Internet. FORSA
33%
67%
Internet-‐Nutzer mit Handy
Rund ein Fünftel des Internet-Traffics in den USA wird über mobile Geräte genutzt. CHITIKA
80%
6%
15%
Smartphones Tablets
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/
Ein paar Zahlen
Wir nutzen etliche Formate und Bildschirmgrößen
768 x 1024
768 x 1024
1024 x 768
480 x 320
1024 x 768
320 x 568
540 x 960
960 x 540
1280 x 800
800 x 1280
320 x 480
960 x 540
540 x 9601366 x 768
1440 x 900
2560 x 14401920 x 10801440 x 900
1280 x 800
So sieht’s aus
Responsive Websites
Am Bildschirm simuliert
‣http://resizemybrowser.com/
Responsive Websites
Beispiel: Sony Mobile
‣http://www.sonymobile.com/de/
Responsive Websites
Beispiel: edenspiekermann
‣http://edenspiekermann.com/de/
Die Zutaten
Die Zutaten
Responsive Websites bestehen aus:
‣ HTML (Hypertext Markup Language) beschreibt die inhaltliche Struktur einer Website im Browser
‣ CSS (Cascading Stylesheets) beschreiben die Darstellung einer Website mit Farben, Verläufen, Layout (Formen, Größen und Positionen) und Schriften.
HTML
5 3CSS
‣ Media Queries fragen Geräteeigenschaften ab und stellen die darauf zugeschnittenen CSS-‐Eigenschaften bereit.
MEDIA QUERIES
MEDIA QUERIES
CSS
CSSCSS
CSSCSS
CSSCSS
CSSCSS
CSSCSS
Die Zutaten
Media Queries und diverse Stylesheets erzeugen die Responsive Website
Ständige Abfrage der Geräteeigenschaften
Responsive WebsiteAuswahl des StylesheetsHTML
Die Zutaten
Brauche ich für jedes Gerät ein eigenes CSS?
3CSS
3CSS
3CSS
3CSS
3CSS 3
CSS
3CSS
3CSS
3CSS
3CSS
3CSS
3CSS
3CSS
3CSS
3CSS
Die Zutaten
Zum Glück nicht! Ich brauche “Fluid Grids”.
‣Umrechnung harter Pixelwerte in Prozente‣Definierung von Anfangs-‐ und Endpunkten
Die Zutaten
Fluid Grid Beispiele
‣http://www.lottanieminen.com
Die Zutaten
Fluid Grid Beispiele
‣http://crushlovely.com
Die Zutaten
Fluid Grid Beispiele
‣http://stephencaver.com
Das Rezept
Das Rezept
Breakpoints definieren
767 – 480 1024+ 1023 – 768 bis 479
Das Rezept
“mobile first”
bis 479
1
CSS
767 – 480
2
CSS
1023 – 768
3
CSS
1024+
4
CSS
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
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
Das Rezept
Verwendung von Bildern
‣Um lange Ladezeiten zu vermeiden, müssen Bilder in unterschiedlichen Größen bereitgestellt werden.
‣ Desktop Thumbnail580 x 420 ca. 200kb
200kb
‣ Mobile Thumbnail280 x 200 ca. 30kb
30kb
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 die Laufweite der Schrift vergrößert werden
‣Bei der Gestaltung von Desktop Websites werden häufig zu kleine Schriftgrößen verwendet
http://informationarchitects.net/blog/responsive-typography-the-basics/
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
Web design is engineering: it’s not about finding perfection, it’s finding the best compromise.
Oliver Reichenstein - “responsive” Prophet
“
Ausblick
Rüdiger von Selzam / www.studioselzam.com
s t u d i o s e l z a m