Was nicht passt wird responsive gemacht - Extended Edition

Slide 1

Slide 1 text

Christoph Reinartz EXTENDED VERSION

Slide 2

Slide 2 text

/* About me */ .me { name: “Christoph Reinartz“; link: “http://creinartz.de“; twitter: “@pistenprinz“; location: “Mönchengladbach“; } .job--trv { company: “trivago GmbH“; title: “Front-end Developer“; from: “November 2012“; responsibilities: “Coordination UI-Development“, “Front-end/CSS architecture“; }

Slide 3

Slide 3 text

Die Ausgangslage

Slide 4

Slide 4 text

https://www.flickr.com/photos/glenscott/509720363

Slide 5

Slide 5 text

https://www.flickr.com/photos/lukew/10430507184/

Slide 6

Slide 6 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 7

Slide 7 text

Abweichung von Ideal Parametern

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Mobiler traffic

Slide 10

Slide 10 text

https://www.flickr.com/photos/janitors/10081142374

Slide 11

Slide 11 text

https://www.flickr.com/photos/scaar/8473324580

Slide 12

Slide 12 text

Der klassische Ansatz • 2 Webseiten • Desktop-Seite • speziell auf mobile Geräte angepasste mobile Seite • Redirect auf m. * je nach User-Agent

Slide 13

Slide 13 text

Die mobile Site...

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Bullshit

Slide 16

Slide 16 text

Bullshit Bullshit Bullshit Bullshit Bullshit

Slide 17

Slide 17 text

Der responsive Ansatz Eine Webseite, die sich automatisch dem Device (Screen-Größe) anpasst

Slide 18

Slide 18 text

Beispiel: The Boston Globe • Full „fluid“ responsive • fluid innerhalb der Breakpoints • funktioniert gut bei textlastigen Seiten http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Beispiel: trivago • Sprungstufen-basiertes Layout • innerhalb der Breakpoints fixe Darstellung • ohne kompletten Relaunch möglich

Slide 21

Slide 21 text

Desktop, iMac, Laptop

Slide 22

Slide 22 text

Landscape Tablet, Netbook

Slide 23

Slide 23 text

IPad, Tablets

Slide 24

Slide 24 text

Filterleiste einblendbar

Slide 25

Slide 25 text

Smartphone

Slide 26

Slide 26 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 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Alter Kontext MODERNER BROWSER FOKUSIERT STATIONÄR BEQUEM SCHNELLE VERBINDUNG SCHNELLE CPU EFFIZIENTE EINGABE

Slide 32

Slide 32 text

960 https://www.flickr.com/photos/tomwachtel/14015354802

Slide 33

Slide 33 text

2007 https://www.flickr.com/photos/dahlstroms/6750733205

Slide 34

Slide 34 text

http://maddesigns.de/responsive-workflow/#11

Slide 35

Slide 35 text

Android Fragmentation http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

https://www.flickr.com/photos/adactio/5818096043

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Zutaten nach dem Rezept   von Ethan Marcotte ! • Relative Maße • Ein flexibles gridbasiertes Layout • Flexible Images und Medien • Media Queries

Slide 41

Slide 41 text

Sieh das mal relativ! ! ! target / context = result Erstellung relativer Maße: Fonts / Grids

Slide 42

Slide 42 text

EMs nutzen • skalierbare Einheit • 1em = aktuelle Fontgröße • 2em = doppelte Fontgröße

Slide 43

Slide 43 text

Flexible Grids / Maße #page { max-width: 61.75em; /* 988px / 16px = 61.75em */ } h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ } !

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 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 46

Slide 46 text

Media Types CSS 2.1 Media Types ! !

Slide 47

Slide 47 text

Media Queries CSS3 Nicht nur Device Typen sondern Devicegerätetypische Eigenschaften abfragen !

Slide 48

Slide 48 text

Media Queries Mehrere Eigenschaften in einer Query ! @media screen and (max-device-width: 480px) and (resolution: 163dpi) {   .column { float: none; } }

Slide 49

Slide 49 text

Viewport https://www.flickr.com/photos/mendhak/2252824493

Slide 50

Slide 50 text

Viewport-Metatag Mit Viewport-Metatag viewport-width = device-width ! Ohne Viewport-Metatag Default-Canvas ~980px http://bkaprt.com/rwd/29

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

53 https://www.flickr.com/photos/the-magic-tuba-pixie/5806342006 Prototype

Slide 54

Slide 54 text

Prototype A Prototype is worth  a thousand meetings

Slide 55

Slide 55 text

Aus der Praxis

Slide 56

Slide 56 text

A/B Testing https://www.flickr.com/photos/esparta/4482887906

Slide 57

Slide 57 text

Der User schlägt zurück

Slide 58

Slide 58 text

Der User schlägt zurück https://www.flickr.com/photos/95284782@N06/8880500036

Slide 59

Slide 59 text

The Truth… Your visitors don’t give   a shit if your site   is responsive. http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Mobile Strategie You May Be Losing Users   If Responsive Web Design Is Your Only Mobile Strategy http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/

Slide 65

Slide 65 text

Page Sizes 72% of responsive websites deliver the same number of bytes regardless of screen size, even on slow mobile network connections.   http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

Slide 66

Slide 66 text

Den Ferrari nicht schrotten! http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive- webdesign-schrott-ist/

Slide 67

Slide 67 text

Verbesserungen https://www.flickr.com/photos/91173606@N00/3448611327

Slide 68

Slide 68 text

Gleiche URL, aber andere Struktur https://www.flickr.com/photos/chrisdlugosz/3402955869

Slide 69

Slide 69 text

Mobile First Ansatz wählen https://www.flickr.com/photos/pixel_boogie/3451813645

Slide 70

Slide 70 text

Content First https://www.flickr.com/photos/klara/4236116910

Slide 71

Slide 71 text

Performance messen / verbessern https://www.flickr.com/photos/aussiegall/286709039

Slide 72

Slide 72 text

Auf echten Devices testen https://www.flickr.com/photos/hysysk/4042285394

Slide 73

Slide 73 text

Conditional loading https://www.flickr.com/photos/webethere/8708630443

Slide 74

Slide 74 text

Responsive Images

Slide 75

Slide 75 text

Responsible RWD

Slide 76

Slide 76 text

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