Responsive Webdesign

1,335
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,335
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×