Responsive Webdesign

Es ist eine Herangehensweise an die Website-Gestaltung, die unabhängig von Geräten ist.

Viele heutige Websites beruhen auf festgelegte Baukästen, die eine festes Layout besitzen. Ausgehend von der häufigsten Auflösung 1.024x768 Pixel der Zielgruppen bewegten sich die Layouts nicht. Höhere Auflösungen wurden kaum berücksichtigt und es wurde viel "Freiraum" (Whitespaces) in Kauf genommen.

Mit zunehmender Präsenz der Smartphones und Tablets wurde häufig eine 2. Variante der Website erschaffen, die in ihrer Funktionalität und Aussehen teilweise stark beschnitten wurden. Sie boten nur noch das „aller nötigste”.

Viele mobile Geräte möchten und können bereits viele heutige Standards umsetzten und erwarten dementsprechend Design und Funktionalität.

Fit für die Zukunft

Mit Responsive Webdesign hingegen ist es möglich Websites „Fit” für die mobile Zukunft zu gestalten. Es bezeichnet ein Design, dass mit einem flexiblen Layout und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen.

Alle pixelgenauen Definitionen in der Typographie werden durch relative Werte ersetzt, um nah genug an das Wunsch-Design heranzukommen. Identisch wird so ein Design nie sein können. Die maximale Breite eines Layouts sollte dennoch festgelegt werden - sei hier das 960er Raster genannt. Mehrspaltige Layous besitzen prozentuale Werte. Die Inhaltselemente werden immer den gleichen Prozentanteil zum Layout haben.

Die Inhaltselemente, müssen immer eine maximale Breite von 100% aufweisen. Bilder können mittels eines Javascript-Scripts immer auf die benötigte Größe ausgetauscht werden. Eine Alternative bietet Adaptive Images in Kombination mit PHP. Dabei werden alle Anfragen zu JPG's, PNG's und GIF's per .htaccess an das PHP Processing Image File umgeleitet.

Media-Queries

Mit Media-Queries können letztlich die Art und Weise der Darstellung beeinflusst werden. Wie weit der Entwickler gehen möchte, hängt von den Anforderungen ab.

Folgende Möglichkeiten können abgefragt werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

Foundation 2.0

Dieses Framework ist ein Werkzeugkasten mit vielen Styles für die wesentlichen HTML-Elemente, einem 12-Spalten-Layout, geräte-spezifische CSS-Klassen, sowie jQuery-Plugins für modale Dialogfenster und Slider.

Weitere Beispiele zu diesem Thema sind unter http://mediaqueri.es/ zu finden.

Schnellkontakt

Dennis Oezet
WebEntwicklung & Design
Tel: 0160 / 933 679 69
info(at)doemedia(dot)de



Sofortanfrage

Ich interessiere mich für







Meine Kontaktdaten

Datenschutz

Auf der folgenden Seite findest Du die Datenschutzhinweise.