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

Was nicht passt wird responsive gemacht - Exten...

Was nicht passt wird responsive gemacht - Extended Edition

Die überarbeitete Version meiner Responsive Web Design Präsentation, vorgetragen auf dem Learners Meetup der Open Tech School Dortmund

Christoph Reinartz

September 17, 2014
Tweet

More Decks by Christoph Reinartz

Other Decks in Technology

Transcript

  1. /* About me */ .me { name: “Christoph Reinartz“; link:

    “http://creinartz.de“; twitter: “@pistenprinz“; location: “Mönchengladbach“; } .job--trv { company: “trivago GmbH“; title: “Front-end Developer“; from: “November 2012“; responsibilities: “Coordination UI-Development“, “Front-end/CSS architecture“; }
  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. Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell

    auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent
  4. Beispiel: The Boston Globe • Full „fluid“ responsive • fluid

    innerhalb der Breakpoints • funktioniert gut bei textlastigen Seiten http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  5. 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
  6. Zutaten nach dem Rezept 
 von Ethan Marcotte ! •

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

    result Erstellung relativer Maße: Fonts / Grids
  8. Flexible Grids / Maße #page { max-width: 61.75em; /* 988px

    / 16px = 61.75em */ } h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ } !
  9. Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed,

    object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries
  10. 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" />
  11. 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)" />
  12. Media Queries Mehrere Eigenschaften in einer Query ! @media screen

    and (max-device-width: 480px) and (resolution: 163dpi) { 
 .column { float: none; } }
  13. 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 ~980px http://bkaprt.com/rwd/29
  14. The Truth… Your visitors don’t give 
 a shit if

    your site 
 is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  15. Mobile Strategie You May Be Losing Users 
 If Responsive

    Web Design Is Your Only Mobile Strategy http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
  16. Page Sizes 72% of responsive websites deliver the same number

    of bytes regardless of screen size, even on slow mobile network connections. 
 http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/