CSS/Tutorials/Einstieg/Webseiten responsiv umbauen
- Self-Forum: Webseite für mobile Geräte umstellen vom 16.05.2017
- Self-Forum: Mobile Webseite erstellen aus vorhandener Desktop Webseite von 27.01.2016
- Self-Forum: Einfache HTML-Website auf mobilen Geräten vom 08.01.2016
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:
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
Inhaltsverzeichnis
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:
<!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:
-
lang="de": Sprachkürzel, damit Browser die Seite vorlesen können -
<meta charset …>: Zeichencodierung, innerhalb der ersten 1024 Bytes des Dokuments, damit Umlaute und Sonderzeichen richtig dargestellt werden. -
<meta viewport …>: HTML/Elemente/meta#Viewport einstellen
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?
Information: Tabellenlayout
Das Verwenden von Tabellen zu Layoutzwecken birgt viele Nachteile:
- sie benötigen mehr HTML-Markup gegenüber semantischer Auszeichnung, was sie langsamer macht und spätere Anpassungen erschwert.
- sie sind nicht responsiv, so dass auf schmalen Viewports trotz horizontale Scrollbalken Inhalte nicht zu erfassen sind
- Screenreader versuchen erfolglos, zwischen einzelnen Zellen Beziehungen herzustellen. Eine sinnvolle und systematische Anordnung der Zelleninhalte erleichtert das Lesen erheblich.
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]
Information: Div-Suppe
Als Alternative zu Tabellen wurde begonnen, Seitenelemente mit div-Elementen auszuzeichnen und diese per CSS zu stylen. Die divs wurden über id- und class-Attribute selektiert. Auch diese Methode hat einige Nachteile:
- Eigentlich überflüssige Wrapper- und Containerelemente blähen das HTML-Markup auf
- Es ist nicht ersichtlich, wann divs geschlossen werden. Als Notbehelf dienten Kommentare wie
<!---Ende id="container-wrapper-header"> - Die feste Positionierung der div-Container verhinderte eine responsive Anpassung.
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
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:
#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.
html {
font-size: 9px;
}
html {
font-size: 100.01%;
}
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:
#kontakt {
border: solid thin red;
float: right;
margin-right: 1em;
width: 9em;
}
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:
- 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
emoderrem, aber keine festen Pixelwerte - keine Höhenangaben für Elemente
Verzichten Sie auf eine Positionierung …
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.
/* 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;
}
}
Als Breakpoint wird eine Breite von 30em genommen.
»Wo soll ich denn meine Breakpoints setzen? Welche Maße haben die meistverwendeten Smartphones?«
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:
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.
… 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:
body {
max-width: 60em;
margin: 1em auto;
}
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.
- 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:
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.
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.
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
- ↑ 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.
Auf mobilen Geräten ist dies jedoch viel zu klein.