Slide 1
Slide 1 text
Christoph Reinartz
PHP Usergroup Düsseldorf - April 2014
Slide 2
Slide 2 text
Der Hauptdarsteller
• “Hello Website“ seit 2001
• Entwicklungslizenz seit 2010
• Frontend-Dev bei trivago seit 2012
!
@pistenprinz
#goveggie #miasanmia
Slide 3
Slide 3 text
Teil 1: Der Bauplan
Slide 4
Slide 4 text
http://bradfrostweb.com/blog/post/a-response-to-
responsive-web-design-is-not-the-future/
Slide 5
Slide 5 text
May the force be with you
Auf jedes
Device Dein
Design passen
muss!
Alles klar!?
Auf all den Geräten
soll dat laufen?
Slide 6
Slide 6 text
Abweichung von Ideal Parametern
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Die mobile Site...
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Bullshit
Bullshit
Bullshit
Bullshit
Bullshit
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Eine andere Definition
https://twitter.com/brad_frost
!
Slide 16
Slide 16 text
Ja guck ma hier! Dat
passt selbst auf der
Möhre da!
Slide 17
Slide 17 text
Alter Kontext
MODERNER BROWSER
FOKUSIERT
STATIONÄR
BEQUEM
SCHNELLE
VERBINDUNG
SCHNELLE
CPU
EFFIZIENTE EINGABE
Slide 18
Slide 18 text
http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Zutaten nach dem Rezept
von Ethan Marcotte
!
• Relative Maße
• Ein flexibles gridbasiertes Layout
• Flexible Images und Medien
• Media Queries
Slide 23
Slide 23 text
Sieh das mal relativ!
!
!
target / context = result
Erstellung relativer Maße: Fonts / Grids
Slide 24
Slide 24 text
Relative Angaben
24 / 16 = 1.5 && 12 / 24 = 0.5
Slide 25
Slide 25 text
Live Demo - Teil 1
Pixel Angaben vs. relative Angaben in em
!
https://github.com/creinartz/wnpwrg
Slide 26
Slide 26 text
Flexible Grids
• Designs / Layouts werden in Grids erstellt
• Statische Grids verlangen eine minimale /
festgelegte Bildschirmauflösung
!
Ein flexibles Grid?
Alles eine Frage des Context!
Slide 27
Slide 27 text
Flexible / fluid media
Fluid Images: max-width
http://clagnut.com/sandbox/imagetest/
img,
embed,
object,
video {
max-width: 100%;
}
Background-Images: CSS3, MediaQueries
Slide 28
Slide 28 text
Media Types
CSS 2.1 Media Types
!
!
Slide 29
Slide 29 text
Media Queries
CSS3
Nicht nur Device Typen sondern
Devicegerätetypische Eigenschaften abfragen
!
Slide 30
Slide 30 text
Media Queries
Mehrere Eigenschaften in einer Query
!
@media screen and (max-device-width: 480px) and
(resolution: 163dpi) {
.column {
float: none;
}
}
Slide 31
Slide 31 text
Viewport-Metatag
Mit Viewport-Metatag
viewport-width = device-width
!
Ohne Viewport-Metatag
Default-Canvas, Scaling
http://bkaprt.com/rwd/29
Slide 32
Slide 32 text
Live Demo - Teil 2
Layout Beispiel:
was nicht passt… wird responsive gemacht
!
https://github.com/creinartz/wnpwrg
Slide 33
Slide 33 text
Responsive Images
Slide 34
Slide 34 text
Responsive Images
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Responsive Images
• Optimized images
• Bitte ohne Hipster-JavaScript-Kram
• Cache / CDN
• Simple Code
• Fast
• Art Direction
Slide 37
Slide 37 text
Art Direction? Wat is dat?!
Slide 38
Slide 38 text
Art Direction!
Slide 39
Slide 39 text
Responsive Images - Techniken
• CSS Backgrounds
Art Direction, Schnell, CDN/Caching, NoJS
• SVG
Art Direction, CDN/Caching, NoJS
Code!!!
• RESS, Picturefill…
Slide 40
Slide 40 text
Eine neue Hoffnung:
srcset="med.png 1x,
med2x.png 2x">
http://responsiveimages.org/
http://responsiveimages.org/
Slide 41
Slide 41 text
Kein Browser-Support
Slide 42
Slide 42 text
Responsible RWD
Slide 43
Slide 43 text
http://bradfrostweb.com/
blog/post/beyond-squishy-
the-principles-of-adaptive-
design/
Responsible RWD
Slide 44
Slide 44 text
Klassischer Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-
responsive-project/
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
Responsive Workflow
http://blog.meltmedia.com/2013/04/a-clients-prep-guide-for-a-
responsive-project/
Slide 47
Slide 47 text
Ein Praxisbeispiel
Slide 48
Slide 48 text
Responsive oder mobile Site
• Parallel-Entwicklung
• Performance?
• Code-Redundanz
• Erhöhter Wartungsaufwand
Slide 49
Slide 49 text
Den Ferrari nicht schrotten!
http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-
webdesign-schrott-ist/
Slide 50
Slide 50 text
Die alternative Route
Sprünge statt fluid
• Aufwände reduzieren
• Breakpoints definieren
• Möglichst wenig Layout-Switches
Slide 51
Slide 51 text
„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?
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Desktop, iMac, Laptop
Slide 54
Slide 54 text
Landscape Tablet, Netbook
Slide 55
Slide 55 text
IPad, Tablets
Slide 56
Slide 56 text
Filterleiste einblendbar
Slide 57
Slide 57 text
Smartphone
Slide 58
Slide 58 text
Kritische Elemente bedienbar
Slide 59
Slide 59 text
Das Rezept
• Flexibilität statt Statik
• Altlasten soweit es geht entfernen
• Auf die wichtigen Inhalte konzentrieren
• Zielgruppen definieren
• Prototyping, Prototyping, Prototyping
Slide 60
Slide 60 text
Vorsicht bei…
• Schlecht strukturiertem Code
• Legacy-Code
!
Es muss eine gewisse Code-Qualität vorliegen,
ansonsten …
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Timeline Flat-Design
Flat Design Prototype
2 Wochen
Flat Design Implementierung
3 Wochen
Slide 63
Slide 63 text
Timeline RWD
RWD Konzeption
2 Wochen
RWD Prototype
3 Wochen
RWD Implementierung
3 Wochen
Slide 64
Slide 64 text
Ich habe fertig!
!
Slide 65
Slide 65 text
Danke! Prosit!