Embed Size (px)
DESCRIPTION
Hier findest du die Slides von Johannes Weber zum oben genannten Thema. Zusammenfassung: Was Responsive Webdesign meint, ist klar: Ein Layout, das sich flexibel an die Bildschirmgröße des Clients anpasst – für einen perfekten Auftritt auf dem Smartphone ebenso wie auf dem UltraHD-TV. Was so schön klingt, birgt aber auch viele Fallstricke. Der Vortrag wird einige dieser vorstellen: Von extravaganten Kundenwünschen, den häufigsten Fehlern im RWD, überraschender Browser-Inkompatibilität und der Verwendung von iFrames bis hin zu responsiven HTML-Newslettern. Abgerundet wird die Session durch Beispiele für den Workflow und das Thema SEO im Zusammenhang mit Responsive Webdesign.
Citation preview
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/
#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
