MOBILE KONTEXTE UND RESPONSIVE WEBDESIGN PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI

Mit dem Ansatz des Responsive Webdesign, einem Design also, das auf etwas „reagiert“, den neuen technischen
Entwicklungstandards des W3C mit HTML5 und CCS3 sowie der raschen Browserentwicklung stehen dem
Webentwickler neue Chancen bereit, flexibles und geräteunabhängiges Design zu gestalten und kontextrelevante
Informationen je nach Endgerät bereitzustellen. Pixel-genaue Layouts werden durch dynamische bzw.
prozentualdefinierte Layouts ersetzt. Basierend auf flexiblem, bzw. grid-basiertem Layout, flexiblen Medien
(Images, Videos und Objects) und Media Queries werden somit anpassungsfähige Layouts erstellt. Der Vortrag
zeigt, wie Webseiten für die verschiedensten Gerätetypen entwickelt werden können, was bei Responsive
Webdesign berücksichtigt werden sollte und wo die Grenzen dieser Techniken liegen.

Transcript

1. ST MOBILE KONTEXTE UND RESPONSIVE WEBDESIGN PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 1
2. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 2 Fixed-Position Navigation 3D illusion mit Parallax-Scrol- ling Custom @fontface QR-Codes TouchScreens Responsive Web Design Infographics Circles and Shapes Big Vector Art Multi-Column Menus jQuery/CSS3/HTML5 Animation Ribbons & Banner Graphics Focus on Simplicity TRENDS 2012
3. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI
4. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Fotoquelle:http://www.allnewsmac.com 2007: Apple revolutioniert das mobile Browsen im Internet
5. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Marktanteile - Browser Screen Resolution 5 Quelle: http://marketshare.hitslink.com
6. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Gerätetrends für Browsernutzung 6 Quelle: http://marketshare.hitslink.com
7. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI EU- Mobilfunkmarktes: Nutzungsverhalten 7
8. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 8 Ein responsiver Designprozess Fixed-width Adaptive Fluid Mobile­ first Responsive Break point
9. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 9 Pixelbasiertes Layout 90 px 90 px
10. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 240px bis 2560px
11. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI
12. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI http://mobile.southwest.com/
13. ST Es ist nicht gesagt, daß es besser wird, wenn es anders wird. Wenn es aber besser werden soll, muß es anders werden. 13 Georg Christoph Lichtenberg Deutscher Physiker und Schriftsteller (1742-1799)
14. ST RESPONSIVE = ADAPTIVE + FLUID 14 Ein flexibles und geräteunabhängiges Design für das Web
15. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 15 Umdenken
16. ST Flexibles, grid-basiertes Layout Methode, nicht Technik 16
17. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Element ÷ Container = Ergebnis (from pixel to %)
18. ST 18 Planen Breakpoints 320px 480px 720px 1024px 1280px …
19. ST Flexible Bilder und Medientypen: max-width: 100% Methode nicht Technik 19
20. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Beispiel 1024x768 1280x768 600x800 320x480
21. ST Media queries und CSS3 <link rel=“stylesheet“ media=“screen and (min-device-width: 800px)“ href=“example.css“ /> @media (min-width:500px) { … } @media screen and (min-device-width:800px) and (orientation: landscape) { … } Browser compatibility — viewports Methode nicht Technik 21
22. ST „Content first/Navigate second” von Luke Wroblewski - Für die Wirklichkeit gestalten - Guide - display:none ? Mobile first 22
23. ST Relevante Inhalte zum Kontext, IA, mit dem Design für niedrige Auflösung anfangen, Einfache Struktur, Typo&Farben, langsame Internetverbindungen berücksichtigen, kurze Aufmerksamkeit der Nutzer, Screentouch, Portrait & Landscape, überflüssige Inhalte entfernen Mobile first 23
24. ST Praxis & Screenfly 24 Link responsive 1 Link responsive 2 Link nicht responsive Link adaptive Link für gute responsive Navi- gation
25. ST We’re just now starting to get into mobile first and then web second for a lot of our products. 25 Kate Aronowitz, Facebook’s Director of Design.
26. ST Der gestalterische Prozess ist das Schwierigste (Initiale Planung ist sehr wichtig) Informationarchitektur wird damit immer relevanter, auch auf Kundenseite sind die Anforderungen gewachsen Breakpoint vs. natural breakpoint (Content und em basierend) Responsive Web Design ist nicht Mobiles Webdesign (Beispiel) Schatten der Vergangenheit: Mobile IE und fehlende Unterstüzung von Media- Queries 26 Überlegungen
27. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Ethan Marcotte’s Responsive Web Design Luke Wroblewski’s Mobile First http://t3n.de/news/10-wichtigsten-webdesign-trends-2012-351316/ http://marketshare.hitslink.com/ http://www.w3schools.com/browsers/browsers_resolution_higher.asp http://www.comscore.com/ger/Press_Events/Press_Releases/2011/11/Mobile_Social_Networking_ Audience_Grew_44_Percent_Over_Past_Year_in_EU5 http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ http://hicksdesign.co.uk/goodies/ http://960.gs/demo.html http://www.w3.org/TR/CSS2/media.html http://www.w3.org/TR/css3-mediaqueries/ http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html http://www.quirksmode.org/mobile/#t14 http://www.lukew.com/ff/entry.asp?1142 27 Danke
28. ST ? FRAGEN ? PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 28