Website auf Responsive Design umstellen

Immer mehr User besuchen Websites mit ihrem Smartphone, Tablet oder anderen Geräten mit einem kleinen Display. Der Trend dürfte anhalten und in Zukunft werden weitere Geräteklassen mit den unterschiedlichsten Displays hinzukommen, z.B. Wearable-Devices. Eine Möglichkeit, diesen Besuchern akzeptable Websites bereitzustellen, bietet responsive Webdesign. Einige Vor- und Nachteile bei dieser Methode sind unter responsive Webdesign beschrieben. Wenn man sich dafür entschieden hat, die Website responsive zu gestalten, sollte man das gut planen, damit der Übergang möglichst reibungslos verläuft. Es kann nämlich durchaus passieren, dass man einerseits den Aufwand unterschätzt und andererseits bei der Umstellung plötzlich unerwünschte Effekte zum Vorschein treten, die man nicht im Vorfeld berücksichtigte.

Aus Erfahrung kann gesagt werden, dass der Aufwand sich zwischen wenigen Stunden bis mehreren Wochen oder gar Monaten bewegen kann. Je nachdem, wie die Website in der Vergangenheit aufgebaut wurde und welche Inhalte auf einer Website vorhanden sind. Ist eine Website z.B. über die Jahre hinweg gewachsen und wurden dabei vielerlei Techniken eingesetzt, die schwer mit responsive Design umsetzbar sind, dann ist mit Sicherheit wesentlich mehr Aufwand erforderlich als wenn man nur einige wenige Webseiten hat, die dazu noch kompatibel mit responsive Designs sind. Beispielsweise ist die vernünftige Darstellung von großen, breiten Tabellen auf kleinen Displays schwer realisierbar. Hat man viele Tabellen, so kann es erforderlich sein, den Code für die Tabellen auf den Seiten anzupassen, damit sie auch auf kleinen Displays zumindest akzeptabel darstellbar sind. Einige Punkte, die man beachten sollte, wenn man die Website auf responsive Design umstellen möchte.

Technische Hilfsmittel

Generelles zu HTML-, CSS- und JavaScript-Codes

Inhaltliche Gestaltung

Auf den jeweiligen Seiten sind die genannten Themen detaillierter beschrieben. Nachfolgend sind die Themen in einer Schnellübersicht mit Beispielcodes und ohne nähere Erläuterungen. Kommentare innerhalb /* ... */ sind CSS-Kommentare.

META-Angabe für den Viewport

<!-- Für HTML -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- Für XHTML -->
<meta name="viewport" content="width=device-width,initial-scale=1" />

CSS-Stile inline, in einer oder mehreren Dateien

<head>
<!-- Sonstige Angaben im HEAD-Bereich -->

<!-- CSS-Stile inline -->
<style type="text/css">
<!--
@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px; */
}
-->
</style>

<!-- CSS-Stile in einer Datei -->
<link rel="stylesheet" type="text/css" href="alle.css" media="all">

<!-- CSS-Stile in mehrere Dateien aufteilen -->
<link rel="stylesheet" type="text/css" href="normale.css" media="all">
<link rel="stylesheet" type="text/css" href="768.css" media="only screen and (min-width: 768px)">
</head>

Bei XHTML muss der LINK-Tag mit .." /> abgeschlossen werden.

Parameter für Media-Queries festlegen

/* CSS-Stile abhängig von der Geräteauflösung (nicht empfohlen) */
@media only screen and (min-device-width:768px) {
/* CSS-Stile ab 768px; */
}

/* CSS-Stile abhängig vom Browserfenster */
@media only screen and (min-width:768px) {
/* CSS-Stile ab 768px; */
}

/* CSS-Stile abhängig von der Orientierung Querformat */
@media only screen and (orientation: landscape) {
/* CSS-Stile für Querformat */
}

/* CSS-Stile abhängig von der Orientierung Hochformat */
@media only screen and (orientation: portrait) {
/* CSS-Stile für Hochformat */
}

/* CSS-Stile abhängig von mehreren Parametern */
@media only screen and (min-width:768px) and (orientation: portrait) {
/* CSS-Stile für Mindestbreite 768px und Hochformat */
}

Mobile first oder Desktop first

Beispiel CSS-Code für Mobile first (wird meistens empfohlen).

/* Hier kommen alle CSS-Einstellungen */
/* Diese sind auch gültig für Browser, die keine @media queries kennen */
/* Überschreibung durch nachfolgende Einstellungen bei zutreffenden Queries */

@media only screen and (max-width:320px) {
/* CSS Einstellungen für Auflösungen unter 320px */
/* Können identisch mit ab 320px sein */
}

@media only screen and (min-width:320px) {
/* CSS Einstellungen für Auflösungen über 320px */
/* Für Smartphones geeignet */
}

@media only screen and (min-width:768px) {
/* CSS Einstellungen für Auflösungen über 768px */
/* Überschreibt die min-width: 320px */
/* Für Tablets geeignet */
/* Kann als Breakpoint dienen */
}

@media only screen and (min-width:1024px) {
/* CSS Einstellungen für Auflösungen über 1024px */
/* Überschreibt die min-width: 768px */
/* Können identisch mit den generellen Einstellungen sein */
/* Für Desktop-PC geeignet */
}

Beispielcode für Desktop first.

/* Hier kommen alle CSS-Einstellungen */
/* Diese sind auch gültig für Browser, die keine @media queries kennen */
/* Überschreibung durch nachfolgende Einstellungen bei zutreffenden Queries */

@media only screen and (min-width:1024px) {
/* CSS Einstellungen für Auflösungen ab 1024px */
/* Können identisch mit den generellen Einstellungen sein */
/* Für Desktop-PC geeignet */
}

@media only screen and (max-width:1024px) {
/* CSS Einstellungen für Auflösungen bis 1024px */
/* Überschreibt bis 1024px die generellen Einstellungen */
/* Für Tablets geeignet */
/* Kann als Breakpoint dienen */
}

@media only screen and (max-width:768px) {
/* CSS Einstellungen für Auflösungen bis 768px */
/* Überschreibt bis 768px die max-width: 1024px */
/* Für Smartphones und Tablets bis 768px geeignet */
}

@media only screen and (max-width:320px) {
/* CSS Einstellungen für Auflösungen bis 320px */
/* Überschreibt bis 320px die max-width: 768px */
/* Für Smartphones geeignet */
}

Breakpoints

Beispiel CSS-Code für Breakpoint ab 768 Pixel.

/* div.navigation mit float: none */
/* div.content wird dadurch unterhalb platziert */
@media only screen and (min-width:320px) {

div.navigation {
float: none;
}

div.content {
float: none;
}

}

/* div.navigation mit float: left */
/* div.content wird dadurch neben div.navigation platziert */
@media only screen and (min-width:768) {

div.navigation {
float: left;
}

div.content {
float: left;
}

}

Navigation

Bei der Navigation gibt es sehr viele Möglichkeiten. Häufig wird JavaScript eingesetzt, um das Menü ein- und auszublenden. Ein Beispiel mit CSS-, JavaScript- und HTML-Code für ein einfaches Toggle-Menü. Der Link zum Ein- und Ausblenden ist nur unter 768 Pixel sichtbar. Zum Testen des Codes reicht ein Verkleinern des Browserfensters.

<html>
<head>
<!-- jQuery laden -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
<!--
/* Toggle-Link einblenden */
@media only screen and (min-width:320px) {
  div.navigation-ein-aus {
    display: block;
  }
}
/* Toggle-Link ausblenden */
@media only screen and (min-width:768px) {
  div.navigation-ein-aus {
    display: none;
  }
}
-->
</style>

</head>
<body>

<!-- JavaScript-Code für Toggle-Funktion -->
<script type="text/javascript">
  $(document).ready(function(){
    $('#navigation-ein-aus').click(function(){
  $('#navigation').toggle('fast');
    })
  });
</script>

<!-- Toggle-Link -->
<div id="navigation-ein-aus">
  <a href="#">Navigation ein/aus</a>
</div>

<!-- Navigation, die ein- und ausgeblendet wird -->
<div id="navigation">
  <p>Hier ist die Navigation</p>
</div>

</body>
</html>

Bilder für das Design (Header, Logo, Hintergrundbilder etc.)

Stellt man die Website auf responsive Design um, so muss man die Bilder für das Design (Header, Logo, Hintergrundbilder etc.) meistens bearbeiten und mehrfach in unterschiedlichen Größen bereitstellen. Auf kleinen Displays kann man z.B. häufig keine großen Header oder Logos einfügen. Auf großen Monitoren besteht wiederum bei kleinen Bildern die Gefahr, dass das Layout nicht ansprechend aussieht. Je nach Größe kann man verschiedene Hintergrundbilder anzeigen lassen.

@media only screen and (min-width:320px) {
div.header {
background: url('bilder/header-klein.jpg');
}
}

@media only screen and (min-width:768px) {
div.header {
background: url('bilder/header-gross.jpg');
}
}

Mehrspaltige Inhalte

Der folgende Code kann auch für Bilder mit umfließenden Texten verwendet werden.

/* div.spalte1 mit float: none */
/* div.spalte2 wird dadurch unterhalb platziert */
@media only screen and (min-width:320px) {

div.spalte1 {
float: none;
}

div.spalte2 {
float: none;
}

}

/* div.spalte1 mit float: left */
/* div.spalte2 wird dadurch neben div.spalte1 platziert */
@media only screen and (min-width:768) {

div.spalte1 {
float: left;
}

div.spalte2 {
float: left;
}

}

Bilder skalieren

/* Damit Bilder skaliert werden */
img {
max-width: 100%;
height: auto;

/* Für Firefox, da max-width: 100% ignoriert werden könnte */
width: 100%;
}

Damit in Firefox kleinere Bilder nicht auf 100% vergrößert werden, kann man den Containern, in denen die Bilder platziert werden, zusätzlich die Stile float: left; oder float: right; zuweisen und den Text mit clear: both; trotzdem unterhalb platzieren.

Bildergalerien

Bildergalerien sind normalerweise für große Breiten ausgelegt und haben festen Breitenangaben. Dadurch könnte es schwierig werden, sie für responsive Designs zu verwenden. Hier gibt es keine Standard-Vorgehensweise. Entweder man programmiert die Bildergalerie um oder setzt eine ein, die auf responsive Design ausgelegt ist, z.B. Flexslider. Aber auch hier sind in der Regel Anpassungen notwendig, die von verschiedenen Faktoren abhängig sind.

Nicht umbrechende Texte

Bei einigen Tags werden die Texte standardmäßig nicht automatisch umgebrochen, wenn der Text breiter als der sichtbare Bereich ist. Das ist z.B. bei Hyperlinks der Fall. Den Textumbruch kann man in solchen Fällen vorgeben.

Beispielcode für Hyperlinks

/* Damit lange Hyperlinks umbrochen werden */
a {
word-wrap:break-word;
}

In manchen Fällen kann es erwünscht sein, dass der Text bei geringem Platz nicht umgebrochen wird, sondern Scrollleisten eingeblendet werden. Das ist z.B. bei vorformatierten Texten sinnvoll, die im PRE-Tag untergebracht werden und womit häufig Codes dargestellt werden. Würde man die Texte automatisch umbrechen lassen, könnte der Code unleserlich aussehen.

Beispielcode für vorformatierte Texte (PRE-Tag)

/* Damit bei großen Inhalten Scrollleisten angezeigt werden */
pre {
overflow: auto;
}

Elemente mit fixen Breitenangaben

Alle Elemente mit festen Breitenangaben können mit responsive Design grundsätzlich zu unerwünschten Effekten führen und man sollte nach Möglichkeit ohne feste Breitenangaben arbeiten. Stattdessen könnte man z.B. mit maximalen Angaben (max-width: ...; oder max-height: ...;) verwenden, sodass eine gewisse Flexibilität vorhanden ist. Manchmal muss man die festen Breitenangaben auch entfernen, damit sie mit responsive Design kompatibel sind bzw. sie keine Wirkung mehr haben, weil sie per CSS überschrieben werden. Hierbei gibt es kein bestimmtes Schema und man muss die einzelnen Webseiten mit den jeweiligen Inhalten und Einstellungen auf verschiedenen Displaygrößen testen.

Beispielcode für Tabellen, damit Scrollleisten automatisch angezeigt werden

table {
max-width: 100%;
display: block;
overflow-x: auto;
}

Diese CSS-Einstellungen können dazu führen, dass die festen Angaben für die Tabellenbreiten aufgehoben werden. Außerdem werden automatisch Scrolleisten angezeigt, wenn der verfügbare Platz nicht ausreichend sein sollte.

Fallback beim Einsatz von JavaScript

Besonders in Verbindung mit responsive Design wird an vielen Stellen JavaScript-Code eingesetzt. Hierbei sollte man stets berücksichtigen, dass eine Webseite auch ohne JavaScript funktionieren sollte. Beispielsweise können Suchmaschinenbots nicht unbedingt JavaScript-Code ausführen und es gibt Benutzer, die aus verschiedenen Gründen JavaScript im Browser deaktiviert haben (auch wenn die Anzahl derer gering ist). Das könnte unter Umständen dazu führen, dass Inhalte nicht wie gewünscht berücksichtigt bzw. dargestellt werden, z.B. wenn man mit display: none; den Container ausblendet und für das Einblenden JavaScript vorsieht.

Dasselbe betrifft auch Bildergalerien. Beispielsweise wird häufig der Container, in dem die Bildergalerie platziert ist, mit display: none; zunächst ausgeblendet. Dadurch wird verhindert, dass beim Laden des Codes der Container sehr große Maße annimmt. Erst durch JavaScript wird die Größe des Containers auf ein bestimmtes Maß eingestellt. Man könnte an dieser Stelle auch auf display: none; verzichten und die Beschränkung der Höhe mit JavaScript realisieren. So bekommen die User ohne aktiviertem JavaScript und Suchmaschinenbots, die JavaScript nicht verstehen, trotzdem alle Bilder angezeigt.

Tabellen mit vielen Inhalten sind ebenfalls Elemente, wo häufig JavaScript eingesetzt wird, damit breite Tabellen auf kleinen Displays sinnvoll angezeigt werden, z.B. mit einer Blätterfunktion, mit der einzelne Spalten ein- und ausgeblendet werden können. Bei der Entwicklung solcher Lösungen sollte man die Tabelle auf kleinen und großen Displays auch ohne aktiviertem JavaScript betrachten und ein Fallback berücksichtigen.

Fazit

Wie man sieht, kann der Aufwand beim Umstellen einer Website auf responsive Design durchaus sehr groß werden. Es reicht meistens nicht aus, nur die CSS-Dateien zu ändern. Häufig müssen auch die Inhalte angepasst werden, damit sie kompatibel mit responsive Designs sind, z.B. feste Breiten von den Elementen entfernen. Die genannten Codes sollten nur als Beispiele für die wichtigsten und häufig durchzuführenden Arbeiten betrachtet werden. Jedes Internetprojekt ist individuell und es kann durchaus sein, dass der ein oder andere Code nicht dazu passt und eine andere Lösung gefunden werden muss.