Responsive Webdesign Fiese Fallstricke und sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien
Jan 26, 2015
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.
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
