Mobile First: Was ist in deinem Namen?

Was konnten Handys 20 Jahre her? Anrufen und SMS senden. Nur zwei Optionen.
Und was hat sich in 10 Jahren geändert? Zusätzlich zu den oben genannten Optionen, konnten Handys Musik über MP3-Player spielen, Fotos machen und sogar eine Verbindung zum Internet herstellen. Nun, nur zu seiner WAP-Version.

Lasst uns zurück in die Gegenwart gehen. Jetzt haben wir mehr als nur Telefone. Sie sind voll funktionsfähige Computer mit allen Funktionen, die bisher nur auf Desktop-PCs verfügbar waren. Sie können E-Mails verwalten, Nachrichten auf Ihrer bevorzugten Website lesen, Filme ansehen und Papierkram mit Hilfe von Dokumenten-Apps erledigen.

Desktop-PCs und Laptops werden intensiv von Smartphones und Tablets ersetzt. Die Rolle des "Internet-Gateways" wird nun erfolgreich auf mobile Geräte übertragen. Aber mit großer Bequemlichkeit der Arbeit kommen auch einige Probleme, wie zum Beispiel eine relativ kleine Bildschirmgröße. Der Preis Ihres Smartphones, er ist nicht der gleiche wie bei einem voll "geladenen" Gaming-PC, daher laden "schwere" Seiten nicht so schnell, wie man es sich wünscht oder wenn Ihre Internetverbindung in diesem Moment nicht über Wi-Fi läuft, sondern durch 3G oder LTE-Verbindung. Es bedeutet mehr Kosten, wenn Sie sich für hohe Ladegeschwindigkeit entscheiden.

Alles oben genannte hat uns die Möglichkeit gegeben, neue Technologien für die Webentwicklung zu entwickeln. Viele Dienste wurden auf Smartphones und Tablets ausgerichtet. Leute, die ihr Kreditkartenguthaben überprüfen oder einfach eine Pizza-Lieferung bestellen möchten, werden dies heutzutage über mobile Apps tun. Manchmal gibt es keine App für einen bestimmten Dienst oder der Benutzer möchte sie nicht verwenden. Gleichzeitig hat er jedoch keine Lust, seinen Computer einzuschalten und darauf zu warten, dass das Betriebssystem mit all seinen Diensten geladen wird. In diesem Fall könnten Sie die Website mit Ihrem mobilen Webbrowser besuchen. Hier steigt ein großes Problem: Wenn die Website nicht für kleinere Display-Proportionen optimiert ist als der Standard-Computer-Monitor, wird es schrecklich aussehen. Während der Entwicklung müssen Sie zusätzliche Arbeiten ausführen, damit Ihre Website auf kleineren Displays gut aussieht.
Heutzutage sind Webseiten häufig für die Darstellung auf Smartphones geeignet. Der Ansatz, wenn Sie die Entwicklung von mobilen Versionen zu einer Priorität machen, heißt "Mobile first".

Der Begriff wurde erstmals im April 2009 auf der "Web 2.0 Expo" von Marc Davis verwendet, der zu dieser Zeit in "Yahoo!" arbeitete. Er erinnerte die Zuhörer daran, dass ihre Mobiltelefone nicht mehr nur ein "Ding zum Telefonieren" seien. Es wurde zu einem leistungsfähigen Multimedia -Gerät und hat sich in leistungsstarke Multimedia-Geräte verwandelt. Und diese Kraft sollte richtig verwendet werden. Dinge, die als akzeptabel und offensichtlich auf dem Bildschirm betrachtet werden, werden nicht unbedingt auf kleineren Displays gut aussehen. Es braucht einen ganz anderen Ansatz.

Aufgrund der Besonderheiten mobiler Endgeräte beschäftigen wir uns daher mit der Entwicklung von PCs und Laptops.
Der Benutzer selbst und benutzerfreundliche Techniken stehen im Mittelpunkt der Aufmerksamkeit. Der Grad der Bequemlichkeit beim Umgang mit einer Website ist äußerst wichtig. Nichts Überflüssiges: Alles sollte solide und vernünftig sein. Denn manchmal haben wir es nicht einmal mit 5 Zoll, sondern mit 4 sondern sogar 3,6 Zoll Displays zu tun! Es ist fast unmöglich, einen netten voll funktionsfähigen Schieberegler mit solch winzigen Abmessungen zu verwenden. Die angezeigten Bilder wären zu klein. Und sein Laden könnte eine ziemlich komplizierte Aufgabe für ein nicht sehr leistungsfähiges Gerät sein.

Im Jahr 2015 startete Google einen neuen Algorithmus für seine mobile Suchmaschine. Es wurde von der Gemeinde "Mobilegeddon" genannt. Daher wurden für Mobilgeräte optimierte Seiten zuerst in den Suchergebnissen angezeigt. Und nur dann regelmäßige Websites. Um fair zu sein, dieses Update hatte nur Auswirkungen auf mobile Geräte. Am Computer ist alles gleich geblieben. Dass Google alles richtig gemacht hat, zeigt das Bild unten:

Wir schlagen vor, tiefer in die Prinzipien des "Mobile First" einzutauchen.

Sehen wir uns zuerst die übliche "Desktop first" -Methode an. Es stellt einen Herstellungszerlegungsansatz "von komplex zu einfach" dar:

Auf den ersten Blick scheint es keinen Unterschied zu geben. Elemente auf dem Bild werden einfach in die entgegengesetzte Richtung gehen. Der Entwicklungsansatz ist jedoch völlig anders.

Hauptvorteil von "Mobile First" ist, dass es nicht mit adaptivem Design konkurriert. Die Sache ist, dass adaptives Design anfänglich das Betrachten auf großen Bildschirmen berücksichtigt. Und wenn Sie die Website von Ihrem Smartphone aus sehen, wird ein Teil des Inhalts ausgeblendet.

Die Front-End-Entwicklung solcher Websites ist aufgrund der Verfügbarkeit versteckter Inhalte mit zusätzlichen Herausforderungen verbunden. Sie müssen Ajax -Requests verwenden oder den LazyLoad JavaScript-Plug-in-Regeln folgen, um beispielsweise Bilder anzuzeigen.

Der Prozess der Erstellung eines Website-Layouts ist identisch. Das einzige, was anders ist, ist, dass wir zuerst mit einer mobilen Version beginnen.

Für die Anpassung wäre es am besten, Medienanfragen zu verwenden:

Je nach Projekt können sich diese Methoden auch als nützlich erweisen:

Wir sollten die browserübergreifende Unterstützung nicht vergessen:
https://caniuse.com/#search=orientation

Wenn im Wert "width" des Elements "device-width" für das Meta-Tag "viewport" angegeben wird, wird diese Einstellung aktualisiert, wenn der Benutzer die Geräteausrichtung des Telefons oder Tablets wechselt.

In Kombination mit Medienanfragen können Sie mit dieser Funktion das Seitenlayout ändern, wenn sich die Ausrichtung des Geräts ändert.

Darüber hinaus könnten wir eine JavaScript-Bibliothek für die Geräteerkennung verwenden. Es gibt viele von ihnen. Zum Beispiel könnten Sie device.js verwenden.

https://github.com/borismus/device.js/tree/master

Hinsichtlich der Stile Trennung zu verschiedenen Dateien ist es ein kontroverses Thema. Die folgende Methode ist möglich:

Dies kann nützlich sein, wenn der Kunde Desktop- und mobile Versionen der Website trennen möchte.

"Mobile First" ist in erster Linie abhängig vom Budget, da die Entwicklung zusätzliche Zeit und Kosten in Anspruch nehmen wird. Aber wenn wir nur den Frontend-Teil betrachten, dann kann diese Methode als ein separates Werkzeug verwendet werden. Bei falscher Verwendung könnte "Mobile First" in "Mobile Only" umgewandelt werden, was nicht ansprechend ist.

Dies sollte um jeden Preis vermieden werden, denn mit der Vergrößerung der Displaygröße müssen Sie auch die Menge an Inhalten erhöhen anstatt sie zu dehnen.

Um den Artikel zusammenzufassen, möchten wir daran erinnern, dass Sie jederzeit Fragen über unsere Social-Media-Seiten stellen können. Wir werden versuchen, alle zu beantworten.
Wir wünschen dem Rest von euch mehr makellosen Code und atemberaubende Designs!