121127 SouperTuesday "Responsive Webdesign"

286 views
238 views

Published on

Creative Director Rüdiger von Selzam, studioselzam: Einführung in das Thema "Responsive Webdesign" auf Oseon's SouperTuesday am 27.11.12

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
286
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

121127 SouperTuesday "Responsive Webdesign"

  1. 1. Willkommen zum
  2. 2. SouperTuesdayam27.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)%beschreibtdie Geräteeigenschaftenabundstellen beschreibendieDarstellungeiner inhaltlicheStruktureinerWebsite diedaraufzugeschnittenenCSSN WebsitemitFarben,Verläufen,Layout imBrowser Eigenschaftenbereit. (Formen,GrößenundPositionen)und Schriften.
  21. 21. Die Zutaten Media Queries und diverse Stylesheets erzeugen die Responsive Website HTML AuswahldesStylesheets ResponsiveWebsite CSS CSS CSS CSS CSS CSS CSS CSSCSS CSS CSS MEDIA QUERIES StändigeAbfragederGerä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:AnfangsA: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 580x420ca.200kb 280x200ca.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”‣ RolloverAEffekte: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:A: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üdigervonSelzam/www.studioselzam.com studioselzam

×