Responsive Webdesign Fiese Fallstricke und sexy Strategien

RWD = WebDesign

Johannes Weber

@jowe

Mayflower GmbH

Image by - www.kpcb.com/internet-trends

Tablet, Mobil, Desktop

‣ > 345 Mio. verkaufte Smartphones (28,3% Wachstum je Quartal)

‣ >1 Mrd. aktive Android User

‣ > 160 Mio. aktive iPhone User

Image by William Warby - https://www.flickr.com/photos/wwarby/11693522135/

Image by - www.kpcb.com/internet-trends

Der Begriff RWD

‣ 2010: Ethan Marcotte Responsive Architektur

‣ 2011: CSS Level 3

‣ „Wichtigste Entwicklungen des Jahres“ (.net, Mashable, Forbes)

‣ Herausforderung für Konzeption

Designer und Entwickler

Image by http://de.wikipedia.org/wiki/Responsive_Webdesign

www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

Top Fallstricke

Image by - http://esteinborn.github.io/rwd-presentation

#1: Dem Kunden erklären

Lösung: Demonstrieren statt erklären

Image by - http://esteinborn.github.io/rwd-presentation

Image by Max Di Capua - http://goo.gl/AHL63Q

#2: Linearer Designprozess

Lösung: Design von Elements & weniger Layoutshttp://de.slideshare.net/pkattera/design-process-for-responsive-web-design

Image by Lynne Venart - http://goo.gl/WJA48n

#3: Navigation

Lösung: konsistentes Design, Patterns

#4: Bilder

Lösung: SVG (media queries), Icon Fonts, <picture />, srcSet, progressive JPEG

http://www.slideshare.net/maddesigns.de/responsive-imagesmaddesignssvenwolfermannwebinale

Image by http://goo.gl/ggU7IR

#4: Bilder

‣ Serverseitige Lösungen

‣ Probleme: CDN

‣ Caching (10k Requests / sec)

‣ JS Lösungen

‣ <noscript> mit data-* definitions

‣ Future-Proof-Solutions

#5: Tabellen

Lösung: bestehende Design Patterns nützenhttp://css-tricks.com/responsive-data-table-roundup/

Image by - https://www.drupal.org/project/footable

#6: Konvertieren alter Seiten

Lösung: Reverse Engineering, Rewrite

Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

#6: Konvertieren alter Seiten

‣ Responsive Retrofitting

‣ Mobile-Last MediaQueries (Fallback)

‣ 3 Eimer Wasser in einen Eimer füllen

‣ Fokus am flüssigen Layout

‣ Performanceeinbußen

Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

#7: IE

Lösung: Polyfill oder darauf verzichten

Image by - http://goo.gl/PGMyL

#8: Testing

Lösung: Testsites, Tools, Geräte teilen opendevicelab.com / mytestsuite.tumblr.com

browserstack.com/responsive Adobe Edge Inspect

Chrome Dev Tools BrowserSync ViewPort’s

#8: Testing

#dxw14 Talk von Sven Wolfermann http://www.slideshare.net/maddesigns.de/testing-responsive-webdesign

Workflow

Workflow

Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

Workflow

Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

Workflow

Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

Workflow

Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

Workflow

Responsive Newsletter

Der Wunsch

‣ Newsletter zu RWD migrieren

‣ Clients: Web & App Clients

‣ Da war noch was…

… auch Outlook 2002

Responsive Newsletter

Die Lösung

‣ Template (http://htmlemailboilerplate.com/)

‣ Testing Tools

‣ emailonacid.com

‣ mailchimp.com

‣ campaignmonitor.com

‣ CSS Support

‣ MediaQuery, inline CSS

https://www.campaignmonitor.com/css/

Responsive E-Mails

‣ 47% werden Mobil konsumiert

‣ 12% der „großen“ Newsletter sind Responsive

‣ 80% löschen die E-Mail wenn sie fehlerhaft aussieht

‣ Der großteil der E-Mails ist fehlerhaft (zoom’n’pitching)

The ultimate mobile email statistics overviewhttp://www.emailmonday.com/mobile-email-usage-statistics Mobile Opens Hit Record Highhttps://litmus.com/blog/mobile-opens-hit-record-high-of-47

Responsive E-Mails

Responsive E-Mail Design Anna Yeaman

!http://www.slideshare.net/stylecampaign/responsive-email-design

iFrame

Der Wunsch

‣ Externe Inhalte einbinden

‣ Proportionen beibehalten

‣ Fit-to-Content

iFrame

Die Lösung

‣ W3C: [seamless= “true“]

‣ Navigation: <base />

‣ Polyfill verwenden

‣ Beispiel: http://goo.gl/12omq8

Maps

Der Wunsch

‣ Einbindung einer Map

‣ Mobile Weiterleitung zur App

‣ Fit-to-Content

Maps

Der Lösung

‣ Static Maps + Link

‣ Adaptive Maps

‣ Beispiel: http://goo.gl/qdm4Yx

Forms

Der Wunsch

‣ Desktop: Detaillierte Angaben

‣ Mobile: Rückrufservice

‣ (JS) Validierung

Forms

Die Lösung

‣ Logik über CSS Klassen?

‣ zwei verschiedene Formulare

‣ zwei verschiedene Links

‣ getrennt behandeln

Image by http://responsiveprocess.com

SEO

‣ Google empfiehlt RWD

‣ OnPage Optimierung

‣ SEO Strategien

‣ Inhalte anpassen

‣ Geo bekommt Bedeutung

‣ schema.org / microdata

Image by http://gokms.com/digital-marketing/seo-service/

SEO - schema.org / microdata

“Empty your mind! Be formless, shapeless, like water. If you put water into a cup, it becomes the cup. Put it into a bottle, it becomes the bottle, you put into a teapot, it becomes the teapot. Now water can flow, or it can crash: Be water, my friend!”(Bruce Lee: Fernsehinterview)

@jowe

Let’s talk!

Johannes Weber