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.

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://maddesigns.de/responsive-workflow/#11

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!