souper tuesday - responsive webdesign

39
Willkommen zum

Upload: studioselzam

Post on 20-Mar-2017

1.636 views

Category:

Design


7 download

TRANSCRIPT

Page 1: Souper Tuesday - Responsive Webdesign

Willkommen zum

Page 2: Souper Tuesday - Responsive Webdesign

Souper  Tuesday  am  27.11.2012

Responsive Webdesign

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

Page 3: Souper Tuesday - Responsive Webdesign

Überblick

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

Page 4: Souper Tuesday - Responsive Webdesign

“responsive”ansprechbar, reaktionsfähig

Page 8: Souper Tuesday - Responsive Webdesign

In unserem Fall ...

Page 9: Souper Tuesday - Responsive Webdesign

Content in verschiedenen Kontexten

Page 10: Souper Tuesday - Responsive Webdesign

Ein paar Zahlen

Page 11: Souper Tuesday - Responsive Webdesign

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

Page 12: Souper Tuesday - Responsive Webdesign

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/

Page 13: Souper Tuesday - Responsive Webdesign

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

Page 14: Souper Tuesday - Responsive Webdesign

So sieht’s aus

Page 15: Souper Tuesday - Responsive Webdesign

Responsive Websites

Am Bildschirm simuliert

‣http://resizemybrowser.com/

Page 16: Souper Tuesday - Responsive Webdesign

Responsive Websites

Beispiel: Sony Mobile

‣http://www.sonymobile.com/de/

Page 17: Souper Tuesday - Responsive Webdesign

Responsive Websites

Beispiel: edenspiekermann

‣http://edenspiekermann.com/de/

Page 18: Souper Tuesday - Responsive Webdesign

Responsive Websites

Beispiel: Simon Collison

‣http://colly.com/

Page 19: Souper Tuesday - Responsive Webdesign

Die Zutaten

Page 20: Souper Tuesday - Responsive Webdesign

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

Page 21: Souper Tuesday - Responsive Webdesign

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

Page 22: Souper Tuesday - Responsive Webdesign

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

Page 23: Souper Tuesday - Responsive Webdesign

Die Zutaten

Zum Glück nicht! Ich brauche “Fluid Grids”.

‣Umrechnung  harter  Pixelwerte  in  Prozente‣Definierung  von  Anfangs-­‐  und  Endpunkten

Page 24: Souper Tuesday - Responsive Webdesign

Die Zutaten

Fluid Grid Beispiele

‣http://www.lottanieminen.com

Page 25: Souper Tuesday - Responsive Webdesign
Page 26: Souper Tuesday - Responsive Webdesign

Die Zutaten

Fluid Grid Beispiele

‣http://crushlovely.com

Page 27: Souper Tuesday - Responsive Webdesign

Die Zutaten

Fluid Grid Beispiele

‣http://stephencaver.com

Page 28: Souper Tuesday - Responsive Webdesign

Das Rezept

Page 29: Souper Tuesday - Responsive Webdesign

Das Rezept

Breakpoints definieren

767 – 480 1024+ 1023 – 768 bis 479

Page 30: Souper Tuesday - Responsive Webdesign

Das Rezept

“mobile first”

bis 479

1

CSS

767 – 480

2

CSS

1023 – 768

3

CSS

1024+

4

CSS

Page 31: Souper Tuesday - Responsive Webdesign

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

Page 32: Souper Tuesday - Responsive Webdesign

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

Page 33: Souper Tuesday - Responsive Webdesign

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

Page 34: Souper Tuesday - Responsive Webdesign

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/

Page 35: Souper Tuesday - Responsive Webdesign

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

Page 36: Souper Tuesday - Responsive Webdesign

Web design is engineering: it’s not about finding perfection, it’s finding the best compromise.

Oliver Reichenstein - “responsive” Prophet

Page 37: Souper Tuesday - Responsive Webdesign

Ausblick

Page 38: Souper Tuesday - Responsive Webdesign

Ausblick

RVLT

‣http://rvlt.com/

Page 39: Souper Tuesday - Responsive Webdesign

Rüdiger  von  Selzam  /  www.studioselzam.com

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