• Like
Updated: Fiese Fallstricke, sexy Strategien
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Updated: Fiese Fallstricke, sexy Strategien

  • 78 views
Published

Hier findest du die Slides von Johannes Weber zum oben genannten Thema. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
78
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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