Responsive Webdesign ist die Zukunft — das ist denke ich nicht zu hoch gegriffen. Also habe ich mir letzte Woche endlich einmal die Zeit genommen, mein Blog und meine Website von den statischen Fesseln zu befreien und ein reaktionsfähiges Design umgesetzt. Dabei bin ich wie folgt vorgegangen:
Feste Maße durch flexible ersetzen
Bei der Umrechnung ist pxtoem sehr hilfreich.
Abstände
Ich hatte alle padding und margin Werte in Pixel angegeben. Diese müssen nun in Prozent umgerechnet werden. Dafür rechnen wir immer: Aktuell / Breite * 100.
Wenn also beispielsweise der Innenabstand (padding) des Inhaltcontainers 10px nach links und rechts beträgt, und der Container 1000px breit ist, sieht die Rechnung wie folgt aus: 10 / 1000 * 100 = 1%. Genauso wird mir allen anderen horizontalen margin und padding Werten verfahren. (Schwierig wird es hier, wenn ein Container nicht genau in der Breite definiert ist, wie meine Navigation. Dort habe ich die Pixelwerte belassen)
Maße
Ähnlich wird mit den Maßen der Container verfahren. Bei 1000px Websitebreite würde eine 300px breite Sidebar also die Angabe width:30%; erhalten. Der wrapper wird hier nicht verändert, er bleibt bei der Angabe 1000px.
Theoretisch könnten wir das width: bei dem wrapper-Element durch ein max-width: ersetzen, wenn nicht das Problem mit älteren Browsern wäre, die diese Angabe nicht verstünden und die flexible Site über den gesamten Viewport ziehen würden.
Schriftgrößen
Die Schriftgröße gebe ich nur für den body-Tag in Prozent an. Hier wähle ich 100% (entspricht 16px). Die restlichen Angaben schreibe ich in em oder rem. em bezieht sich auf die Schriftgröße des Elternelements, rem auf die des html Elements. Hier sollten allerdings als Fallback vor der em/rem Angabe noch Pixelwerte definiert werden.
Bilder
Bildern muss zusätzlich zu einer flexiblen Breite auch eine andere Höhe zugewiesen werden, wenn in HTML die Maße explizit angegeben sind, da das Bild sonst verzerrt würde. Hier genügt die Angabe height:auto;.
Wrapper-Tag
Nun müssen wir noch dafür sorgen, dass der äußerste Container, der eine feste Breite zugewiesen hat, auch flexibel ist. Dafür nutzen wir die CSS3 Mediaqueries:
@media screen and (max-width:57.500em){
#head-content, #content, #footer-content{
width:97%;
padding-left:0;
padding-right:0;
}
}Code-Sprache: CSS (css)Wo wir nun gerade dabei sind, wird auch hier die Breitenangabe in em geschrieben, das entspricht 920px. Das bedeutet also, wenn der Viewport schmaler wird als 920px, wird den drei Wrapper-Elemente #head-content, #content, #footer-content eine flexible Breite von 97% zugewiesen.
Umbruchpunkte finden und Aktionen hervorrufen
Nun werden durch verkleinern des Browserfensters Punkte ermittelt, wo größere Layoutänderungen von Nöten sind. Beispielsweise bei dem Blog die Sidebar, die nach unten rutscht. Das wird dann ebenfalls über einen Media Query gelöst, der die Eigenschaft float:right; aufhebt.
Einfach ausgedrückt muss bei bestimmten Punkten, bei denen Spalten zu schmal für gute Lesbarkeit werden, das Layout in Richtung der Einspaltigkeit verändert werden.
Das Menü
Ein kniffliger Punkt ist das Menü:
Ich lasse das Menü solange im Normalzustand, bis es zu nah an dem Logo ist. Dann ersetze ich die Menüliste durch einen Überpunkt dieser Liste, der vorher ausgeblendet war. Wenn nun auf den Link "Menü" geklickt wird, erscheint mit Hilfe der CSS3-Eigenschaft :target das Menü. Gleichzeitig wird der Menüpunkt für das Öffnen des Menüs durch einen Punkt ersetzt, der vom Äußeren diesem entspricht, aber bei Klick das Menü verschwinden lässt. Hier der HTML-Code dazu:
<ul id="main-nav">
<li class="menu-hide"><a href="#" title="Das Menü verbergen">Menü</a></li>
<li class="menu"><a href="#menu" title="Das Menü zeigen">Menü</a>
<ul>
<li><a href="/webdesign" title="Webdesign und Webentwicklung">Home</a></li>
<li><a href="leistungen.html" title="Leistungen als Webdesigner">Leistungen</a></li>
<li><a href="preise.html" title="Preise">Preise</a></li>
<li>"><a href="referenzen.html" title="Referenzen">Referenzen</a></li>
<li><a href="https://florianbrinkmann.com" title="Blog" >Blog</a></li>
</ul>
</li>
</ul> Code-Sprache: HTML, XML (xml)Die übergeordneten Menüpunkte sind standardmäßig mit display:none;verstecht. Hier folgt der CSS Code des Media Queries der aktiv wird, wenn die Viewportbreite geringer als 703px ist.
@media screen and (max-width:43.938em){
#main-nav a.menu{
display:block;
}
#main-nav ul{
position:absolute;
top:145px;
right:8px;
right:.5rem;
width:50%;
background:rgba(0,0,0,.85);
z-index:99;
border-radius:0px 0px 10px 10px;
}
#main-nav ul li a{
padding:8px 0px; padding:.5rem 0rem;
}
#main-nav ul li{
display:none;
float:none;
padding:0;
height:auto;
}
#main-nav ul li:last-of-type{
border-radius:0px 0px 10px 10px;
}
#menu:target #main-nav ul li{
display:block;
}
#menu:target #main-nav li a.menu{
display:none;
}
#menu:target #main-nav a.menu-hide{
display:block;
z-index:99;
}
}Code-Sprache: CSS (css)Zuerst wird der Menüpunkt .menu sichtbar gemacht. Anschließend wird das Untermenü absolut positioniert und die Listenpunkte versteckt. Der letzte der versteckten Listenpunkte bekommt nochmal den border-radius zugeordnet, den das gesamte Untermenü schon erhielt, da sonst beim Hovern die abgerundeten Ecken nicht beachtet werden würden. Anschließend wird es interessant:
Der body-Tag hat bei mir die id #menu bekommen, damit ich alle Elemente auf der Seite ansprechen kann, wenn diese id von einem Link aktiviert wurde. Wenn also der Link "Menü", der ja eben diese id anspricht, angeklickt wird, geschieht folgendes:
- Die Untermenüpunkte werden per
display:block;sichtbar gemacht. - Der Menüpunkt "Menü", der für das Erscheinen des Menüs zuständig ist, wird versteckt. Gleichzeitig wird der Menüpunkt "Menü", der die Klasse menu-hide besitzt, sichtbar gemacht und nimmt nun den Platz des verschwundenen Menüpunktes ein.
Wenn auf diesen Menüpunkt geklickt wird, ist die id menu nicht mehr aktiv, und das Menü verschwindet. Gleichzeitig werden die Menüpunkte wieder getauscht.
Buchtipp
Jedem, der sich mit diesem Thema näher befassen möchte, kann ich nur das Buch "Responsive Webdesign — Reaktionsfähige Websites gestalten und umsetzen" von Christoph Zillgens an's Herz legen. Ich konnte mit Hilfe des Buchs sehr schnell meine Site und den Blog flexibel anpassen und meine Kenntnisse deutlich verbessern.