Heute gehen die meisten Menschen über mobile Gadgets online - Tablets, Telefone, in dieser Hinsicht erreicht auch die Website-Optimierung ein neues Niveau. Wenn ein Benutzer hereinkommt und sieht, dass die Seite nicht für Mobilgeräte optimiert ist: das Bild kann nicht angezeigt werden, die Sch altflächen sind ausgefahren, die Schriftarten sind klein und unlesbar, das Design ist verzerrt – 99 von 100 %, dass er die Seite verlässt und suchen Sie nach einem anderen, bequemeren. Und der Suchroboter wird das Kästchen markieren, dass die Ressource irrelevant ist, das heißt, sie stimmt nicht mit der Suchanfrage überein. Daher muss das Design der Seite an verschiedene mobile Endgeräte angepasst werden. Was ist eine mobile Version der Website, wie wird sie erstellt und wie wendet man sie am besten an? Lesen Sie mehr in diesem Artikel.
Es gibt also vier wichtige Möglichkeiten, Ihre Website mobilfreundlich zu gest alten.
Methode Eins - Responsives Design
Responsive Templates ändern das Seitenbild je nach Bildschirmgröße. In der Regel sind sie standardmäßig auf 1600, 1500, 1280, 1100, 1024 und 980 Pixel eingestellt. Zur Umsetzung werden CSS3 Media Queries verwendet. Das Seitendesign selbst ändert sich nicht.
Zu den Vorteilen dieser Methode gehören:
- bequeme Entwicklung,Da sich die Struktur selbst an die Bildschirmparameter anpasst und jedes Update keine Designentwicklung von Grund auf erfordert, reicht es aus, CSS und HTML zu optimieren;
- eine URL – der Benutzer muss sich nicht mehrere Namen merken, es ist keine Weiterleitung (Weiterleitung von einer Adresse zur anderen) erforderlich, die die Arbeit eines Webmasters erschweren kann, und es ist einfacher für die Suche Suchmaschine, um eine Ressource mit einer einzigen Adresse zu sortieren und einzustufen.
Natürlich haben adaptive Templates ihre Nachteile, die übrigens mehr als nur Vorteile sind. Trotzdem h alten viele Entwickler an diesem Konzept fest, zum Beispiel die Google Corporation, deren mobile Version der Website ein adaptives Design hat. Also Nachteile:
- Responsive Design unterstützt auf Mobilgeräten nicht dieselben Aufgaben wie auf PCs. Handelt es sich beispielsweise um eine mobile Version der Website einer Bank, bei der dem Nutzer eher Informationen zum Wechselkurs oder zum nächsten Geldautomaten wichtig sind, dann reicht diese Gest altung völlig aus. Aber wenn es sich um eine komplex strukturierte Ressource mit vielen Abschnitten und Unterabschnitten handelt, werden Besucher das adaptive Layout kaum mögen.
- Langsames Laden verwandelt eine Lieblingsseite in eine hasserfüllte. Dies gilt insbesondere für Ressourcen, in denen Animationen, Videos, Popups und andere aktive Elemente im Überfluss vorhanden sind. Aufgrund des hohen Gewichts wird die Seite einfach „verlangsamt“, der Benutzer wird wütend und verlässt die Seite, und die Suchpositionen der Website sinken.
- Die Unfähigkeit, die mobile Version auszusch alten, ist ein weiterer wesentlicher Nachteil. Wenn ein Element durch ein solches Layout verdeckt wird, können SieEs gibt nichts, was Sie tun können, um es zu öffnen, im Gegensatz zu Websites, auf denen Sie es deaktivieren und zu einer normalen Domain wechseln können.
Eine solche mobile Version der Website ermöglicht es Ihnen jedoch, die Ressource schnell, ohne besondere Fähigkeiten und Kosten, an beliebige Gadgets anzupassen. Angesichts der aufgeführten Mängel eignet es sich jedoch für kleine, einfache Ressourcen mit einem Minimum an Informationen und Multimedia, ohne komplexe Navigation und Animation. Für eine komplexe Site sind 2 andere Methoden geeignet.
Zweite Methode - eine separate Version der Website
Diese Methode ist weit verbreitet und oft erfolgreich, um die Lesbarkeit der Website auf einem Mobilgerät zu verbessern. Im Wesentlichen wird eine separate Version der Seite erstellt, die für die Anwendung gezeichnet wird und sich auf einer separaten URL oder Subdomain befindet, z. B. m.vk.com. Gleichzeitig bleibt die Hauptfunktionalität erh alten, das Design der Website sieht nur anders aus. Die Vorteile dieser Methode liegen auf der Hand:
- benutzerfreundliche Oberfläche;
- leicht zu ändern und zu bearbeiten, da die Version getrennt von der Hauptressource existiert;
- Aufgrund des geringen Gewichts funktioniert eine separate Version der Website viel schneller als ein adaptives Template;
- meistens ist es möglich, vom Handy aus zur Hauptversion der Seite zu gehen.
Aber auch hier gab es einige Nachteile:
- Mehrere Adressen - Desktop- und mobile Version der Website. Wie lässt sich der Benutzer an zwei Optionen erinnern? Webmaster schreiben oft eine Umleitung (Weiterleitung) von der Desktop-Version auf die mobile Version vor, aber gleichzeitig, wenn diese Seite in der mobilen istVersion nicht existiert, erhält der Benutzer eine Fehlermeldung. Hier treten Schwierigkeiten mit Suchmaschinen auf, die es schwierig finden, 2 identische Ressourcen zu ranken, was sich direkt auf die Werbung auswirkt.
- Die mobile Version der Website von einem Computer sieht lächerlich aus, wenn der Benutzer sie versehentlich besucht, was sich auch auf den Datenverkehr auswirken kann.
- Diese Version ist oft stark eingeschränkt, Desktop, so dass der Benutzer sehr eingeschränkte Funktionalität erhält. Aber gleichzeitig kann der Besucher, wenn etwas fehlt, zur Vollversion der Seite gehen.
Im Allgemeinen rechtfertigt sich eine separate mobile Website und ist die häufigste Art, eine Ressource für mobile Geräte anzupassen. Es ist beliebt bei großen Online-Shops wie Amazon.
Dritter Weg - RESS-Design
Die Google-Suchmaschine unterstützt aktiv diese Richtung des mobilen Designs. Dies ist die komplexeste, kostspieligste, aber effektivste Methode, um die Website an ein Telefon oder Tablet anzupassen. Es heißt RES. Dies zielt auf eine Ressource in einer mobilen Anwendung ab, die für jedes Gerät separat heruntergeladen werden kann. Für Android - mit GooglePlay und für Apple - mit iTunes.
Solche Anwendungen sind schnell, kostenlos, praktisch und können verschiedene Arten von Informationen aufnehmen, während der Speicher des Telefons und der Internetverkehr nicht wie beim Besuch einer Website über einen Browser aufgebraucht werden. Sie sind leicht zugänglich, da der Link immer auf dem aktuellen Bildschirm angezeigt wird und es nicht erforderlich ist, einen komplexen Namen in die Adressleiste des Browsers einzugeben.
Es gibt natürlich hier undseine Mängel, wie Komplexität in der Entwicklung, die hohen Arbeitskosten einer großen Anzahl von Programmierern, die Notwendigkeit, mehrere Layoutoptionen zu erstellen. Manchmal wird das Mobilgerät von der Anwendung nicht erkannt. Regelmäßige technische Unterstützung, Behebung von Mängeln ist erforderlich. Dennoch wird diese Option aufgrund ihres produktiven, unterbrechungsfreien Betriebs als die beste der drei vorgeschlagenen Optionen angesehen.
Der günstigste Weg, eine mobile Website zu erstellen
Alle oben genannten Methoden beinh alten, wenn auch nicht immer lange und schwierige, aber dennoch bezahlte Arbeit eines Webmasters. Wenn Sie keinen dringenden Bedarf für eine solche Entwicklung sehen, ist eine einfache und kostenlose mobile Version der Website für Sie geeignet. Wie macht man es am einfachsten?
Laden Sie spezielle Vorlagen (Plugins) für responsives Design herunter. Zum Beispiel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile und andere. Sie helfen dabei, die Seite auf dem Handy korrekter anzuzeigen, während Sie ein paar Tipps erh alten, was korrigiert werden sollte, um die Seite besser an die mobile Version anzupassen.
Für ernsthafte Ressourcen ist diese Methode natürlich kaum geeignet. Vielmehr ist diese kostenlose Funktion für kleine und einfache Websites, Blogs und Newsfeeds gedacht. Vergessen Sie nicht, dass die Google-Suchmaschine sowie Yandex heutzutage ernsthafte Anforderungen an mobile Versionen stellen, daher besteht eine große Chance, Ihre Positionen mit dieser Methode zu senken.
Bei dieser Methode werden höchstwahrscheinlich Anzeigen und Popups abgeschnittenBanner, aber die Seite wird schnell und ohne Verzögerungen geladen.
Prinzipien zur Erstellung mobiler Versionen
Es spielt keine Rolle, ob die mobile Version der Website kostenlos oder mit Hilfe von Webmastern erstellt wurde, ob sie auf dem RESS-System oder mit einem adaptiven Template erstellt wurde. Am wichtigsten ist, dass es für seinen effektiven Betrieb mehrere äußerst wichtige Prinzipien einh alten muss. Also, was sollte die mobile Version der Seite sein? Wie kann man es produktiv, effizient und produktiv machen?
Entferne alles Unnötige
Minimalismus ist das, was der Entwickler der mobilen Version der Seite anstreben sollte. Stellen Sie sich vor, wie schwer es ist, Informationen wahrzunehmen, die voller Farben, Sch altflächen und Banner sind und durch die Sie auf der Suche nach dem richtigen Material endlos scrollen müssen. Mobiles Design sollte einfach und sauber sein. Wählen Sie 2-3 Farben, um den Raum zu unterteilen (z. B. gebrandet). Besser, wenn einer von ihnen weiß ist. Unterteilen Sie den Raum eines kleinen Bildschirms in verständliche und lesbare Zonen. Virtuelle Tasten sollten sichtbar sein, damit der Benutzer klar weiß, wo er drücken muss und sieht - hier ist das Produkt, hier ist das Formular zum Ausfüllen der Daten, hier sind die Informationen zu Lieferung und Zahlung.
Alle zusätzlichen Optionen, die in der Desktop-Version sinnvoll wären und dem Benutzer das Leben erleichtern, bringen hier nur Schwierigkeiten. Lassen Sie nur die wichtigsten Elemente. Animationen, Werbebanner und Multimedia werden höchstwahrscheinlich nur die Arbeit der Website oder Anwendung verlangsamen und davon ablenkenmain.
Ausrichtung
Das Problem der Ausrichtung ist nicht weniger akut, denn wenn es falsch gemacht wird, erhält der Benutzer nur die Endungen wichtiger Wörter. Linksbündige und vertikale Ausrichtung wird allgemein akzeptiert. Stellen Sie sich vor, Sie scrollen durch den Newsfeed auf Ihrem Telefon. Du machst es von oben nach unten, nicht nach links oder rechts.
Vereinigung
Wenn es keine Möglichkeit für eine lange Kette von Übergängen gibt, versuchen Sie, mehrere Schritte zu einem zusammenzufassen. Zum Beispiel erfordert die Site die Dateneingabe in mehreren Schritten – ein Name, dann eine Adresse, wobei in jeder einzelnen Zelle ein separates Haus, eine Straße, eine Wohnung usw. stehen. Um den Benutzer nicht zu zwingen, zu versuchen, viele kleine Zellen zu treffen, bitten Sie ihn, nur 2 auszufüllen - Name und Adresse.
Und Trennung
Manchmal ist es im Gegenteil erforderlich, zu viele Informationen zu trennen. Im Dropdown-Menü haben Sie beispielsweise eine Liste mit mehr als 80 Städten, in die die Lieferung erfolgt. Gruppieren Sie sie nach Region, damit der Benutzer nicht durch diese riesige Liste scrollen muss. Wenn er den Mauszeiger über das regionale Zentrum oder die Region bewegt, wird eine weitere Liste mit Städten ausgeblendet.
Inserate
Übrigens wegen der Listen. Es gibt zwei davon - in alphabetischer oder anderer Reihenfolge und mit Substitution. Ihre Wahl hängt davon ab, was aufgelistet wird.
Fixed ist nützlich, wenn der Benutzer genau weiß, wonach er sucht. Zum Beispiel Stadt, Nummer oder Datum. Die zweite Option eignet sich für lange komplexe Namen oder für Fälle, in denen es viele Variationen ein und desselben gibtden gleichen Namen, und jede Dropdown-Liste bringt den Benutzer dem Ziel einen Schritt näher. Die Option zum automatischen Ersetzen wird häufiger verwendet, wenn ein Besucher Hilfe benötigt. Zum Beispiel bietet eine Strickseite den Kauf von Stricknadeln an. Der Nutzer gibt die Suchanfrage „Stricknadeln aus Metall“ein und sieht im Tooltip „Stricknadeln 5 mm“, „Stricknadeln 4,5 mm“usw.
Automatisches Ausfüllen
Dieser Punkt ist besonders relevant für Websites, die etwas online verkaufen, und Sie müssen Standardformulare für Zahlung, Lieferung usw. ausfüllen. Wenn eine Person einen Kauf über ein Telefon tätigt, hat sie höchstwahrscheinlich keine Zeit um an einen Computer zu gelangen, was bedeutet, dass der Kaufvorgang so schnell und bequem wie möglich ablaufen sollte.
Dazu können die Formulare bereits ausgefüllte Daten enth alten, Sie können auf die gängigsten Antworten zurückgreifen. Geben Sie beispielsweise das heutige Datum, die Barzahlungsmethode und die Stadt ein, wenn Sie in derselben Region arbeiten. Sie können geändert werden, aber wenn Sie das Ziel treffen, wird die Zeit des Benutzers gespart.
Alles wird gelesen, alles wird angeschaut
Beachten Sie beim Entwerfen der mobilen Version der Website, dass die Telefone aller Menschen unterschiedlich sind, ebenso wie ihre Sehkraft. Vielleicht wird Ihre Website von einem kleinen Bildschirm aus betrachtet, daher sollten die Schriftarten einfach und lesbar sein, die Sch altflächen sollten groß genug sein, damit sie angeklickt werden können, ohne auf eine andere Seite zu wechseln, und die Bilder sollten separat geöffnet werden, besonders groß, wenn es kommt ins internet.store.
Einige Statistiken
Apropos Anpassung der Website an mobile Geräte, man kommt nicht umhin, auf Statistiken zurückzugreifen, um zu verstehen, wie wichtig dieser Prozess istOnline-Werbung.
Die Zahlen lauten wie folgt. Heutzutage werden Gadgets anscheinend von 87% der Bevölkerung verwendet, mit Ausnahme der kleinsten Kinder und einiger älterer Menschen. Ökonomen sagen voraus, dass der mobile Handel in den nächsten 5 Jahren um das 100-fache wachsen wird. Gleichzeitig sind nur 21 % der Websites für die Arbeit mit mobilen Geräten angepasst. Damit wird nur ein kleiner 5. Teil des Internetverkehrs und des E-Commerce-Marktes belegt.
Denken Sie an diese Zahlen. Ist es sinnvoll, Ihre Ressource anzupassen? Ja natürlich. Obwohl es auf diesem Markt so viel Platz gibt, können Sie außerdem Ihr eigenes Segment darin herausarbeiten.
Wo Sie eine mobile Version benötigen
Die Verwendung der mobilen Version ist für jede Plattform sinnvoll, die ein hohes Ranking anstrebt. Schließlich wirkt sich dies direkt auf den Benutzer aus und schafft angenehme Bedingungen für ihn, auf Ihrer Website zu bleiben.
Kann ohne mobile Version nicht existieren:
- Nachrichtenportale, weil die meisten auf dem Weg zur Arbeit oder Schule vom Handy aus angeschaut werden;
- soziale Netzwerke - aus dem gleichen Grund, außerdem gibt es einen Online-Kommunikationsfaktor, was bedeutet, dass dafür ein bequemer, verständlicher Chat erstellt werden sollte;
- Referenz, Navigationsseiten usw., wohin Menschen gehen, wenn sie nach etwas suchen;
- Online-Shops - eine Gelegenheit, Kunden anzuziehen, die keine Zeit mit dem Einkaufen verschwenden, sondern alles über das mobile Internet kaufen.
Statt einer Schlussfolgerung
Mobile Technologien sind heute in derAktives Wachstum und Entwicklung, daher das Streben nach Marktführerschaft, jedes Unternehmen muss sicherstellen, dass seine Internet-Ressource den Anforderungen entspricht. Aufgrund der wachsenden Ansprüche der Nutzer müssen Seiten ständig aktualisiert und an unterschiedliche Endgeräte angepasst werden. Es ist klar, dass, wenn es einer Person unangenehm ist, sich auf einer bestimmten Ressource zu befinden, sie dort keine Informationen über ein Produkt oder einen Preis erh alten, eine Bestellung aufgeben, sich über die Lieferung informieren kann, dann findet sie die Website, auf der all dies möglich wird. Um den Wettbewerb zu gewinnen, ist es daher wichtig, eine flexible, praktische, funktionale und interessante Ressource zu haben.
Die mobile Version der Android- oder iOS-Website hilft dabei. Dazu müssen Sie eine der oben genannten Redesign-Methoden auswählen - eine adaptive Vorlage, das Erstellen einer neuen Website auf einer Subdomain und die Weiterleitung zu dieser, die Verwendung kostenloser Vorlagen oder das Erstellen einer mobilen Anwendung, die dem Benutzer die Eingabe erleichtert und sei auf der Seite.
Dieser Ansatz trägt nicht nur dazu bei, die Loyalität bestehender Kunden aufrechtzuerh alten, sondern bietet auch die Möglichkeit, neue Besucher zu gewinnen.
