Responsive Webdesign - reaktionsfähige Websites.

Früher: Desktop-PC und Notebook - das war's so ziemlich.

Noch vor wenigen Jahren waren der Desktop-PC, oder das Notebook praktisch die einzigen Mittel, mit denen Nutzer des WWW auf das Netz zugriffen. Im Laufe der Jahre wurden die Bildschirme größer, die Auflösungen höher - eine zentrale Frage beim Design einer Website war daher immer die Auflösung, für die man die Website "optimiert". Waren in den Anfangstagen des World Wide Web 640x480 Pixel noch das Maß der Dinge, so wandelte es sich bald zu 800x600 Pixel und einige Jahre später zu 1024x768 Pixeln, zuletzt entwickelte es sich zunehmend in Richtung 1280x800 Pixel. Man rechnete einige Pixel in der Horizontalen ab für den Scrollbar und eventuelle Fensterränder, in der Vertikalen etwas mehr für Titel- und Navigationsleiste sowie Startleiste des Betriebssystems (zumeist ging man von Microsoft Windows™ aus).

Der gedankliche Ansatz bestand darin, dass der absolute überwiegende Teil der Nutzer damit die Website nutzen kann, ohne in der Horizontalen scrollen zu müssen.

Erb-Lasten aus dem Printdesign - und aus dem Marketing.

Den Ansatz, Webseiten für eine bestimmte Auflösung zu optimieren, hat das Webdesign vom Print-Design"geerbt". Doch nicht nur die Tatsache, dass Webdesigner in den jungen Tagen des WWW oftmals in erster Linie, oder vorher, Print-Designer waren, ist ursächlich hierfür. Eine ganz zentrale Rolle nahmen hier häufig auch die Marketing-Verantwortlichen der Unternehmen ein, in Ihrem Bedürfnis nach absoluter Kontrolle über das Design-Ergebnis. Oftmals wurde die Internetpräsenz als Online-Pendant zu den verbreiteten Hochglanz-Broschüren gesehen. Alles hatte überall und bei jedem identisch auszusehen. Noch heute findet man in vielen Webdesigner-Stellen-Beschreibungen die Anforderung "pixelgenaue Umsetzung für alle Browser".

Veränderte Erwartungen durch neue Nutzungsgewohnheiten.

Mit dem Erscheinen des ersten iPhone™ von Apple im Jahr 2007 und des ersten iPad™ 2010 begann der Siegeszug dieser Geräteklassen. Zugleich geriet die wohlgeordnete und bewährte Vorgehensweise der Designer zunehmend aus den Fugen. Immer mehr Menschen begannen das Netz unterwegs mit ihrem Smartphone, oder gemütlich vom Sofa aus mit dem Tablet PC zu nutzen. Und mit den Nutzungsgewohnheiten ändern sich auch die Erwartungen Ihrer Nutzer.

Neue Geräteklassen . Neue Bedienstandards.

Nicht an Smartphones angepasste Websites beispielsweise verfügen in der Regel über schwer bis nicht lesbaren Text, kaum mit den Fingern klickbare Links und Buttons, was die Nutzer zwingt, ständig in die Seite hinein und wieder heraus zu zoomen. Sie unterstützen häufig keine Touch-Steuerung. Oftmals werden wichtige Informationen erst durch Überfahren mit dem Mauszeiger sichtbar, oder Funktionen nutzbar - nur gibt es keinen Mauszeiger auf Smartphones und Tablet PCs!

Adaptive Webdesign vs. Responsive Webdesign.

Dabei stehen alle Mittel, die man zur Umsetzung von reaktionsfähigen Websites als Web-Entwickler braucht, bereits heute zur Verfügung. Unterschieden werden hier zwei Ansätze: Adaptive Webdesign und Responsive Webdesign.

Gemeinsamkeiten der beiden client-seitigen Ansätze.

Beide Ansätzen folgen dem "One document"-Grundsatz: Jedes Gerät und jeder Browser erhält dasselbe HTML-Dokument. Durch sogenannte Media Queries, die Teil von CSS 3 sind, gibt es die Möglichkeit, Elemente des HTML-Dokumentes in Abhängigkeit von den zur Verfügung stehenden Bildschirmpixeln in der Horizontalen zu stylen.

Adaptive Webdesign.

Beim Adaptive Webdesign ("anpassungsfähiges Webdesign") werden weiterhin statische Breiten in Pixel für Elemente verwendet wie beim althergebrachten Webdesign - mit dem Unterschied, dass es mehrere Designs gibt, zwischen denen Auflösungsunabhängig "hart" umgeschaltet wird, wenn das Browserfenster die entsprechende Breite aufweist. Es gibt also beispielsweise ein Design für Bildschirme bis 320px/480px Breite (z.B. altes iPhone™ im Hochkant-/Landscape-Modus), eines für Bildschirme zwischen 481px und 768px Breite (z.B. iPad™ im Hochkant-Modus), eines für 769px bis 1024px Breite (iPad™ im Landscape-Modus), und eines für alle höher aufgelösten Anzeigen.

Solange die "Umschalt-Grenzen" nicht erreicht sind, bleibt jedes Design für sich komplett statisch.

Responsive Webdesign.

Beim Responsive Webdesign werden - genau wie beim Adaptive Webdesign - auch Pixelgrenzen für die Umschaltung der Styles definiert. Das Design in jeder Stufe ist jedoch flexibel! Dies wird erreicht auf Basis eines flexiblen Rasters, welches Breiten in % der zur Verfügung stehenden Breite definiert. So passt sich das Design, meist bis zu einer Obergrenze von um die 1280 Pixeln, dynamisch an den Raum an, der da ist. Diese Obergrenze wird meist aus dem Grunde definiert, damit Zeilen nicht zu lang werden. Sehr lange Zeilen stören den Lesefluss empfindlich.