Responsive DesignDesign und Konzept für multiple Displays

Inhalt

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

Brauchen wir das?

*Visual von Brad Frost

*Visual von Brad Frost

*Visual von Brad Frost

Wie sieht's aus?

Blöcke verschiebenHandy Pad/Tab Laptop Desktop

*Grids von Luke Wroblewski

Beispiele

Spalten verschiebenHandy Pad/Tab Laptop Desktop

Beispiele

Layout verschiebenHandy Pad/Tab Laptop Desktop

Beispiele

Elemente ausserhalb des Displays

Handy Pad/Tab Laptop Desktop

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Wie funktioniert's?

Statische Top Navigation

● Einfache Umsetzung● Kein Java Script nötig● Kein kompliziertes CSS

PRO KONTRA

● Kein Platz für Inhalte● Schlecht skalierbar für zusätzliche Navigationsinhalte● Schriften zu klein für Tap-Navigation● Schriftgröße kann pro Gerät variieren

● Einfache Umsetzung● Kein Javascript● Wenig kompliziertes CSS● Ein simpler "Navi" Button lässt

im Header viel Platz für Inhalte

PRO KONTRA

● Der abrupte Sprung nach Tap/Klick im Header zur Navi im Footer kann Nutzer orientierungslos machen

● Keine sonderlich elegante Lösung

Anker im Footer

Dropdown

● Schafft Platz● Navi bleibt im Kopfbereich● Einfach als Navi zu erkennen● Dropdown passt sich dem

Gerät automatisch an, weil nativ

PRO KONTRA

● Nicht frei zu gestalten, weil nativ● Verwirrend, weil User hinter einem Dropdown eher

eine Auswahl statt einer Navigation erwarten● 2. und weitere Ebenen wirken unschön● Javascript Abhängigkeiten von Dropdowns könnten

in mobilen Browsern zu Problemen führen

(Aus)Klapp-Navigation

● Nutzer "springen" nicht in den Footer, sondern bleiben an einem Ort

● Elegante Mechanik● Neue Navigationsinhalte

können über CSS einfach hinzugefügt werden

PRO KONTRA

● Stylesheetanimationen (CSS) könnten auf älteren Geräten ein wenig langsamer ablaufen

● Ein wenig Javascript wird verwendet, hält sich aber in Grenzen

Schublade

● Schafft viel Platz, auch mit inhaltsreichen Navigationen

● Sieht elegenat aus und wurde bisher noch nicht sooo viel verwendet

PRO

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)

Footer only

● Viel Platz im Header● Inhalte gehen eindeutig VOR

Navigation● Nutzer finden schnell

relevanten Content

PRO KONTRA

● Wo ist die Navi? Ach, da!● Wie komme ich da jetzt hin? Ach erst mal ganz

runter scrollen - na toll.

Inhalte weg lassen

● Hurra, wir haben Platz!

PRO KONTRA

● 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.

tl;dr

*let me google that for you...

*

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.

Responsive Design...

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

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.

Puh!Ist aber viel Arbeit, oder?

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

Danke.

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