Was nicht passt wird responsive gemacht

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

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
8. Die mobile Site...
11. Bullshit Bullshit Bullshit Bullshit Bullshit
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/
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
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?
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 …
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!