Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Updated: Fiese Fallstricke, sexy Strategien

Ad

Responsive Webdesign

Fiese Fallstricke 

und sexy Strategien

Ad

RWD = WebDesign

Ad

Johannes Weber
@jowe
Mayflower GmbH

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Nächste SlideShare
Web Forms The Right Way
Web Forms The Right Way
Wird geladen in …3
×

Hier ansehen

1 von 54 Anzeige
1 von 54 Anzeige

Updated: Fiese Fallstricke, sexy Strategien

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Anzeige
Anzeige

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

×