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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI

Slide 4

Slide 4 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Fotoquelle:http://www.allnewsmac.com 2007: Apple revolutioniert das mobile Browsen im Internet

Slide 5

Slide 5 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Marktanteile - Browser Screen Resolution 5 Quelle: http://marketshare.hitslink.com

Slide 6

Slide 6 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Gerätetrends für Browsernutzung 6 Quelle: http://marketshare.hitslink.com

Slide 7

Slide 7 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI EU- Mobilfunkmarktes: Nutzungsverhalten 7

Slide 8

Slide 8 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 8 Ein responsiver Designprozess Fixed-width Adaptive Fluid Mobile first Responsive Break point

Slide 9

Slide 9 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 9 Pixelbasiertes Layout 90 px 90 px

Slide 10

Slide 10 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 240px bis 2560px

Slide 11

Slide 11 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI

Slide 12

Slide 12 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI http://mobile.southwest.com/

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

ST RESPONSIVE = ADAPTIVE + FLUID 14 Ein flexibles und geräteunabhängiges Design für das Web

Slide 15

Slide 15 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 15 Umdenken

Slide 16

Slide 16 text

ST Flexibles, grid-basiertes Layout Methode, nicht Technik 16

Slide 17

Slide 17 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Element ÷ Container = Ergebnis (from pixel to %)

Slide 18

Slide 18 text

ST 18 Planen Breakpoints 320px 480px 720px 1024px 1280px …

Slide 19

Slide 19 text

ST Flexible Bilder und Medientypen: max-width: 100% Methode nicht Technik 19

Slide 20

Slide 20 text

PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Beispiel 1024x768 1280x768 600x800 320x480

Slide 21

Slide 21 text

ST Media queries und CSS3 @media (min-width:500px) { … } @media screen and (min-device-width:800px) and (orientation: landscape) { … } Browser compatibility — viewports Methode nicht Technik 21

Slide 22

Slide 22 text

ST „Content first/Navigate second” von Luke Wroblewski - Für die Wirklichkeit gestalten - Guide - display:none ? Mobile first 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ST Praxis & Screenfly 24 Link responsive 1 Link responsive 2 Link nicht responsive Link adaptive Link für gute responsive Navi- gation

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ST ? FRAGEN ? PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 28