Desktop-First Design ist ein Vorgehen, bei dem die große Ansicht einer Seite zuerst entworfen wird und die Layouts für kleinere Bildschirme daraus abgeleitet werden. Bis Anfang der 2010er Jahre war das die übliche Reihenfolge im Webdesign, und in gewachsenen Projekten trifft man sie bis heute an. Im Stylesheet erkennst du die Richtung an Abfragen mit max-width, die das Layout nach unten hin korrigieren.
- Desktop-First Design
Vorgehen, bei dem die große Ansicht zuerst entworfen wird und die Layouts für kleinere Bildschirme daraus abgeleitet werden.
Beispiel: „Das alte Theme folgt dem Desktop-First Design, deshalb hängen unter 900 Pixeln überall Korrekturen dran.“Auch: Desktop First. Gemeint ist allein die Entwurfsrichtung. Ein desktop-first gebautes Layout kann trotzdem responsive sein.
Gegenbegriff: Mobile-First Design beginnt bei der kleinen Ansicht und erweitert sie nach oben.
Woran du ein Projekt im Desktop-First Design erkennst
Die Grundgestaltung im Stylesheet geht von viel Platz aus. Spaltenbreiten, Abstände und Schriftgrößen sind für den großen Bildschirm gesetzt, und jede Media Query nimmt davon etwas zurück. Typisch sind Abfragen wie max-width: 1024px und darunter eine zweite mit max-width: 640px, die dieselben Eigenschaften noch einmal anfasst.
Das zweite Erkennungszeichen liegt in den Entwurfsdateien. Gibt es pro Seitentyp einen Desktop-Entwurf und dazu eine einzelne Telefon-Ansicht, die später entstanden ist, wurde desktop-first gearbeitet. Die kleine Ansicht ist dann eine Antwort auf die große.
Wie aus der Reihenfolge Aufwand wird
Korrekturen summieren sich. Jede Regel für kleine Bildschirme überschreibt eine Regel, die vorher für große gesetzt wurde, und mit jeder Überschreibung wächst die Wahrscheinlichkeit, dass eine spätere Änderung an der falschen Stelle landet. Wer schon einmal eine Schriftgröße geändert hat, die an vier Stellen im Stylesheet steht, kennt den Effekt.
Dazu kommt ein Punkt, der beim Ausblenden gern übersehen wird: Ein Bild, das per display: none aus der kleinen Ansicht verschwindet, wird vom Browser trotzdem geladen. Die Elemente sind dann unsichtbar, kosten aber weiterhin Datenvolumen und Ladezeit.
Wann die große Ansicht zuerst weiterhin trägt
Es gibt Anwendungen, die fast ausschließlich am Schreibtisch benutzt werden: Buchungsmasken im Backoffice, Auswertungen mit vielen Spalten, Konfiguratoren im technischen Vertrieb, Werkzeuge im Intranet. Dort entsteht die tragfähige Lösung tatsächlich zuerst für den großen Bildschirm, und die kleine Ansicht bedient dann einzelne Aufgaben wie das Nachsehen eines Status.
Wir empfehlen, diese Entscheidung an den Zahlen der bestehenden Seite festzumachen statt am Bauchgefühl. Ein Blick in die Gerätedaten der letzten zwölf Monate zeigt in wenigen Minuten, wie die Besucher tatsächlich kommen.