Warum Sie anfangen müssen, Mobile-First-Entwicklung zu praktizieren

Wenn Sie versucht haben, eine responsive Website zu programmieren, sind Sie auf dieses Problem gestoßen: Sie ändern eine winzige, einfache CSS-Eigenschaft, und das ändert das Layout auf verschiedenen Bildschirmgrößen.

Dies zwingt Sie dazu, zu überprüfen, ob der neueste Margenwert die Website für Tablets oder Telefone nicht ruiniert hat. Natürlich können Sie dieses Problem leicht mit spezifischen Überschreibungen für verschiedene Bildschirmgrößen beheben. Aber im Laufe eines Projekts füllen sich CSS-Dateien mit Ausnahmen von Problemen. Dann gibt es Ausnahmen für die Ausnahmen, die dann später eine Ausnahme für die Ausnahme der Ausnahme haben.

Es wird schnell kompliziert, und am Ende kämpfen Sie gegen Ihren eigenen Code, verbrauchen viele Projektstunden und verlieren langsam Ihren Verstand.

Aber keine Angst! Mobile First Development ist hier, um Sie vor Kopfschmerzen, Ausnahmen und langsamen Seitenladevorgängen zu bewahren.

Was passiert mit Desktop-First-dev

Die anfängliche Entwicklung für die Desktop-Version einer responsiven Website widerspricht dem natürlichen Fluss eines CSS-Dokuments. CSS-Dateien werden linear von oben nach unten gelesen, sodass jede CSS-Eigenschaft von neuen Stilen überschrieben wird, die weiter unten im Dokument angewendet werden.

Durch die Entwicklung für große Bildschirme und das anschließende Hinzufügen der mobilen Stile weiter unten im CSS-Dokument treten zwei Probleme auf:

1. Alle Änderungen am Desktop-Stil (weiter oben im Dokument) ändern die Darstellung der mobilen Website, wenn der neue Stil nicht ausdrücklich für die mobile Website überschrieben wird. Das Erstellen zusätzlicher Zeilen mit frivolem CSS kostet viele Projektstunden und verstößt gegen das Prinzip des DRY-Codes.
2. Mobilgeräte beginnen mit dem Laden einer Seite, indem sie das gesamte Desktop-Design rendern. Sobald die kräftige Desktop-Version fertig gerendert ist, wird das mobile Styling angewendet. Dadurch werden zusätzliche Ressourcen geladen, was bedeutet, dass mobile Geräte noch länger brauchen, um eine vollständig geladene Seite bereitzustellen.

Hier kommt die Mobile-First-Entwicklung ins Spiel, um den Tag zu retten. Diese Methode fördert die korrekte CSS-Reihenfolge (mobil zu Desktop von oben nach unten) und stellt sicher, dass ein Gerät nur die Informationen anwendet, die es benötigt, wenn es sie benötigt.

Werfen wir einen Blick auf einige Lösungen für diese Probleme.

Wie das Rendern von Mobilgeräten aussieht

Bilder tragen mit Sicherheit am meisten zur Größe einer Website bei und das Herunterladen dauert ewig, wenn ein Gerät nicht mit dem WLAN verbunden ist. Das Entfernen zusätzlicher Bilder aus Ihrem mobilen Design ist das Beste, was Sie tun können, um die Geschwindigkeit einer Website zu verbessern.

Der Wechsel zu Mobile First bedeutet, dass nur wenige kleine Bilder auf mobilen Geräten bereitgestellt werden. Im folgenden Beispiel habe ich dasselbe CSS-Dokument erstellt, das sowohl mit Desktop- als auch mit Mobile-First-Methoden implementiert wurde.

Wenn Sie die Desktop-First-Methode verwenden, werden Mobilgeräte in der folgenden Reihenfolge gerendert:

1. Lesen Sie den ersten Stil.
2. Laden Sie das große (bald ersetzte) Bild herunter.
3. Rendern Sie das Element.
4. Lesen Sie den mobilen Stil.
5. Laden Sie das kleine Bild herunter (ersetzt das große).
6. Rendern Sie das Element erneut.

Wenn jedoch die Mobile-First-Methode verwendet wird, rendert das Gerät in dieser Reihenfolge:

1. Lesen Sie den ersten Stil.
2. Laden Sie das kleine Bild herunter.
3. Überspringen Sie das Nur-Desktop-Styling (da es nicht zutrifft).
4. Rendern Sie das Element einmal.

Die Website muss nicht nur weniger Schritte durchlaufen, bevor eine fertige Seite an den Browser geliefert wird, sondern es werden auch die zusätzlichen Aufrufe von frivolen Bildern entfernt, die nicht verwendet werden!

Beachten Sie, dass sich Medienabfragen mit der Mobile-First-Entwicklung von maximaler Breite zu minimaler Breite ändern. Abfragen mit maximaler Breite gelten für alle Geräte, die kleiner als 1000 Pixel sind, während Abfragen mit minimaler Breite für Geräte mit mehr als 1000 Pixel gelten.

Der Wechsel zu minimaler Breite schafft eine Barriere, die verhindert, dass das neue Design, das wir für größere Geräte schreiben, jemals das Aussehen der Website auf kleineren Geräten beeinflusst. Dies erhöht die Ladegeschwindigkeit Ihrer responsiven Websites und stellt gleichzeitig sicher, dass alle Änderungen, die Sie innerhalb der Nur-Desktop-Medienabfrage vornehmen, Ihr mobiles Layout nicht beeinflussen. Es ist eine Win-Win-Situation!

Hör auf, dich selbst zu bekämpfen

Nehmen wir an, wir arbeiten an einem Projekt, dessen CSS-Datei in drei Hauptteile kommentiert ist: Desktop, Tablet und Mobilgerät.

Leider haben wir die Desktop-First-Methode befolgt, und die Website wird für Telefone langsam geladen. Wir haben versucht, Bilder zu verkleinern, Browser-Caching hinzuzufügen und sogar den HTML-Code (brutto) zu verkleinern. Aber die Seite schlängelt sich immer noch für Erstbesucher dahin und muss repariert werden.

Da wir unsere Website mit der Desktop-First-Methode erstellt haben, würde unser CSS für unser .header-Element so aussehen:

Unser Ziel ist es, die Menge an Stylings zu reduzieren, die an Mobilgeräte gesendet werden. Zu Beginn müssen wir eine Bestandsaufnahme dessen machen, was auf ein Element angewendet wird, und beachten, wann wir unsere eigenen Stile überschreiben.

Lassen Sie uns zunächst zu einem Mobile-First-Ansatz übergehen. Wir machen Mobile zu unserem standardmäßigen, nicht von Medien abgefragten Stil (Hinweis: Tun Sie dies nicht in der Produktion, da dies die Website beschädigen und Ihre Kunden mürrisch machen würde).

Sehen wir uns noch einmal unsere Bilder an, da diese den größten Einfluss auf die Geschwindigkeit unserer Website haben.

Da wir auf Mobilgeräten keinen Hintergrund laden, können wir diese Eigenschaft löschen. Wir werden die Bilder für größere Geräte später hinzufügen, wenn sie tatsächlich benötigt werden. Dasselbe gilt für die Margin-Bottom-Eigenschaft, sodass wir nur noch zwei Eigenschaften haben, die tatsächlich für Mobilgeräte beantragt werden müssen!

Wenn wir zum Abschnitt „Tablet“ übergehen, müssen wir die Hintergrundattribute und die Polsterung vom Desktop-Stil nach oben in den Tablet-Stil verschieben, da „Tablet“ der nächste Abschnitt ist, der gerendert wird.

Denken Sie daran, unser Ziel ist es, eine Eigenschaft nur zu überschreiben, wenn sie sich ändert, und neue Eigenschaften nur dann hinzuzufügen, wenn die Änderung erforderlich ist, wie in der folgenden Abbildung gezeigt:

Viel besser! Indem wir untersuchen, wie ein mobiles Gerät unser frisch optimiertes CSS rendern würde, wird schnell deutlich, wie viel Einfluss die Mobile-First-Entwicklung auf kleineren Geräten im Vergleich zur Desktop-First-Methode hat.

Arbeite schlauer, nicht härter

Die Entwicklung von Desktop-First schafft mehr Probleme als sie behebt. „Der Wechsel zu einer Mobile-First-Entwicklungsmethode ermöglicht es Ihnen, intelligent und nicht hart zu arbeiten. ”

Denken Sie bei der Entwicklung responsiver Websites daran, dass standardmäßig alles angezeigt wird, was nicht in einer Medienabfrage enthalten ist. Indem wir das standardmäßige (nicht durch Medien abgefragte) Design auf mobile Geräte abstimmen, ermöglichen wir, dass die kleinstmögliche Menge an Informationen an das Gerät gesendet wird, das am leichtesten von der Größe der Websites beeinflusst wird.

Desktops und Tablets sind zu 99,999 Prozent der Zeit an eine schnelle Internetverbindung angeschlossen, sodass große Informationsmengen mit hoher Geschwindigkeit übertragen werden können. Telefone laden am ehesten Informationen über langsame Internetverbindungen. Wenn Sie Ihre Stylesheets auf die empfindlichsten Geräte ausrichten, können Sie Ihren Kunden die bestmögliche Website bieten.