Anpassung der Website für mobile Geräte: Schritt-für-Schritt-Anleitung. Version der mobilen Website

Computer

Mobile Anpassung der Website wird immer mehraufgrund der gestiegenen Anzahl von Smartphones und Tablets gefragt. Was ist das? Welche Vorteile bringt es? Gerade dieses Thema ist relevant für Besitzer von Online-Shops, Websites verschiedener Dienstleistungsunternehmen, Blogs und populären Foren. Wie kann die Website für mobile Geräte angepasst werden? Hier ist eine kurze Liste von Fragen, die wir im Rahmen des Artikels betrachten werden.

allgemeine Informationen

Anpassung der Website für mobile Geräte

Also, zuerst, schauen wir uns an, was istrepräsentiert ein adaptives Design. Dies ist der Name einer Konfiguration, in der derselbe HTML-Code an alle Geräte gesendet wird, aber die Größe der Elemente durch CSS angepasst wird. Verschiedene Suchroboter können solche Seiten erkennen, vorausgesetzt, dass die Seiten und Ressourcen zum Scannen geöffnet sind. Um Browsern diese Möglichkeit mitzuteilen, wird ein Meta-Name-Tag verwendet: "Viewport". Was ist die Anpassung der Website für mobile Geräte?

Betrachten Sie das Tag

Also, es ist notwendig, darauf aufzupassenMeta-Name-Tag = "Ansichtsfenster". Wofür? Es enthält Anweisungen für den Browser zum Anpassen der Größe und des Umfangs der Seite unter Berücksichtigung der Breite des Bildschirms des Geräts, von dem aus die Website angezeigt wird. Wenn Sie dieses kleine Element nicht hinzufügen, ist die Standardseite die Seite, die für Computer entworfen wurde. Mobile Browser werden jedoch versuchen, den Inhalt zu optimieren, was zu einer Erhöhung der Schriftarten, der Skalierbarkeit des Inhalts oder zur Anzeige eines Teils des Inhalts führen wird, der auf den Bildschirm klettert. Ist es angenehm? Nein, die mobile Version der Website wird in diesem Fall nur negative Wahrnehmung verursachen. Schließlich sind die Schriftarten unverhältnismäßig, Sie müssen die Seite scrollen und eine Reihe von Aktionen ausführen, die, obwohl sie zweitrangig sind, immer noch mühsam sind. Überprüfen Sie die Anpassung der Website für mobile Geräte können ein Smartphone, Tablet oder spezielle Dienste und Programme verwenden. Natürlich sind die ersten zwei Optionen vorzuziehen, aber wenn Sie eine sorgfältige Analyse von der Position der verschiedenen Geräte benötigen und Zeit sparen, dann wird Letzteres tun.

Welche Vorteile bietet die Anpassung der Website für mobile Geräte?

mobile Version der Website
Mit diesem Ansatz ermöglicht:

  1. Benutzer teilen Inhalte in Fällen, in denen er eine Adresse hat.
  2. Suchmaschinenalgorithmen erhalten exakte Seitenparameter, es gibt keine Verwechslung mit verschiedenen Versionen.
  3. Reduzieren Sie die Wahrscheinlichkeit von Fehlern.
  4. Reduzieren Sie die Download-Zeit aufgrund fehlender Neuindizierung.
  5. Ressourcen sparen

Darüber hinaus ist die adaptive Seite einfacher zu erstellen,eher als einige Varianten von etwas Eins. Die Anpassung einer Website für mobile Geräte (es ist durchaus möglich, dies selbst zu tun) ist nicht kompliziert, es genügt, JavaScript zu kennen und mit Cascading Stylesheets (CSS) und Bildern arbeiten zu können. Es gibt viele Ansätze, um die Aufgabe zu erfüllen. Im Rahmen des Artikels werden drei der beliebtesten Varianten betrachtet:

  1. Konzentriere dich auf JavaScript.
  2. Kombination.
  3. Dynamische Verwendung von JavaScript.

Betrachten wir sie genauer.

Anpassung mit JavaScript

Anpassung mobiler Websites
In diesem Fall wird ein Inhalt verwendet. Und mit JavaScript ändert sich die Formatierung mit dem Mechanismus der Seite. In solchen Fällen hängt alles von der Plattform ab. Dieser Algorithmus ähnelt den Medienabfragen für ein Cascading Stylesheet. Betrachten Sie ein kleines Beispiel für Arbeit in der Praxis. Wir haben also eine Seite mit HTML-Code, in der das <script> -Element platziert wird. Wenn es angefordert wird, werden sie die gleichen Daten übertragen. Bei der Verarbeitung wird dies jedoch stark von den Eigenschaften des Geräts beeinflusst. Und als Ergebnis ändert sich die Formatierung der Seite. Als Beispiel können wir die Bildsituation angeben, die auf Smartphones und Tablets und nicht auf Computern optimiert werden soll. Ein wichtiger Vorteil dieser Option ist, dass der Computer die Implementierung automatisch erkennt. Darüber hinaus müssen Sie keine spezielle Kopfzeile erhalten, da keine dynamische Inhaltsanzeige vorhanden ist.

Kombination

In diesem Fall die Anpassung der Website an mobileDas Gerät wird aufgrund der Kombination von JavaScript-Funktionen und Serverfunktionen verwendet. Wie sieht das allgemeine Schema aus? Der Benutzer besucht die Site von einem bestimmten Gerät aus. JavaScript erhält Informationen über seine Verwendung und übergibt sie an den Server. Es erzeugt den notwendigen Code, der dann an das Gerät gesendet wird. Und Informationen darüber werden in Cookies gespeichert. Und beim nächsten Besuch liest der Server die Daten von ihnen. Die Besonderheit dieses Ansatzes ist die Möglichkeit, verschiedene Versionen von HTML-Code zu verwenden. Für den korrekten Betrieb ist es jedoch notwendig, auf das Vorhandensein des Headers Vary: User-Agent zu achten. Die mobile Version der Site erfordert in diesem Fall etwas mehr Arbeit.

Dynamisches JavaScript und andere Optionen

Plugin für die Website-Anpassung für mobile Geräte
In diesem Fall ist vorgesehen, dass es sein wirdStellen Sie denselben Code mit einem bestimmten Element bereit, das eine externe Datei angibt, deren Inhalt davon abhängt, welcher Agent verwendet wird. Das heißt, wir werden eine dynamische Seite vor uns haben. Wie wird dies realisiert? Viele Leute benutzen den gleichen Vary: User-Agent dafür. Und wenn man mit Seiten arbeitet, werden Informationen auch in Echtzeit aktualisiert, was sicherlich sehr gut ist. Auf der Theorie können Sie immer noch viel reden. Wie man sich nicht an Divas (<div>) erinnert, mit denen man buchstäblich das Aussehen der Seite und viele andere Dinge "jonglieren" kann. Aber wir sind daran interessiert, wie es geht!

Vorbereitung auf die Umsetzung

Anpassung der Website für mobile Geräte selbst
Es sollte beachtet werden, dass es zwei Ansätze für die Erstellung einer adaptiven Site gibt:

  1. Handbuch.
  2. Automatisch.

Zunächst ist es notwendig, den Pfad zu wählenzu gehen. Das Plug-in für die Anpassung der Website für mobile Geräte wird dazu beitragen, die gesamte Arbeit schnell durchzuführen. Aber nur für den Fall, dass alles nach bestimmten, klar geregelten Regeln erstellt wird. Wenn die Ressource entsprechend erstellt wurde, muss das Programm zur Anpassung der Site für das mobile Gerät alle Probleme lösen. Wegen solcher Beschränkungen und manchmal anderer Momente und dem Mangel an voller Freiheit der Kreativität, die meisten entscheiden sich für die manuelle Abstimmung. Ein Programm, obwohl es buchstäblich in wenigen Minuten hilft, eine attraktive Version der Ressource zu erhalten, aber immer noch bestimmte Nachteile haben.

Flexibles Layout

Überprüfen Sie die Websiteadaption für mobile Geräte
Damit wir eine wörtliche "Süßigkeit" bekommen,Es sollten nur relative Maßeinheiten verwendet werden. In der Praxis werden alle Schriftarten an em angepasst, und die Größe der Elemente wird in Prozent angegeben. Sie können zwar regelmäßig (wenn Sie wirklich wollen) und px verwenden, aber es ist besser, ohne sie auszukommen. Wenn Sie eine Breite oder Höhe angeben, sollten Sie eine feste feste Zahl wie 1080, 1260 oder 768 und einen Prozentsatz verwenden. Als ein Beispiel - Breite: 90%. Sie können und 80% und 99% und 100%. Alles hängt vom Wunsch des Meisters ab. Aber was ist mit dem Text, der auf einem bestimmten Element erscheint? In diesem Fall gibt es eine sehr gute Formel: Die Breite der Schriftart wird durch den gleichen Faktor der Hintergrundkomponente geteilt, und wir erhalten unseren Anspruch. Manchmal kommt es vor, dass Zahlen sehr lang sein können. Zum Beispiel ist der Standard 1260. Und Benutzer mit einer Bildschirmbreite von 780 kommen ins Spiel. Beim Teilen erhalten wir eine sehr lange Zahl. Ist es notwendig, es zu runden? Nun, die Situation hier ist kompliziert. Viele beraten nicht kategorisch. Es ist besser, die Situation zu betrachten und zu bewerten, wie wichtig Genauigkeit ist. Sie können beispielsweise festlegen, dass nur zwei, drei, vier oder zehn Dezimalstellen berücksichtigt werden. Glauben Sie mir, das ist ein einfacher Job, diese Anpassung der Website für mobile Geräte. CSS kann, wenn es Einträge ohne Fehler enthält, alles reproduzieren.

Flexible Schrift-, Bild- und Medienabfragen

Standardmäßig ist in den Browsern die Schriftgröße eingestelltbei dem Exponenten von 16 px. Aber wie bereits erwähnt, ist diese Vorgehensweise für uns höchst unerwünscht. Was ist in diesem Fall zu tun? Dann teilen wir den erforderlichen Wert durch den Basiswert. Betrachten Sie ein paar Beispiele:

  1. 16/16 = 1 em.
  2. 18/16 = 1.125 em.

Das Ergebnis muss in aufgezeichnet werdenSchriftgröße durch Hinzufügen nach dem Doppelpunkt. Wenn diese Werte jedoch später an anderer Stelle enthalten sind, sollte berücksichtigt werden, dass der eingegebene Wert angezeigt wird.

Und jetzt für die Bilder. Alles kann entweder in ihren Attributen oder in einem Cascading Stylesheet mit maximaler Breite eingegeben werden. Vergessen Sie nicht, dass die Größe in Prozent angegeben ist! Und noch ein paar Worte zu Medienanfragen. Sie können in Fällen verwendet werden, in denen bestimmte Bedingungen erforderlich sind. Wenn die Bildschirmbreite beispielsweise weniger als 1260 Pixel beträgt, werden die in der Medienanforderung eingebetteten Regeln angewendet. Was können sie tun? Wenn wir ein schönes Hintergrundbild haben, das vollständig angezeigt werden muss, und der Benutzer einen kleinen Bildschirm hat, können Sie dies in solchen Fällen registrieren, um es zu entfernen. In mancher Hinsicht ähneln Medienabfragen dem if-Konstrukt. Aber ihr Merkmal ist eine sehr große ... Individualität. Sie können alle Änderungen aufzeichnen, die bei der Arbeit mit Browsern bestimmter Größen vorgenommen werden müssen.

Fazit

Programm zur Anpassung der Website für mobile Geräte
Die Anzahl der mobilen Geräte und Personen, diebenutze sie, stetig wachsend. Daher ist es sehr wünschenswert, dass auch die kleinsten Details, ganz zu schweigen von den Konzepten, im Layout der Site vor dem Beginn ihrer Entwicklung ausgearbeitet werden. Schließlich muss sichergestellt werden, dass Benutzer, die von ihren Telefonen aus auf die Website zugreifen, keine Daten herunterladen, die ihnen nicht angezeigt werden. Warum? Nun, das ist elementar - um das Laden von Seiten nicht zu verlangsamen. Und es ist besser, die Daten in kleinen Teilen zu laden, und die Seite selbst arbeitete schnell und effizient.