Was nicht passt wird responsive gemacht

2,140 views
2,035 views

Published on

Responsive Web Design is a buzzword. Everyone has heard about it but most do not exactly know what it is in detail. In the first section this talk covers an introduction in responsive webdesign and what are the main technical aspects and workflow changes. the second part handles a success story of the real world project how to transform a non responsive site into a fluid one.

This talk was held on the PHP Usergroup Düsseldorf in April 2014.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,140
On SlideShare
0
From Embeds
0
Number of Embeds
806
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Was nicht passt wird responsive gemacht

  1. 1. Christoph Reinartz PHP Usergroup Düsseldorf - April 2014
  2. 2. Der Hauptdarsteller • “Hello Website“ seit 2001 • Entwicklungslizenz seit 2010 • Frontend-Dev bei trivago seit 2012 ! @pistenprinz #goveggie #miasanmia
  3. 3. Teil 1: Der Bauplan
  4. 4. http://bradfrostweb.com/blog/post/a-response-to- responsive-web-design-is-not-the-future/
  5. 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. 6. Abweichung von Ideal Parametern
  7. 7. Die mobile Site...
  8. 8. Bullshit Bullshit Bullshit Bullshit Bullshit
  9. 9. 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
  10. 10. Eine andere Definition https://twitter.com/brad_frost !
  11. 11. Ja guck ma hier! Dat passt selbst auf der Möhre da!
  12. 12. Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE
  13. 13. http://maddesigns.de/responsive-workflow/#11
  14. 14. Zutaten nach dem Rezept 
 von Ethan Marcotte ! • Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries
  15. 15. Sieh das mal relativ! ! ! target / context = result Erstellung relativer Maße: Fonts / Grids
  16. 16. Relative Angaben 24 / 16 = 1.5 && 12 / 24 = 0.5
  17. 17. Live Demo - Teil 1 Pixel Angaben vs. relative Angaben in em ! https://github.com/creinartz/wnpwrg
  18. 18. Flexible Grids • Designs / Layouts werden in Grids erstellt • Statische Grids verlangen eine minimale / festgelegte Bildschirmauflösung ! Ein flexibles Grid? 
 Alles eine Frage des Context!
  19. 19. Flexible / fluid media Fluid Images: max-width http://clagnut.com/sandbox/imagetest/ img, embed, object, video { max-width: 100%; } Background-Images: CSS3, MediaQueries
  20. 20. 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" />
  21. 21. 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)" />
  22. 22. Media Queries Mehrere Eigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 163dpi) { 
 .column { float: none; } }
  23. 23. 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
  24. 24. Live Demo - Teil 2 Layout Beispiel: was nicht passt… wird responsive gemacht ! https://github.com/creinartz/wnpwrg
  25. 25. Responsive Images
  26. 26. Responsive Images
  27. 27. Responsive Images • Optimized images • Bitte ohne Hipster-JavaScript-Kram • Cache / CDN • Simple Code • Fast • Art Direction
  28. 28. Art Direction? Wat is dat?!
  29. 29. Art Direction!
  30. 30. Responsive Images - Techniken • CSS Backgrounds
 Art Direction, Schnell, CDN/Caching, NoJS • SVG
 Art Direction, CDN/Caching, NoJS
 Code!!! • RESS, Picturefill…
 

  31. 31. 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/
  32. 32. Kein Browser-Support
  33. 33. Responsible RWD
  34. 34. http://bradfrostweb.com/ blog/post/beyond-squishy- the-principles-of-adaptive- design/ Responsible RWD
  35. 35. Klassischer Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/
  36. 36. 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
  37. 37. Responsive Workflow http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a- responsive-project/
  38. 38. Ein Praxisbeispiel
  39. 39. Responsive oder mobile Site • Parallel-Entwicklung • Performance? • Code-Redundanz • Erhöhter Wartungsaufwand
  40. 40. Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/
  41. 41. Die alternative Route Sprünge statt fluid • Aufwände reduzieren • Breakpoints definieren • Möglichst wenig Layout-Switches
  42. 42. „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?
  43. 43. Desktop, iMac, Laptop
  44. 44. Landscape Tablet, Netbook
  45. 45. IPad, Tablets
  46. 46. Filterleiste einblendbar
  47. 47. Smartphone
  48. 48. Kritische Elemente bedienbar
  49. 49. Das Rezept • Flexibilität statt Statik • Altlasten soweit es geht entfernen • Auf die wichtigen Inhalte konzentrieren • Zielgruppen definieren • Prototyping, Prototyping, Prototyping
  50. 50. Vorsicht bei… • Schlecht strukturiertem Code • Legacy-Code ! Es muss eine gewisse Code-Qualität vorliegen, ansonsten …
  51. 51. Timeline Flat-Design Flat Design Prototype 2 Wochen Flat Design Implementierung 3 Wochen
  52. 52. Timeline RWD RWD Konzeption 2 Wochen RWD Prototype 3 Wochen RWD Implementierung 3 Wochen
  53. 53. Ich habe fertig! !
  54. 54. Danke! Prosit!

×