Responsive Webdesign

1.728 Aufrufe

Veröffentlicht am

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 dem UltraHD-TV.

Was so schön klingt, birgt aber auch viele Fallstricke. Der Vortrag wird einige von ihnen Vorstellen: Von extravaganten Kundenwünschen, überraschender Browser-Inkompatibilität und der Verwendung von iFrames bis hin zu responsiven HTML-Newslettern. Abgerundet wird der Talk durch verschiedene Beispiele für den Workflow, Testing-Strategien und dem Thema SEO im Zusammenhang mit Responsive Webdesign.

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.728
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign

  1. 1. Mayflower GmbH I 2 Johannes Weber I Jahrgang 1986 I Developer bei Mayflower I Seit 2003: Onlinemedien I M.Sc – Digitale Medientechnologien I @jowe
  2. 2. 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
  3. 3. Mayflower GmbH I 7 #1: Dem Kunden erklären
  4. 4. Mayflower GmbH I 8 #1: Dem Kunden erklären Lösung: demonstrieren
  5. 5. Mayflower GmbH I 9 #2: Linearer Designprozess
  6. 6. Mayflower GmbH I 10 #2: Linearer Designprozess Lösung: Design von Elements & weniger Layouts
  7. 7. Mayflower GmbH I 11 #3: Navigation
  8. 8. Mayflower GmbH I 12 #3: Navigation Lösung: gutes, einheitliches Design, Patterns
  9. 9. Mayflower GmbH I 13 #4: Bilder
  10. 10. Mayflower GmbH I 14 #4: Bilder Lösung: Scripts, SVG, Icon Fonts, <picture />, srcSet, progressive JPEG
  11. 11. Mayflower GmbH I 15 #5: Tabellen
  12. 12. Mayflower GmbH I 17 #6: Konvertieren alter Seiten
  13. 13. Mayflower GmbH I 19 #7: IE
  14. 14. Mayflower GmbH I 21 #8: Testing
  15. 15. Mayflower GmbH I 23 #8: Testing
  16. 16. 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
  17. 17. Mayflower GmbH I 35 Maps I Mobile oder Desktop I Resizing I Static Maps I Adaptive Maps #href
  18. 18. 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
  19. 19. 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)
  20. 20. Mayflower GmbH I 38 Feedback

×