1. © schalk&friends – agentur für neue medien gmbh
1024x768, 1280x1024 oder
Responsive Design?
Sagen Ihnen die obigen Zahlenkombinationen etwas? Diese Zahlen sind die derzeit gängigen Bild-
schirmauflösungen, nach denen sich das Layout von Websites orientiert. Diese Bildschirmauf-
lösungen gelten als "Best Practice"-Angabe zur Optimierung von Websites für Desktop-Bildschirme.
Status Quo
Immer mehr Menschen surfen mobil mit
einem Smartphone oder Tablet im Netz.
Durch die immer stärkere Nutzung von
mobilen Endgeräten kommen bereits seit
einiger Zeit zusätzliche Bildschirm-
auflösungen ins Spiel. Wiederum gemes-
sen an der reinen Verbreitung sollten
auch diese Endgeräte mit ihrem jeweili-
gen Nutzungserlebnis unterstützt werden.
Kann bei den anfangs genannten Bild-
schirmauflösungen ein gemeinsamer
Nenner in Form eines Bereichs innerhalb
der Website definiert werden, der auch
mit minimalem horizontalen Scrollen
sichtbar ist, wird es bei der zusätzlichen
Berücksichtigung gängiger Smartphones schwierig. 320x480 und 1024x768 bieten wenig Fläche für einen
gemeinsam definierten Content-Bereich. Eine neue konzeptionelle und entwicklungstechnische Heran-
gehensweise schafft Lösungen: Das Responsive Design.
Definition Responsive Webdesign
Responsive Webdesign könnte ziemlich treffend mit reagierenden Websites übersetzt
werden und beschreibt eine konzeptionelle und entwicklungs-technische Herange-
hensweise an die Produktion von Websites. Responsive Websites "reagieren" auf die
Bildschirmgröße des genutzten Endgeräts und liefern dem Besucher eine optimierte
Variante. Ein Smartphone-Nutzer muss dadurch nicht mehr zuerst mit zwei Fingern
den Seiteninhalt zoomen, sondern erhält direkt eine lesbare Variante der Website.

2. © schalk&friends – agentur für neue medien gmbh Seite 2 von 2
Dabei wird immer dieselbe HTML-Grundlage einer Website genutzt und nur das Layout entsprechend den
Geräte-Anforderungen optimiert ausgeliefert. Obwohl das Layout der Website auf einem klassischen Desk-
top-Rechner anders aussieht als auf dem Smartphone, handelt es sich um die identische Seite. Möglich
machen dies neue Technologien auf Basis von HTML5 und CSS3 die entsprechend der Bildschirmauf-
lösungen unterschiedliche Layout-Variationen ausliefern.
Praxisbeispiel schalk&friends: ADDISON
Anhand der Website www.addison.de können Sie
eine mittels Responsive Design umgesetzte Seite
in der Praxis testen. Rufen Sie dazu die Seite auf
und ziehen Sie das Browserfenster schmaler. Sie
sehen, wie sich Struktur der Inhalte und Layout
ändern und an die Bildschirmbreite anpassen.
Vorteile von Responsive Webdesign
Vor allem Nutzer von mobilen Endgeräten profitie-
ren von entsprechend optimierten Varianten einer
Website. Der Einsatz von Responsive Design be-
deutet für diese Zielgruppe eine gesteigerte
Lesbarkeit und vor allen Dingen auch eine Berücksichtigung des Nutzungskontext, mit dem das Gerät ver-
wendet wird. Dazu zählt auch die unterschiedliche Nutzung von Touch-Geräten (Smartphone, Tablets) und
Maus oder Touchpad, auf die entsprechend optimiert werden kann. Sämtliche Layoutvariationen nutzen die
identische HTML-Grundlage und vor allem den identischen Content. Eine spezielle mobile Version mit ei-
genständigen Templates ist nicht nötig und minimiert den Pflegeaufwand.
Neue Endgeräte können durch Integration einer neuen Layout-Variante sehr leicht unterstützt wer-
den bzw. profitieren eventuell automatisch von bereits bestehenden Varianten. Ihre Website wird
geräteunabhängig und ist zukunftssicher.
Technische Lösung
 Ein Basis-Code und -Content für alle Geräte
 Inhalte einmalig in einem CMS
 Ausgabe in einem Design – aber in vielen Layouts
 Zukunftsfähig: Einfache Erweiterung für weitere separater Seiten und Endgeräte
 Einheitliche Markendarstellung über alle digitalen Kanäle hinweg
Ihr Ansprechpartner
Volker Jakob, Senior Consultant, Lindwurmstrasse 124, 80337 München, Telefon: +49-89-442358-26