Souper Tuesday - Responsive Webdesign
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Souper Tuesday - Responsive Webdesign

on

  • 1,041 views

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

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

Statistics

Views

Total Views
1,041
Views on SlideShare
885
Embed Views
156

Actions

Likes
2
Downloads
12
Comments
0

1 Embed 156

http://www.oseon.com 156

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Presentation Transcript

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