CSS/Tutorials/Einstieg/Webseiten responsiv umbauen

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg(Weitergeleitet von Vergessen Sie den Begriff Pixel!)
Wechseln zu: Navigation, Suche
Im Self-Forum wird immer wieder gefragt, wie man einen schon bestehenden Webauftritt responsiv umbauen kann, 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.

Wichtig ist, dass Sie nicht dem Fehler verfallen, Ihre Webseite für bestimmte Geräte zu optimieren, da die Grenzen der heutigen und künftigen Ausgabegeräte immer mehr verschwimmen:

Brad-Frost-this-is-not-the-web.gif


Webdesign bedeutet …

  • eine Fläche zu gestalten, ohne deren Format zu kennen,
  • Text zu layouten, ohne wirklichen Einfluß auf Schriftart, Grösse und Zeilenfluss zu besitzen,
  • Farben einzusetzen, die sich kaum genauer als ungefähr definieren lassen.

Webdesign schafft eine flexible Konstruktion, eine dehnbare Architektur, die sich in unterschiedliche Räume einfügt, technische Besonderheiten berücksichtigt und Spielraum läßt für individuelle Gegebenheiten. Webdesign ist immer Gast auf fremden Bildschirmen.


Zitat #335 von Joachim, 08.07.2006

HTML

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.

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.

HTML/Tutorials/Trennung von Inhalt, Präsentation und Verhalten

HTML-Grundgerüst

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

responsives HTML-Grundgerüst
<!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.

HTML/Tutorials/Grundgerüst

Tabellen-Layout oder Div-Suppe?

Wenn Sie noch ein Tabellen-Layout verwenden, können größere Umgestaltungen nötig sein.

Probieren Sie vorher auf jeden Fall einmal, die vermutlich auf Ihrer Webseite vorhandenen festen Breitenangaben in Pixeln ("width") bei allen table-Elementen und in allen zum table-Element gehörenden Stylesheets ersatzlos zu streichen, oder durch max-width oder eine Prozentangabe zu ersetzen.[1]

Beachten Sie: Das Grundproblem von Tabellen, dass die nebeneinander positionierten Spalten bei schmaleren Viewports außerhalb des Anzeigebereichs „verschwinden“ anstatt sich untereinander anzuordnen, wird dadurch nicht gelöst.

Wenn Ihre Webseite eine Vielzahl verschachtelter div-Elemente enthält, ist prinzipiell eine Vereinfachung des HTML-Codes vor der Überarbeitung des CSS empfehlenswert, aber nicht immer zwingend notwendig. Suchen Sie zunächst einmal überall nach festen Breitenangaben (in Pixeln), und ändern Sie die zu max-width oder zu Prozentangaben. Machen Sie bei der Gelegenheit auch alle Bilder durch eine max-width Angabe elastisch (=responsiv). Auch diese einfachen Umbaumaßnahmen können Webseiten in kurzer Zeit ausreichend responsiv machen.

Und wenn doch ein größerer Umbau notwendig ist:

HTML/Tutorials/Seitenstrukturierung

Beachten Sie, dass ein Validator nur die Gültigkeit des HTML-Markups überprüft und weder Tabellen-Layout noch Div-Suppe als semantisch falsch „anprangert“.

CSS

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

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 HTML-Einstieg vorgestellt wird:

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 Abschnitt.)

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

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

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


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.


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 festen Schriftgröße. Verwenden Sie statt dessen em oder, falls sich die Größe auf das Root-Element beziehen soll, rem.
(Den meisten Nutzern ist gar nicht bewusst, dass der Browser Möglichkeiten zur Einstellung von Schriftart und -größe besitzt.
Menschen mit visuellen Einschränkungen sind jedoch dankbar, wenn Sie ihnen durch Verzicht auf eine feste Schriftgröße erlauben, die Seite beliebig zu zoomen.)

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

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

aside mit relativen Größen ansehen …
#kontakt {
  border: solid thin 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.

Mehr Informationen zu responsiven Einheiten finden Sie im nächsten Kapitel.

empfohlene Vorgehensweise

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

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

media queries

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.

aside mit je nach Viewport-Breite unterschiedlichen Größen ansehen …
/* Kompaktes Layout für mobile Geräte */
#kontakt {
  border: solid thin 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?«


Viewportauflösungen heutiger Geräte
Quelle: https://opensignal.com/reports/fragmentation.php

Erkennen Sie den schon oben angesprochenen Denkfehler?

Es ist heutzutage unmöglich, genaue Werte für Geräte-Abmessungen zu ermitteln, da eine Vielzahl dieser Geräte am Markt ist. SmartPhones werben mit 2000 (Geräte)Pixeln, Phablets lassen die Grenzen zwischen Phones und Tablets immer weiter verschwimmen. Hochauflösende 4K-Monitore sollen nicht für die mögliche Anzeige von mehreren DIN A4 Seiten in Mini-Schrift verwendet werden.

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. Dies kann bei 30em, aber auch bei einer anderen Breite passieren.

grid-Layout

Mit Grid-Layout können Sie Elemente beliebig in einem responsiven Raster anordnen.

Das Geniale dabei ist der mögliche Verzicht auf jegliche Breitenangaben:


Seite mit 2 Spalten ansehen …
body {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 30em) { 
	/* Breite beträgt mindestens 30em */ 
	body {
		grid-template-columns: 1fr 3fr;	
		grid-template-rows: auto 1fr 100px;
	}
}

Unsere Beispielseite enthält im Body ein Grid (=Raster), das aber noch nicht weiter definiert ist. Erst ab einer Breite von 30em entstehen mit grid-template-columns nun zwei Spalten, die sich im Verhältnis 1 zu 3 aufteilen (fr steht für fraction, engl. für Bruchteil.

CSS/Tutorials/Grid Layout

… und für große Bildschirme?

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.

Fazit

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

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

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:

Navigation


mehrspaltiger Text

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.

Beispiel
div {
  column-count:5; 
  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.

Tabellen

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

Tabellen/Responsive Gestaltung

Grafiken und Videos

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 es 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.

Bilder im Internet

Hintergrundgrafiken

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.

CSS/Tutorials/Hintergrund/Hero-Images


Weblinks

  1. Bei den tr- und td-Elementen darf eine feste Breitenangabe in Pixeln übrigens bestehen bleiben - der Browser ignoriert sie nämlich und versucht automatisch, die Spalten bei Bedarf kleiner zu machen, um Tabellen auf diese Weise flexibel in den jeweiligen Anzeigebereich einzupassen. Viele Tabellen werden bereits nach dieser sehr einfachen Umbaumaßnahme ganz gut responsiv.