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

Was nicht passt wird responsive gemacht

Was nicht passt wird responsive gemacht

A Talk about Responsive Web Design at the PHP Usergroup Düsseldorf in April 2014

Christoph Reinartz

April 10, 2014
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. Der Hauptdarsteller • “Hello Website“ seit 2001 • Entwicklungslizenz seit

    2010 • Frontend-Dev bei trivago seit 2012 ! @pistenprinz #goveggie #miasanmia
  2. May the force be with you Auf jedes Device Dein

    Design passen muss! Alles klar!? Auf all den Geräten soll dat laufen?
  3. Eine Definition Responsive web design isn’t your site working on

    phones and tablets. It’s about your site working everywhere. https://twitter.com/ScottKellum
  4. Zutaten nach dem Rezept 
 von Ethan Marcotte ! •

    Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
  5. Sieh das mal relativ! ! ! target / context =

    result Erstellung relativer Maße: Fonts / Grids
  6. Live Demo - Teil 1 Pixel Angaben vs. relative Angaben

    in em ! https://github.com/creinartz/wnpwrg
  7. Flexible Grids • Designs / Layouts werden in Grids erstellt

    • Statische Grids verlangen eine minimale / festgelegte Bildschirmauflösung ! Ein flexibles Grid? 
 Alles eine Frage des Context!
  8. Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed,

    object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries
  9. Media Types CSS 2.1 Media Types ! <link rel="stylesheet" type="text/css"

    href="core.css" media="screen" /> ! <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  10. Media Queries CSS3 Nicht nur Device Typen sondern Devicegerätetypische Eigenschaften

    abfragen ! <link rel="stylesheet" type="text/css" href="style.css" media="screen and (device- width: 480px)" />
  11. Media Queries Mehrere Eigenschaften in einer Query ! @media screen

    and (max-device-width: 480px) and (resolution: 163dpi) { 
 .column { float: none; } }
  12. Viewport-Metatag <meta content="width=device-width, initial- scale=1.0" name="viewport" /> Mit Viewport-Metatag viewport-width

    = device-width ! Ohne Viewport-Metatag Default-Canvas, Scaling http://bkaprt.com/rwd/29
  13. Live Demo - Teil 2 Layout Beispiel: was nicht passt…

    wird responsive gemacht ! https://github.com/creinartz/wnpwrg
  14. Responsive Images • Optimized images • Bitte ohne Hipster-JavaScript-Kram •

    Cache / CDN • Simple Code • Fast • Art Direction
  15. Responsive Images - Techniken • CSS Backgrounds
 Art Direction, Schnell,

    CDN/Caching, NoJS • SVG
 Art Direction, CDN/Caching, NoJS
 Code!!! • RESS, Picturefill…
 

  16. Eine neue Hoffnung: <picture> <picture> 
 <source media="(min-width:601px)" srcset="med.png 1x,

    med2x.png 2x"> 
 <source src="small.png"> srcset="med.png 1x, med2x.png 2x"> 
 <!-- image fallback --> 
 <img src="med.png" alt="Horst"> 
 </picture>
 http://responsiveimages.org/
  17. Responsive Workflow • Flexible Layouts entstehen im Browser • HTML

    & CSS statt Photoshop • Es gibt keine statischen Entwürfe mehr • Content First: Die Layouts zeigen echte Inhalte • Keine Bilder von Webseiten erstellen
  18. Die alternative Route Sprünge statt fluid • Aufwände reduzieren •

    Breakpoints definieren • Möglichst wenig Layout-Switches
  19. „Full“ fluid – „Full“ responsive? • Wie sollen sich die

    Elemente verhalten? • Bei komplexen Designs führt dies oft zu Aufwands- und Spezifikationsexplosionen • Geschäftskritische Bereiche beachten • Wie ist das Userverhalten?
  20. Das Rezept • Flexibilität statt Statik • Altlasten soweit es

    geht entfernen • Auf die wichtigen Inhalte konzentrieren • Zielgruppen definieren • Prototyping, Prototyping, Prototyping
  21. Vorsicht bei… • Schlecht strukturiertem Code • Legacy-Code ! Es

    muss eine gewisse Code-Qualität vorliegen, ansonsten …