Responsive Webdesign
Als Entwickler von Websites hatte man schon immer das Problem, dass die Besucher eine unterschiedliche Auflösung hatten. So hatte man in der Vergangenheit die Internetpräsenz auf eine Bildschirmauflösung optimiert und die Websites sahen mit den üblichen Monitoreinstellungen ansehnlich aus. Durch die Verbreitung von internetfähigen Smartphones, Tablets und sonstigen Geräten stießen jedoch neue Geräteklassen hinzu, mit denen immer mehr Websites besucht werden. Diese werden mit Bildschirmauflösungen betrieben, die sich zum Teil gravierend von den klassischen Monitoren unterscheiden.
Ein Smartphone hat z.B. den Bruchteil der Fläche eines normalen Monitors. Internetfähige Fernseher können dagegen riesige Ausmaße annehmen. Und die Entwicklung geht immer mehr in die Richtung, dass vielerlei Geräte internetfähig sind und mit verschiedenen Bildschirmen und Bildschirmauflösungen ausgestattet werden. Wenn man sich nur auf eine einzige Monitorauflösung festlegt, sehen die Websites bei solch unterschiedlichen Monitorauflösungen zum Teil nicht ansehnlich aus bzw. beeinträchtigen das Surfvergnügen. Die Texte sind z.B. häufig so klein, dass man diese ständig zoomen muss. Durch die zum Teil wesentlich geringere Breite der Bildschirme müssen die Websites häufig nach links und rechts gerollt werden.
Flexible Anpassung der Website
Für die Probleme mit derlei unterschiedlichen Auflösungen kann responsive Webdesign die Lösung bieten. Responsive bedeutet in etwa flexibel, reagierend oder reaktiv. Dabei werden die CSS-Einstellungen, mit denen das Aussehen der Website festgelegt wird, abhängig von der Bildschirmbreite (oder auch -höhe) gemacht und somit flexibel angewendet. Beispielsweise sind Benutzer von Smartphones daran gewöhnt, die Inhalte nach oben und unten zu scrollen. Für solche Bildschirmauflösungen kann das Aussehen der Website so gestaltet, dass alles mittig angeordnet wird und die Website nach oben und unten gescrollt werden kann. Aber auch andere Änderungen sind denkbar. Beispielsweise könnte man die Schaltflächen bzw. die Navigation komplett anders gestalten, so dass eine Webseite auf Smartphones anders bedient werden kann. Im Grunde lassen sich alle CSS-Einstellungen von der verwendeten Bildschirmbreite oder -höhe abhängig machen und so für eine gewisse Flexibilität sorgen. Einige Tipps zur Erstellung und Umstellung von Websites, die responsvie sein sollen, sind unter Umstellung auf responsive Design verfügbar.
CSS-Code für verschiedene Bildschirmgrößen
Der CSS-Code, mit dem eine Webseite flexibel gestaltet wird, ist nicht besonders kompliziert. Ein Beispielcode.
/*Hier kommen die CSS-Einstellungen ab 601 Pixel*/
@media screen and (max-width:600px) {
/*Hier kommen die CSS-Einstellungen bis 600 Pixel*/
}Mit @media screen and (max-width:600px) werden innerhalb der geschweiften Klammern die CSS-Einstellungen festgelegt, die bis zu einer Breite von 600 Pixel gültig sind. Für alle übrigen Breiten werden die Einstellungen vorher gesetzt. Würde man die Einstellungen für die übrigen Auflösungen nicht davor setzen, sondern danach, würden diese die Einstellungen für die Maximalbreite von 600 Pixel überschreiben. Man kann auch mehrere Bedingungen festlegen, so dass man einen Bereich (von und bis) abdeckt. Ebenso sind Angaben für mehrere Breiten möglich. Ein Beispiel:
/*Hier kommen die CSS-Einstellungen ab 901 Pixel*/
@media screen and (max-width:600px) {
/*Hier kommen die CSS-Einstellungen bis 600 Pixel*/
}
@media screen and (min-width:601px) and (max-width: 900px) {
/*Hier kommen die CSS-Einstellungen ab 601 bis 900 Pixel*/
}Mit (min-width:601px) and (max-width: 900px) legt man einen Bereich von 601 - 900 Pixel fest, auf den die Regeln angewendet werden sollen. Durch die Verknüpfung mit and müssen beide Bedingungen zutreffen. Statt die Maximalbreite (max-width) kann man auch die Minimalbreite (min-width) angeben. Falls bei einer Auflösung mehrere Bedingungen zutreffen, dann gilt es, die Reihenfolge zu beachten. Die Regel, die zuletzt zutrifft, wird angewendet.
Vorteile von responsive Webdesign gegenüber einer mobilen Version
Wenn man eine Website für normale Monitore optimiert hat und z.B. den Besuchern mit Smartphones eine angepasste Version anbieten möchte, dann könnte man das auch über eine mobile Version der Website realisieren. Diese Methode hat jedoch einige Nachteile. Beispielsweise muss für die mobile Version eine eigene Internetadresse eingerichtet werden, wofür häufig eine Subdomain in der Form mobile.example.com oder m.example.com eingerichtet wird. Das hätte wiederum zur Folge, dass ein und derselbe Inhalt unter zwei verschiedenen Adressen erreichbar ist.
Wenn auf anderen Websites Hyperlinks gesetzt werden, so könnten die Links mal auf die eine und mal auf die andere Version führen. Die Besucher, die über solche Links die Website besuchen, könnten sich auf einer unpassenden Version wiederfinden, z.B. wenn ein Benutzer mit einem normalen Monitor auf einen Link zur mobilen Version klickt und umgekehrt. Es ist zwar möglich, solche Fälle aufzufangen und Umleitungen einzurichten. Allerdings ist hier wieder ein gewisser Aufwand notwendig und die Weiterleitung könnte unter Umständen von den Besuchern blockiert oder nicht gerne gesehen werden.
Die Erstellung einer mobilen Version der Website erfordert außerdem einen gewissen Aufwand. Im Grunde müssen alle Inhalte doppelt eingestellt werden. Es gibt zwar Tools, die dabei helfen können, den Aufwand zu reduzieren und die Daten von der normalen Version zur mobilen Version zu migrieren. Ganz entfällt der Aufwand trotzdem nicht und man muss stets beide Versionen im Blick halten. Problematisch ist es auch, wenn mehrere Personen an einer Website arbeiten, z.B. über ein Content Management System (CMS). Denn, nicht jedes CMS unterstützt die Datenmigration zur mobilen Version. Neben dem Aufwand für die doppelte Erstellung der Inhalte können sich hier auch schnell Fehler einschleichen, z.B. durch Kopieren und Einfügen von Texten oder durch die falsche Auswahl der Bilder.
Beim Einsatz einer mobilen Version der Website haben die Besucher zwar eine Alternative. Das kann bei der Vielfalt an Geräten jedoch zu wenig sein. Denn, die Bildschirmgrößen variieren sehr stark. Mit responsive Webdesign kann man mit einfachen Mitteln eine viel feinere Abstufung vornehmen, z.B. für Auflösung bis 300 Pixel, 500 Pixel, 750 Pixel, 1000 Pixel und mehr.
Nachteile von responsive Webdesign gegenüber einer mobilen Website
Wie bei allen technischen Möglichkeiten gibt es auch Nachteile beim Einsatz von responsive Webdesign. Beispielsweise können Bilder bei der mobilen Version angepasst und verkleinert eingebunden werden, was die Downloadzeiten der Website reduziert. Bei responsive Webdesign werden die Bilder zwar verkleinert dargestellt. Das wirkt sich jedoch nicht auf die Downloadzeit aus, weil beim Laden der Bilder die volle Dateigröße wie bei der Desktop-Version geladen wird. Das Problem mit großen Bildern auf kleinen Displays könnte sich in Zukunft aber erledigen, da angedacht ist, für ein Bild mehrere Versionen bereitzustellen. Je nachdem, welches Gerät benutzt wird, soll das passende Bild ausgeliefert werden. Sind die Spezifikationen herausgegeben und in den Browsern implementiert, könnte dieser Punkt nicht mehr zu den Nachteilen gezählt werden.
Responsive Webdesign ist eine einfache Möglichkeit, die Darstellung auf die unterschiedlichen Größen anzupassen. Die Inhalte von Webseiten sind jedoch zum Teil ziemlich komplex, weshalb eine auf die mobile Version optimierte Seite unter Umständen die bessere Wahl sein könnte. Das betrifft auch große und komplexe Navigationsstrukturen, die mit einer speziell angepassten mobilen Version evtl. besser realisierbar sind.