Neu und garantiert lekker

12.11.2012

Responsive Design – User-Experience auf allen Ausgabegeräten

Responsive Design, Example swissluxuryclinic.com
Immer mehr Benutzer sind mobil online – und das auf einer zunehmenden Vielfalt von Endgeräten, wie Smartphones (z.B. iPhone) und Tablets (z.B. iPad). Das stellt neue Anforderungen an das Webdesign, da jedes dieser Geräte andere Display-Größen hat und auch die Steuerung über Touch sich deutlich von den Desktop-Geräten unterscheidet, bei denen in der Regel noch mit Tastatur und Maus im Internet gesurft wird. Eine Möglichkeit, dieser Vielfalt an Ausgabegrößen gerecht zu werden, ist Responsive Design.

Warum Responsive Design
Hinter Responsive Design verbirgt sich u.a. die automatische Anpassung von Layout und Inhalte einer Website in Bezug auf die Browser-Größe, in der sie dargestellt werden. Bei fixen Web-Layouts, die z.B. für eine feste Größe von 1024 Pixeln Breite gelayoutet sind, werden die Inhalte auf mobilen Ausgabegeräten mit kleineren Browsern verkleinert dargestellt. Schlecht oder kaum lesbare Schrift sowie kleine Bilder sind die Konsequenz – sofern man nicht mittels Zoom die Ansicht ausschnittweise vergrößert.

Vorteile
Responsive Design versucht hier die Brücke zwischen den unterschiedlichen Ausgabegeräten (Desktop/Notebook, Tablet, Smartphones) zu schließen und für jeden Benutzer Inhalte jeweils optimal darzustellen. Technisch findet hierbei über die CSS Formatierung eine Abfrage der Größe des verwendeten Browsers statt.

Projekt-Beispiel SwissLuxuryClinic
Für den Markenauftritt des Haartransplantations-Spezialisten »SwissLuxuryClinic«, den wir mit Responisve Design realisiert haben, wurde die Darstellung der Inhalte für folgende Schlüssel-Auflösungen angepasst:

  • 1200 Pixel (Desktop groß)
  • 1024 Pixel (Desktop normal, iPad/Tablet Querformat)
  • 768 Pixel (iPad/Tablet Hochformat)
  • 480 Pixel (Smartphone Querformat)
  • 320 Pixel (Smartphone Hochformat)


Die Anpassungen erstreckten sich dabei von unterschiedlichen Größen und Proportionen der Bilder im Kopfbereich über unterschiedliche Größen der Teaser bis hin zur Navigation, die auf größeren Browsern offen – bei kleineren zum Aufklappen angeboten wird. Durch Skalierung, Umbrechung und Maskierung haben wir so das reichhaltige Informationsangebot der Seite inhaltlich ungekürzt auf allen Ausgabegeräten zugänglich gemacht.

 

Beispiel 1: Responsive Design für iPhone /320 px

Beispiel Darstellung der Website auf iPhone /
320 Pixel Browser-Breite

 

Beispiel 2: Responsive Design für iPad / 768 Pixel

Beispiel Darstellung der Website auf iPad /
768 Pixel Browser-Breite

 

Beispiel 3: Responsive Design für Desktop-Anzeige / 1024 Pixel

Beispiel Darstellung der Website auf Desktop-Browser /
1024 Pixel Browser-Breite und größer


Weitere Infos

Link zur Website www.swissluxuryclinic.com

Weitere Beispiele für Seiten, die mit Responsive Design realisiert sind, finden Sie hier: www.mediaqueri.es