Willkommen zum
Souper	  Tuesday	  am	  27.11.2012Responsive Webdesign                studioselzam
Ü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 ZahlenMobile Webnutzung heute                                                                       15%        33...
Ein paar ZahlenMobile Webnutzung in der Zukunft http://www.q4blog.com/2012/07/11/cisco-systems-report-mobile-traffic-doubled...
Ein paar ZahlenWir nutzen etliche Formate und Bildschirmgrößen          768 x 1024               540 x 960                ...
So sieht’s aus
Responsive WebsitesAm Bildschirm simuliert                          ‣ http://resizemybrowser.com/
Responsive WebsitesBeispiel: Sony Mobile‣ http://www.sonymobile.com/de/
Responsive WebsitesBeispiel:edenspiekermann‣ http://edenspiekermann.com/de/
Responsive WebsitesBeispiel:Simon Collison‣ http://colly.com/
Die Zutaten
Die ZutatenResponsive Websites bestehen aus:       HTML                                                    MEDIA QUERIES  ...
Die Zutaten Media Queries und diverse Stylesheets erzeugen die Responsive Website                                         ...
Die Zutaten Brauche ich für jedes Gerät ein eigenes CSS?                                                          CSSCSS  ...
Die ZutatenZum Glück nicht! Ich brauche “Fluid Grids”.‣ Umrechnung	  harter	  Pixelwerte	  in	  Prozente‣ Definierung	  vo...
Die ZutatenFluid Grid Beispiele‣ http://www.lottanieminen.com
Die ZutatenFluid Grid Beispiele‣ http://crushlovely.com
Die ZutatenFluid Grid Beispiele‣ http://stephencaver.com
Das Rezept
Das RezeptBreakpoints definieren             1024+      1023 – 768   767 – 480   bis 479
Das Rezept“mobile first”                                                    4      1            2               3CSS       ...
KochstundeWarum “mobile first”?‣ Wegen des geringen Platzes auf mobilen Geräten,  müssen Inhalte und Features von Anfang an...
People are increasingly fed up withthe sheer amount of crap that theyhave to deal with on web pages.Luke Wroblewski - “mob...
Das RezeptVerwendung von Bildern                                              200kb                                       ...
Das RezeptTypografie‣ Schriftgrößen müssen grundsätzlich auf das  jeweilige Gerät angepasst werden‣ Das Hauptkriterium zur ...
Das RezeptWeitere Herausforderungen von“responsive webdesign”‣ Rollover-­‐Effekte	  sind	  auf	  Touchscreens	  nicht	  si...
“Web design is engineering:it’s not about finding perfection,it’s finding the best compromise.Oliver Reichenstein - “respons...
Ausblick
AusblickRVLT‣ http://rvlt.com/
Rüdiger	  von	  Selzam	  /	  www.studioselzam.com                  studioselzam
Souper Tuesday - Responsive Webdesign
Nächste SlideShare
Wird geladen in …5
×

Souper Tuesday - Responsive Webdesign

1.523 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.523
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
223
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Souper Tuesday - Responsive Webdesign

    1. 1. Willkommen zum
    2. 2. Souper  Tuesday  am  27.11.2012Responsive Webdesign studioselzam
    3. 3. Überblick‣Was  ist  “responsive”?‣Ein  paar  Zahlen‣So  sieht’s  aus‣Die  Zutaten‣Das  Rezept‣Ausblick
    4. 4. “responsive” ansprechbar, reaktionsfähig
    5. 5. http://www.core.form-ula.com/2008/05/17/skylite001/
    6. 6. http://www.core.form-ula.com/2008/05/17/skylite001/
    7. 7. http://www.core.form-ula.com/2008/05/17/skylite001/
    8. 8. In unserem Fall ...
    9. 9. Content in verschiedenen Kontexten
    10. 10. Ein paar Zahlen
    11. 11. Ein paar ZahlenMobile 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. 12. Ein paar ZahlenMobile 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. 13. Ein paar ZahlenWir 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. 14. So sieht’s aus
    15. 15. Responsive WebsitesAm Bildschirm simuliert ‣ http://resizemybrowser.com/
    16. 16. Responsive WebsitesBeispiel: Sony Mobile‣ http://www.sonymobile.com/de/
    17. 17. Responsive WebsitesBeispiel:edenspiekermann‣ http://edenspiekermann.com/de/
    18. 18. Responsive WebsitesBeispiel:Simon Collison‣ http://colly.com/
    19. 19. Die Zutaten
    20. 20. Die ZutatenResponsive 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. 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 CSSCSS CSS CSS MEDIA QUERIES Ständige  Abfrage  der  Geräteeigenschaften
    22. 22. Die Zutaten Brauche ich für jedes Gerät ein eigenes CSS? CSSCSS CSS CSS 33 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. 23. Die ZutatenZum Glück nicht! Ich brauche “Fluid Grids”.‣ Umrechnung  harter  Pixelwerte  in  Prozente‣ Definierung  von  Anfangs-­‐  und  Endpunkten
    24. 24. Die ZutatenFluid Grid Beispiele‣ http://www.lottanieminen.com
    25. 25. Die ZutatenFluid Grid Beispiele‣ http://crushlovely.com
    26. 26. Die ZutatenFluid Grid Beispiele‣ http://stephencaver.com
    27. 27. Das Rezept
    28. 28. Das RezeptBreakpoints definieren 1024+ 1023 – 768 767 – 480 bis 479
    29. 29. Das Rezept“mobile first” 4 1 2 3CSS CSS CSS CSS bis 479 767 – 480 1023 – 768 1024+
    30. 30. KochstundeWarum “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
    31. 31. People are increasingly fed up withthe sheer amount of crap that theyhave to deal with on web pages.Luke Wroblewski - “mobile first” Prophet
    32. 32. Das RezeptVerwendung 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.
    33. 33. Das RezeptTypografie‣ 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
    34. 34. Das RezeptWeitere 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
    35. 35. “Web design is engineering:it’s not about finding perfection,it’s finding the best compromise.Oliver Reichenstein - “responsive” Prophet
    36. 36. Ausblick
    37. 37. AusblickRVLT‣ http://rvlt.com/
    38. 38. Rüdiger  von  Selzam  /  www.studioselzam.com studioselzam

    ×