Save 37% off PRO during our Black Friday Sale! »

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

030423e4497440d3286862d2106b8eba?s=128

Christoph Reinartz

April 10, 2014
Tweet

Transcript

  1. Christoph Reinartz PHP Usergroup Düsseldorf - April 2014

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

    2010 • Frontend-Dev bei trivago seit 2012 ! @pistenprinz #goveggie #miasanmia
  3. Teil 1: Der Bauplan

  4. http://bradfrostweb.com/blog/post/a-response-to- responsive-web-design-is-not-the-future/

  5. May the force be with you Auf jedes Device Dein

    Design passen muss! Alles klar!? Auf all den Geräten soll dat laufen?
  6. Abweichung von Ideal Parametern

  7. None
  8. Die mobile Site...

  9. None
  10. None
  11. Bullshit Bullshit Bullshit Bullshit Bullshit

  12. None
  13. None
  14. 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
  15. Eine andere Definition https://twitter.com/brad_frost !

  16. Ja guck ma hier! Dat passt selbst auf der Möhre

    da!
  17. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE

    CPU EFFIZIENTE EINGABE
  18. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/

  19. None
  20. None
  21. None
  22. Zutaten nach dem Rezept 
 von Ethan Marcotte ! •

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

    result Erstellung relativer Maße: Fonts / Grids
  24. Relative Angaben 24 / 16 = 1.5 && 12 /

    24 = 0.5
  25. Live Demo - Teil 1 Pixel Angaben vs. relative Angaben

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

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

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

    and (max-device-width: 480px) and (resolution: 163dpi) { 
 .column { float: none; } }
  31. 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
  32. Live Demo - Teil 2 Layout Beispiel: was nicht passt…

    wird responsive gemacht ! https://github.com/creinartz/wnpwrg
  33. Responsive Images

  34. Responsive Images

  35. None
  36. Responsive Images • Optimized images • Bitte ohne Hipster-JavaScript-Kram •

    Cache / CDN • Simple Code • Fast • Art Direction
  37. Art Direction? Wat is dat?!

  38. Art Direction!

  39. Responsive Images - Techniken • CSS Backgrounds
 Art Direction, Schnell,

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

  40. 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/
  41. Kein Browser-Support

  42. Responsible RWD

  43. http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD

  44. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/

  45. 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
  46. Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/

  47. Ein Praxisbeispiel

  48. Responsive oder mobile Site • Parallel-Entwicklung • Performance? • Code-Redundanz

    • Erhöhter Wartungsaufwand
  49. Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/

  50. Die alternative Route Sprünge statt fluid • Aufwände reduzieren •

    Breakpoints definieren • Möglichst wenig Layout-Switches
  51. „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?
  52. None
  53. Desktop, iMac, Laptop

  54. Landscape Tablet, Netbook

  55. IPad, Tablets

  56. Filterleiste einblendbar

  57. Smartphone

  58. Kritische Elemente bedienbar

  59. Das Rezept • Flexibilität statt Statik • Altlasten soweit es

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

    muss eine gewisse Code-Qualität vorliegen, ansonsten …
  61. None
  62. Timeline Flat-Design Flat Design Prototype 2 Wochen Flat Design Implementierung

    3 Wochen
  63. Timeline RWD RWD Konzeption 2 Wochen RWD Prototype 3 Wochen

    RWD Implementierung 3 Wochen
  64. Ich habe fertig! !

  65. Danke! Prosit!