Heute gehen die meisten Leute online durchMobile Gadgets - Tablets, Telefone, in diesem Zusammenhang kommt auch die Site-Optimierung auf ein neues Level. Wenn ein Benutzer kommt und sieht, dass die Website nicht für mobile Geräte optimiert ist: Es ist nicht das Bild sehen kann, zog einen Knopf, klein und unleserlich Schriftarten aus, Design verzerrt - 99 des 100%, dass er kommen wird und wird für eine andere bequemen zu suchen beginnen. Ein Suchroboter hakt ab, dass die Ressource irrelevant ist, d. H. Nicht mit der Suchanfrage übereinstimmt. Daher muss das Design der Seite notwendigerweise an verschiedene mobile Geräte angepasst werden. Was ist eine mobile Version der Website, wie wird sie erstellt und wie kann sie am besten angewendet werden? Lesen Sie mehr in diesem Artikel.

Daher gibt es vier wichtige Möglichkeiten, die Website an eine mobile Version anzupassen.

mobile Version der Website, wie zu machen

Der erste Weg - adaptives Design

Adaptive Vorlagen weisen auf eine Änderung hinBilder der Website abhängig von der Bildschirmgröße. In der Regel werden sie auf 1600, 1500, 1280, 1100, 1024 und 980 Standardpixel eingestellt. Verwenden Sie zur Implementierung CSS3-Medienabfragen. Das Design der Seite ändert sich nicht gleichzeitig.

Die Vorteile dieser Methode sind:

  • komfortables Design, da sich die Struktur selbst an die Bildschirmparameter anpasst und jedes Update nicht die Entwicklung von Design von Grund auf erfordert, einfach CSS und HTML korrigieren;
  • eine URL - der Benutzer muss sich nicht erinnernBei mehreren Namen ist keine Umleitung erforderlich (Umleitung von einer Adresse zu einer anderen), was die Arbeit des Webmasters erschweren kann, und die Suchmaschine kann die Ressource einfacher mit einer einzigen Adresse sortieren und einstufen.

Natürlich haben adaptive Vorlagen ihre eigenenNachteile, die übrigens mehr als nur Vorteile sind. Dennoch halten sich viele Entwickler an dieses Konzept, beispielsweise die Firma Google, deren mobile Version der Website ein adaptives Design aufweist. Also, die Nachteile sind:

  • Adaptives Design unterstützt nicht die gleichen Aufgaben fürmobiles Gerät, wie auf dem PC. Wenn dies beispielsweise eine mobile Version der Website der Bank ist, bei der der Benutzer eher Informationen über den Wechselkurs oder die nächsten Geldautomaten hat, ist dieses Design ausreichend. Wenn es sich jedoch um eine komplexe strukturierte Ressource mit vielen Abschnitten und Unterabschnitten handelt, ist ein adaptives Layout für Besucher wahrscheinlich nicht attraktiv.
  • Ein langsamer Download verwandelt Ihre Lieblings - Site in einegehasst. Dies gilt insbesondere für Ressourcen, wo Animationen, Videoclips, Pop-ups und andere aktive Elemente reichlich vorhanden sind. Wegen des hohen Gewichts wird die Seite einfach "langsamer", der Benutzer wird wütend und geht weg, und die Suchpositionen der Seite werden fallen.
  • Unfähigkeit, die mobile Version zu deaktivieren - mehrein wesentlicher Nachteil. Wenn ein Element durch ein solches Layout ausgeblendet wird, können Sie nichts öffnen, um es zu öffnen, im Gegensatz zu Websites, auf denen es deaktiviert werden kann und zu einer regulären Domäne wechseln kann.

Dennoch ist eine solche mobile Version der Website schnell,Ohne spezielle Fähigkeiten und Kosten können Sie die Ressource an jedes Gadget anpassen. Angesichts der aufgezählten Mängel ist es jedoch geeignet, kleine, einfache Ressourcen mit einem Minimum an Information und Multimedia ohne komplizierte Navigation und Animation zu verwenden. Für eine komplexe Site sind zwei andere Methoden geeignet.

Website-Design

Die zweite Methode ist eine separate Version der Site

Diese Methode ist sehr häufig und oft mit Erfolgmacht die Website auf dem mobilen Gerät für die Wahrnehmung angenehmer. Es besteht im Wesentlichen darin, eine separate Version der Seite zu erstellen, die für die Anwendung erstellt wird und sich in einer separaten URL oder Subdomain befindet, z. B. m.vk.com. Gleichzeitig bleibt das Hauptfunktional erhalten, das Design der Baustelle sieht einfach anders aus. Vorteile dieser Methode liegen auf der Hand:

  • benutzerfreundliche Oberfläche;
  • Es ist einfach, Änderungen vorzunehmen und Änderungen vorzunehmen, da die Version separat von der Hauptressource existiert.
  • aufgrund des geringen Gewichts einer separaten Version der Website ist viel schneller als die adaptive Vorlage;
  • Meistens besteht die Möglichkeit, mit einem Handy zur Hauptversion der Seite zu gelangen.

Aber auch hier gab es Mängel:

  • Mehrere Adressen - Desktop- und mobile VersionWebsite. Wie kann ich dem Benutzer zwei Optionen merken lassen? Webmaster schreiben häufig eine Umleitung (Umleitung) von der Dextup-Version zu einem mobilen Gerät vor. Wenn diese Seite jedoch in der mobilen Version nicht vorhanden ist, erhält der Benutzer einen Fehler. Hier gibt es Schwierigkeiten mit den Suchmaschinen, denen es schwer fällt, 2 identische Ressourcen zu rangieren, was sich direkt auf den Fortschritt auswirkt.
  • Mobile Version der Website vom Computer, wenn der Benutzer irrtümlicherweise zu ihm gehen, wird lächerlich aussehen, was auch Auswirkungen auf die Teilnahme haben kann.
  • Diese Version ist oft stark eingeschränkt, Desktop, so wird der Benutzer sehr eingeschränkte Funktionalität erhalten. Wenn jedoch etwas fehlt, kann der Besucher zur Vollversion der Seite gehen.

Im Allgemeinen rechtfertigt sich eine separate mobile WebsiteDies ist der gängigste Weg, um die Ressource an mobile Geräte anzupassen. Es ist beliebt bei großen Online-Shops, zum Beispiel Amazon.

adaptive Vorlagen

Der dritte Weg ist RESS-Design

Die Google-Suchmaschine unterstützt dies aktivRichtung des mobilen Designs. Dies ist die komplexeste, kostenintensivste, aber effektivste Methode, um die Website an ein Telefon oder Tablet anzupassen. Es heißt RESS. Dies ist ein Ressourcen-Targeting in einer mobilen Anwendung, die für jedes Gerät separat heruntergeladen werden kann. Für den Android - mit GooglePlay und für Apple - mit iTunes.

Solche Anwendungen sind schnell, kostenlos, bequem,haben die Fähigkeit, verschiedene Arten von Informationen unterzubringen, während der Speicher des Telefons und der Internet-Verkehr nicht so gegessen werden, wie es beim Besuch einer Website durch den Browser ist. Sie sind einfach einzugeben, da der Link immer auf dem Bildschirm angezeigt wird und Sie keinen komplexen Namen in der Adressleiste des Browsers eingeben müssen.

Es gibt natürlich hier und ihre Mängel, wie zdie Komplexität in der Entwicklung, die hohen Arbeitskosten einer großen Anzahl von Programmierern, die Notwendigkeit, mehrere Varianten des Layouts zu erstellen. Manchmal wird ein mobiles Gerät von der Anwendung nicht erkannt. Regelmäßige technische Unterstützung, Korrektur von Mängeln ist notwendig. Nichtsdestotrotz wird diese Option aufgrund ihres produktiven, reibungslosen Betriebs als das Beste der drei angebotenen Produkte angesehen.

Google Mobile Site-Version

Der günstigste Weg, eine mobile Website zu erstellen

Alle oben genannten Methoden gehen davon ausund nicht immer eine lange und komplexe, aber immer noch bezahlte Arbeit des Webmasters. Wenn Sie keine dringende Notwendigkeit für eine solche Entwicklung sehen, können Sie eine einfache und kostenlose mobile Version der Website verwenden. Wie macht man es leichter?

Laden Sie spezielle Vorlagen (Plugins) herunter füradaptives Design. Zum Beispiel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile und andere. Sie werden helfen, die Seite korrekt im Telefon anzuzeigen, gleichzeitig erhalten Sie mehrere Tipps, die für eine bessere Anpassung der Seite an die mobile Version korrigiert werden sollten.

Natürlich ist diese Methode kaum geeignet fürernsthafte Ressourcen. Vielmehr ist diese kostenlose Gelegenheit für kleine und einfache Websites, Blogs, News-Feeds gedacht. Vergessen Sie nicht, dass die Suchmaschine Google, wie Yandex, heute hohe Anforderungen an mobile Versionen stellt, so dass es eine große Chance gibt, Ihre Positionen mit dieser Methode zu senken.

Bei dieser Methode werden Werbebanner und Popup-Banner wahrscheinlich abgeschnitten, aber die Seite wird schnell und ohne "Verzögerungen" geladen.

mobile Version der Android-Website

Prinzipien der Erstellung von mobilen Versionen

Egal, eine mobile Version der Site wird kostenlos erstelltoder mit Hilfe von Webmaster-Mitarbeitern, erfolgt dies auf dem RESS-System oder mithilfe einer adaptiven Vorlage. Das Wichtigste ist, dass für seine effektive Arbeit mehrere sehr wichtige Prinzipien eingehalten werden müssen. Also, was sollte die mobile Version der Website sein? Wie man es produktiv, effizient und produktiv macht?

mobile Version der Website vom Computer

Wir entfernen alles unnötige

Minimalismus ist etwas, wonach man streben sollteEntwickler der mobilen Version der Website. Stellen Sie sich vor, wie schwer es ist, Informationen wahrzunehmen, die voller Farben, Knöpfe und Banner sind und bei denen Sie endlos nach dem richtigen Material suchen müssen. Mobiles Design sollte einfach und sauber sein. Wählen Sie 2-3 Farben, um den Raum zu trennen (z. B. Markenartikel). Es ist besser, wenn einer von ihnen weiß ist. Teilen Sie den Platz eines kleinen Bildschirms in klare und lesbare Bereiche. Virtuelle Schlüssel sollten sichtbar sein, damit der Benutzer eindeutig weiß, wo er klicken und sehen muss - das ist die Ware, hier ist das Formular zum Ausfüllen der Daten, hier sind die Informationen zur Lieferung und Bezahlung.

Alle zusätzlichen Optionen, die nützlich wärenin der Desktop-Version und würde das Leben für den Benutzer einfacher machen, werden sie nur Komplikationen bringen. Belassen Sie nur die wichtigsten Elemente. Animation, Werbebanner, Multimedia werden wahrscheinlich nur die Seite oder Anwendung verlangsamen und von der Hauptsache ablenken.

Ausrichtung

Die Frage der Angleichung ist nicht weniger akut,denn wenn du es falsch machst, erhält der Benutzer nur die Endungen wichtiger Wörter. Die Ausrichtung links und vertikal wird als üblich angesehen. Stellen Sie sich vor, wie Sie die Nachrichtenleitung in Ihrem Telefon durchblättern. Sie tun dies von oben nach unten, aber nicht auf der linken oder rechten Seite.

Vereinigung

Wenn es keine Möglichkeit einer langen Kette von Übergängen gibt,Versuche mehrere Schritte zu einem zu kombinieren. Zum Beispiel erfordert eine Website die Eingabe von Daten in mehreren Stufen - ein Name, dann eine Adresse, wo jedes Haus ein separates Haus, Straße, Wohnung usw. enthält. Um den Benutzer nicht zu zwingen, auf viele kleine Zellen zu kommen, bitten Sie ihn, nur 2 - Name und Adresse.

Und Abkopplung

Manchmal müssen Sie die Verbindung auch trennenviele Informationen. Zum Beispiel haben Sie im Dropdown-Menü eine Liste von mehr als 80 Städten, in denen die Lieferung stattfindet. Gruppieren Sie sie nach Region, so dass der Benutzer nicht durch diese riesige Liste scrollen muss. Wenn er auf das regionale Zentrum oder Gebiet zeigt, wird eine andere Liste von Städten fallen.

Checklisten

Übrigens, über die Listen. Die beiden sind in alphabetischer oder anderer Reihenfolge und mit Ersetzung festgelegt. Die Auswahl hängt davon ab, was aufgelistet wird.

Fixed ist praktisch für den Fall, dassDer Benutzer weiß genau, wonach er sucht. Zum Beispiel eine Stadt, eine Nummer oder ein Datum. Die zweite Option eignet sich für lange komplexe Namen oder für Fälle, in denen viele Varianten desselben Namens vorhanden sind und jede Dropdown-Liste den Benutzer dem Ziel näher bringt. Eine Variante mit automatischer Substitution wird häufiger verwendet, wenn ein Besucher Hilfe benötigt. Zum Beispiel bietet eine Website zum Stricken bietet Stricknadeln zu kaufen. Der Benutzer gibt die Suchanfrage "Metallstricknadeln" ein und sieht im Tooltip "Speichen 5 mm", "Speichen 4,5 mm" usw.

Autofill

Dieser Absatz ist besonders relevant für Websites, wo etwasverkaufen online, und Sie haben in der Standardform der Zahlung, Lieferung und so weiter. n zu füllen. Wenn eine Person einen Kauf aus dem Telefon macht, dann ist es sehr wahrscheinlich, er hat keine Zeit, auf einen Computer zu erhalten, was bedeutet, dass der Kaufprozess notwendig ist, so schnell und bequem zu machen.

Dazu können Formulare bereits gefüllt seinDaten können Sie auf die beliebtesten Antworten zurückgreifen. Geben Sie beispielsweise das heutige Datum, die Zahlungsmethode in bar, die Stadt ein, wenn Sie in einer Region arbeiten. Sie können geändert werden, aber wenn Sie das Ziel treffen, wird die Zeit des Benutzers gespeichert.

Alles ist gelesen, alles ist sichtbar

Beachten Sie beim Erstellen einer mobilen Version einer Websitedass alle Telefone anders sind und auch das Sehvermögen. Vielleicht wird Ihre Seite von einem kleinen Bildschirm aus betrachtet, also sollten die Schriftarten einfach und lesbar sein, die Schaltflächen - groß genug, dass sie angeklickt werden können und nicht auf eine andere Seite gelangen, und Bilder sollten separat geöffnet werden, besonders wenn es um das Internet geht zum Laden.

Einige Statistiken

Wenn Sie über die Anpassung der Website an mobile Geräte sprechen, können Sie nicht auf Statistiken zurückgreifen, um zu verstehen, wie wichtig dieser Prozess für die Förderung des Netzwerks ist.

Die Zahlen sind wie folgt. Gadgets werden heute anscheinend von 87% der Bevölkerung genutzt, abgesehen von den jüngsten Kindern und einigen älteren Menschen. Ökonomen prognostizieren für die nächsten 5 Jahre 100 Mal das Wachstum von Mobile Commerce. Gleichzeitig sind nur 21% der Websites für die Arbeit mit mobilen Geräten angepasst. Daher sind der Internetverkehr und der E-Commerce-Markt nur mit einem kleinen 5. Teil belegt.

Denken Sie über diese Zahlen nach. Macht es Sinn, Ihre Ressource anzupassen? Ja natürlich. Solange es auf diesem Markt noch so viel Freiraum gibt, können Sie Ihr eigenes Segment darauf aufbauen.

mobile Version der Website kostenlos

Wo wird die mobile Version benötigt?

Verwenden Sie die mobile Version ist geeignet fürjede Plattform, die eine hohe Bewertung erhalten möchte. Dies wirkt sich unmittelbar auf den Benutzer aus und schafft für ihn komfortable Bedingungen für den Aufenthalt auf Ihrer Website.

Ohne eine mobile Version kann es nicht existieren:

  • Nachrichtenportale, da die meisten von ihnen auf dem Weg zur Arbeit oder zum Studium durch das Telefon schauen;
  • Soziale Netzwerke - aus dem gleichen Grund, plus gibt es einen Faktor der Kommunikation online, was bedeutet, dass ein bequemer, verständlicher Chat dafür geschaffen werden sollte;
  • Referenz-Websites, Websites mit Navigation usw., wo sich Menschen umsehen, wenn sie auf der Suche nach etwas sind;
  • Online-Shops - eine Gelegenheit, um Käufer zu gewinnen, die keine Zeit auf Einkaufstouren verbringen, sondern alles über das mobile Internet kaufen.

Anstatt zu schließen

Heute sind mobile Technologien in deraktives Wachstum und Entwicklung, also Streben nach Marktführerschaft, sollte jedes Unternehmen sicherstellen, dass seine Internet-Ressource die Anforderungen erfüllt. Aufgrund wachsender Benutzeranforderungen müssen Websites ständig aktualisiert und an verschiedene Geräte angepasst werden. Es ist klar, dass, wenn eine Person sich unwohl fühlt, auf einer bestimmten Ressource zu sein, kann er keine Informationen über das Produkt oder den Preis erhalten, eine Bestellung aufgeben, etwas über die Lieferung erfahren, er wird die Seite finden, wo all dies möglich wird. Um den Wettbewerb zu gewinnen, ist es wichtig, eine flexible, bequeme, funktionelle und interessante Ressource zu haben.

Mach diese mobile Version der SeiteAndroid oder iOS. Dazu wählen Sie eine der oben genannten Möglichkeiten zur Neugestaltung - adaptiver Vorlage, eine neue Website auf einer Sub-Domain zu schaffen und den Übergang zu ihm durch die Verwendung von kostenlosen Vorlagen Umleiten oder eine mobile Anwendung erstellen, durch denen ein Benutzer bequem eingeben und bleibt auf der Seite.

Ein solcher Ansatz wird dazu beitragen, nicht nur die Loyalität der bestehenden Kunden zu halten, sondern auch die Gelegenheit bietet, neue Besucher zu gewinnen.

</ p>