Nehmen Sie Kontakt auf.

Sie benötigen weitere Informationen zu einer bestimmten Leistung?
Sie haben eine konkrete Projektanfrage oder möchten einen Gesprächstermin vereinbaren?

Dann sind Sie hier genau richtig. Schreiben Sie uns ein paar Zeilen und wir melden uns schnellstmöglich bei Ihnen.

Ja, ich habe die Datenschutzerklärung zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt.

Mit dem Absenden des Kontaktformulars erkläre ich mich mit der Verarbeitung einverstanden.

Responsive Design - Websiteoptimierung für Smartphones und Tablets

Illustration zum Thema responsive Design. Verschiedene Geräte (Desktopmonitor, Notebook, Tablet PC und Smartphone) zeigen schematisch ein Websitelayout, welches sich der Displaygröße anpasst.

Der enorme Anstieg mobiler Internetnutzung via Smartphone und Tablets fordert eine adäquate Anpassung des Webdesigns an die Eigenschaften dieser Geräte und deren Bedienungsmöglichkeiten. Die hierbei zu berücksichtigenden Kriterien sind beispielsweise:

  • Gerätegröße
  • Displaygröße
  • Orientierung (Hoch- oder Querformat)
  • Eingabemöglichkeiten (Tastatur oder Touch-Oberfläche)

Die bisher starr konstruierten Webseitenlayouts haben bei kleineren Displaygrößen häufiges Scrollen und Zoomen zur Folge. Dadurch wird der Bedienkomfort erheblich eingeschränkt und das Konsumieren von Inhalten wird insgesamt verlangsamt. 

Daher werden Websites heute insbesondere für die Darstellung auf mobilen Geräten wie iPhone und iPad speziell optimiert, sodass trotz verringerter Displaygröße keine Nachteile bezüglich Lesbarkeit und Bedienbarkeit für den mobilen Sufer entstehen. Ziel ist es, dass die Webseiten sich auf jedem Gerät so übersichtlich und benutzerfreundlich wie möglich präsentieren.

Technische Umsetzung mittels CSS3 und Media Queries

Die technische Basis für eine mobile Optimierung bilden neuere Webtechnologien wie HTML5, CSS3 und JavaScript. Diese regeln die Darstellung und Positionierung der einzelnen Elemente wie Navigationen, Seitenspalten und Texte.

Mittels CSS3 werden sogenannte "Media Queries" (auch "Breakpoints" genannt) definiert, bis zu bzw. ab deren Pixelbreite sich bestimmte Styling-Eigenschaften ändern. So können beispielsweise die Contentelemente einer rechten Infospalte auf mobilen Geräten unter den Content rutschen, da in der Breite weniger Platz zur Verfügung steht.

Beispiel für Responsive Design bei dem Webbaustein Energieeffizienz der STAWAG (Stadtwerke Aachen) unter energieeffizienz.stawag.de. Ansicht auf einem iPad und einem iPhone

Nachteile einer eigenständigen Mobil-Version

Die Alternative zum Responsive Design ist eine strikte Trennung der Desktop- und der Mobil-Version. Der höhere redaktionelle sowie technische Pflegeaufwand und die damit verbundenen Kosten sind erhebliche Nachteile. Ein weiteres Problem ergibt sich durch die Vielzahl unterschiedlicher Displaygrößen, die möglichst alle berücksichtigt werden sollten. Spätestens hier müssen dann bei der mobilen Version ebenfalls Media Queries eingesetzt werden, damit sich das Design an die verschiedenen Größenklassen von Tablets und Smartphones anpassen kann. 

Ein weiterer Aspekt, der gegen eine separate mobile Version der Webseiten spricht, ist Google und das Ranking in Suchmaschinen. Laut eigener Aussagen von Google werden Webseiten abgewertet, die einzelne Inhalte nicht auch in der mobilen Version zur Verfügung stellen, sondern dann stattdessen einfach auf die Startseite weiterleiten oder noch schlimmer, eine Fehlerseite ausgeben, da dieser Inhalt nicht in einer Smartphone-freundlichen Version existiert (zum Blogbeitrag von Google).

Responsive Design nicht nur für Kleingeräte

Nicht nur die Anforderungen von Smartphones und Tablets können durch ein reaktionsfähiges Design (Responsive Design) berücksichtigt werden. Auch die Displays von Notebooks und Netbooks sowie E-Book-Readern, Desktop-PCs und großformatigen Bildschirmen können erheblich in Größe und Auflösung variieren. Stets sind das Erscheinungsbild und die Bedienung der Webseiten und Webanwendungen maßgeblich vom jeweiligen Endgerät abhängig. Responsive Designs ermöglichen eine relativ einfache Anpassung an alle Displaygrößen, da lediglich die Darstellung der Inhalte und Elemente beeinflusst werden. Die Datenbasis und Funktionalität der Webseiten muss nicht verändert werden. Daher führt heute praktisch kein Weg vorbei an responsiven Webdesigns.

Browserkompatibilität

Alle aktuellen Versionen der gängigen Webbrowser und insbesondere der mobilen Browser unterstützten Media Queries (vergl. Tabelle "Browsersupport CSS3 Media Queries", die grüne Markierung kennzeichnet die Unterstützung von Media Queries). Für ältere Versionen wie z. B. der Internet Explorer 7 und 8 werden die CSS-Definitionen so gesetzt, dass hier die Website unabhängig von der Browserbreite statisch bleibt. Somit entstehen durch die Verwendung von Media Queries keinerlei Nachteile im Vergleich zu Webseiten, die auf Media Queries verzichten.

Tabelle zeigt die Browserkompatibilität für CSS3 Media Queries. Diese werden unterstützt von den aktuellen Versionen der Browser IE, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, Blackberry Browser, Opera Mobile, Chrome for Andr
Browsersupport CSS3 Media Queries (Quelle: www.caniuse.com)