Updated: Fiese Fallstricke, sexy Strategien

462 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
462
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Updated: Fiese Fallstricke, sexy Strategien

  1. 1. Responsive Webdesign
 Fiese Fallstricke 
 und sexy Strategien
  2. 2. RWD = WebDesign
  3. 3. Johannes Weber @jowe Mayflower GmbH
  4. 4. Image by - www.kpcb.com/internet-trends
  5. 5. 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/
  6. 6. Image by - www.kpcb.com/internet-trends
  7. 7. 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
  8. 8. www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them Top Fallstricke
  9. 9. Image by - http://esteinborn.github.io/rwd-presentation
  10. 10. #1: Dem Kunden erklären Lösung: Demonstrieren statt erklären Image by - http://esteinborn.github.io/rwd-presentation
  11. 11. Image by Max Di Capua - http://goo.gl/AHL63Q
  12. 12. #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
 http://de.slideshare.net/pkattera/design-process-for-responsive-web-design Image by Lynne Venart - http://goo.gl/WJA48n
  13. 13. #3: Navigation Lösung: konsistentes Design, Patterns
  14. 14. #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
  15. 15. #4: Bilder ‣ Serverseitige Lösungen ‣ Probleme: CDN ‣ Caching (10k Requests / sec) ‣ JS Lösungen ‣ <noscript> mit data-* definitions ‣ Future-Proof-Solutions
  16. 16. #5: Tabellen Lösung: bestehende Design Patterns nützen
 http://css-tricks.com/responsive-data-table-roundup/ Image by - https://www.drupal.org/project/footable
  17. 17. #6: Konvertieren alter Seiten Lösung: Reverse Engineering, Rewrite Image by - http://bradfrostweb.com/blog/post/responsive-strategy/
  18. 18. #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
  19. 19. Image by - http://bradfrostweb.com/blog/post/responsive-strategy/
  20. 20. Image by - http://bradfrostweb.com/blog/post/responsive-strategy/
  21. 21. #7: IE Lösung: Polyfill oder darauf verzichten Image by - http://goo.gl/PGMyL
  22. 22. #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
  23. 23. #8: Testing #dxw14 Talk von Sven Wolfermann http://www.slideshare.net/maddesigns.de/testing-responsive-webdesign
  24. 24. Workflow
  25. 25. Workflow Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/
  26. 26. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/ Workflow
  27. 27. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/ Workflow
  28. 28. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/ Workflow
  29. 29. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/ Workflow
  30. 30. Responsive Newsletter Der Wunsch ‣ Newsletter zu RWD migrieren ‣ Clients: Web & App Clients ‣ Da war noch was…
 … auch Outlook 2002
  31. 31. Responsive Newsletter Die Lösung ‣ Template (http://htmlemailboilerplate.com/) ‣ Testing Tools ‣ emailonacid.com ‣ mailchimp.com ‣ campaignmonitor.com ‣ CSS Support ‣ MediaQuery, inline CSS
  32. 32. https://www.campaignmonitor.com/css/
  33. 33. 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 overview
 http://www.emailmonday.com/mobile-email-usage-statistics Mobile Opens Hit Record High
 https://litmus.com/blog/mobile-opens-hit-record-high-of-47
  34. 34. Responsive E-Mails Responsive E-Mail Design Anna Yeaman ! http://www.slideshare.net/stylecampaign/responsive-email-design
  35. 35. iFrame Der Wunsch ‣ Externe Inhalte einbinden ‣ Proportionen beibehalten ‣ Fit-to-Content
  36. 36. iFrame Die Lösung ‣ W3C: [seamless= “true“] ‣ Navigation: <base /> ‣ Polyfill verwenden ‣ Beispiel: http://goo.gl/12omq8
  37. 37. Maps Der Wunsch ‣ Einbindung einer Map ‣ Mobile Weiterleitung zur App ‣ Fit-to-Content
  38. 38. Maps Der Lösung ‣ Static Maps + Link ‣ Adaptive Maps ‣ Beispiel: http://goo.gl/qdm4Yx
  39. 39. Forms Der Wunsch ‣ Desktop: Detaillierte Angaben ‣ Mobile: Rückrufservice ‣ (JS) Validierung
  40. 40. Forms Die Lösung ‣ Logik über CSS Klassen? ‣ zwei verschiedene Formulare ‣ zwei verschiedene Links ‣ getrennt behandeln
  41. 41. Image by http://responsiveprocess.com
  42. 42. 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/
  43. 43. SEO - schema.org / microdata
  44. 44. “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)
  45. 45. @jowe Let’s talk! Johannes Weber

×