Your SlideShare is downloading. ×
0
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

121127 SouperTuesday "Responsive Webdesign"

150

Published on

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

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
150
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Willkommen zum
  • 2. SouperTuesdayam27.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)%beschreibtdie Geräteeigenschaftenabundstellen beschreibendieDarstellungeiner inhaltlicheStruktureinerWebsite diedaraufzugeschnittenenCSSN WebsitemitFarben,Verläufen,Layout imBrowser Eigenschaftenbereit. (Formen,GrößenundPositionen)und Schriften.
  • 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. 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:AnfangsA: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 580x420ca.200kb 280x200ca.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”‣ 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. “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üdigervonSelzam/www.studioselzam.com studioselzam

×