Agentur für Responsive Webdesign

Mit den weiterhin rasant steigenden Absatzzahlen von Smartphones und Tablets wird das Thema „Responsive Design“ sowohl für uns, als auch für Sie als Website-Betreiber immer wichtiger. Ein Blick auf die aktuellen Verkaufszahlen macht dies deutlich. Im Jahr 2014 wurden in Deutschland knapp 16 Millionen Smartphones verkauft. Im laufenden Jahr wird mit weiteren Millionen weiterer Exemplaren gerechnet (Quelle: Focus). Neben dem Absatz der Engeräte hat sich laut einer aktuellen Statistik des unabhängigen Anbieters Statista, auch der Anteil aller Seitenaufrufen im Web durch Mobile Endgeräte im vergangenen Jahren von 2,6 % zu 5,1 % fast verdoppelt. Diese Zahlen belegen, dass immer mehr Menschen das Web mit einem Smartphone erkunden. Auch unsere Anfragen hinsichtlich der Anpassung von Websites für mobile Endgeräte steigen stetig. Dabei fällt auch fast schon obligatorisch der Begriff „Responsive Design“.

Responsive Webdesign Beispiel

 

Doch was genau ist mit „Responsive Design“ eigentlich gemeint? Diese Frage ist im Grunde genommen recht schnell beantwortet. Währen bisher immer auf eine mobile Subdomain weitergeleitet wurde z.B. www.domain.de zu m.domain.de, gibt es seit einiger Zeit durch die sogenannten Media Queries von CSS3 nun eine weitere Möglichkeiten. Unter Responsive Design versteht man die Bereitstellung eines Layouts, dass sich an die Eigenschaften des jeweiligen Endgerätes anpasst. Dieser Definition ist zu entnehmen, das Responsive Design nicht zwingend mit dem Entwickeln mobiler Websites gleichzusetzen ist. Viel mehr geht es um die Bereitstellung eines Layouts, dass unabhängig von den Endgeräten ist. Dementsprechend soll die Website sowohl auf sehr großen Monitoren, mit Auflösungen von bis zu 2560 x 1440 Pixeln ein vergleichbares Nutzerelebnis schaffen, wie es mit einer deutlich geringeren Auflösung oder mit einem Smartphone der Fall wäre. Die Website reagiert demzufolge auf die Gegebenheiten Ihrer potenziellen Kunden.

Von der technischen Seite betrachtet ist mit dem Stichwort „Responsive Design“ vor allem die Arbeit in CSS (Cascading Style Sheet) der Schlüssel zum Erfolg. Mit Hilfe der in CSS3 eingeführten Media Queries kann über eine Reihe von Eigenschaften, die für das Ausgabemedium am besten optimierte Darstellung abgerufen werden.

Mittels Media Queries können u. a. folgende Eigenschaften abgefragt werden:

  • Breite und Höhe des Browserfensters
  • Breite und Höhe des Ausgabegeräts
  • Orientierung (gemeint ist die vertikale bzw. horizontale Ausrichtung bspw. bei Smartphones oder Tablets)

Mit Hilfe dieser Abfragen können dann unterschiedliche CSS Deklarationen und Werte erfolgen. So kann eine Website auf unterschiedlichen Endgeräten vollkommen anders aussehen.

Media Queries werden von allen modernen Browsern (Firefox 3.5+, Chrome, Internet Explorer 9, Safari 3+, Opera 7+,) unterstützt. Für ältere Browser kann die Unterstützung mit Hilfe von JavaScript nachgerüstet werden. Auch unterstützen so gut wie alle Smartphone-Browser Media Queries vollständig.

Haben Sie weitere Fragen zu Responsive Design und Media Queries oder benötigen Sie Unterstützung bei der Umsetzung einer flexiblen Website? Unser kompetentes Web-Team hilft Ihnen gerne weiter.

Ist Responsive Webdesign auch etwas Sie?