Das Dokument beschreibt die Entwicklungsmöglichkeiten und Herausforderungen im Bereich des Webdesigns, insbesondere in Bezug auf responsive Gestaltung, navigationsfreundliches Design und die Verwendung moderner Technologien. Es werden verschiedene Lösungsansätze für gängige Probleme präsentiert, darunter die Anpassung von Designs an unterschiedliche Bildschirmgrößen und die Implementierung effektiver Benutzeroberflächen. Zudem wird auf die Bedeutung von kundenorientierten Erklärungen und Feedbacks im Designprozess eingegangen.

2. Mayflower GmbH I 2
Johannes Weber
I Jahrgang 1986
I Developer bei Mayflower
I Seit 2003: Onlinemedien
I M.Sc – Digitale Medientechnologien
I @jowe

5. Mayflower GmbH I 5
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 I 7
#1: Dem Kunden erklären

8. Mayflower GmbH I 8
#1: Dem Kunden erklären
Lösung: demonstrieren

9. Mayflower GmbH I 9
#2: Linearer Designprozess

10. Mayflower GmbH I 10
#2: Linearer Designprozess
Lösung: Design von Elements & weniger Layouts

11. Mayflower GmbH I 11
#3: Navigation

12. Mayflower GmbH I 12
#3: Navigation
Lösung: gutes, einheitliches Design, Patterns

13. Mayflower GmbH I 13
#4: Bilder

14. Mayflower GmbH I 14
#4: Bilder
Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet,
progressive JPEG

15. Mayflower GmbH I 15
#5: Tabellen

17. Mayflower GmbH I 17
#6: Konvertieren alter Seiten

19. Mayflower GmbH I 19
#7: IE

21. Mayflower GmbH I 21
#8: Testing

23. Mayflower GmbH I 23
#8: Testing

34. Mayflower GmbH I 34
Einbettung in iFrame
I Fit to Content
I Mobile oder Desktop?
I Polyfill
I W3C: <seamless />
I Navigation: <base />
I Videos
I #Beispiel

35. Mayflower GmbH I 35
Maps
I Mobile oder Desktop
I Resizing
I Static Maps
I Adaptive Maps #href

36. Mayflower GmbH I 36
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

37. Mayflower GmbH I 37
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)

38. Mayflower GmbH I 38
Feedback