Souper Tuesday - Responsive Webdesign

transcript

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/

In unserem Fall ...

Content in verschiedenen Kontexten

Ein paar Zahlen

Mobile Webnutzung heute

Rund ein Drittel der Internet-Nutzer in Deutschland gehen auch mit dem Handy ins Internet. FORSA

Internet-‐Nutzer mit Handy

Rund ein Fünftel des Internet-Traffics in den USA wird über mobile Geräte genutzt. CHITIKA

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

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/

Responsive Websites

Beispiel: Simon Collison

‣http://colly.com/

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.

5 3CSS

‣ Media Queries fragen Geräteeigenschaften ab und stellen die darauf zugeschnittenen CSS-‐Eigenschaften bereit.

MEDIA QUERIES

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 3

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

‣http://crushlovely.com

Die Zutaten

‣http://stephencaver.com

Das Rezept

Breakpoints definieren

767 – 480 1024+ 1023 – 768 bis 479

Das Rezept

“mobile first”

bis 479

767 – 480

1023 – 768

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

‣ Mobile Thumbnail280 x 200 ca. 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

‣http://rvlt.com/

Rüdiger von Selzam / www.studioselzam.com

s t u d i o s e l z a m

Souper Tuesday - Responsive Webdesign

Design