Der Ursprung von "Mobile First"
Die Idee von "Mobile First" in Bezug auf Responsive Design stammt aus einer Zeit, als die Browser für mobile Geräte viel weniger leistungsfähig waren als auf einem Desktop-Gerät. Viele von ihnen unterstützten Medienabfragen überhaupt nicht, daher fällt die Idee, ein ausgefallenes Desktop-Design aufzubauen und dann mithilfe von Medienabfragen für ein schmales Ansichtsfenster Stile beizubehalten, auf den Kopf.
Das Fehlen von Unterstützung für Medienabfragen ist in der Tat die erste Medienabfrage.
- Bryan Rieger
Ist Mobile zuerst noch relevant?
Trotz der Tatsache, dass Browser für mobile Geräte ihre Desktop-Gegenstücke eingeholt haben, ist "mobile first" immer noch die logischste Methode, um Ihre Stile zu schreiben.
Ich denke lieber daran, "frühere Stildeklarationen nicht rückgängig zu machen". Ein additiver Ansatz führt fast immer zu einem kompakteren Stylesheet, anstatt Stile zu schreiben und später zu überschreiben. Stile, die für die meisten / alle Geräte geeignet sind, sollten außerhalb von Medienabfragen gefunden werden, während Stile, die nur für ein bestimmtes Ansichtsfenster relevant sind, hinter einer Medienabfrage stehen sollten.
Vergleichen Sie einen "Desktop First" -Ansatz:
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}
Zu einem "Mobile First" -Ansatz:
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}
Die Ergebnisse sind die gleichen, aber die späteren sind kompakter. Beispielstile, die schamlos aus Brad Frosts 7 Gewohnheiten hochwirksamer Medienabfragen kopiert wurden .
Es gibt einige seltene Ausnahmen, in denen "Desktop zuerst" besser geeignet ist als umgekehrt. Am bemerkenswertesten ist dies, wenn Sie beispielsweise reaktionsschnelle Tabellen ausführen. Breitere Ansichtsfenster möchten die Standardstile für Tabellen, aber ein schmales Ansichtsfenster möchte all dies überschreiben, damit der Inhalt vertikal gestapelt werden kann.
Brechen Sie Ihre Stylesheets nicht auf
Eine Sache, die Sie unbedingt nicht tun sollten, ist, Ihre Reaktionsstile in einzelne CSS-Dateien aufzuteilen und das Medienattribut für das Linkelement zu verwenden. Dies hat die unerwünschte Folge, dass die UA alle verknüpften Stylesheets herunterlädt (dh es gibt keine Geschwindigkeitsverbesserung dafür).
<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Code sollte also zuerst mobil sein, aber was ist mit der Herangehensweise an das Design?
Ich bin der Meinung, dass es keine Rolle spielt. Layouts für alle Ansichtsfenster relevant für das Design muss getan werden (dies könnte so wenig beteiligt ist, wie 2 oder so viele wie 5 , wenn Sie Faktor in allen Moll-Stützpunkten Sie benötigen!), Um nicht Sache am Ende. Vielen Designern fehlt die Disziplin, mit einem Desktop-Layout zu beginnen, und sie finden, dass das Starten von einem mobilen Layout einfacher ist.
Wenn Sie von einem Desktop-Layout ausgehen möchten, müssen Sie die Versuchung vermeiden, all diese herrlichen Leerzeichen mit Unordnung zu füllen, die den Inhalt dieser Seite nicht verbessert. Benötigen Sie wirklich das 800x600 Stock Foto einer lächelnden Frau, die ein Telefon hält? Es kostet den mobilen Benutzer nur zusätzliches Geld, nutzlose Flusen herunterzuladen, und es ist nur eine visuelle Ablenkung für einen Desktop-Benutzer, vorbei zu springen.