This document discusses responsive web design, including common challenges and strategies. It outlines 8 top responsive design problems: 1) explaining it to clients, 2) linear design processes, 3) navigation, 4) images, 5) tables, 6) converting old sites, 7) Internet Explorer support, and 8) testing. For each, it provides solutions like demonstrating concepts, designing for elements not layouts, consistent navigation patterns, responsive images, and testing tools. It also covers responsive newsletters, iframes, maps, forms, SEO, and recommends having a fluid workflow like water.

1. Responsive Webdesign
Fiese Fallstricke
und sexy Strategien

3. RWD = WebDesign

4. Johannes Weber
@jowe
Mayflower GmbH

5. Image by - www.kpcb.com/internet-trends

6. 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/

7. Image by - www.kpcb.com/internet-trends

8. 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

9. www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
Top Fallstricke

10. Image by - http://esteinborn.github.io/rwd-presentation

11. #1: Dem Kunden erklären
Lösung: Demonstrieren statt erklären
Image by - http://esteinborn.github.io/rwd-presentation

12. Image by Max Di Capua - http://goo.gl/AHL63Q

13. #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

14. #3: Navigation
Lösung: konsistentes Design, Patterns

17. #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

18. #4: Bilder
‣ Serverseitige Lösungen
‣ Probleme: CDN
‣ Caching (10k Requests / sec)
‣ JS Lösungen
‣ <noscript> mit data-* definitions
‣ Future-Proof-Solutions

19. #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

23. #6: Konvertieren alter Seiten
Lösung: Reverse Engineering, Rewrite
Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

24. #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

25. Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

26. Image by - http://bradfrostweb.com/blog/post/responsive-strategy/

27. #7: IE
Lösung: Polyfill oder darauf verzichten
Image by - http://goo.gl/PGMyL

28. #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

29. #8: Testing
#dxw14 Talk von Sven Wolfermann
http://www.slideshare.net/maddesigns.de/testing-responsive-webdesign

30. Workflow

31. Workflow
Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/

32. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/
Workflow

33. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/
Workflow

34. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/
Workflow

35. Image by Viljami Salminen - http://viljamis.com/blog/2012/responsive-workflow/
Workflow

38. Responsive Newsletter
Der Wunsch
‣ Newsletter zu RWD migrieren
‣ Clients: Web & App Clients
‣ Da war noch was…
… auch Outlook 2002

39. Responsive Newsletter
Die Lösung
‣ Template (http://htmlemailboilerplate.com/)
‣ Testing Tools
‣ emailonacid.com
‣ mailchimp.com
‣ campaignmonitor.com
‣ CSS Support
‣ MediaQuery, inline CSS

41. https://www.campaignmonitor.com/css/

42. 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

43. Responsive E-Mails
Responsive E-Mail Design
Anna Yeaman
!
http://www.slideshare.net/stylecampaign/responsive-email-design

44. iFrame
Der Wunsch
‣ Externe Inhalte einbinden
‣ Proportionen beibehalten
‣ Fit-to-Content

45. iFrame
Die Lösung
‣ W3C: [seamless= “true“]
‣ Navigation: <base />
‣ Polyfill verwenden
‣ Beispiel: http://goo.gl/12omq8

46. Maps
Der Wunsch
‣ Einbindung einer Map
‣ Mobile Weiterleitung zur App
‣ Fit-to-Content

47. Maps
Der Lösung
‣ Static Maps + Link
‣ Adaptive Maps
‣ Beispiel: http://goo.gl/qdm4Yx

48. Forms
Der Wunsch
‣ Desktop: Detaillierte Angaben
‣ Mobile: Rückrufservice
‣ (JS) Validierung

49. Forms
Die Lösung
‣ Logik über CSS Klassen?
‣ zwei verschiedene Formulare
‣ zwei verschiedene Links
‣ getrennt behandeln

50. Image by http://responsiveprocess.com

51. 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/

52. SEO - schema.org / microdata

53. “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)

54. @jowe
Let’s talk!
Johannes Weber