Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Webdesign

2,079 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×