Hochgeladen vonJohannes Weber
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Das Dokument behandelt responsive Webdesign und identifiziert eight Fallstricke sowie deren Lösungen, die Webentwickler und Designer beachten sollten. Es gibt praktische Beispiele für Navigation, Bilder, Tabellen und Formulare, die sich sowohl an mobile als auch an Desktop-Nutzer richten. Abschließend wird auf die Notwendigkeit von Tests und Feedback eingegangen, um die Benutzererfahrung zu optimieren.
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
- 1. Mayflower GmbH I1 © http://www.naturalgrocers.com/products/drinking-water
- 2. © Mayflower GmbH2012 Responsive Webdesign Fiese Fallstricke und sexy Strategien Johannes Weber I 12. Sept. 2013
- 3. Mayflower GmbH I3 Johannes Weber I Jahrgang 1986 I Developer bei Mayflower I Seit 2003: Onlinemedien I M.Sc – Digitale Medientechnologien I @jowe
- 4. Mayflower GmbH I4 Responsive Webdesign I Beispiel: Text I Beispiel: Formatierter Text I Beispiel: Eltern - Kind I Beispiel: Responsive
- 5. Mayflower GmbH I5 Mobile vs. Desktopbrowser
- 6. Mayflower GmbH I6 Geschichte I 2010: Ethan Marcotte, Responsive Architektur I CSS Level 3 I „Wichtigste Entwicklungen des Jahres 2012“ I Heterogene Browserlandschaft I Herausforderung für Konzeptionisten, Webdesigner und Webentwickler
- 7. Mayflower GmbH I7 Top 8 Fallstrickennetmagazine.com
- 8. Mayflower GmbH I8 #1: Dem Kunden erklären
- 9. Mayflower GmbH I9 #1: Dem Kunden erklären Lösung: demonstrieren
- 10. Mayflower GmbH I10 #2: Linearer Designprozess
- 11. Mayflower GmbH I11 #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
- 12. Mayflower GmbH I12 #3: Navigation
- 13. Mayflower GmbH I13 #3: Navigation Lösung: gutes, einheitliches Design, Patterns
- 14. Mayflower GmbH I14 #4: Bilder
- 15. Mayflower GmbH I15 #4: Bilder Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet, progressive JPEG
- 16. Mayflower GmbH I16 #5: Tabellen
- 17. Mayflower GmbH I17 #5: Tabellen Lösung: bestehende Design Patterns
- 18. Mayflower GmbH I18 #6: Konvertieren alter Seiten
- 19. Mayflower GmbH I19 #6: Konvertieren alter Seiten Lösung: Reverse Engineering, Rewrite
- 20. Mayflower GmbH I20 #7: IE
- 21. Mayflower GmbH I21 #7: IE Lösung: Polyfill oder darauf verzichten
- 22. Mayflower GmbH I22 #8: Testing
- 23. Mayflower GmbH I23 #8: Testing Lösung: Testsites, Tools, Geräte teilen graziös
- 24. Mayflower GmbH I24 #8: Testing
- 25. Mayflower GmbH I25 Beispie l
- 26. Mayflower GmbH I26 Workflow
- 27. Mayflower GmbH I27 Beispie l Workflow
- 28. Mayflower GmbH I28 Beispie l Workflow
- 29. Mayflower GmbH I29 Beispie l Workflow
- 30. Mayflower GmbH I30 Beispie l Workflow
- 31. Mayflower GmbH I31 Beispie l Workflow
- 32. Mayflower GmbH I32 Beispie l
- 33. Mayflower GmbH I33 Frameworks
- 34.
- 35. Mayflower GmbH I35 Responsive Newsletter I Optimiert auf Outlook 2003 I Media Query Support I Webclients I CSS: !important I Mobile First
- 36. Mayflower GmbH I36 Responsive Newsletter I Testing Tools emailonacid.com mailchimp.com campaignmonitor.com
- 37. Mayflower GmbH I37 Einbettung in iFrame I Fit to Content I Mobile oder Desktop? I Polyfill I W3C: <seamless /> I Navigation: <base /> I Videos I #Beispiel
- 38. Mayflower GmbH I38 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href
- 39. Mayflower GmbH I39 Formulare nach Device I Mobile: Rückrufservice I Desktop: Detaillierte Angaben I JS Validierung I Logik über CSS Klassen? I 2 verschiedene Formulare I 2 verschiedene Links
- 40. Mayflower GmbH I40 Responsive Webdesign “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)
- 41. Mayflower GmbH I41 Feedback
- 42. 26.09.13 Mayflower GmbH42 Vielen Dank für Ihre Aufmerksamkeit! Johannes Weber johannes.weber@mayflower.de Tel: +49 89 2420 54 1118 Mayflower GmbH Mannhardtstraße 6 80538 München Q & A