Die Diversifizierung der Endgeräte, auf denen Inhalte im WWW angezeigt werden können, nimmt zu. Konzeptioner und Designer stehen vor der Aufgabe, für multiple Plattformen und "Devices" Inhalte bereit zu stellen. Responsive Design stellt sich dieser Herausforderung. Die Präsentation gibt einen ersten Einblick anhand einiger Beispiele. Der jeweils erste Screenshot eines Beispiels verlinkt dabei immer auf die entsprechende Webseite. Kudos an Luke Wroblewski und Brad Frost für Ihre hochwertigen und unverzichtbaren Insights zu diesem Thema. Die beiden sollte man auf jeden Fall gelesen haben. Kommentare und Feedback sind ausdrücklich erwünscht.

1. Responsive Design
Design und Konzept für multiple Displays

2. Inhalt
1. Brauchen wir das?
2. Wie sieht's aus?
3. Wie funktioniert's?
4. tl;dr

3. Brauchen wir das?

4. *Visual von Brad Frost

5. *Visual von Brad Frost

6. *Visual von Brad Frost

7. Wie sieht's aus?

8. Blöcke verschieben
Handy Pad/Tab Laptop Desktop
*Grids von Luke Wroblewski

9. Beispiele

10. Spalten verschieben
Handy Pad/Tab Laptop Desktop

11. Beispiele

12. Layout verschieben
Handy Pad/Tab Laptop Desktop

13. Beispiele

14. Elemente ausserhalb des Displays
Handy Pad/Tab Laptop Desktop

15. Beispiel

16. Beispiel

17. Beispiel

18. Beispiel

19. Beispiel

20. Wie funktioniert's?

21. Statische Top Navigation
PRO KONTRA
● Einfache Umsetzung ● Kein Platz für Inhalte
● Kein Java Script nötig ● Schlecht skalierbar für zusätzliche Navigationsinhalte
● Kein kompliziertes CSS ● Schriften zu klein für Tap-Navigation
● Schriftgröße kann pro Gerät variieren

22. Anker im Footer
PRO KONTRA
● Einfache Umsetzung ● Der abrupte Sprung nach Tap/Klick im Header zur
● Kein Javascript Navi im Footer kann Nutzer orientierungslos machen
● Wenig kompliziertes CSS ● Keine sonderlich elegante Lösung
● Ein simpler "Navi" Button lässt
im Header viel Platz für Inhalte

23. Dropdown
PRO KONTRA
● Schafft Platz ● Nicht frei zu gestalten, weil nativ
● Navi bleibt im Kopfbereich ● Verwirrend, weil User hinter einem Dropdown eher
● Einfach als Navi zu erkennen eine Auswahl statt einer Navigation erwarten
● Dropdown passt sich dem ● 2. und weitere Ebenen wirken unschön
Gerät automatisch an, weil ● Javascript Abhängigkeiten von Dropdowns könnten
nativ in mobilen Browsern zu Problemen führen

24. (Aus)Klapp-Navigation
PRO KONTRA
● Nutzer "springen" nicht in den ● Stylesheetanimationen (CSS) könnten auf älteren
Footer, sondern bleiben an Geräten ein wenig langsamer ablaufen
einem Ort ● Ein wenig Javascript wird verwendet, hält sich aber
● Elegante Mechanik in Grenzen
● Neue Navigationsinhalte
können über CSS einfach
hinzugefügt werden

25. Schublade
PRO
● Schafft viel Platz, auch mit
inhaltsreichen Navigationen
● Sieht elegenat aus und wurde bisher
noch nicht sooo viel verwendet
KONTRA
● Setzt sehr fortschrittliche (mobile)
Browser voraus. Deshalb keine
maximale Reichweite
● Wirkt auf größeren Displays ein wenig
ungewohnt
● Nutzer könnten denken, die Webseite
wäre fehlerhaft (weil sie halb zur Seite
rausrutscht)

26. Footer only
PRO KONTRA
● Viel Platz im Header ● Wo ist die Navi? Ach, da!
● Inhalte gehen eindeutig VOR ● Wie komme ich da jetzt hin? Ach erst mal ganz
Navigation runter scrollen - na toll.
● Nutzer finden schnell
relevanten Content

27. Inhalte weg lassen
PRO KONTRA
● Hurra, wir haben Platz! ● Aber ich...?!
● Weniger Funktionen, Inhalte, Verlinkungen
● Inhalte, Code und Bilder werden geladen, obwohl sie für
"mobile" dann ausgeschaltet werden. Das heisst, die
Ladezeiten werden dadurch nicht besser!
● Inhalte müssen immer so gewichtet werden, dass auch
mobile Nutzer relevanten Content finden
● ...ach und es ist einfach unhöflich, mobilen Usern den Zugang zu
bestimmten Inhalten nicht zu gewähren. Mobile Nutzer haben die selben
Interessen wie Desktop Nutzer.

28. *
tl;dr
*let me google that for you...

29. Responsive Design...
...sollte sein wie ein guter Freund.
Wenn man ihn braucht ist er für einen da.
Er ist cool genug, um zu wissen wann man mal etwas Raum für sich alleine braucht.

30. Responsive Design...
(...ein schlechter Freund ist immer da, wenn man ihn nicht braucht und fehlt, wenn man ihn am
nötigsten hat.)

31. Responsive Design...
Über "Media Queries" erfährt eine Webseite, welches Endgerät sich gerade an ihr angemeldet hat.
Designer und Konzeptioner entwickeln gemeinsam für jedes Format entsprechende Lösungen und
ordnen diese dann den entsprechenden Queries zu.
Dafür können beispielsweise für jedes Format unterschiedliche Modulvarianten entwickelt werden.
Oder man erstellt anhand eines Grids für jedes Format Templates.
Oder...oder oder.

32. Puh!
Ist aber viel Arbeit, oder?

33. Ja, aber es lohnt sich...
...und wird von den Kunden heute eigentlich auch erwartet.

34. Danke.

35. Quicklinks.
● Responsive webthemes
● 50 Top Responsive Web Tools
● Liquid Cases en masse
● Mobile Web Best Practise
● A Dao of Web Design