Flexibel und anpassungsfähig: Responsive Design

Flexibel und anpassungsfähig: Responsive Design

Allgemein 29. November 2013

Mit Responsive Design wurde eine Lösung für das veränderte Nutzerverhalten der User gefunden. Auf Online-Bereiche wird heute nicht länger nur vom fest installierten Desktop-PC zugegriffen. Das mobile Surfen mit immer neuen Endgeräten wie Laptops, Tablets und Smartphones gewinnt an Bedeutung. Fast alle Anbieter setzen dabei auf unterschiedliche Programmiersprachen.

Ein reaktionsfähiges Webdesign entsteht aus dem Zusammenspiel der folgenden Elemente:Fluid Grid

  • Fließende Raster ermöglichen flexible Layouts.
  • Media Queries
    Durch Abfrage der Eigenschaften und Fähigkeiten von Geräten wird ein Stylesheet einem bestimmten Medium zugeordnet.
  • Fluid Images
    Automatische Anpassung der Bilder in Höhe und Breite.

Bedeutung für Konzeption und Design

Schon in den frühen Projektphasen Konzeption und Design muss das Responsive Design bedacht werden. Die Webseiten-Inhalte müssen auf allen Endgeräten korrekt angezeigt werden.

Dazu wird das Layout für verschiedene Bildschirmgrößen – von Mobilgeräten bis zum Desktop – angepasst. Sämtliche Bilder werden in unterschiedlichen Auflösungen bereitgestellt (Responsive Images). Die Mobilnutzung setzt eine Vereinfachung der Seitenelemente voraus. Nur so können einfach bedienbare Touch-Elemente entstehen. Verzichtbare Seitenelemente wiederum werden auf kleineren Screens ausgespart.

Klein anfangen – Mobile First!

Bei der Erstellung der Inhalte wird mit der kleinsten Layout-Version begonnen. Von dort aus wird zur größten Version hin entwickelt. Weitere Grundsätze sind:

  • Priorisierung
    Konzentration auf die wesentlichen Elemente.
  • „Keep it small“
    Durch Verzicht auf unwesentliche Elemente wird eine benutzerfreundliche und optisch angenehm reduzierte Designlösung für alle Bildschirmgrößen gefunden.

 

"Ich übersetze die Kunden… 6. November 2013 "Komm, wir schauen einfach… 20. Dezember 2013