Responsives Design oder mobile-first

mobile first: von klein nach groß defieren

Responsives Webdesign ist inzwischen der Webstandard. Neu erstellte Webseiten sind praktisch immer responsiv. Das bedeutet, die Darstellung ist flexibel und passt sich der Bildschirmgröße an oder Elemente ändern ihre Eigenschaften an definierten Breakpoints. Für den folgenden Klassiker, das mehrspaltige Layout wird beides angewendet: die einzelnen Elemente nehmen auf den kleinsten Devices die Hälfte, auf mittleren ein Drittel und auf großen Bildschirmen ein Sechstel der zur Verfügung stehenden Breite ein. Innerhalb der Spanne wachsen, bzw. schrumpfen sie.

Historisch betrachtet (2007 wurden Smartphones mit dem ersten Apple iPhone populär, aber in der IT-Branche gilt das als historisch) waren Webseiten aber für Bildschirme mit vergleichsweise geringen Größenunterschieden konzipiert, weder für kleine Smartphones, noch für die teils riesigen Bildschirme, wie sie heute von Bildschirmarbeitern genutzt werden. Diese alten Webseiten wurden nach dem Boom der Smartphones nachträglich responsiv gemacht, damit der Seiteninhalt sich den schmalen Displays anpasst. Das spiegelt sich allerdings auch im Code dieser Seiten wieder. Zuerst wird der Code für die alte Webseite geladen, anschließend Definitionen für die Darstellung, wenn das Display eine gewisse Größe unterschreitet.

Codebeispiel:

.style {
    width: 16.6%;
}
@media (max-width: 1200px) {
    .style {
        width: 33.3%;
    }
}
@media (max-width: 600px) {
    .style {
        width: 50%;
    }
}

Trifft eine Regel nicht zu, wird sie nicht geladen und blockiert somit auch nicht das rendern (die visuelle Ausgabe). Trifft sie zu, wird zunächst die unspezifische und anschließend die spezifische Regel geladen. Das heißt, auf kleinen Geräten würde mehr Code geladen als auf großen. Da kleinere Devices Smartphones oder Tablets sind, sind sie zum einen möglicherweise mit einer langsameren Mobilfunkverbindung unterwegs, zum anderen sind diese Geräte im Schnitt weniger leistungsfähig. Best-practice ist es daher inzwischen, die Regeln umgekehrt, von klein nach groß, zu definieren, sodass je kleiner desto weniger Code gilt. Das sieht dann so aus:

.style {
    width: 50%;
}
@media (min-width: 600px) {
    .style {
        width: 33.3%;
    }
}
@media (min-width: 1200px) {
    .style {
        width: 16.6%;
    }
}

Dieses Ergebnis ist mit beiden Code-Beispielen erzielbar. Mobile-first bezeichnet also die Vorgehensweise, mit der auf kleineren Devices so wenig Code wie möglich geladen werden muss. Die responsive Darstellung kann mit beiden gezeigten Methoden gleichermaßen erzielt werden.

Responsives Webdesign:
Bezeichnet die Eigenschaft der dargestellten Elemente, sich der Bildschirmauflösung anzupassen und an definierten Breakpoints ihr Aussehen zu ändern
Mobile-first:
Bezeichnet die Vorgehensweise bei der Programmierung des Design, bei der von klein nach groß Eigenschaften festgeschrieben werden
Webseiten-Optimierung