Speisekarte
heimProgramme

So erstellen Sie eine mobile Version auf Ihrem Telefon. Eine separate Vorlage für mobile Geräte auf der Hauptdomain. Ergebnis prüfen, testen

Heutzutage greifen die meisten Menschen über mobile Geräte – Tablets, Telefone – auf das Internet zu, und in dieser Hinsicht erreicht auch die Website-Optimierung ein neues Niveau. Wenn ein Benutzer die Website betritt und feststellt, dass die Website nicht für mobile Geräte optimiert ist: Das Bild kann nicht angezeigt werden, die Schaltflächen sind entfernt, die Schriftarten sind klein und unleserlich, das Design ist verzerrt – 99 von 100 %, das wird er tun Gehen Sie und suchen Sie nach einem anderen, bequemeren. Und es wird das Kontrollkästchen aktiviert, dass die Ressource irrelevant ist, das heißt, sie entspricht nicht der Suchanfrage. Daher muss das Seitendesign an verschiedene mobile Geräte angepasst werden. Was ist eine mobile Version einer Website, wie erstellt man sie und welche Methode eignet sich am besten? Lesen Sie mehr in diesem Artikel.

Es sind also vier Schlüsselwege Passen Sie die Website für eine mobile Version an.

Methode eins – Responsive Design

Bei adaptiven Vorlagen wird das Website-Bild abhängig von der Bildschirmgröße geändert. In der Regel sind sie standardmäßig auf 1600, 1500, 1280, 1100, 1024 und 980 Pixel eingestellt. Zur Umsetzung werden Abfragen verwendet. Es verändert sich nicht.

Zu den Vorteilen dieser Methode gehören:

  • bequeme Entwicklung, da sich die Struktur selbst an die Bildschirmparameter anpasst und für jedes Update kein Design von Grund auf neu entwickelt werden muss, reicht es aus, CSS und HTML zu korrigieren;
  • eins URL-Adresse- Der Benutzer muss sich nicht mehrere Namen merken, es ist keine Weiterleitung (Umleitung von einer Adresse zu einer anderen) erforderlich, die die Arbeit eines Webmasters erschweren kann, und es ist für eine Suchmaschine einfacher, eine Ressource zu sortieren und einzustufen mit einer einzigen Adresse.

Natürlich haben adaptive Templates auch Nachteile, die übrigens ihre Vorteile überwiegen. Dennoch halten viele Entwickler an diesem besonderen Konzept fest, beispielsweise die Google Corporation, deren mobile Version der Website über ein responsives Design verfügt. Also die Nachteile:

  • Responsive Design unterstützt nicht die gleichen Aufgaben auf einem mobilen Gerät wie auf einem Desktop. Wenn es sich beispielsweise um eine mobile Version der Website einer Bank handelt, bei der der Nutzer höchstwahrscheinlich Informationen zu Wechselkursen oder in der Nähe befindlichen Geldautomaten benötigt, dann ist diese Gestaltung völlig ausreichend. Wenn es sich jedoch um eine komplex strukturierte Ressource mit vielen Abschnitten und Unterabschnitten handelt, ist es unwahrscheinlich, dass sie Besucher anspricht.
  • Langsames Laden macht Ihre Lieblingsseite zu einer verhassten. Dies gilt insbesondere für Ressourcen, die eine Fülle von Animationen, Videos, Pop-ups und anderen aktiven Elementen enthalten. Aufgrund des großen Gewichts wird die Seite einfach „langsamer“, der Benutzer wird wütend und verlässt die Website und die Suchpositionen der Website sinken.
  • Unfähigkeit zum Ausschalten mobile Version- ein weiterer wesentlicher Nachteil. Wenn ein Element durch ein solches Layout ausgeblendet wird, können Sie nichts tun, um es zu öffnen, im Gegensatz zu Websites, bei denen Sie es deaktivieren und zu einer regulären Domain wechseln können.

Dennoch ermöglicht Ihnen eine solche mobile Version der Website, die Ressource schnell, ohne besondere Fähigkeiten und Kosten, an jedes Gadget anzupassen. Aufgrund der aufgeführten Mängel ist es jedoch für kleine, einfache Ressourcen mit einem Minimum an Informationen und Multimedia, ohne komplexe Navigation und Animation. Für eine komplexe Site eignen sich zwei weitere Methoden.

Methode zwei – eine separate Version der Site

Diese Methode ist sehr verbreitet und macht eine Website auf einem mobilen Gerät oft benutzerfreundlicher. Sein Kern besteht darin, eine separate Version der Seite zu erstellen, die für die Anwendung konzipiert ist und sich auf einer separaten URL oder Subdomain befindet, zum Beispiel m.vk.com. Gleichzeitig bleibt die Hauptfunktionalität erhalten, das Site-Design sieht lediglich anders aus. Die Vorteile dieser Methode liegen auf der Hand:

  • komfortable Benutzeroberfläche;
  • es ist einfach, Änderungen und Bearbeitungen vorzunehmen, da die Version getrennt von der Hauptressource existiert;
  • Aufgrund seines geringen Gewichts arbeitet eine separate Version der Site viel schneller als responsive Vorlage;
  • Meistens ist es möglich, von der mobilen Version zur Hauptversion der Seite zu wechseln.

Dies ist jedoch nicht ohne Nachteile:

  • Mehrere Adressen – Desktop- und Mobilversionen der Website. Wie kann der Benutzer sich an zwei Optionen erinnern? Webmaster wechseln häufig von der Desktop-Version zur mobilen Version. Wenn diese Seite jedoch in der mobilen Version nicht vorhanden ist, erhält der Benutzer eine Fehlermeldung. Hier treten Schwierigkeiten bei Suchmaschinen auf, die Schwierigkeiten haben, zwei identische Ressourcen zu bewerten, was sich direkt auf die Werbung auswirkt.
  • Die mobile Version der Website von einem Computer aus sieht, wenn ein Benutzer versehentlich darauf zugreift, lächerlich aus, was sich auch auf den Datenverkehr auswirken kann.
  • Diese Version ist oft sehr abgespeckt, Desktop-Version, so dass der Benutzer nur sehr begrenzte Funktionalität erhält. Wenn aber etwas fehlt, kann der Besucher gleichzeitig zur Vollversion der Seite gelangen.

Im Allgemeinen rechtfertigt sich eine separate mobile Website und ist die gebräuchlichste Möglichkeit, eine Ressource für mobile Geräte anzupassen. Es ist bei großen Online-Shops wie Amazon beliebt.

Der dritte Weg ist das RESS-Design

Die Google-Suchmaschine unterstützt aktiv diese Richtung des mobilen Designs. Dies ist die schwierigste, kostspieligste, aber effektivste Methode, eine Website für ein Telefon oder Tablet anzupassen. Es heißt RESS. Hierbei wird eine Ressource gezielt in eine mobile Anwendung umgewandelt, die für jedes Gerät separat heruntergeladen werden kann. Für Android – von GooglePlay und für Apple – von iTunes.

Solche Anwendungen sind schnell, kostenlos, bequem und können gehostet werden verschiedene Arten Informationen, während der Telefonspeicher und der Internetverkehr nicht so stark beansprucht werden wie beim Besuch einer Website über einen Browser. Sie sind leicht zugänglich, da der Link immer griffbereit auf dem Bildschirm angezeigt wird und kein komplexer Name eingegeben werden muss Adressleiste Browser.

Natürlich gibt es hier auch Nachteile, wie z. B. Komplexität in der Entwicklung, hohe Arbeitskosten für eine große Anzahl von Programmierern und die Notwendigkeit, mehrere Layoutoptionen zu erstellen. Manchmal wird das mobile Gerät von der Anwendung nicht erkannt. Regulär technische Unterstützung, Behebung von Mängeln. Dennoch gilt diese Option aufgrund ihres produktiven, unterbrechungsfreien Betriebs als die beste der drei vorgeschlagenen Optionen.

Der günstigste Weg, eine mobile Website zu erstellen

Alle oben genannten Methoden erfordern zwar nicht immer lange und komplexe, aber dennoch bezahlte Arbeit für den Webmaster. Wenn Sie keinen dringenden Bedarf für eine solche Entwicklung sehen, ist eine einfache und kostenlose mobile Version der Website genau das Richtige für Sie. Wie geht das am einfachsten?

Laden Sie spezielle Vorlagen (Plugins) herunter für adaptives Design. Zum Beispiel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile und andere. Sie helfen Ihnen dabei, die Website auf Ihrem Telefon korrekter anzuzeigen, und Sie erhalten mehrere Tipps, was korrigiert werden sollte, um die Seite besser an die mobile Version anzupassen.

Natürlich ist diese Methode für ernsthafte Ressourcen wahrscheinlich nicht geeignet. Vielmehr ist es so kostenlose Gelegenheit Gedacht für kleine und einfache Websites, Blogs und Newsfeeds. Das sollten wir auch nicht vergessen Google-Suchmaschine, wie Yandex, stellt heute hohe Anforderungen an mobile Versionen, daher besteht eine große Chance, dass Sie mit dieser Methode Ihre Position senken.

Bei dieser Methode werden höchstwahrscheinlich Werbe- und Popup-Banner abgeschnitten, die Seite wird jedoch schnell und ohne Verzögerungen geladen.

Prinzipien zum Erstellen mobiler Versionen

Es spielt keine Rolle, ob die mobile Version der Website kostenlos oder mit Hilfe eines Webmasterteams erstellt wurde, ob sie mit dem RESS-System oder mithilfe einer adaptiven Vorlage erstellt wurde. Das Wichtigste ist, dass Sie mehrere Punkte einhalten müssen, damit es effektiv funktioniert wichtige Grundsätze. Wie sollte also die mobile Version der Website aussehen? Wie kann man es produktiv, effizient und produktiv machen?

Wir entfernen alles Unnötige

Minimalismus ist das, wonach ein Entwickler einer mobilen Version einer Website streben sollte. Stellen Sie sich vor, wie schwierig es ist, Informationen wahrzunehmen, die voller Farben, Schaltflächen und Banner sind und durch die Sie auf der Suche nach dem richtigen Material endlos scrollen müssen. Mobiles Design sollte einfach und klar sein. Wählen Sie 2-3 Farben, um den Raum zu unterteilen (z. B. Markenfarben). Es ist besser, wenn einer von ihnen weiß ist. Teilen Sie den kleinen Bildschirmbereich in klare und lesbare Bereiche auf. Virtuelle Tasten müssen sichtbar sein, damit der Benutzer genau 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 nützlich wären und dem Benutzer das Leben erleichtern würden, werden hier nur Komplikationen mit sich bringen. Belassen Sie nur die wichtigsten Elemente. Animation, Werbebanner, Multimedia wird höchstwahrscheinlich nur den Betrieb der Website oder Anwendung verlangsamen und vom Wesentlichen ablenken.

Ausrichtung

Das Problem der Ausrichtung ist nicht weniger dringlich, da der Benutzer bei falscher Ausführung nur die Endungen wichtiger Wörter erhält. Es wird allgemein akzeptiert, links und vertikal auszurichten. Stellen Sie sich vor, Sie scrollen durch den Newsfeed auf Ihrem Telefon. Dies geschieht von oben nach unten, jedoch nicht nach links oder rechts.

Einen Verband

Wenn eine lange Kette von Übergängen nicht möglich ist, versuchen Sie, mehrere Schritte zu einem zu kombinieren. Beispielsweise erfordert eine Website die Dateneingabe in mehreren Schritten – Name, dann Adresse, wo in jedem Schritt separate Zelle Haus, Straße, Wohnung usw. liegen separat. Um den Benutzer nicht zu zwingen, in viele kleine Zellen zu gelangen, bitten Sie ihn, nur 2 einzugeben – Name und Adresse.

Und Trennung

Manchmal ist es im Gegenteil notwendig, zu viele Informationen zu trennen. Im Dropdown-Menü finden Sie beispielsweise eine Liste mit mehr als 80 Städten, in denen die Lieferung erfolgt. Gruppieren Sie sie nach Region, damit der Benutzer nicht durch diese riesige Liste scrollen muss. Wenn er den Cursor über ein regionales Zentrum oder eine Region bewegt, wird eine weitere Liste mit Städten angezeigt.

Listen

Übrigens zu den Listen. Es gibt zwei davon – in alphabetischer oder anderer Reihenfolge und mit Ersetzung. Ihre Wahl hängt davon ab, was aufgelistet wird.

Fest ist praktisch, 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 desselben Namens gibt, und jede einzelne bringt den Benutzer dem Ziel einen Schritt näher. Die Option zur automatischen Ersetzung wird häufiger verwendet, wenn ein Besucher Hilfe benötigt. Beispielsweise bietet eine Strickwebsite den Kauf von Stricknadeln an. Benutzer tritt ein Suchanfrage„Metallstricknadeln“, aber im Tooltip sieht er „5 mm Stricknadeln“, „4,5 mm Stricknadeln“ usw.

Automatisch ausfüllen

Dieser Punkt gilt insbesondere für Websites, auf denen etwas online verkauft wird und Sie Standardformulare für Zahlung, Lieferung usw. ausfüllen müssen. Wenn eine Person einen Kauf über ihr Telefon tätigt, hat sie höchstwahrscheinlich keine Zeit, an den Computer zu gelangen , was bedeutet, dass der Kaufprozess so schnell und bequem wie möglich erfolgen muss.

Dazu können die Formulare bereits ausgefüllte Daten enthalten; Sie können auf die gängigsten Antworten zurückgreifen. Geben Sie beispielsweise das heutige Datum, die Barzahlungsmethode und den Ort ein, wenn Sie in derselben Region arbeiten. Sie können geändert werden, aber wenn Sie das Ziel erreichen, wird dem Benutzer Zeit gespart.

Alles wird gelesen, alles wird angeschaut

Denken Sie beim Entwerfen des Designs der mobilen Version der Website daran, dass jedes Telefon und auch seine Vision anders sind. Ihre Website wird wahrscheinlich auf einem kleinen Bildschirm angezeigt, daher sollten Schriftarten einfach und lesbar sein, Schaltflächen sollten groß genug sein, um darauf zu klicken, ohne auf eine andere Seite weitergeleitet zu werden, und Bilder sollten separat und groß geöffnet werden, insbesondere wenn wir reden überüber den Online-Shop.

Einige Statistiken

Wenn es um die Anpassung einer Website an mobile Geräte geht, kommt man nicht umhin, auf Statistiken zurückzugreifen, um zu verstehen, wie wichtig dieser Prozess für die Online-Werbung ist.

Die Zahlen lauten wie folgt. Heutzutage nutzen 87 % der Bevölkerung Gadgets, offenbar mit Ausnahme der jüngsten Kinder und einiger älterer Menschen. Ökonomen sagen Wachstum voraus Mobile Commerce 100 Mal in den nächsten 5 Jahren. Allerdings sind nur 21 % der Websites für die Verwendung mit mobilen Geräten geeignet. Damit nehmen der Internetverkehr und der E-Commerce-Markt nur einen kleinen Fünftel ein.

Denken Sie über diese Zahlen nach. Ist es sinnvoll, Ihre Ressource anzupassen? Ja natürlich. Darüber hinaus gibt es in diesem Markt zwar so viel freien Platz, aber Sie können darin Ihr eigenes Segment herausarbeiten.

Wo wird die mobile Version benötigt?

Die Verwendung der mobilen Version empfiehlt sich für jede Plattform, die eine hohe Bewertung anstrebt. Dies wirkt sich schließlich direkt auf den Benutzer aus und schafft angenehme Bedingungen für den Aufenthalt auf Ihrer Website.

Folgendes kann ohne eine mobile Version nicht existieren:

  • Nachrichtenportale, da die meisten Menschen diese auf dem Weg zur Arbeit oder zur Schule auf ihrem Handy sehen;
  • soziale Netzwerke – aus dem gleichen Grund, hinzu kommt der Faktor der Online-Kommunikation, was bedeutet, dass hierfür ein bequemer, verständlicher Chat erstellt werden muss;
  • Nachschlagewerke, Websites mit Navigation usw., an die sich Menschen wenden, wenn sie etwas suchen;
  • Online-Shops sind eine Möglichkeit, Kunden anzulocken, die keine Zeit mit dem Einkaufen verschwenden, sondern alles über das mobile Internet kaufen.

Statt einer Schlussfolgerung

Heute mobile Technologien befinden sich in einer Phase des aktiven Wachstums und der aktiven Entwicklung. Daher muss jedes Unternehmen im Streben nach Marktführerschaft sicherstellen, dass seine Internetressource den Anforderungen entspricht. Aufgrund wachsender Nutzerwünsche müssen Seiten ständig modernisiert und an unterschiedliche Geräte angepasst werden. Es ist klar, dass, wenn es für eine Person unbequem ist, auf einer bestimmten Ressource zu sein, sie dort keine Informationen über ein Produkt oder einen Preis erhalten, keine Bestellung aufgeben oder sich über die Lieferung informieren kann, dann wird sie die Website finden, auf der all dies möglich ist. Um im Wettbewerb zu gewinnen, ist es daher wichtig, über eine flexible, praktische, funktionale und interessante Ressource zu verfügen.

Dabei hilft Ihnen die mobile Version der Website Android oder iOS. Dazu müssen Sie eine der oben genannten Redesign-Methoden auswählen – eine adaptive Vorlage, das Erstellen einer neuen Site auf einer Subdomain und das Verschieben zu dieser durch Umleiten, Verwenden kostenlose Vorlagen oder Schöpfung mobile Applikation, mit deren Hilfe der Benutzer die Seite bequemer betreten und dort bleiben kann.

Wie versprochen ist es an der Zeit, Ihnen zu erklären, was „Adaptives Layout“ ist und wie Sie eine mobile Version der Website für Smartphones und Tablets erstellen und gleichzeitig Suchmaschinen ansprechen!

Warum ist das alles überhaupt nötig?! Schließlich lebten wir wie zuvor und nichts. Nun, was soll ich sagen, das Internet verändert sich und wird besser. Suchmaschinen tun ihr Möglichstes für die Bequemlichkeit und den Komfort der Benutzer... Großartig, wirklich

Und der Traffic über Gadgets nimmt von Tag zu Tag zu! Der Webmaster muss dies berücksichtigen...

Höchstwahrscheinlich hat die Google-Suchmaschine alle Webmaster darüber informiert, dass Websites, die für Mobilgeräte optimiert sind, im Ranking bevorzugt werden. Allerdings nur unter der Bedingung, dass die Anfrage nicht über einen PC erfolgt.

Das heißt, wenn sich der Benutzer über ein Smartphone oder Tablet angemeldet hat, werden auf ihn zugeschnittene Websites und Blogs immer höher bewertet als solche, die dies nicht tun! In anderen Fällen gilt diese Regel meines Wissens nicht.

Es scheint, als hätte ich es klar erklärt?! Wer hat was nicht verstanden? Schreib es in die Kommentare, lass uns gemeinsam darüber diskutieren.

Also, gerade vor kurzem, als ich Urlaub hatte, beschloss ich, weitere nützliche Artikel zu schreiben, einige interessante Ideen umzusetzen, im Allgemeinen meinen Urlaub sinnvoll zu verbringen und nicht auf der Couch zu liegen, obwohl ich mmm... wollte.

Eines schönen Tages habe ich Email(Jeder hat es jedoch erhalten) Es kam folgende Nachricht:

Und alle meine Pläne scheiterten ... Ich denke, ich muss mit der Zeit gehen ... und los geht's! Als erstes beschloss ich natürlich, im Internet ein Plugin zu finden, das alles klar und ohne mich erledigen würde

Mobile WordPress-Website mit Plugins!

Wie sich herausstellt, existieren solche Plugins und erfüllen im Prinzip ihre Funktion! Aber Google-Check – an einfache Navigation auf der Website Von einem mobilen Gerät aus funktionieren sie nicht! Ich weiß nicht warum, aber Google weigert sich hartnäckig, die Änderungen zu sehen, hat viele Optionen ausprobiert ... Daher macht es keinen Sinn, sie zu verwenden ...

Wenn Sie zu diesem Zweck dennoch Plugins verwenden möchten, dann sind die besten:

WPtouch Mobile Plugin – Dieses Plugin hat mir am besten gefallen, alles ist ganz einfach und klar, mein Blog wurde korrekt und ohne Pfosten angezeigt!

Ich werde nicht jedes Plugin beschreiben, probieren Sie es selbst aus und entscheiden Sie:

  • MobilePress;
  • WordPress Mobile Pack;
  • Duda Mobile Website Builder;
  • WordPress Mobile Pack;
  • WordPress PDA und iPhone;
  • WPmob Lite;
  • WPtap News Press;
  • WP Mobiler Detektor;
  • WiziApp.

Ein weiterer Nachteil von Plugins besteht darin, dass sie manchmal fehlerhaft sind. Wenn ich mich beispielsweise über ein Smartphone anmelde, ist alles in Ordnung, ich habe es noch einmal wiederholt oder aktualisiert – es zeigt die normale Seite an! Eine Art Geheimnis

Kurz gesagt, das passte nicht zu mir und ich suchte weiter nach einer besseren Lösung!

Dann beschloss ich, diese Arbeit einem Spezialisten auf der Freelance-Börse anzuvertrauen, aber nach langem Überlegen entschied ich mich, adaptives Layout zu lernen und alles selbst zu machen! Schließlich bin ich Website-Entwickler und es ist an der Zeit, meine Fähigkeiten zu verbessern ...

Falls jemand Interesse hat, kostet die Umwandlung einer Website in eine adaptive Website etwa 5.000 Rubel und mehr... Ich rate davon ab, angehende Spezialisten einzustellen, die weniger verlangen – der Geizige zahlt doppelt! Und achten Sie auf die Bewertungen...

Im Allgemeinen habe ich mit dem Studium dieses Themas begonnen, zuerst in der Theorie, dann in der Praxis auf meinem Blog! Nun, im Prinzip habe ich gelernt, es stellte sich heraus, dass es nichts Kompliziertes daran gibt, jetzt ist mein Blog anpassungsfähig und passt sich an jeden Bildschirm an und ich bin glücklich wie ein Elefant ... Gehen Sie von jedem Smartphone aus auf meinen Blog und Sie werden es sehen alles für dich selbst. Wenn du einen Pfosten findest, lass es mich wissen...

Nun werde ich mein gewonnenes Wissen mit Ihnen teilen und Ihnen die wichtigsten Punkte erläutern...

Möglichkeiten zur Erstellung einer mobilen Website?

Soweit ich weiß, gibt es drei Richtungen. Schauen wir uns jede Technologie einzeln an. Auf welche Vor- und Nachteile können wir stoßen?!

Separate Version der Website— Hierbei handelt es sich um eine Art separate, leichtgewichtige Website, die speziell für die Anzeige auf mobilen Geräten oder mit geringer Internetgeschwindigkeit erstellt wurde. Site oder http://mobile.site. In diesem Fall wird eine Umleitung verwendet.

  • Zwei unabhängige Websites – die Möglichkeit, Inhalte zu ändern, ohne die andere Website zu beeinträchtigen;
  • Ladegeschwindigkeit – da die mobile Version unabhängig von der Hauptversion ist, ist es nicht schwierig, sie einfach und schnell zu laden;
  • Komfort – Navigation und Inhalte lassen sich bis ins kleinste Detail einfacher verfeinern, da die Website vollständig für ein mobiles Publikum konzipiert ist.
  • Duplizierung von Inhalten – da derselbe Inhalt sowohl in der Hauptversion als auch in der mobilen Version enthalten sein wird. Vielleicht hilft das Meta-Tag rel=canonical, aber es gibt noch viele andere Probleme.
  • Ein Querschnitt der Funktionalität – was auch immer man sagen mag, eine solche Site wird eine abgespeckte Kopie der Hauptsite sein, daher völlig andere Statistiken. Und die Mehrheit der Besucher mag verschiedene Arten von Einschränkungen nicht und geht immer zur Hauptseite...
  • Weiterleitungen – wie Sie wissen, wirken sich verschiedene Arten von Weiterleitungen negativ auf die Suchmaschinenoptimierung aus.

RESS-Technologie- Hier kommen serverseitige Berechnungen zum Einsatz, je nachdem von welchem ​​Gerät der Zugriff erfolgte, wird das eine oder andere Layout (HTML und CSS) erstellt. Dieses Wunder heißt - sich anpassendes Webdesign+ besonders Software auf der Serverseite (RESS – Responsive Web Design und Server Side Components).

  • Ladegeschwindigkeit – die Möglichkeit, verschiedene unnötige Skripte und Stile zu entfernen;
  • Weniger Seitengewicht – anstatt Elemente wie beim adaptiven Layout auszublenden, können Sie sie einfach entfernen;
  • Navigation – die Möglichkeit, die Struktur für bestimmte Geräte anzupassen.
  • Bestimmung – Um die gewünschte Version der Website anzuzeigen, müssen Sie das Gerät des Besuchers genau bestimmen, und wie ich gehört habe, läuft dabei nicht immer alles reibungslos.

Adaptives Layout (Webdesign)– Dieses Site-Layout passt sich an jede Bildschirmauflösung an, indem es mithilfe von CSS3-Medienabfragen ermittelt wird. Dabei kommt in der Regel die gleiche Ressource zum Einsatz, die unterschiedliche Möglichkeiten zur Darstellung auf Smartphones, Tablets und Computern beinhaltet...

  • Sicherheit – unabhängig vom Gerät werden derselbe Inhalt und der gleiche Satz an HTML-Codes verwendet;
  • Einzelne URL – dieselben Adressen und Inhalte werden für unterschiedliche Layouts verwendet, es gibt keine Duplikate.
  • Ladegeschwindigkeit – da alle Elemente und Skripte der Hauptseite geladen werden, auch wenn sie ausgeblendet sind.
  • Navigation ist eine Herausforderung bei der Entwicklung einer intelligenten mobilen Navigation.

Adaptives Layout selbst erstellen

Ich habe mich aus mehreren Gründen für ein responsives Layout für meinen Blog entschieden:

  1. es besteht keine Notwendigkeit, die Integrität der Hauptseite oder des Blogs zu verletzen;
  2. ein einziger Inhalt, eine Datenbank usw. werden verwendet;
  3. Für mich persönlich ist es einfach umzusetzen (HTML- und CSS-Kenntnisse erforderlich).

Jetzt erzähle ich Ihnen, was Sie tun müssen, um sicherzustellen, dass sich Ihre Ressource an jede Auflösung anpasst und bei Google beliebt ist

Zuerst müssen Sie ein Meta-Tag hinzufügen :

Dadurch wird dem Browser mitgeteilt, dass die Breite der Website der Breite des Gadgets, Geräts oder was auch immer Sie haben, entsprechen sollte.

Wenn wir außerdem Maximum-Scale = 1.0 und User-Scalable = Nein hinzufügen, deaktivieren wir die Skalierung. Ich empfehle dies jedoch nicht. Lassen Sie die Person selbst entscheiden, möglicherweise hat sie Sehprobleme ...

Hier ist der Anfang gemacht: Wenn wir uns jetzt über ein Smartphone oder etwas anderes anmelden, sehen wir, wie unsere Website aussieht! Traurig, oder?!

Dieses Problem muss mithilfe von Medienabfragen in der Datei behoben werden CSS-Stile, der Parameter sieht so aus:

@media screen und (min-width:240px) und (max-width:720px) (
Hier sind die Tags und Attribute
}

Das heißt, diese Stile werden vom Browser ab einer Mindestbreite von 240 Pixel bis maximal 720 Pixel auf dem Gerät angewendet! Wenn diese Werte überschritten oder unterschritten werden, werden die Haupt-Site-Stile angewendet. Es ist einfach!

Und so schreiben wir Stile für unterschiedliche Geräteauflösungen vor. Zum Beispiel:

  • Smartphones vertikal - von 240 bis 340, von 341 bis 420;
  • Smartphones horizontal und einige Tablets vertikal – von 421 bis 540, von 541 bis 670;
  • Tabletten vertikal - von 671 bis 800;
  • Tabletten horizontal - von 801 bis 1024

Wenn Sie ein Element anzeigen müssen: display:block, aber wenn Sie es ausblenden möchten: display:none;

Um herauszufinden, wie eine Website oder ein Blog aussieht verschiedene Geräte Es gibt wunderbare Dienste:

  • http://quirktools.com
  • http://www.emulateurmobile.com/
  • http://webmark.com.ua

Übrigens, wenn Sie Ihre Website anpassungsfähig machen müssen, aber sicher sind, dass Sie das nicht selbst tun können und keine große Lust haben, dann biete ich meine Dienste an! Sie können meine Arbeit ansehen und eine Bewerbung senden auf der Seite: .

Das ist alles für mich! Ich hoffe, mein Artikel hat dir wirklich geholfen, teile ihn als Dankeschön =)

Ich habe ein Beispiel dafür aufgeschrieben, wie adaptives Layout auf der Website eines Kunden funktioniert. Wenn Sie immer noch nicht verstehen, wie es funktioniert, schauen Sie sich es unbedingt an. Bis bald! Kommentare schreiben...


Mit freundlichen Grüßen, Vladimir Savelyev

Premium-Lektionen vom webformyself Club

Dies ist ein neues revolutionäres Produkt im Bereich der Website-Erstellungsschulung! Die besten Video-Tutorials sind an einem Ort gesammelt und in Kategorien unterteilt: WordPress, Joomla, PHP, HTML, CSS und JavaScript... Die Datenbank wird ständig aktualisiert und enthält bereits mehr als 200 Lektionen! In nur einem Jahr können Sie von Grund auf ein erfahrener Webmaster werden!

Mehr Details

Jede hochwertige Website sollte über eine mobile Version der Website verfügen, denn mobiler Verkehr wächst allmählich und das Fehlen eines adaptiven Website-Layouts führt zur Ablehnung. Dies wurde auch von Google bemerkt, woraufhin beschlossen wurde, Websites auf das Vorhandensein einer mobilen Version der Website zu überprüfen, und ab dem 21. April 2015 wird alles zu einem Rankingfaktor.
Wie können Sie also eine mobile Version Ihrer Website erstellen, um Ausfälle und schlechtere Rankings zu vermeiden? Es gibt zwei Möglichkeiten, dieses Problem zu lösen. Erster Weg- adaptives Layout erstellen, zweiter Weg— Erstellen Sie ein separates Design für die mobile Version der Website. Da meine Website auf WordPress läuft, zeige ich nur Lösungen für diese CMS-Engine.

So erstellen Sie eine mobile Version einer WordPress-Site

Wenn Sie jedoch mit Ihrer Vorlage zufrieden sind und keine Plugins benötigen, besteht die Möglichkeit, Ihre Vorlage ohne Plugin dehnbar zu machen, wie bei mir. Schreiben Sie dazu einfach ins CSS - „width: 100%“ . Damit sich das Design nicht zu sehr ausdehnt, fügen Sie die Zeile hinzu:

#Inhalt (
maximale Breite: 1280px;
}

Darüber hinaus können die Bilder in Ihrem Theme eine feste Größe haben und nicht gestreckt sein. Wir korrigieren dies mit den folgenden Zeilen:

img, einbetten, Video (
maximale Breite: 100 %;
}

Nachteile dieser Methode:

  • Es ist schwierig, jedes Element für verschiedene Bildschirme schön anzuordnen.
  • Langsames Laden der Website aufgrund unkomprimierter Bilder + Laden unnötiger, nicht optimierter Skripte.

Natürlich können Sie mit dieser Methode eine mobile Version der Website erstellen, aber diese Mängel gefallen mir nicht. Schauen wir uns daher die zweite Option an, die solche Mängel nicht aufweist, es aber andere gibt, die für SEO schwerwiegender sind.

Die bequemste Option für Benutzer ist eine separate Subdomain mit einer mobilen Version. Dies tun riesige Websites, beliebte Websites und natürlich verschiedene erfolgreiche Dienste. Normalerweise erstellen sie eine Subdomain m.website.ru oder mobile.website.ru.

In der Regel wird auf solchen Subdomains eine abgespeckte Version platziert, die alle unnötigen abschneidet. Für Benutzer, die über mobile Geräte kamen, bleibt nur das Wichtigste und Nützlichste übrig. Um die Indizierung doppelter Seiten zu vermeiden und dem Benutzer die Möglichkeit zu geben, das Beste der Website zu genießen.

Was ist der Nachteil dieser Methode:
1. Im Wesentlichen erstellen Sie eine doppelte Site. Es stellt sich heraus, dass Sie zwei Sites füllen müssen. Natürlich können Sie mit NextScripts: Social Networks Auto-Poster ein automatisches Reposting durchführen, aber es ist nicht praktikabel, zwei Sites zu überwachen.
2. Da die mobile Version den Inhalt dupliziert, müssen Sie entweder die Indizierung der Subdomain verbieten, sonst werden Suchmaschinen Ihre Arbeit nicht wertschätzen. Oder schreiben Sie in den Kopf - rel = "canonical", was darauf hinweist, dass der Inhalt dupliziert ist, aber in der Ausgabe der ersten Seite m. es wird keine weiteren Versionen geben.
3. Wie man es nicht versucht SEO-Optimierung solcher Seiten wird zu harter Arbeit, entweder schreiben Sie einzigartige Inhalte für die mobile Version, oder solche Seiten gelangen nicht an die Spitze.

Was sind die Vorteile davon:
1. Maximale Einstellung Benutzerfreundlichkeit für Mobiltelefone, und das bedeutet eine Steigerung des Umsatzes, mehr Nachfrage, mehr Verkehr und es ist einfacher, Informationen unter den Benutzern zu verteilen.
2. Verrücktes Laden von Seiten, da Sie unnötige Elemente der Website entfernen, kleine Bilder geladen werden und keine unnötigen Skripte vorhanden sind.

Das Verfahren zum Erstellen einer separaten mobilen Version einer WordPress-Site:
1. Erstellen Sie eine Subdomain (Beispiel m.site) auf dem Hosting;
2. Wir kaufen eine kostenpflichtige Vorlage oder erstellen unsere eigene für Mobiltelefone. Es besteht auch die Möglichkeit, eine mobile Version separat zu organisieren und dabei dieselben Plugins zu verwenden, über die ich in der ersten Methode geschrieben habe;
3. Wir laden alle Inhalte erneut hoch, die auf der mobilen Version der Website enthalten sein sollten.
4. Richten Sie die Indizierung ein und geben Sie die erforderlichen Parameter für Suchmaschinen an.
5. Richten Sie mithilfe des Nginx-Webservers die Verifizierung für die Anmeldung von Mobilgeräten in der Hauptdomäne und Subdomäne ein.

Wenn jemand die Vorteile der Erstellung einer separaten Version einer mobilen Website kennt, sagen Sie es mir, sonst sehe ich keinen Sinn darin, die zweite Methode zu verwenden, daher empfehle ich, einfach Ihre Vorlage anzupassen, ohne Subdomains zu verwenden, wie ich es selbst getan habe.

Ab dem 21. April wird der Faktor der Website-Freundlichkeit für mobile Geräte in den Suchalgorithmus einbezogen. Wird sich diese Neuerung auf die Hauptergebnisse von Google auswirken oder nur auf die Ergebnisse? mobile Suche, wird später zu sehen sein.

Brauche ich es?

Die Antwort auf diese Frage finden Sie, indem Sie überprüfen, wie Ihre Website in den folgenden Google-Testdiensten angezeigt wird:

Wenn Sie eine Meldung wie diese sehen, ist dieser Artikel genau das Richtige für Sie:

Adaptives Design

In welchen Fällen ist es geeignet?Wenn Sie eine Visitenkarten-Website, eine Informations-Website, einen Blog, eine einseitige Website, einen Online-Shop (mit einfacher Struktur, Design und/oder kleinem Sortiment), eine Service-Website oder ein Forum haben.

Wie umsetzen?

Sie können getrost eines der CSS-Frameworks (Bootstrap, responsivegridsystem, Sceleton etc.) nehmen und das bestehende Design anpassen. Oder verwenden Sie CSS3-Medienabfragen.

Wenn Sie beispielsweise das Bootstrap-Framework verwenden, benötigen Sie kurz gesagt:

  1. Ansichtsfenster registrieren;
  2. Framework-Dateien verbinden;
  3. Fügen Sie Bootstrap-Grid-Klassen zu Ihrem Markup hinzu.

Oder wählen Sie im Stylesheet mehrere Auflösungen über Medienabfragen (CSS3 Media Queries) aus und legen Sie die optimalen Größen von Seitenelementen fest, zum Beispiel:

@media screen und (max-width: 1280 px) ( div .contentblock (width: 1200 px ;) )
@media screen und (max-width: 1140 px) ( div .contentblock (width: 1024 px ;) )
@media screen and (max-width: 992 px) ( div . contentblock (width: 970 px ;) )

Einige Elemente, die für Monitore relevant sind, können und müssen für mobile Geräte ausgeblendet oder stattdessen andere, kompaktere Elemente angezeigt werden.

Die Vorteile dieser Methode: schnelle Implementierung für die aufgeführten Site-Typen.

Nachteile: Skripte und Stile, die nicht auf der mobilen Version, aber auf der Desktop-Version verwendet werden, werden trotzdem geladen und wirken sich auf die Ladezeit aus.

Was bekommen wir?

Eine Seite, die von allen Geräten aus zugänglich sein wird, das Design wird auf allen diesen Geräten erkennbar sein, nur die Elemente werden vertikal verschoben. Einige Elemente werden auf mobilen Geräten nicht angezeigt (und umgekehrt) oder in einer kompakteren Form angezeigt.

Und schauen wir uns ein Beispiel an. Das Menü für Geräte mit einem Bildschirm größer als 768 Pixel sieht folgendermaßen aus:

Und für Bildschirme kleiner als 768 Pixel sieht es so aus (komprimiert):

Wenn Sie also auf das Symbol in der rechten Ecke klicken (in erweiterter Form):

Separates Template für mobile Geräte auf der Hauptdomain

In welchen Fällen ist es geeignet?Für fast alle Informationsseiten, Blogs, Foren, einschließlich Online-Shops. Für eine Visitenkarte ist eine separate Vorlage überflüssig.

Wie umsetzen?

Sie benötigen PHP-Kenntnisse und eine Datenbank mit Basisgeräten, um diese zu identifizieren und die entsprechende Vorlage anzuzeigen. Diese. Sie müssen ein Skript schreiben, das den Gerätetyp bestimmt und die entsprechende Vorlage dafür anzeigt.

Unabhängig davon ist das CMS zu erwähnen. Wenn Ihre Website auf WordPress läuft, sind Sie bereits versorgt und können sich mit der Installation von Plugins begnügen, um Websites für mobile Geräte anzupassen.

Darunter: WPTouch, WordPress Mobile Pack, WP Mobile Detector usw. Alle diese Plugins haben mehrere Themes und zusätzliche nützliche Tipps wie das Sammeln von Statistiken über mobile Benutzer.

Außerdem können Sie in den Einstellungen dieser Plugins festlegen, welche Blöcke in der mobilen Version der Seite angezeigt werden und welche nicht. Es ist möglich, Ihr Logo hinzuzufügen, das Benutzern, die über ein mobiles Gerät auf Ihre Website zugreifen, hilft, Ihre Website zu identifizieren.

Vorteile: Im Falle von Plugins ist dies eine sehr schnelle und einfache Art der Implementierung, schneller als adaptives Layout. Im Falle der Erstellung einer separaten Vorlage für die Site ist es möglich, das Site-Design zu vereinfachen, die Anzahl der aktiven Elemente zu reduzieren, d. h. die Site „leichter“ zu machen.

Nachteile: Nicht alle CMS verfügen über solche Plugins und sie funktionieren nicht immer korrekt. Es kommt vor, dass eine Website auf Mobilgeräten gut angezeigt wird, die Geschwindigkeit aber nicht besser oder sogar schlechter ist als die der Vollversion. Es ist erwähnenswert, dass es manchmal zu Fehlern bei der Identifizierung eines Mobilgeräts kommt, wenn es sich um ein seltenes Telefon handelt. In diesem Fall wird die Vollversion der Website auf einem solchen Gerät angezeigt.

Was bekommen wir?

Die Website für mobile Geräte wird unter der gleichen Adresse wie die Hauptseite verfügbar sein, nur ihre Vorlage wird sich deutlich von der Vorlage der Hauptseite unterscheiden; sie wird deutlich vereinfacht, aber immer noch erkennbar sein.

Schauen wir uns ein Beispiel einer Site mit an Plugin installiert, wodurch es an mobile Geräte angepasst wird.

So sieht die Seite beispielsweise auf einem PC aus:

Und so sieht dieselbe Website auf Mobilgeräten aus:

Mobile Version der Website auf einer Subdomain

In welchen Fällen ist es geeignet? Für Online-Shops, Kataloge, Internetportale, soziale Netzwerke.

Wie umsetzen?

Diese Option ähnelt der vorherigen und ist hinsichtlich der Implementierung ebenfalls recht arbeitsintensiv. Für große Online-Shops mit einem riesigen Sortiment ist dies jedoch der einzige Ausweg.

Etwas mehr Details zur Implementierung: Es wird eine Subdomain erstellt, die über dieselbe Engine wie die Hauptdomain verfügt, aber für beide Sites dieselbe Datenbank verwendet wird (damit bei etwaigen Änderungen diese nicht zweimal hinzugefügt werden müssen). . Bei der Anmeldung über ein mobiles Gerät wird der Benutzer auf eine Subdomain weitergeleitet. Die folgenden Optionen werden normalerweise als Subdomain-Name verwendet: m.sitemane.com, mobile.sitename.com, pda.sitename.com usw.

Der mobile Verkehr nimmt zu und macht durchschnittlich etwa 25 % aller Besuche aus. Während der Verlust dieser Besucher früher unbedeutend war, beträgt er jetzt alle 4 oder 5 Benutzer. Ich denke, es besteht keine Notwendigkeit, Statistiken bereitzustellen. Wir waren fleißig und ernsthaft mit der Entwicklung einer neuen mobilen Version des Widgets beschäftigt. Wir haben alle Erfahrungen aus früheren Fehlern gesammelt und die Ergebnisse wochenlang getestet. Ich wiederhole, dass wir uns weiterentwickelt haben mobiles Widget, anstatt die eigene Website zu verbessern. Als Ergebnis haben wir eine Liste der schwerwiegendsten Fehler in der mobilen Version der Website zusammengestellt. Wir sind die Fehler des Mobildesigns und des Mobillayouts durchgegangen. All diese Fehler machen die Konvertierung des mobilen Datenverkehrs zunichte. Und es ist Zeit, darauf zu achten:

1. Griffformen sind zu lang.

Das ist ein echter Conversion-Killer auf jeder Website! Mobile Versionen reagieren hier besonders empfindlich, da das Ausfüllen von Formularen am Telefon äußerst umständlich ist. Sie loswerden.
Das Beispiel zeigt, wie klug die Jungs von der Tinkof Bank vorgegangen sind und den langfristigen Kreditantrag in Schritte aufgeteilt haben. Durch das Ausfüllen von nur 4 Feldern wird der Besucher zum Lead und wenn er im zweiten Schritt abfällt, bleiben seine Kontakte bestehen.

2. Die Telefonnummer des Unternehmens wird ohne +7 oder als Bild angezeigt.

Es ist einfach die Hölle! Für solche Websites gibt es einen besonderen Ort in der Hölle, wenn Sie sich statt eines Klicks die Nummer merken und sie dann selbst eingeben müssen. Mist! Was ist, wenn ich fahre?

3. Verwendung von Flash auf der Website oder Inhalten, die nicht auf Mobilgeräten abgespielt werden können.

Es empfiehlt sich, solche Inhalte für die mobile Version komplett auszuschließen. Es wird nicht richtig funktionieren und den Besuchern viele Schwierigkeiten bereiten. Das Video funktioniert nicht, das Spiel wird nicht abgespielt und die spezielle Animation im Menü frisst Ihr Gehirn auf. Apfel iOS-Geräte unterstützen Flash-Animationen überhaupt nicht. Entfernen Sie unnötige Dinge, die die Anzeige erschweren.

4. Widgets und Pop-ups auf der Website, die nicht für mobile Geräte geeignet sind.

Online-Berater, Rückruf-Widgets, soziale Netzwerke. Teilen, E-Mail-Sammler – diese Tools tragen dazu bei, die Website-Konvertierung zu steigern. Wenn sie jedoch nicht für den mobilen Datenverkehr geeignet sind, die Website laden und Inhalte blockieren, richten sie höchstwahrscheinlich mehr Schaden als Nutzen an. Testen Sie Ihre Website daher unbedingt auf Mobilgeräten, nachdem Sie einen Drittanbieterdienst installiert haben.

Wie Sie das Widget richtig prüfen und worauf Sie achten müssen, erfahren Sie in diesem kurzen Video-Review:

5. Fehlen einer angepassten mobilen Version. Browserübergreifend und plattformübergreifend.

Welche Vorteile bietet eine mobile Version?
Erstens, Suchmaschinen Geben Sie bei der Lieferung den Vorzug. So kennzeichnet Google Websites mit dem „Mobile Friendly“-Zeichen:

Zweitens ist es für Benutzer bequem, Ihre Website von verschiedenen Geräten aus anzuzeigen.
Dazu muss die mobile Version auf allen Typen einwandfrei funktionieren mobile Geräte, darunter Mobiltelefone und Tablets mit unterschiedlichen Bildschirmdiagonalen. Unabhängig von Plattform, Hersteller oder Browser. Ja, das liegt auf der Hand, aber es ist immer noch das wichtigste Kriterium.

Es gibt drei Hauptprobleme bei der Website-Geschwindigkeit: Größe, Abstand und Widgets. Normalerweise benötigt ein mobiler Benutzer keine besonderen Effekte auf der Website; ein normales Website-Layout ohne jeglichen Schnickschnack reicht aus. Zusätzlicher Bildschirm Mobiltelefon hat meist eine niedrige Auflösung, so dass es für mobile Benutzer möglich ist, kleinere Bilder zu „versenden“ (und ein progressiveres Format, zum Beispiel WebP, zu verwenden).

Um das Entfernungsproblem zu lösen, müssen Sie sicherstellen, dass das Hosting der Website normalerweise von den Hauptnetzwerken aus zugänglich ist Mobilfunkbetreiber. Der optimale Standort wäre ein gutes Moskauer (oder regionales – für regionale Projekte) Rechenzentrum, das über eine gute Anbindung an die Netze der Mobilfunkbetreiber verfügt. Ausländisches Hosting ist nicht sehr geeignet (und weist einige Probleme mit der Datenübertragungsgeschwindigkeit aus dem Ausland auf).

Um Probleme mit der Geschwindigkeit und Zugänglichkeit sowohl mobiler als auch regulärer Websites umfassend zu lösen, können Sie spezialisierte Dienste nutzen. Zum Beispiel Airi.rf

9. Fehlerhafte Weiterleitung. Kein Übergang zur Vollversion der Website.

Natürlich sollten alle mobilen Benutzer die mobile Version der Website aufrufen, aber das kommt vor typische Fehler in der Weiterleitung.
Wie kommt es zum Beispiel dazu?

Der Benutzer sucht in Yandex nach einem bestimmten Produkt und gelangt zu Ihnen. Das System erkennt einen Eintrag von einem Mobiltelefon und leitet weiter Startseite mobile Version und nicht die, die der Kunde benötigt. Sie müssen dieses Produkt erneut auf der Website suchen oder versuchen, zur Konkurrenz zu gehen.

Zusatz: Die mobile Version reicht nicht immer aus; vielleicht haben Sie versteckte Funktionen oder Links, die der Kunde benötigt, oder im Allgemeinen ist der Kunde an die Desktop-Version gewöhnt. Lassen Sie immer die Option, zu der Sie zurückkehren können Vollversion Website.

10. Automatisches Ausfüllen. Aktivieren Sie das Wählen von Nummern.

Die Conversion steigt, wenn wir den Widerstand für den Kunden reduzieren. Jedes Feld kann einfacher auszufüllen sein. Dazu schreiben wir entsprechend:

Zusatz zur Bequemlichkeit
Nur wenige Menschen wissen, dass Sie Ihrem Desktop ein Site-Lesezeichen hinzufügen können Schneller Zugang. Das Symbol sieht aus wie eine App und wird an den Startbildschirm des Benutzers angeheftet.

Wie kann man das machen:
Machen Sie das Symbol 180 x 180 Pixel groß (ohne Rundung) und fügen Sie das Tag auf der Website hinzu

Ich hoffe, dass diese 10 Punkte Ihnen helfen werden, die mobile Version Ihrer Website zu verbessern und Ihre Kunden glücklich zu machen. Einige davon sind Ihnen vielleicht bereits bekannt und offensichtlich, aber es wäre falsch, sie nicht in die Liste der tödlichsten Fehler aufzunehmen.

Hohe Konvertierung Ihrer mobilen Version der Website!