Weiter geht’s mit den CSS Shortcuts. Vor ein bis zwei Jahren hat diese tollen Funktionen noch niemand genutzt. Damals wurden für mobile Geräte gesonderte Websites angelegt, die auf flexible Layouts und spezifischen Content setzten. Heute ist der Content weitestgehend gleich und nur die Form der Darstellung weicht ab. Vereinfacht gesagt wird zusätzlich zu dem Basis Stylesheet ein weiteres CSS-File geladen, welches die vorherigen Formatierungen überschreibt und ergänzt. Responsive ist also die Zukunft!
Blog-Startseite auf einem Smartphone (Screenshot erstellt mit PlaceIt)
Einbindung des responsive Stylesheets
Es gibt wie auch bei der Retina-Optimierung zwei Möglichkeiten die Styles dem Browser zu präsentieren. Entweder es wird einfach ein zusätzliches Stylesheet in den HTML-Head eingefügt oder das vorhandene Stylesheet wird ergänzt:
Einbindung als zusätzliches Stylesheet
<link href="style.css" rel="stylesheet" type="text/css"> <link href="style_mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" type="text/css">
Einbindung innerhalb der vorhandenen Style-Datei
@media screen and (max-width: 600px) {
body {
font-size: 15px;
}
}
Die Erkennung des jeweiligen Gerätetyps erfolgt dabei über die maximal darstellbare Breite. Ich setze in der Regel 600 Pixel als „magische Grenze“ zwischen mobiler und normaler Website ein.
CSS Tricks bei responsive Websites
Damit die meisten CSS-Spielerein funktionieren sind ein paar Basics nötig. Zum Beispiel sollte das Viewport-Metatag im HTML-Header gesetzt werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Zudem ist es aus Gründen der flexiblen Anpassung nötig, dass im normalen HTML Markup nicht viele Elemente mit festen Breitenangaben vorhanden sind. Es bietet sich zum Beispiel an mit einer Container-Klasse zu arbeiten, die in der normalen Ansicht eine Breite von 960 Pixeln hat. Diese Angabe kann dann in der mobilen Version mit 100% überschreiben werden.
Normale Spaltenzuweisungen durch CSS-Klassen wie .col_1, .col_2, … usw. können in der mobilen Version einfach auf width: auto gesetzt werden. Zusätzlich sollten ggf. vorhandene Margins links und rechts entfernt und stattdessen ein margin-bottom: 20px eingefügt werden. Dann setzen sich die Spalten alle schön brav mit vertikalem Abstand untereinander und kleben nicht unschön aneinander.
Ein gutes Tool zum testen von mobilen Ansichten ist der Responsinator – zumindest was die grundsätzliche Struktur angeht. Einige browserspezifische Eigenschaften wie Touch-Gesten und native Formular-Elemente lassen sich damit allerdings nicht ausprobieren. Daher mindestens einen Praxistest für Android- und iOS-Geräte einplanen!