HTML/Tutorials/bestehende Webseiten responsiv umbauen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im Self-Forum wird immer wieder gefragt, wie man einen schon bestehenden Webauftritt responsiv umbauen, oder ob man eine zweite für mobile Geräte geeignete Version erstellen muss.


In diesem Tutorial werden die Antworten zusammengefasst, gegliedert und anhand von Beispielen erklärt. Dabei wird gezeigt, wie man mit kleineren Änderungen im HTML besonders durch die Anpassung des CSS schnell zufriedenstellende Ergebnisse erzielen kann.

HTML[Bearbeiten]

Das Markup einer responsiven Seite, die auch auf Smartphones und Tablets passend angezeigt wird, unterscheidet sich nicht grundlegend von einer bestehenden für den Desktop entwickelten Seite.

HTML5-Grundgerüst[Bearbeiten]

Wenn Sie noch einen HTML4-Doctype verwenden, sollten Sie das HTML5-Grundgerüst als Ausgangslage für zukunftsfähige Projekte verwenden:

Beispiel: Kopiervorlage
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>
  </body>
</html>

Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter:

Dabei ist besonders die letzte Meta-Angabe wichtig, damit sich Webseiten einerseits an die verfügbare Breite anpassen, aber auch skalieren lassen.

Wenn Sie alle Seiten in Ihrem Code-Editor wie z.B. Notepad++ öffnen, können Sie die ersten fünf Zeilen durch "Suchen und Ersetzen" in allen Dateien einfügen. Eine Angabe von utf-8 ist aber nur sinnvoll, wenn die Seiten dann auch in diesem Format gespeichert werden.

Tabellen-Layout oder Div-Suppe?[Bearbeiten]

Nur wenn Sie noch ein Tabellen-Layout verwenden, sind größere Umgestaltungen nötig. Auch bei einer Vielzahl von Divs ist eine Vereinfachung vor der Überarbeitung des CSS empfehlenswert.

Trennung von Inhalt und Design[Bearbeiten]

In einer modernen Webseite haben Inline-Styles und präsentationsbezogene Elemente wie <font> und <center> nichts verloren. In diesem Fall sollten Sie erst das Markup bereinigen.

Ein Blick in den Validator verhilft hier zu einer ersten Bestandsaufnahme, ob und gegebenenfalls was geändert werden muss.

CSS[Bearbeiten]

Häufig reichen einige wichtige Änderungen am CSS, um eine Webseite zumindest großteils responsiv zu gestalten. Webseiten aus den 90ern mit einem Liquid Layout passten sich auch damals schon an verfügbare Breiten an, ließen in Tabellen und mehrspaltigen Layouts längere Wörter aber über den sichtbaren Rand überstehen.

Vergessen Sie den Begriff Pixel![Bearbeiten]

Das Haupthindernis herkömmlicher Seiten ist der Versuch eines pixelgenauen Designs. Durch unterschiedliche Darstellungen auf verschiedenen Plattformen, sowie durch Retina-Displays ist dieser Ansatz von vornherein zum Scheitern verurteilt!

»Diese Website ist optimiert für eine Auflösung von 800×600 und den Internet Explorer 6.«

Kennen Sie diesen Hinweis aus der Anfangszeit des Webs noch? Machen Sie nicht den Fehler und versuchen Sie nun neben Ihrer Desktop-Version eine oder mehrere Versionen für bestimmte Viewport-Größen zu erstellen. Brad Frost zeigt, dass es mittlerweile unmöglich ist vorherzusagen, mit welchen Endgeräten Nutzer heute oder gar morgen Ihre Webseite besuchen werden.

Unser Ausgangsbeispiel ist eine aside-Box innerhalb einer kleinen Webseite, wie sie auch im Einstiegs-Tutorial vorgestellt wird:

Beispiel: aside mit festen Größen
#kontakt {
  border: solid 1px red;
  float: right;
  margin-right: 10px;
  height: 125px;
  width: 145px;
}
<aside id="kontakt">
  <h2>Kontakt</h2>
  <p>Telefon: 01234 4711</p>
  <p>7 - 17 Uhr, sonst AB</p>
</aside>
Die aside-Box ist pixelgenau abgemessen, sodass Überschrift und zwei Zeilen Text exakt hineinpassen. (Im Normalfall hätte man den Absätzen noch etwas padding gegeben.)
Sie wird mit float:right; rechts positioniert (Eine bessere Alternative zeigen wir Ihnen im nächsten Kapitel.)
Bei einer Änderung der Schriftgröße durch den Entwickler müssten die Breite und Höhe angepasst werden. Bei der Änderung der Schriftgröße durch den Nutzer im Browser oder durch ein User-Stylesheet würden die Textzeilen umbrechen und aus dem Rahmen - bei overflow:hidden; sogar aus dem sichtbaren Bereich wandern.

Schriftgröße[Bearbeiten]

»Was soll ich denn dann anstelle von Pixel nehmen?«

Ein guter Ausgangspunkt für responsive Webseiten ist die aktuelle Schriftgröße als Basisgröße. Ein em repräsentiert die vom Browser berechnete Schriftgröße des Elements; es geht dabei kaskadierend von der Schriftgröße des Elternelements aus. Im Normalfall beträgt die eingestellte Schriftgröße in den meisten Browser 16px, der genaue Wert ist aber egal, da wir ja flexibel und responsiv werden wollen!


Beispiel: feste Schriftgrößen
html {
  font-size: 9px;
}
In vielen älteren Webseiten wurde die Schriftgröße bewusst auf einen kleinen Wert festgelegt, damit mehr Text ins Layout passt.
Auf mobilen Geräten ist dies jedoch viel zu klein.


Beispiel: Hack für Safari und Opera aus dem Jahre 2000
html {
  font-size: 100.01%;
}
Wie im Titel erwähnt, soll hiermit ein Bug, der längst gefixt wurde, umgangen werden. Heutzutage ist eine solche Festlegung überflüssig!
Empfehlung: Verzichten Sie im Normalfall auf die Festlegung einer Schriftgröße!

relative Maßeinheiten für Breiten und Höhen[Bearbeiten]

Diese Schriftgröße kann (und sollte) auch als Basis für Breitenangaben von Elementen verwendet werden:

Beispiel: aside mit relativen Größen ansehen …
#kontakt {
  border: solid 1px red;
  float: right;
  margin-right: 1em;
  width: 9em;
}
Die Breite ist in der relativen Maßeinheit em angegeben. Bei einer Änderung der Schriftgröße wächst die Breite der aside-Box einfach mit.


Eine Angabe einer Höhe ist im Allgemeinen nicht notwendig. Bei der Verwendung von flexiblen und prozentualen Breiten ist es sogar kontraproduktiv: Wenn der Inhalt auf schmalen Viewports zusammengeschoben wird, muss er nach unten ausweichen können und nicht über den Rand herausragen oder gar verschluckt werden.

Um bei vielen verschachtelten Elementen mit verschiedenen Festlegungen nicht durcheinanderzukommen, können Sie auch die Einheit rem (root em = Wurzel-em) verwenden, die sich auf die Schriftgröße des root-Elements html bezieht.

empfohlene Vorgehensweise[Bearbeiten]

Um mit wenigen Handgriffen schon sichtbare Ergebnisse zu erzielen, durchforsten Sie ihr Stylesheet:

Empfehlung:

Verwenden Sie …

  • Schriftgrößen (und Maße) in relativen Größen wie em, damit eine größere Schriftgröße nicht das Design zerschießt
  • prozentuale Breiten oder relative Angaben in em oder rem, aber keine festen Pixelwerte
  • keine Höhenangaben für Elemente

Verzichten Sie auf eine Positionierung …

  • mit position: absolute oder fixed, da diese sich bei unterschiedlichen Viewports zwangsläufig verschieben.
  • mit float, außer für Bilder innerhalb von Fließtext.

Festlegungen für unterschiedliche Viewports[Bearbeiten]

CSS bietet mehrere Möglichkeiten durch eine browserinterne Eigenschaftsabfrage unterschiedliche Darstellungen zu erreichen.

media queries[Bearbeiten]

Die heutzutage üblichste Variante ist der Einsatz von media queries (engl. für Medienabfragen), mit denen dann unterschiedliche Festlegungen für unterschiedliche Breiten, aber auch für andere Kriterien, getroffen werden können.

Beispiel: aside mit je nach Viewport-Breite unterschiedlichen Größen ansehen …
/* Kompaktes Layout für mobile Geräte */
#kontakt {
  border: solid 1px red;
  float: right;
  margin-right: 1em;
}

@media (min-width: 30em) { 
  /* mehrspaltiges Layout  für breitere Bildschirme */ 
  #kontakt {
    float: right;
    width: 9em;
  }
}
Die aside-Box nimmt auf kleinen Bildschirmen die volle Breite des Viewports ein. Folgende Inhalte werden darunter dargestellt.
Als Breakpoint wird eine Breite von 30em genommen.
Empfehlung: Verschieben Sie die Breite des Browserfensters, um den Sprung in der Darstellung zu erkennen.


»Wo soll ich denn meine Breakpoints setzen? Welche Maße haben die meistverwendeten Smartphones?«

Erkennen sie den schon oben angesprochenen Denkfehler? Die Breakpoints sollen sich nicht auf einige Endgeräte, sondern am Inhalt ausrichten. Eine Box von 9em Breite ist auf einer breiten Seite ok - wenn der Hauptinhaltsbereich daneben aber nur 5em breit ist, sieht die Seite komisch aus. Deshalb soll der Hauptinhalt mindestens 20em Breite betragen. So wird der Breakpoint bei 30em gesetzt.

Bei einer Navigation wäre ein Breakpoint sinnvoll, bei dem alle Navigationselemente neben- anstatt untereinander dargestellt werden können.

Flexbox[Bearbeiten]

In den letzten Jahren hat sich mit Flexbox ein Verfahren zur Erstellung responsiver Seiten durchgesetzt, bei dem man auch auf relative Breiten verzichten kann. Der Browser verteilt die Elemente anhand des verfügbaren Platzes selbst über die nutzbare Breite.

Beispiel: Flexibles Layout mit Flexbox ansehen …
<article>
  <h1>Willkommen bei der Schreinerei Meier!</h1>
  ...
</article>

  <aside id="kontakt">
    <h2>Kontakt</h2>
    <p>Telefon: 01234 4711</p>
    <p>7 - 17 Uhr, sonst AB</p>
  </aside>
Da bei Flexbox Elemente nur in eine Richtung positioniert werden, wird der Hauptinhaltsbereich in ein article-Element geschachtelt, das nun mit CSS entweder neben oder oberhalb des aside positioniert wird.
/* Kompaktes Layout für mobile Geräte */
body {
  display: flex;
  flex-flow: row wrap;
}
 
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, aside, footer {
  flex: 1 100%;
}

/* nebeneinander bei ausreichender Breite */
@media all and (min-width: 35em) {
  article {
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
}
Der body erhält mit display: flex; die Anweisung direkte Kindelemente als flexible Objekte zu behandeln. Mit flex: 1 100%; erhalten Sie die volle Breite.
Da dies auf breiteren Bildschirmen nicht gut aussehen würde, wird eine Media Query eingefügt, die bei 35em einen Breakpoint setzt, der die verfügbare Breite zu 1 Teil auf die aside-Box und zu 3 Teilen auf den article verteilt.
Empfehlung: Verschieben Sie die Breite des Browserfensters, um den Sprung in der Darstellung zu erkennen.

grid-Layout[Bearbeiten]

Der Nachteil von Flexbox ist die fehlende Möglichkeit Elemente zweidimensional auszurichten. So musste der Hauptinhalt unserer Beispielseite in einem article-Element umschlossen werden. Mit Grid-Layout können Sie Elemente beliebig in einem Raster anordnen. Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

… und für große Bildschirme?[Bearbeiten]

Ein Aspekt wird bei responsiven Webdesign oft vergessen: Neben vielen kleinen Viewports auf mobilen Geräten werden die Monitore auf dem Schreibtisch immer größer.

Textzeilen, die sich über 2550 oder sogar 4000 Pixel Breite erstrecken, sind nur noch schwer lesbar. Als Empfehlung hat sich eine Reduzierung der maximalen Seitenbreite auf ca. 60em durchgesetzt:

Beispiel
body {
  max-width: 60em;
  margin: 1em auto;
}
Auf kleinen Bildschirmen nimmt die Webseite den ganzen Raum ein; bei sehr breiten Bildschirmen beträgt die maximale Breite 60em (abhängig von der Schriftgröße).
Die Seite wird zentriert, sodass ein etwaiger Rand auf beide Seiten verteilt wird und nicht so massig wirkt.

mehrspaltiger Text[Bearbeiten]

Mit der zusammenfassenden Eigenschaft columns, bzw. den Eigenschaften column-count und column-width können Sie für ein Element durch die Angabe einer Mindestspaltenbreite bestimmen, ob es in mehreren Spalten angezeigt wird. Die Spalten werden dabei gleichmäßig befüllt.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel
div {
  -webkit-column-count:5; 
  column-count:5; 
  -webkit-column-width: 12em; 
  column-width: 12em;
}
In unserem Wiki werden die Links im Schnell-Index je nach verfügbarer Breite auf mehrere Spalten aufgeteilt. Hierbei sollen die einzelnen Spalten mindestens 12em Breite haben und maximal 5 Spalten nebeneinander stehen.

empfohlene Vorgehensweise[Bearbeiten]

Nachdem Sie in Kapitel 2.1.3 alle bisherigen Positionierungen, Floats, Breiten- und Höhenangaben entfernt haben, sollte Ihre Webseite auf mobilen Geräten schon ganz gut aussehen. Nach der Devise Mobile First! ist dies unser Ausgangspunkt. Wenn Sie den Viewport nun allmählich vergrößern, werden Sie erkennen, wann Sie Inhalte nebeneinander anstatt untereinander platzieren können.

Generell gibt es einen Zielkonflikt zwischen Kunden und Entwicklern, die möglichst viel Inhalte im sichtbaren Bereich neben- und im Falle von Karussells auch übereinander präsentieren wollen, und Nutzern, die Texte möglichst schnell erfassen wollen und lieber scrollen.

Empfehlung:

Verwenden Sie …

  • sowenig Spalten wie möglich, so viele wie nötig
  • Breakpoints, die sich am Inhalt und nicht an hypothetischen Geräteabmessungen ausrichten
  • außer auf Landing Pages eine maximale Breite von ca. 60em

Wenn Sie nach der Überarbeitung des Stylesheets merken, dass Sie einige div-Elemente gar nicht als Selektoren verwendet haben, können Sie erneut das HTML-Markup bereinigen.

Sonderfälle[Bearbeiten]

Mit den oben genannten Empfehlungen ist es möglich, einen bestehenden Webauftritt innerhalb weniger Stunden so umzubauen, dass sich die Seiten weitgehend responsiv verhalten. Trotzdem gibt es einige Sonderfälle, die spezielle Aufmerksamkeit beanspruchen und für die es teilweise keine einfachen Lösungen gibt:

Menüs[Bearbeiten]

Mit CSS ist es möglich, Dropdown-Menüs horizontal anzuordnen. Da Touchgeräte aber keine Maus haben, ist der Einsatz von hover zum Aufklappen aber nicht möglich. Entweder Sie verzichten auf diese Möglichkeit oder Sie implementieren eine Möglichkeit, die mithilfe von JavaScript eine volle Zugänglichkeit für Touch-Geräte und Tastaturbedienung ermöglicht:

Tabellen[Bearbeiten]

In Tabellen erfasste Daten lassen sich nicht beliebig nach unten verschieben. Deshalb sind hier Sonderkonstruktionen nötig, die die einzelnen Spalten auf- und zuklappen.

Grafiken und Videos[Bearbeiten]

Bei der Einbindung von Grafiken (und auch anderen Medien-Dateien wie Videos oder Animationen per object oder iframe) gibt es neben dem Aspekt der dargestellten Abmessungen auch noch den der Dateigröße. Hierbei gilt zu beachten, dass ein großer Bildschirm nicht notwendigerweise eine gute Internetverbindung impliziert (es könnte ja auch ein Laptop sein, der per Hotspot an einem SmartPhone ohne LTE angebunden ist). Es gibt einige Mittel und Wege unterschiedliche Bilder je nach Art der Endgeräte auszuliefern.

Hintergrundgrafiken[Bearbeiten]

Im responsiven Webdesign ist es möglich, Hintergrundbilder mit background-size:contain oder cover an unterschiedlich große Bereiche anzupassen. Trotzdem ist es empfehlenswert, auf aufwendige Hintergrundgrafiken schon allein wegen der Lesbarkeit des Seiteninhalts zu verzichten. Der Trend ging in den letzten Jahren zu relativ nüchternen, schmucklosen Seiten.

Verläufe können mittlerweile mit der CSS-Funktion linear-gradient() ohne den Einsatz von extern zu referenzierenden Grafiken realisert werden.

Weblinks[Bearbeiten]