Responsive Web Design

Vortrag am Internetbriefing 6.9.2011

Transcript

1. Responsive Web Design Zürich, 6.9.2011 Vedran Rudelj rudelj.mobile
2. Vedran Rudelj, Web Developer @vedi 1996: Erstes Mobiltelefon 2004: Abschluss Betriebsökonom FH mit Vertiefung Unternehmensführung / KMU & Telecommunications Analyst 2005-2009: IT Project Management & Business Analyse. 2010: Selbständigkeit als Mobile Web Developer & Berater.
3. Agenda 1 2 3 Entwicklung mobiler Technologie Web Design heute Responsive Design
4. Smartphones Über 1.2 Mio. iPhones und hundertausende Androids und Blackberries alleine in der Schweiz. (Schätzungen - keine offiziellen Daten vorhanden) Tablets Fast die Hälfe der Tablet Besitzer verbringt mehr Zeit mit ihrem Tablet als mit Laptop oder Desktop PC. Ein Drittel der User verbringen mehr Zeit mit ihrem Tablet als vor dem Fernseher. Quelle: admob Tablet Survey by Google, März 2011 Steigende Anzahl mobiler Geräte intensivere Nutzung
5. 1.82 billion web-enabled mobiles by 2013 1.8 Milliarden web-taugliche Mobilgeräte in 2013 Das Web geht mobil Ein Massenmedium
6. Browser August 2011 Opera 22% Android 20% Safari 19% Nokia 17% Blackberry 12% andere 10% Der mobile Web Browser Global Browser Statistik - http://www.quirksmode.org/blog/archives/2011/09/mobile_browser_13.html
7. Fix ~960px breites Layout ist nicht optimal
8. Zwei Webseiten mobile UND klassiche Webseite User Agent Sniffing Mobile Phones PCs m.yoursite.ch yoursite.ch
9. Native Apps nicht universell einsetzbar
10. eine Webseite ein HTML Dokument ein Design ein Erlebnis für verschiedene Geräte und Displays
11. Ein Artikel von Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
12. Smartphone 320px Tablet 768px Desktop 1600px Laptop 1024px Responsive Web Design - Ein Beispiel
13. Smartphone 320px Tablet 768px Desktop 1600px Laptop 1024px
14. Smartphone 320px Tablet 768px Desktop 1600px Laptop 1024px
15. http://www.mediaqueri.es/
16. Was ist Responsive Web Design? RWD Flexible Grid Media Queries Flexible Images & media
17. RWD Flexible Grid HTML, CSS #page { font-size:16px; width: 960px; margin: 0 auto; } #page { font-size: 100%; width: 90%; margin: 0 auto; } flexible • Schriftgrössen • margins • paddings • widths etc. px em, % Ein flexibles Grid
18. #home .main { float: left; width: 62.8888889%; /* 566px / 900px */} #home .other { float: right; width: 36.7777778%; /* 331px / 900px */} Die magische Formel Ziel / Kontext = Resultat
19. @media screen {...} @media print {...} RWD Media Queries @media screen and (min-width: 640px) {...} @media screen and (min-width: 1024px) {...} etc. CSS 3 Media Queries eine W3C Candidate Recommendation
20. Set the viewport <meta name="viewport" content="initial-scale=1.0, width=device-width" />
21. RWD Flexible Images & media img, embed, object, video { max-width: 100%; } Flexible Bilder und andere Medien
22. separate IE6-specific stylesheet: img,embed,object,video { width: 100%; } .logo { background: none; filter: progid:DXImageTransform.Microsoft. » AlphaImageLoader(src="/path/to/logo.png", » sizingMethod="scale"); } javascript support for IE8 and lower: css3-mediaqueries.js respond.js Internet Explorer workarounds
23. RWD im Detail das Buch von Ethan Marcotte
24. Responsive Web Design with a Mobile First Approach Start small
25. In der Praxis Hin und her zwischen Design & Development Sehr häufiges Resizing Testing auf verschiedenen Endgeräten
26. responsive adaptive dribbble.com anderssonwise.com foodsense.is ethanmarcotte.com
27. Wieso ist das wichtig?
28. “Samsung now has: 2.8 3.2 3.5 3.7 4 4.3 4.5 5.3 7 7.7 8.9 10.1 inch screen Androids. Where's the 6-incher Sammy? Get on the case!” @saschasegan, pcmag.com, Sept 1 2011
29. Web auf TV
30. Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. - Andy Clarke @malarkey I don’t care about Responsive Web Design
31. One Web
32. Vielen Dank. @vedi Fragen?