Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MOBILE KONTEXTE UND RESPONSIVE WEBDESIGN PLONE ...

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.

Stefania Trabucchi

October 09, 2012
Tweet

More Decks by Stefania Trabucchi

Other Decks in Programming

Transcript

  1. 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
  2. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI Marktanteile - Browser

    Screen Resolution 5 Quelle: http://marketshare.hitslink.com
  3. PLONE KONFERENZ MÜNCHEN 2012 *** STEFANIA TRABUCCHI 8 Ein responsiver

    Designprozess Fixed-width Adaptive Fluid Mobile­ first Responsive Break point
  4. 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)
  5. ST RESPONSIVE = ADAPTIVE + FLUID 14 Ein flexibles und

    geräteunabhängiges Design für das Web
  6. 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
  7. ST „Content first/Navigate second” von Luke Wroblewski - Für die

    Wirklichkeit gestalten - Guide - display:none ? Mobile first 22
  8. 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
  9. ST Praxis & Screenfly 24 Link responsive 1 Link responsive

    2 Link nicht responsive Link adaptive Link für gute responsive Navi- gation
  10. 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.
  11. 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
  12. 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