sushiandbox.ru Mastering PC - Internet. Skypen. Soziale Netzwerke. Lektionen auf Windows.
Lesezeit: 18 Minuten
Wir senden Ihnen das Material zu:
Wenn Ihre Website nicht für mobile Geräte angepasst wurde, brauchen Sie sich keine Sorgen zu machen. Yandex stuft jedoch die Websites, die eine solche Anpassung aufweisen, in der Suche höher ein.
Aus diesem Artikel erfahren Sie:
- Was ist die Anpassung der Website für mobile Geräte
- So überprüfen Sie es
- Website-Anpassung für Google
- Selbstanpassung der Website
- Das beste und kostenlose Plugin für Wordpress
- 6 beste Dienste für die Anpassung von Websites für mobile Geräte online
Warum eine mobile Anpassung notwendig ist
Sie sind bedingt in externe und interne unterteilt. Mit anderen Worten, externe PFs sind beispielsweise ein Klick auf einen Link zu einer Website aus den Ergebnissen Suchergebnisse, während die Anzahl der aufgerufenen Seiten und die Gesamtzeit, die auf der Website verbracht wird, intern sind.
Beachten Sie, dass Google ein ähnliches System verwendet. Aber diese Suchmaschine ging noch weiter und erklärte, dass Ressourcen, die die Anpassung der Website für mobile Geräte bestanden haben, in den Suchergebnissen höher erscheinen werden.
Als nächstes werden wir über interne PFs sprechen. Überlegen Sie selbst, ob es für einen Besucher bequem ist, mit der Website zu arbeiten, Produkte darauf zu finden und zu bestellen, die Wahrscheinlichkeit, dass er in die Kategorie der Kunden wechselt, ist höher.
Das gleiche Prinzip funktioniert für Suchmaschinen: Je mehr Gäste die Ressource in den ersten Sekunden verlassen, desto niedriger ist der Indikator für die Übereinstimmung mit den Anforderungen der Menschen. Das Verhältnis von Benutzersitzungen, die weniger als 10 Sekunden dauern, zur Gesamtzahl der Besuche auf der Website wird als Absprungrate bezeichnet.
Nehmen wir als Beispiel diesen Indikator einer der russischen Seiten:
Sehen Sie, wenn die Website nicht für mobile Geräte angepasst wurde, dh die Website auf ihnen falsch angezeigt wird, ist die Absprungrate von Smartphones und Tablets 2-2,5-mal höher als von einem PC.
Diese Zahlen wirken sich nicht nur negativ auf die Höhe der PF aus, sie weisen auch auf den Verlust potenzieller Kunden hin, die tatsächlich für Dienstleistungen oder Waren bezahlen könnten.
Stimmen Sie zu, eine Erhöhung der Anwendungshäufigkeit mobiles Internet wirklich beeindruckend. Finden Sie ganz einfach den Prozentsatz der Gäste auf einer beliebigen Ressource mithilfe mobiler Geräte heraus Google Analytics. Um diesen Indikator anzuzeigen, müssen Sie die folgenden Schritte ausführen:
Es ist kein Geheimnis, dass Suchmaschinen sich immer um die Benutzerfreundlichkeit von Tablets und anderen Geräten kümmern, was bedeutet, dass Sie riskieren, ohne Verkehr zu bleiben, wenn Sie sich weigern, die Website für mobile Geräte anzupassen.
Denken Sie daran, dass viele Benutzer Sie aufgrund dieses Fehlers für immer verlassen werden, wie eine Studie von Equation Research belegt. Seine Experten fanden heraus, dass 46 % der Menschen die Website nicht mehr besuchen, wenn sie mit dem Arbeitsniveau mit mobilen Gadgets nicht zufrieden waren.
Wie Sie verstehen, erwarten Sie daher traurige Konsequenzen: Das Produktivitätsniveau der Ressource selbst wird kontinuierlich abnehmen, da das bereits angesammelte Publikum, das von einem Smartphone oder Tablet aus zugreift, nicht in der Lage sein wird, zu kommunizieren, Bestellungen aufzugeben und Newsletter zu erhalten , etc.
Wenn Sie mit dieser Entwicklung der Veranstaltungen nicht zufrieden sind, raten wir Ihnen, die Seite für mobile Geräte anzupassen.
Was ist besser - Responsive Design oder mobile Version
Lassen Sie uns zunächst den Unterschied zwischen diesen beiden Konzepten verstehen.
Responsive Design wird nur verwendet, um der Website ein Erscheinungsbild zu geben, das von dem vom Benutzer gewünschten Gerät angemessen angezeigt wird.
Während die mobile Version grundsätzlich ist neue Version, das speziell entwickelt wurde, um die Bedürfnisse der Benutzer der Website zu erfüllen, mit denen es verwendet wird tragbare Geräte. Lassen Sie uns nun mehr über beide Typen sprechen.
Adaptives Design
Diese Option ermöglicht es, durch die Investition eines kleinen Geldbetrags, die Website für den Gast, der sie über das Gadget verwendet, freundlich zu gestalten.
Tatsächlich gibt es beim Anpassen einer Website für mobile Geräte eine einfache Kombination von Seitengrößen, Websiteelementen mit Größen bestimmtes Gerät. Infolgedessen sind solche Websites einfach zu verwenden, obwohl Sie sich ihrer Mängel bewusst sein müssen.
Zunächst einmal ist es die Größe der geladenen Seite. Obwohl es auf einem mobilen Gerät angezeigt wird, bleibt sein Gewicht gleich. Aus diesem Grund dauert das Laden der Seite lange, da die Geschwindigkeit des mobilen Internets niedriger ist als die des kabelgebundenen, und der Benutzer des Wartens müde wird und den Tab schließt.
mobile Version
Die mobile Version befindet sich normalerweise auf einer Subdomain der Hauptdomain: m.site.ru, mobile.site.ru. Diese Funktion ist aus SEO-Sicht schwer positiv zu bewerten, da in diesem Fall viele bedingte Weiterleitungen von der Hauptversion auf die mobile Version verwendet werden. Schließlich bleiben site.ru/page und m.site.ru/page aus Sicht der Suchmaschinen unterschiedliche Seiten.
Erwähnenswert ist, dass die mobile Version weniger wiegt, im Vergleich zum adaptiven Layout schneller lädt, da hier unnötige Funktionen entfernt werden und das individuelle Design die Interaktion mit der Seite erleichtert.
Natürlich kostet diese Version mehr als die vorherige. Um Ihnen die Auswahl zu erleichtern, welcher der Optionen Sie den Vorzug geben möchten, heben wir ihre Merkmale hervor:
- Es macht keinen Sinn, eine kleine Website für mobile Geräte anzupassen, wenn es sich beispielsweise um eine Website für einen Schönheitssalon handelt, reicht eine normale Anpassung dafür aus.
- Eine mobile Version benötigt eine leistungsstarke Website mit vielen ladbaren Seiten. Diese Option wird für Online-Medien mit einer Reichweite von mehreren tausend Personen pro Tag relevant sein.
Mit anderen Worten, die Auswahl muss die Möglichkeiten und Bedürfnisse berücksichtigen. Wir betonen auch, dass sich diese beiden Optionen, unabhängig vom Preis, als viel rentabler für die Konvertierung erweisen als ihr vollständiger Verzicht.
Was bringt Ihnen die Anpassung der Seite für mobile Endgeräte?
, aufgrund des Fehlens von "schweren" Fotos, Blitz, zusätzliche Elemente Entwurf. 
Reichen Sie Ihre Bewerbung ein
So überprüfen Sie die Reaktionsfähigkeit von Websites für mobile Geräte
Überprüfung der Anpassung der Website für mobile Geräte, die darin besteht, dass Sie sie auf sehen verschiedene Geräte, kann wie folgt durchgeführt werden:
- Quirktools.
Hier können Sie sehen, wie die Website auf den Bildschirmen verschiedener Gadgets aussehen wird. Um das Portal zu nutzen, geben Sie einfach die URL des Portals in die Adressleiste ein und wählen Sie das gewünschte Gerät im horizontalen Menü aus.
- ipadpeek.
Ermöglicht es Ihnen, das Erscheinungsbild der Website auf dem iPad, iPhone zu überprüfen.
- F12.
Am einfachsten ist es immer, den Standardtrick zu verwenden: Drücken Sie F12 und klicken Sie dann auf das Telefonsymbol.
Website-Anpassung für mobile Geräte für Google
Wenn Sie Ihre Website für mobile Geräte bei Google anpassen möchten, benötigen Sie ein kostenloses Tool Entwickler.Google:
Hier müssen Sie die Adresse der Ressource eingeben und auf die Schaltfläche "Analysieren" klicken. In unserem Beispiel liegt der Mobile Usability Score bei 49 % von 100 %.
Es enthält auch Ratschläge dazu, was geändert werden muss, um die Website an ein mobiles Gerät anzupassen, Links, die in dieser Angelegenheit nützlich sind. Dank dieser Empfehlungen können Sie problemlos 90 % erzielen, was für Google das Minimum ist.
Dinge, die Sie tun können, um Ihre Website mobilfreundlich zu gestalten
Legen Sie die richtigen Formularfeldattribute fest
Wenn Ihre Website Eingabefelder für Benutzername/Adresse verwendet, deaktivieren Sie die Autokorrektur und aktivieren Sie die automatische Großschreibung:
Ihr Name:
Dank dieser Technik verhindern Sie beim Anpassen einer Website für mobile Geräte, dass das automatische Eingabesystem von T9 Namen ersetzt, z. B. " Erwan" auf der " Jerewan».
Indem Sie die automatische Verwendung der ersten Großbuchstaben in den Wortarten einstellen, ersparen Sie den Gästen der Ressource das ständige Einschalten der Großschreibung von Buchstaben, d.h. es wird jeweils ein Großbuchstabe vorangestellt Wort (zum Beispiel " Ken brennt" wird sich verwandeln Ken Burns"):
Verwenden Sie das E-Mail-Feld, wenn Ihre Website den Benutzer danach fragt Email damit es nicht das @-Zeichen von der Tastatur eines mobilen Geräts eingibt:
Deine E-Mail:
Stellen Sie eine geeignete Breite für Mobilgeräte ein
Öffnen Sie dazu die Seite im Browser Ihres Computers, verkleinern Sie die Breite des Programmfensters, bis der Text nicht mehr lesbar ist. Dadurch erhalten Sie die minimal zulässige Breite. Setzen Sie diesen aktuellen Wert auf die Eigenschaft @viewport, indem Sie das Meta-Tag im Kopf der Seite festlegen:
Wenn Sie die Site von einem mobilen Gerät aus erneut aufrufen, wird die von Ihnen angegebene Breite automatisch ausgewählt, dh der Gast der Ressource wird nicht gezwungen, den Zoom zu verwenden.
In der Abbildung unten bleibt am rechten Rand zusätzlicher Platz:
Und hier ist der Breitenwert richtig gewählt:
Ihre Aufgabe wird viel einfacher, wenn die Website auf dem flüssigen Layout aufgebaut und mit allen Bildschirmgrößen kompatibel ist. Wir empfehlen Ihnen, mit der Breite zu experimentieren, während Sie die Website für mobile Geräte anpassen, damit Ihre Ressource gut aussieht und lesbar bleibt. Ausgewählter Wert und im Meta-Tag festgelegt.
Bildbreite auf 100 % setzen
Denken Sie daran, dass einige der Bilder zu breit werden, nachdem Sie Ihre Website an die ausgewählte Breite angepasst haben. Früher musste ich mich mit einem solchen Problem nicht befassen, da Desktop-Monitore eine ziemlich breite Auflösung haben, passen viele Bilder in die Breite:
Sie können dieses Problem vermeiden, indem Sie für Ihre Bilder eine maximale Breite von 100 % festlegen. Wenn die Bilder zu groß für den Bildschirm des Gadgets sind, werden sie daher automatisch in der Größe angepasst. Vergessen Sie nicht, den folgenden Code in das CSS Ihrer Website einzufügen:
img ( max-breite: 100% )
Wenn Sie Ihr Hintergrundbild auf ein anderes Bild als ein img-Tag einstellen, müssen Sie nur die CSS-Eigenschaft background-size so einstellen, dass sie enthält . Die Hintergrundgröße ändert sich also, wenn die Bildschirmauflösung nicht ausreicht, um mit 100 % Skalierung zu rendern:
.header ( Hintergrund: url(header.png) 50% keine Wiederholung; Hintergrundgröße: enthalten )
Machen Sie sich keine Sorgen, dass das Bild an Klarheit verliert - moderne Mobilgeräte lassen dies nicht zu. Tatsache ist, dass, wenn ein Website-Besucher Zoom verwendet, der Browser die Klarheit des Bildes erhöht. Allerdings sollten Sie darauf achten, dass Ihr Portal nicht die Eigenschaft user-scalable=no im Meta-Tag hat, da es kein Zoom erlaubt:
Breite der Eingabefelder auf 100 % setzen
Nachdem Sie die Bildbreite mit der Eigenschaft max-width festgelegt haben, machen Sie dasselbe für die Eingabefelder. Fügen Sie dazu einfach die CSS-Datei hinzu - die Datei Ihrer Website:
Eingabe, Textbereich ( max-width:100% )
Jetzt verschwinden die Eingabefelder nicht mehr vom Bildschirm, wenn Sie die Website von einem mobilen Gerät aus verwenden.
Seien Sie vorsichtig, wenn Sie Deaktivieren für Bestätigungsschaltflächen für die Formularübermittlung verwenden
Wenn das Senden nach dem ersten Klick auf die Schaltfläche nicht mehr aktiv ist, gibt es keine Mehrfachklicks auf die Senden-Schaltfläche des Formulars.
Denken Sie jedoch daran, dass mobile Geräte im Vergleich zu Desktop-PCs häufig die Verbindung zum Internet verlieren.
Wenn Sie also eine Schaltfläche deaktivieren, verhindern Sie, dass der Benutzer erneut darauf klickt, und das Problem ist möglicherweise nicht nur ein Netzwerkverlust. Der Browser eines solchen Geräts wird also geschlossen, wenn ein Anruf eingeht, und das Problem einer blockierten Schaltfläche wird angezeigt, da Sie das Formular nach dem Ausfüllen nicht absenden können.
Wenn Sie sich entscheiden, den Senden-Button zu deaktivieren, tun Sie dies für einige Sekunden, wenn Sie die Seite für mobile Geräte anpassen.
Verwenden Sie für lange Zeilen Zeilenumbruch
Manchmal müssen Sie lange Zeilen verwenden: Dazu gehören Codebeispiele, Links, Bankkontonummern. Wenn das Portal nicht breit genug für die gesamte Linie ist, kann es außerhalb des Gadget-Bildschirms landen:
Behandeln Sie diesen Zeilenumbruch, mit dem die Zeile umgebrochen wird, wenn sie den Rand des Bildschirms erreicht. So kann der Site-Gast alle Informationen auf einmal sehen, ohne auf Scrollen zurückgreifen zu müssen:
Hier benötigen Sie ein Passwort:
435143a1b5fc8bb70a3aa9b10f6673a8
Vorsicht mit Leerzeichen
Wir alle sind daran gewöhnt, dass alle fünf Zeichen durch Leerzeichen getrennt werden, wenn sie eine lange Zeichenfolge bilden. Schließlich ist es für eine Person einfacher, sich diese für die weitere Eingabe in einer anderen Anwendung zu merken.
Wir stellen jedoch fest, dass es unwahrscheinlich ist, dass ein intelligenter Benutzer zustimmt, Zeichen selbst einzugeben - er kennt die Zwischenablage. Richtig, die von Ihnen gesetzten Leerzeichen muss er manuell löschen. Überlegen Sie, ob es bequem ist, sie auf einem Handy oder Tablet zu reinigen?
Um den Benutzern das Leben zu erleichtern, ersetzen Sie bei der Anpassung der Website für mobile Geräte Leerzeichen durch Einzüge:
Deinder Code:
Wie Sie sehen, bleiben Lücken zwischen den Zeichen, die aber beim Kopieren nicht berücksichtigt werden müssen. Und es spart Zeit!
Vorteile von Medienabfragen
Sie können benutzerdefinierte Stile für eine Website erstellen, wenn diese auf Mobilgeräten (oder in einem kleinen Browserfenster) angezeigt wird, während auf einem Desktop-PC das vertraute Aussehen einer Webseite erhalten bleibt. Dies erfordert Zielstile in Medienabfragen, hier ein Beispiel:
Vermeiden Sie feste Positionierungen
Wenn die Kopf- oder Seitenleiste fest positioniert ist und die CSS-Eigenschaft Position auf fest gesetzt ist, raten wir zur Vorsicht.
In diesem Fall wächst die Größe Ihres Titels beim Erstellen des Markups proportional zur Seite, d. h. er kann sogar den gesamten Bildschirm einnehmen:
Die einfachste Möglichkeit, die Website für mobile Geräte anzupassen, besteht darin, feste Positionen bei der Anzeige auf mobilen Geräten abzulehnen.
Wie das in der Praxis funktioniert, zeigt ein Beispiel:
Verwenden Sie Standardschriften
Dank benutzerdefinierter Schriftarten sieht die Website teuer und professionell aus. Gleichzeitig müssen Gäste jedoch Dateien mit Schriftarten hochladen - dieser Vorgang wird ausgeführt, bevor der Benutzer die Website sehen kann.
Typischerweise zeichnen sich solche Dateien durch ein großes Volumen aus, d.h. auf einem mobilen Gerät dauert das Herunterladen lange. Und was wird der Gast des Portals sehen? Freiraum:
Durch die Anpassung der Seite für mobile Geräte mit dem Google Font Loader wird während des Ladevorgangs der benutzerdefinierten Version Text mit einer Standardschrift angezeigt. Als Nächstes generieren Sie die Seite neu, und der Gast sieht die ursprünglich ausgewählte Schriftart.
Sie müssen jedoch zwei Versionen der CSS-Regeln schreiben: eine für die Standardschriftart und eine für die heruntergeladene.
Glauben Sie mir, eine solche Lösung ist optimal: Eine Person liest alles, was sie braucht, während die Schriftarten heruntergeladen werden, und kann dann das Design sehen. Verwenden Sie den folgenden Code:
Wir betonen: Der Klassenselektor .wf-opensans-n4-active wird vom Font Loader dynamisch zum Site-Code hinzugefügt, jedoch nur, wenn die Schriftart geladen wird.
Bieten Sie den Benutzern lesbare Inhalte
Typischerweise verwenden Benutzer mobiler Geräte das Internet für einen bestimmten Zweck. Wenn Sie beispielsweise die Warenkosten in verschiedenen Geschäften vergleichen möchten, finden Sie Salonkontakte und Anweisungen zur Verwendung des Medikaments.
Daher erscheinen sie auf Ihrer Website, wenn sie vom Titel angezogen werden. Als nächstes ist es wichtig, dass sie Inhalte entdecken, die zum Lesen auf einem kleinen Bildschirm vorbereitet sind.
Um diese Regel auf Englisch zu beschreiben, gibt es ein ziemlich umfangreiches Wort "snackable" (vom englischen "snack" - Snack). Daher sollte der Inhalt für solche Benutzer genau naschbar sein, dh zum schnellen Lesen und Überfliegen unterwegs geeignet sein.
Lassen Sie uns die wichtigsten Funktionen skizzieren, die Sie berücksichtigen müssen, wenn Sie eine Website für mobile Geräte für Screenreader anpassen:
- Beginnen Sie mit einer kurzen, prägnanten, auffälligen Überschrift. Wir empfehlen Ihnen, es innerhalb von 10 Wörtern zu verfassen und eine große Schriftart zu verwenden.
- Teilen Sie Text in Blöcke auf, muss jede mit einem kurzen, aussagekräftigen Untertitel beginnen, der sich vom allgemeinen Hintergrund abhebt.
- Nummeriert einfügen / Aufzählungen, zu deinem mobile Benutzer Es war einfach, schnell zu finden, was Sie brauchen.
- Wenden Sie visuelle Einfügungen an Informationen zusätzlich strukturieren und die Wahrnehmung vereinfachen.
Passen Sie E-Mails für das Lesen auf kleinen Bildschirmen an
Die folgenden Mailing-Tools helfen Ihnen, E-Mails an das Lesen auf den Bildschirmen mobiler Geräte anzupassen:
- MailChimp.
- Weber.
- Dauernder Kontakt.
Ersetzen Sie Links durch „anfassbare“ Schaltflächen
Sobald Nutzer von Mobilgeräten auf Seiten gelangen, die nicht für sie angepasst sind, diagnostizieren sie sich selbst mit dem „Fettfinger-Syndrom“. Es ist nicht in der medizinischen Terminologie zu finden, dies ist ein Slang für Spezialisten auf diesem Gebiet und beschreibt Fehler beim Versuch, ein bestimmtes Element mit einem Finger zu treffen.
Welche Größe ist optimal für eine Schaltfläche, ein Navigationselement, damit eine Person keine Probleme damit hat? Hier sind einige Tipps, wie Sie Ihre Website an Mobilgeräte anpassen können:
- Apple glaubt, dass die optimale Größe für Schaltflächen und Navigationselemente bei 44 mal 44 Pixeln beginnt.
- Nokia empfiehlt beim Erstellen dieser Elemente eine Mindestgröße von 48 x 48 Pixel oder 0,7 x 0,7 cm.
- Microsoft empfiehlt 34 x 34 Pixel große Schaltflächen.
Denken Sie daran, dass es für mobile Benutzer schwierig sein wird, die Website zu verwenden, wenn Ihr Text mit nahe beieinander liegenden Links gesättigt ist.
In dem von uns gezeigten Beispiel wird das Menü der Vollversion der Website in Form von Links erstellt. Hier wird es auf einem 10-Zoll-Tablet extrem schwierig, auf Anhieb an die gewünschte Stelle zu gelangen.
Um die sogenannten mobilfreundlichen Schaltflächen, Navigationselemente, zu erhalten, haben Sie zwei Möglichkeiten: Bestellen Sie sie mit einem individuellen Design oder verwenden Sie Vorlagentools. Wenn Sie sich für WordPress entschieden haben, empfehlen wir die Verwendung der folgenden Plugins:
- Herausragende Farbfelder und Knöpfe. Damit können Sie praktische Schaltflächen in verschiedenen Größen, Farben und Farben erstellen Kontextmenü für mobile Benutzer angepasst.
- Responsives Menü. Mit diesem Plugin können Sie ein praktisches Hamburger-Menü erstellen.
Das beste und kostenlose Plugin zur mobilen Anpassung der Seite für Wordpress
Jetpack
Lassen Sie uns zunächst über die einfachste Methode sprechen, eine Website für mobile Geräte auf WordPress selbst anzupassen, während Sie die meisten haben hohes Level Effizienz. Das JetPack-Toolkit erledigt diese Aufgabe mit minimalem Aufwand von Ihnen – drücken Sie einfach eine Taste.
Und höchstwahrscheinlich ist es bereits unter Ihren Basis-Plugins installiert. Klicken Sie in diesem Fall auf den Link "JetPack" im Site-Admin-Menü und gehen Sie zur Modulseite. Hier müssen Sie nur "Mobile Theme" aktivieren.
MobilePress
Es ist eines der gebräuchlichsten und dennoch einfachsten Plugins. Kommt mit zwei Themen und ist nützlich, wenn weitere Schöpfung diese mobilen Entwickler.
wptouch
Diese Option wird in Bezug auf die Effizienz als nächste in der Liste der kostenlosen Tools zur Anpassung von Websites für mobile Geräte angesehen. Laut Statistik wurde es über 4,3 Millionen Mal heruntergeladen.
Sein Vorteil ist, dass Sie in nur wenigen Minuten eine schöne, schnelle mobile Website erstellen können, ohne auch nur eine Zeile Code zu schreiben. In der kostenpflichtigen Version namens WPtouch Pro erhalten Sie ein separates Admin-Panel, Unterstützung im Ticketsystem.
Wapple Architect Mobile-Plugin
Dieses Plugin ist in der Auszeichnungssprache WAPL geschrieben, die speziell zum Anpassen, Rendern und Bereitstellen von Webinhalten auf verschiedenen Geräten und Plattformen erstellt wurde.
Es verwendet für jedes Gadget eine eigene API, und diese Option ist viel besser als die Sniffing-Methode, da sie die Adressstruktur der Desktop-Site nicht berührt. Es stellt sich heraus, dass dieses Plugin einfach zu bedienen und eine ziemlich einfache Lösung ist.
Mobiler Detektor
Diese Möglichkeit, die Website für mobile Geräte anzupassen, ist mit einer automatischen Erkennung herkömmlicher Mobiltelefone, Smartphones ausgestattet, wodurch die Website in einer kompatiblen Version geladen wird Benutzergerät, also Bildschirmauflösung, Diagonale usw.
Es gibt insgesamt sieben vorinstallierte Optionen für mobile Designs. Darüber hinaus ändert Mobile Detector selbstständig die Größe und Auflösung von Bildern in Übereinstimmung mit den Anzeigeeinstellungen. Es bietet auch eigene Widgets, Sammlung von Statistiken.
Hauptvorteile:
- Automatische Gadget-Erkennung anhand einer Datenbank mit über 5.000 Gadgets.
- Die Fähigkeit, Standardtelefone von fortschrittlichen Geräten zu unterscheiden.
- Erstellung von Statistiken über mobile Benutzer, die Indikatoren wie die Anzahl der eindeutigen Besuche, Suchverkehr usw. enthalten.
WP Mobile-Edition
Tatsächlich ist dies eine Kopie der zuvor vorgestellten Version - sie hat die gleichen Vorteile und Optionen, unterstützt aber unter anderem das Disqus-Kommentarsystem, Handykarte XML mit eigenem Generator für Websites.
Letzteres kann nützlich sein Suchmaschinenoptimierung. Beachten Sie, dass dieses Plugin, das zur Anpassung der Website an mobile Geräte entwickelt wurde, eine mobile Version auf einer Subdomain des Typs m.facebook.com generiert, die ein beschleunigtes Caching und Unterstützung für mobile Cookies erreicht.
WordPress Mobile-Paket
Diese Möglichkeit, die Website für mobile Geräte anzupassen, unterstützt Domain-Mapping, Suchagenten, mit denen Sie beliebte mobile Geräte identifizieren können, wodurch Sie Inhalte in der erforderlichen Auflösung und Qualität anzeigen können. Anpassbare Farbschemata für ein einzelnes Thema werden ebenfalls bereitgestellt.
Anpassung der Seitentabellen für mobile Endgeräte
Es ist kein Geheimnis, dass das Schwierigste bei der Anpassung einer Seite für mobile Endgeräte, nämlich für unterschiedliche Auflösungen, das Arbeiten mit Tabellen ist. Darüber hinaus ist dies am relevantesten für Tabellen mit einer großen Menge an Informationen.
Lassen Sie uns über zwei Layoutoptionen für eine adaptive Tabelle sprechen.
Schauen wir uns zunächst das Aussehen der Tabelle an:
Responsives Bootstrap-Tabellenlayout
Um ehrlich zu sein, ist es schwierig, eine solche Tabelle als wirklich adaptiv zu bezeichnen. Es sieht auf einem mobilen Gerät organisch aus und das Layout der Website „fließt“ nicht. Diese Option ist geeignet, wenn Sie nicht viele Tabellen auf der Website haben, sodass das Verbinden des Plugins und das Schreiben zusätzlicher Stile Zeitverschwendung sind. Dies ist die Art und Weise, wie Bootstrap es verwendet.
Um dies in die Praxis umzusetzen, wird die Tabelle in ein div mit einer maximalen Breite von 100 % eingeschlossen, overflow: auto.
Darüber hinaus können Sie bei der Anpassung der Website für mobile Geräte die maximale Höhe auswählen und den Tabellenkopf korrigieren, wenn er lang ist.
Layout einer wirklich ansprechenden Tabelle
Lassen Sie uns nun die Situation besprechen, in der Ihre Website wirklich voller Tabellen ist - hier lohnt es sich, auf das Footable-Plugin zurückzugreifen.
Zuerst müssen Sie das Plugin verbinden (Download auf GitHub / Verbindung vom CDN), initialisieren:
Es gibt jedoch eine Feinheit bei der Anpassung der Website für mobile Geräte: Das Skript berücksichtigt die Breite der Tabelle und nicht die Breite des Darstellungsbereichs. Da wir diesen Fehler beheben müssen, ist es wichtig, das Skript ein wenig zu „modernisieren“:
Dazu geben wir bei der Initialisierung die Tabellenklasse oder nur das Tabellen-Tag an, wenn alle Site-Tabellen adaptiv sein sollen.
Was meinen wir? Auf Tablets werden die Spalten „RAM“, „Diagonal“, „PPI“, „Akku“ ausgeblendet. Bei Verwendung auf einem noch kleineren Telefonbildschirm wird "Preis" ebenfalls ausgeblendet.
Breakpoints können bei der Initialisierung gesetzt werden:
Es stellt sich heraus, dass das Handy im Bereich 0-720 die Regel 720-1024 - Tablet und über 1024 - Desktop befolgt. Sie können bei Bedarf weitere Regeln erstellen.
Sie haben auch die Möglichkeit, eine bestimmte Spalte standardmäßig zu erweitern. Geben Sie in diesem Fall das Datenattribut data-expanded="true" an:
Wir haben nicht über alle Funktionen des Plugins gesprochen, aber dieser Block reicht aus, um adaptive Tabellen zu erstellen.
Website-Anpassung für mobile Geräte online: 6 beste Dienste
- mobiSiteGalore
Dieser Dienst zur Anpassung der Website für mobile Geräte gilt zu Recht als der am einfachsten zu verwaltende mobile Website-Editor. Laut den Erstellern benötigen Sie nur 54 Minuten, um eine voll funktionsfähige mobile Version der Website zu entwickeln.
Beachten Sie, dass die meisten der vorhandenen Dienste darauf abzielen, mit Smartphones zu arbeiten, während mobiSiteGalore es Ihnen ermöglicht, Websites für ältere Telefone vorzubereiten.
- MobStac
Mit MobStac erhalten Sie eine mit HTML5 aufbereitete mobile Website. Darüber hinaus haben Sie die Möglichkeit, Änderungen an den Einstellungen vorzunehmen oder eine bestimmte Vorlage auszuwählen, um das Design zu ändern, was nicht schwierig sein wird.
Wir betonen, dass MobStac der einzige existierende Dienst ist, der einen integrierten Monetarisierungsplan für mobile Websites bietet. Sein Minus liegt in der Tatsache, dass sich der Dienst noch in der Beta-Phase befindet, aber Sie können eine Einladung erhalten und sich dann registrieren.
- Muffe
Hier wird es möglich sein, eine mobile Version der Website mit zwei Ansätzen zu entwickeln: alles selbst mit Hilfe von mofuse machen oder die Website für mobile Geräte anpassen, indem man sie bei einem Team von Spezialisten in Auftrag gibt.
Im ersten Fall erhalten Sie mehr Möglichkeiten im Bereich Design, während Sie nur für den Betrieb des Dienstes monatlich bezahlen müssen. Wenn Sie Spezialisten einstellen, fällt die ganze Arbeit auf ihre Schultern.
- Mobile App Amerika
Diese Option bietet Ihrer Website einen verbesserten SEO-Aspekt. Dank seiner Fähigkeiten sind Sie Wettbewerbern voraus, deren Portale noch nicht einmal eine mobile Version haben. Während dieser Text erstellt wurde, unterstützte die Anwendung iPhone-Geräte, Brombeere, Android.
- bMobilisiert
Damit können Sie in kurzer Zeit eine mobile Version der Website erstellen. Die Anwendung zeichnet sich durch eine schnelle Konvertierung mit erweiterten Einstellungen aus, die unter anderem eine Änderung des Designs ermöglichen.
Laut den Entwicklern unterstützt die bMobilized-Datenbank über 13.000 Modelle mobiler Geräte, darunter aktuell beliebte Marken.
Wenn Sie jedoch Bedenken hinsichtlich der Kosten für die Anpassung einer Website für mobile Geräte haben, ist dieser Service genau das Richtige für Sie, denn je mehr Websites Sie darüber hosten, desto mehr Rabatt erhalten Sie. Mit anderen Worten, bMobilized ist nahezu ideal für Besitzer eines Netzwerks von Websites, die für mobile Geräte angepasst werden müssen.
- Mobilisieren
Mobify erkannt der beste Service für diejenigen, die mit E-Commerce zu tun haben. Es bietet den Eigentümern HTML5-Funktionalität, und sein Entwicklungsteam erstellt auf der Grundlage Ihrer Wünsche Ihre mobile Website.
Wie die Praxis zeigt, dauert es nicht länger als drei Wochen, um von der Ideenphase an einen voll funktionsfähigen elektronischen Laden zu schaffen. Außerdem haben Sie die Möglichkeit, in seine Entwicklung einzutauchen.
Wenn Sie alle oben beschriebenen Methoden ausprobiert haben, aber mit dem Ergebnis immer noch nicht zufrieden sind, ist es an der Zeit, auf die Hilfe von Fachleuten zurückzugreifen.
Array ( => 21 [~ID] => 21 => 28.09.2019 13:01:03 [~TIMESTAMP_X] => 28.09.2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 21.09.2019 10:35:17 [~DATE_CREATE] => 21.09.2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Artikel von Dmitry Svistunov [~NAME] => Artikel von Dmitry Svistunov => 11076 [~PICTURE] => 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~DESCRIPTION] => Dmitry Svistunov => Text [~DESCRIPTION_TYPE ] => Text => Artikel von Dmitry Svistunov Dmitry Svistunov [~SEARCHABLE_CONTENT] => Artikel von Dmitry Svistunov Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya -svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => Blog [~IBLOCK_TYPE_ID] => Blog => Blog [~IBLOCK_CODE] => Blog => [~IBLOCK_EXTERNAL_ID] => => [ ~EXTERNAL_ID] =>)
Die Kontaktseite ist von großer Bedeutung, daher muss ihr Design gegeben werden Besondere Aufmerksamkeit. Je komfortabler die Kontaktseite ist, desto mehr Möglichkeiten eröffnen sich für den Seitenbetreiber. Eine Kontaktseite kann, wenn sie richtig gestaltet ist, einen erheblichen Einfluss auf die Konversionsraten haben: Wenn ein Benutzer problemlos einen Site-Manager oder Administrator kontaktieren kann, wird er eine positive Benutzererfahrung haben. Je einfacher der Prozess, desto weniger muss der Benutzer Felder oder Formulare ausfüllen, desto besser für die Konvertierung.
Eine gute Kontaktseite kann eine Website verbessern, da sie die Voraussetzungen für eine gute Beziehung zwischen Besuchern und dem Websitebesitzer schafft. Es spielt keine Rolle, um welche Art von Website es sich handelt, es kann ein Online-Shop sein, Nachrichtenportal oder ein Webservice - Feedback ist extrem wichtig.
Trotzdem unterschätzen viele Designer den Wert einer gut gestalteten Kontaktseite, indem sie sich auf die Gestaltung der Hauptinhaltsseiten konzentrieren.
Es kommt vor, dass der Benutzer schnell den Websitebesitzer kontaktieren oder den Kundendienst kontaktieren muss. Es passiert jedoch nichts, selbst wenn Sie die Suche auf der Website verwenden. Manchmal sind die notwendigen Informationen auf der Seite vorhanden, aber „versteckt“, weil der Designer nicht auf die richtige Navigation geachtet hat und der Benutzer den gewünschten Link einfach nicht sieht. Der verzweifelte User ist schon bereit, einen Anruf zu tätigen, findet ihn aber auch nicht.
Unternehmen und Webservices, die viel Wert auf die Gestaltung von Kontaktseiten legen, gehen hier sehr vorsichtig vor. Ganz einfach, weil diese Seite nicht nur Kontaktinformationen enthält: Sie enthält Informationen, die der Benutzer benötigt, und ist interaktiv. Und vor allem ermutigt eine gute Kontaktseite den Benutzer, immer wieder mit der Website zu interagieren.
Die Kontaktseite ist eine Art Kommunikationsplattform. Lässt der Seitenbetreiber Kunden seine Meinung äußern, ist dies bereits eine Einladung zum Dialog. Webentwickler und Benutzer können von dieser Zusammenarbeit profitieren und aus diesem Grund muss sie richtig gestaltet werden.
Wie Sie wissen, ist Funktionalität im Design einer der Schlüsselfaktoren. Die Kontaktseite enthält wichtige Informationen, aber nicht zu viele, was manchmal zu einer falschen Einschätzung der Funktionalität führen kann. Der Website-Inhaber meint, wenn er eine E-Mail-Adresse und eine Telefonnummer auf der Seite platziert hat, dann reicht das völlig aus. Manchmal hat er recht.
Eine doppelte Überprüfung der Funktionalität kann jedoch mehr nützen als schaden. Kaputte Links oder mit Informationen überladene Seiten wirken sich nachteilig auf das Engagement aus. Der Websitebesitzer erhält möglicherweise keine wichtige Nachricht, aber das Schlimmste passiert, wenn er veraltete oder ungenaue Informationen bereitstellt. Bei der Gestaltung einer Kontaktseite müssen Sie zunächst an die Benutzer denken, denn schließlich wird diese Seite speziell für sie erstellt.
Ort
Es ist unbedingt darauf zu achten, dass die Kontaktseite den Benutzern immer zur Verfügung steht. Aussehen eine Seite, auch mit exklusivem Design, nützt nichts, wenn die Benutzer die Kontaktseite nicht finden können. Manchmal müssen Sie ziemlich komplexe Kontaktformulare entwerfen, also müssen Sie sich im Voraus um die Anweisungen kümmern. Für Benutzer ist es einfacher, den Eigentümer der Website zu kontaktieren, wenn sie eine Schritt-für-Schritt-Anleitung haben.
Für einen Designer, der eine Website entwirft, ist es wichtig, zwei Punkte zu beachten:
- Die Primärnavigation sollte immer eine Kontaktseite enthalten
- Benutzer sollten die Kontaktseite vom ersten Besuch der Website an finden, egal welche interne Seiten sie haben nicht getroffen
Basierend auf der Erfahrung von Designern neigen Benutzer dazu, Kontaktinformationen auf der rechten Seite der Seite zu suchen, daher ist es sinnvoll, dort den Link „Kontakt“ zu platzieren. Gleichzeitig müssen Sie bedenken, dass diese Informationen für den Benutzer von untergeordneter Bedeutung sind, daher sollten Sie diesen Abschnitt der Website nicht zu auffällig oder aufdringlich gestalten. Der Link zur Kontaktseite, der sich in der oberen rechten Ecke der Seite befindet, funktioniert am besten. Und am schlimmsten ist der Link im Dropdown-Menü, da Benutzer ihn möglicherweise einfach nicht bemerken.
Einfache Kontaktformulare
Für kommerzielle Websites ist die Kontaktseite, wie oben erwähnt, sehr wichtig. Sie ist zwar nicht so hübsch wie die anderen Seiten der Website, sollte aber einfach, benutzerfreundlich und verständlich sein. Wenn die Informationen nicht richtig strukturiert sind, schlecht funktionieren oder irreführend sind, ist es unwahrscheinlich, dass der Websitebesitzer langfristige Beziehungen zu seinen Kunden aufbauen kann.
Es kommt häufig vor, dass ein Benutzer, der eine Nachricht hinterlassen möchte, die Seite verlässt, weil er das Kontaktformular nicht ausfüllen kann. Oder nicht will, wenn es zu lang oder kompliziert ist. Heutzutage möchten Benutzer keine Zeit damit verbringen, detaillierte Formulare auszufüllen, daher lohnt es sich, darüber nachzudenken, sie zu vereinfachen. Je einfacher das Formular, desto besser, auch für die Benutzererfahrung, daher müssen Sie sich auf das Sammeln grundlegender Informationen konzentrieren.
Genauer Wortlaut
Wenn wir über offizielle Websites sprechen, müssen Sie auf allen Seiten, einschließlich der Kontaktseite, klare und präzise Aussagen über die Vorteile einhalten, die der Benutzer erhält, wenn er Kunde des Unternehmens wird. Wofür ist das? Von allen unnötigen Informationen befreit ist das meiste auf effiziente Weise Aufmerksamkeit zu erregen und zu halten. Gut zusammengefasste Daten sollten prägnant sein, damit die Leute leicht finden können, was sie brauchen.
Vergessen Sie auch nicht die visuelle Komponente. Und wir reden nicht nur um die ansprechende Gestaltung von Kontaktformularen. Wenn das Unternehmen eine physische Adresse hat, können Sie den Benutzern helfen, indem Sie eine Karte auf der Kontaktseite platzieren. Für Unternehmen in Großstädten ist es sehr wichtig, den Benutzern zu erklären, wie sie bequemer zu ihrem Büro, Geschäft oder Lager gelangen können.
Reaktionsfähigkeit der Kontaktseiten
Für jedes Online-Geschäft ist Reaktionsfähigkeit alles. Dies ist eine feste Regel, keine Ausnahmen. Da sich das Internet rasant entwickelt und immer mehr neue Geräte auf den Markt kommen, bedeutet dies Kontaktinformationen sollte zugänglich sein, egal welchen Browser oder welches Gerät die Person verwendet. Heutzutage ist es sehr einfach, im Wettbewerb zu verlieren – es reicht aus, die Kontaktseite nicht für die Anzeige auf mobilen Geräten zu optimieren.
Integrale Komponenten
Was ist besser: eine E-Mail-Adresse oder ein Kontaktformular? Benutzer brauchen einfache Wege Verbindungen zu den Anbietern der Dienste, die sie benötigen, also müssen Sie ihnen entgegenkommen. Sie können sich auf die Kommunikation per E-Mail konzentrieren oder ein Kontaktformular posten – jede Methode hat ihre Vor- und Nachteile.
Kontaktformulare
- Das Kontaktformular sollte Benutzer nicht dazu zwingen, auf eine andere Seite zu gehen
- Das Kontaktformular ist nicht dazu bestimmt, erstellt zu werden Konto oder melden Sie sich per E-Mail an
- Das Formular sollte nach Möglichkeit über eine Autocomplete-Funktion verfügen.
- Das Kontaktformular sollte über Funktionen zum Senden von Nachrichten und Benachrichtigungen verfügen
- Die E-Mail-Kommunikation muss für den Benutzer sicher sein
- Alle übermittelten Daten sollten für die zukünftige Verwendung gespeichert werden.
- Die Arbeit mit empfangenen Nachrichten sollte systematisch durchgeführt werden, Sie müssen sich auch darum kümmern Sicherung Daten
Validierungsformular
Die Bestätigungsformulare sind sehr wichtig wenn Sie mehr über Site-Benutzer erfahren möchten. Darüber hinaus leitet der Validierungsprozess den Benutzer in gewisser Weise an die richtige Richtung, da es sie auf falsch eingegebene Daten oder leere Felder aufmerksam machen kann. Das Bestätigungsformular spart dem Kunden also Zeit, da die Person am Ende des Ausfüllvorgangs fest davon überzeugt ist, dass ihre Nachricht an die richtige Adresse geht.
Telefonnummern
Viele Unternehmen geben nicht auf der Kontaktseite an Telefonnummern, weil sie befürchten, dass ständige Anrufe den Arbeitsprozess stören. Wie im Fall der Karte erhöhen die Telefonnummern auf der Kontaktseite jedoch das Vertrauen des Benutzers in die Marke, die Kunden fühlen sich sicher und glauben, dass sie in einer schwierigen Situation einen Mitarbeiter des Unternehmens kontaktieren und das Problem besprechen können. Die Telefonnummer verkürzt die Entfernung zwischen dem Website-Inhaber und dem Benutzer, dies gilt sowohl für traditionelle Unternehmen als auch für Online-Dienste, die keine physische Adresse haben.
Social-Media-Profile
Tasten soziale Netzwerke sind zunehmend auf Kontaktseiten zu finden. Dieser Ansatz kann die Möglichkeiten der Website erheblich verbessern, insbesondere wenn der Kundensupport rund um die Uhr angeboten wird. Für viele ist es bequemer, über ein soziales Netzwerk mit dem Unternehmen in Kontakt zu treten, daher lohnt es sich, diese Art der Interaktion mit dem Benutzer in Betracht zu ziehen.
Gestaltung der Kontaktseite
Wirklich gute seiten Kontakte zeugen von der hohen Qualifikation der Designer, die sie entworfen haben. Und der wichtigste Teil des Designs ist der visuelle Stil der Kontaktseite. Bei Kontaktformularen bedeutet dies große Felder, die das Übermitteln von Daten erleichtern. Wenn das Formular gut aussieht, funktioniert es besser.
Bevor Sie mit dem Design fortfahren, sollte der Designer eine detaillierte Studie aller vom Kunden bereitgestellten Kontaktinformationen durchführen. Alle Elemente sollten gut organisiert sein, außerdem sollten sie harmonisch kombiniert werden. Denken Sie auch daran, dass die Kontaktseite zum Farbschema der Website passen sollte, damit der Benutzer sowohl die Website als auch die Marke eindeutig identifiziert.
Fazit
Die Kontaktseite sollte immer sichtbar sein. Dies gilt nicht nur Startseite, sondern auch alle anderen Seiten der Website. Denken Sie beim Entwerfen der Kontaktseite daran, dass Benutzer den Website-Inhaber oder das Support-Team nur so kontaktieren können, wie sie es auf der Registerkarte „Kontakt“ sehen. In diesem Fall liegt der Schlüssel zum Erfolg in Bequemlichkeit und Einfachheit. Sie müssen den Benutzern das geben, was sie wollen. Wenn der Nutzer seine persönlichen Daten auf der Seite eingeben muss, stellt er am besten grundlegende Fragen: Vorname, Nachname, E-Mail-Adresse. Das Kontaktformular sollte keine zusätzlichen Felder enthalten. Achten Sie auch auf die Anpassbarkeit der Kontaktseite – sie soll in jedem Browser und auf jedem Gerät angezeigt werden. Wenn die Kontaktseite richtig gestaltet ist, werden die Erfolgschancen der Website bei den Benutzern erheblich erhöht.
Heutzutage ist ein ansprechendes Design eine heilige Pflicht jeder Website, insbesondere wenn Ihre Website kommerziell ist. Denn das mobile Publikum wächst in beeindruckendem Tempo. Ja, Sie werden sagen, dass das mobile Publikum seit vielen Jahren wächst, aber jetzt ist dies ein neuer Trend und das Wachstum ist fast exponentiell. Smartphones sind allgegenwärtig. Wenn Sie etwas verkaufen, ist Responsive Design für Sie von entscheidender Bedeutung.
Laut Statistiken von Yandex-Berichten kaufen Benutzer trotz der allgemeinen Mobilisierung mehr von Computern als von Smartphones, aber gleichzeitig wählen sie Waren und Dienstleistungen häufiger über mobile Geräte aus. Google behauptet, dass fast die Hälfte seiner Nutzer auf ihren Smartphones nach Produkten suchen.
Laut MediaScope wächst das mobile Publikum schneller als andere, mit einem Anstieg von 15 % im Jahr 2017. Das gesamte mobile Publikum beträgt 66 Millionen Menschen, was 54 % der Gesamtbevölkerung entspricht (2017). Gleichzeitig nimmt die Zahl der Desktop-Nutzer ab.
Laut der Zeitung „Kommersant“ wuchs die Reichweite von Runet im mobilen Segment im Jahr 2017 von 47 % auf 56 %. Zudem geht das Wachstum zu Lasten der älteren Generation, denn bei jungen Menschen hat die Internetnutzung längst ihre Höchstgrenze erreicht.
Der größte Anbieter von Dienstleistungen im Zusammenhang mit Netzwerktechnologien Cisco testet 5G-Netze, die 2020 erscheinen sollen. Cisco prognostizierte 2016 dies bis 2021 mobiler Verkehr wird steigen siebenfach.
Laut einer Recherche des Online-Shops Rechi, der Schuhe und Accessoires verkauft, wurde festgestellt, dass mobile Käufer entschlossener geworden sind. Benutzer von Smartphones fingen an, auch in der Schlange, beim Mittagessen oder vor dem Schlafengehen einzukaufen.
Was ist responsives Design?
Responsive Webdesign gibt es seit 2011, trotzdem wird ein Großteil der Seiten in RuNet auf Mobilgeräten immer noch schief dargestellt. Zum Beispiel kann das Menü den gesamten Bildschirm überladen oder umgekehrt, das Layout der Seite geht über den Bildschirm hinaus und Sie müssen schrecklich unbequem horizontal scrollen, selbst das Umdrehen des Bildschirms hilft Ihnen hier nicht weiter. Außerdem wird der Text vom Smartphone ohne die adaptive Version sehr klein sein, es ist im Allgemeinen unmöglich, ihn zu lesen.
Responsive Webdesign ist die Gestaltung der Webseitenseiten, die so aufgebaut sind, dass sich alle Elemente je nach Größe dynamisch an den Bildschirm anpassen, um unter eingeschränkten Bedingungen nur die wichtigsten Elemente auf dem Bildschirm anzuzeigen. Je kleiner der Bildschirm, desto weniger Objekte darauf, nur die wichtigsten bleiben übrig. Auf großen Bildschirmen sind wir es gewohnt, eine Reihe von Seitenleisten, Menüs, Widgets und ähnlichen Dingen auf einer Website zu sehen, die tatsächlich sehr selten verwendet werden. Daher bleibt in der adaptiven Version nur das wirklich Wichtige und Funktionale übrig. Für einen Online-Shop ist dies beispielsweise eine Kopfzeile mit einem Telefon, einem Transformatormenü und Waren, der Rest ist überflüssig, aber dies reicht für einen Kauf.
Es ist allgemein anerkannt, dass adaptives Design für mobile Geräte im Voraus entworfen werden muss, noch bevor die Website erstellt wird, daher wird der tapfere Webmaster vielleicht enttäuscht sein. Das ist aber ein großer Irrglaube, es ist also gar nicht nötig, nur der Anpassbarkeit halber das gesamte Seiten-Template komplett zu ändern oder das gesamte CMS komplett zu ändern. Sie können Ihre aktuelle Seite sehr schnell ohne größere Änderungen oder Komplikationen anpassen.
Gibt es einen Unterschied zwischen responsivem und responsivem Website-Design?
Tatsächlich haben die Konzepte von reaktionsschnell und adaptiv einen Unterschied. Einst, als Smartphones noch nicht einmal daran dachten, den Planeten zu erobern, begannen Layouter und Programmierer einen Streit. Welches Optimierungsverfahren für Mobilgeräte ist besser: das Verfahren (RWD – responsive) oder das Verfahren (AWD – adaptiv). Der Unterschied zwischen ihnen besteht darin, dass die responsive Methode die Größe von Elementen prozentual ändert: Bilder, Videos, Blöcke usw. Responsive Design hängt jedoch nicht von der Größe des Browsers ab, sondern stellt den Benutzer in den Mittelpunkt und hat drei vordefinierte Layouts: für Smartphone, Tablet, Notebook.
Jetzt werden beide Optionen im adaptiven Layout verwendet, sie ergänzen sich. Das Layout (Raster) der Seite kann an Kontrollpunkten radikal umgebaut werden, die den Größen der drei Hauptbildschirmtypen entsprechen: Monitore, Tablets, Smartphones. Innerhalb von Haltepunkten dehnt sich das Layout, um den leeren Raum mit Elementen zu füllen. So sieht die Website unabhängig von der Bildschirmgröße optimal aus.
Warum sollte eine Website responsive sein?
Suchmaschinen fokussieren von Jahr zu Jahr mehr Aufmerksamkeit auf die mobile Adaption von Seiten. Bereits erschienen separate Suche für mobile Geräte. Beispielsweise verwendet Yandex den Wladiwostok-Algorithmus, der die Eignung der Website für mobile Geräte berücksichtigt. Wenn Ihre Website also nicht an mobile Geräte angepasst ist, wird ein Besucher, der eine Anfrage über ein Smartphone eingibt, Ihre Website nicht in der Suche sehen Ergebnisse. Und wenn die Seite noch in den Suchergebnissen steht, dann ganz unten
Ohne eine reaktionsschnelle mobile Version werden Besucher auf Ihrer Website Schwierigkeiten haben, was sich negativ auf die Verhaltensfaktoren der gesamten Website auswirkt. Wenn ein Besucher die umständliche Vollversion auf einem Smartphone öffnet, wird er Ihre Website höchstwahrscheinlich sofort schließen, ohne es überhaupt zu versuchen, und jeder dieser Besucher wird die Verhaltensfaktoren verderben. Verhaltensfaktoren Positionen in SEO stark beeinflussen, dazu gehören die auf der Website verbrachte Zeit und die Anzahl der aufgerufenen Seiten. Die Einführung der adaptiven Version löst all diese Probleme ohne Nebenwirkungen. In manchen Projekten kann der Site-Traffic um bis zu 40 % ansteigen.
Komfortables Analysesystem in Google Analytics und Yandex.Metrics. Die Systeme ermitteln automatisch die Mobilität Ihrer Website und erstellen vorgefertigte Berichte mit Traffic-Statistiken und Conversions über mobile Geräte. Dies ist sehr praktisch, um die Mobilität Ihres Publikums zu bestimmen.
Es gibt keine Nachteile des adaptiven Layouts. Es gibt nur ein Minus: Die alte Generation mag keine zu vereinfachten und großen Elemente, sie ist an große Bildschirme und eine große Anzahl kleiner Menüpunkte gewöhnt.
Was ist besser: mobile oder adaptive Version?
Eine Möglichkeit zur Optimierung für Smartphones besteht darin, eine separate mobile Version der Website zu erstellen, die nur von Smartphones aus geöffnet werden kann. Die Gerätetyperkennung erfolgt serverseitig. In letzter Zeit wird es immer seltener verwendet, da es viel teurer als adaptives Layout ist und schwieriger zu entwickeln und zu warten ist. Die mobile Version ist nur für sehr komplexe und nicht standardmäßige Webdienste geeignet.
Skrupellose Großagenturen machen sich das zunutze, indem sie Kunden betrügen. Schließlich sind die Kosten für die Implementierung einer separaten mobilen Version um ein Vielfaches höher als für die Implementierung eines adaptiven Layouts, sodass es für sie rentabler ist, Sie von einer adaptiven Version abzubringen.
Warum ist eine responsive Website besser als eine mobile Version?
- Im adaptiven Layout werden Änderungen im Code sofort für alle Geräte angezeigt. Zum Beispiel, wenn Sie etwas ändern oder ein neues hinzufügen müssen wichtige Funktionalität. Falls die Website eine mobile Version hat, müssen Sie Änderungen in beiden Versionen vornehmen. Und so jedes Mal, was die Ausgaben für Programmierer und Layouter verdoppelt.
- Auf einer adaptiven Website werden Inhalte nicht dupliziert, im Gegensatz zu der Methode, wenn eine mobile Version der Website erstellt wird.
- Die Adresse auf der Seite für Desktop und Smartphone in der adaptiven Version bleibt gleich, sodass Sie nicht jedes Mal Weiterleitungen setzen müssen.
- Es müssen nicht jedes Mal Inhalte auf separaten Seiten für Mobil- und Standardgeräte generiert werden.
- Darüber hinaus sagte Google auf einer der Digital October-Konferenzen im Dezember 2016, was getan werden muss adaptive Version, und die mobile Version ist völliger Unsinn.
Lifehack! Wussten Sie, dass die Anpassung einer Website für Mobilgeräte viel billiger ist, als Sie denken? Denn in der Tat erfordert es keinen großen Aufwand und die Arbeit ist in kurzer Zeit ohne Folgen für Ihre Website erledigt. In der Regel bieten Webstudios gewagte Preisschilder: von 10.000 ₽ bis 20.000 ₽, und tatsächlich kann die Anpassung für nur 500 ₽ aus der Ferne über die Kwork Freelance Exchange bestellt werden.
Wie erstelle ich eine mobile Version der Website?
Bevor Sie ein responsives Layout auf Ihrer Website implementieren, müssen Sie das Layout planen. Dazu müssen Sie festlegen, welche Elemente beibehalten und welche entfernt werden sollen. Und machen Sie es separat für ein Smartphone und für ein Tablet. Der Platz auf Smartphones und Tablets ist begrenzt, also müssen wir nicht allzu wichtige Blöcke opfern und nur funktionale Elemente und nur das lassen, was dem Besucher hilft.
Übrigens unterstützen die meisten neuen Premium-Themes in WordPress die mobile Version sowie Amp-Seiten. Wir haben komplette Anleitung««, responsive WordPress-Seiten lesen und erstellen.
Beispielsweise haben Seitenleisten normalerweise eine informative Funktion, Schieberegler usw. Das Menü ist zu lang und wird in der reichlich vorhandenen Version zu einer endlosen Party, sodass es in einer separaten Schaltfläche entfernt wird. Dasselbe gilt für das lange Suchfeld. Die Elemente sollten nicht nahe beieinander liegen, um zu vermeiden, dass zwei Elemente gleichzeitig gedrückt werden.
Adaptives Layout site ermöglicht es Webseiten, sich automatisch an die Bildschirme von Tablets und Smartphones anzupassen. Der mobile Internetverkehr wächst jedes Jahr, und um diesen Verkehr effektiv zu verarbeiten, ist es notwendig, Benutzern adaptive Websites mit einer benutzerfreundlichen Oberfläche anzubieten.
Suchmaschinen verwenden eine Reihe von Kriterien, um die Reaktionsfähigkeit einer Website zu bewerten, wenn sie auf Mobilgeräten angezeigt wird. Google versucht Besitzern von Smartphones und Tablets die Nutzung des Internets zu vereinfachen, indem es für Mobilgeräte angepasste Seiten in den mobilen Suchergebnissen mit einer speziellen Markierung markiert. mobilfreundlich. Yandex verfügt auch über einen Algorithmus, der Websites mit einer mobilen / adaptiven Version für Benutzer in der mobilen Suche bevorzugt.
Sie können die Anzeige der Seite auf mobilen Geräten auf den Diensten und überprüfen.
Reis. 1. Mobile Ausgabe von Yandex und Google mit einem Hinweis zur Freundlichkeit der Website für mobile Geräte Was ist ein adaptives Layout
Responsives Layout impliziert das Fehlen einer horizontalen Bildlaufleiste und skalierbarer Bereiche bei der Anzeige auf jedem Gerät, lesbaren Text und große Bereiche für anklickbare Elemente. Mithilfe von Medienabfragen können Sie das Layout und die Position von Blöcken auf der Seite steuern und die Vorlage neu erstellen, damit sie sich an die Bildschirmgrößen verschiedener Geräte anpasst.
Die wichtigsten Techniken zum Erstellen einer adaptiven Website werden in diesem Artikel beschrieben. Zum sich anpassendes Design Die Breite des Haupt-Site-Containers wird in % festgelegt, wobei sie kleiner oder gleich 100 % der Breite des Browserfensters sein kann. Die Breite der Rasterspalten wird ebenfalls in % eingestellt. BEI sich anpassendes Design Die Breite des Hauptcontainers und der Rasterspalten wird mit Werten in px festgelegt.
Die in diesem Tutorial besprochene responsive Fluid-Layout-Technik funktioniert hervorragend mit einer zweispaltigen Vorlage, wodurch die Website reaktionsschnell und auf Mobilgeräten einfach anzuzeigen ist. Die Vorlage geht von einem anderen Layout des Hauptinhalts der Seiten aus, in dieser Lektion wird das Layout der Hauptseite analysiert.
Layout der Hauptseite
Die Seite besteht aus drei Hauptblöcken: einer Kopfzeile (Kopfzeile), einem Wrapper-Container für den Hauptinhalt und einer Seitenleiste sowie einer Fußzeile (Fußzeile). Nehmen wir 768px und 480px als Design-Haltepunkte.
Beim ersten Punkt blenden wir das obere Menü aus und verschieben die Seitenleiste unter den Container mit den Beiträgen. Beim zweiten Punkt ändern wir die Position der Kopfzeilenelemente, heben die Positionierung der Schaltflächen für soziale Netzwerke in den Posts auf und heben das Umbrechen der Seitenfußspalten auf.
Reis. 2. Ein Beispiel für ein adaptives Layout 1. Meta-Tags und Abschnitt
1) Zum Abschnitt hinzufügen
erforderliche Dateien - ein Link zu den verwendeten Schriftarten, jQuery-Bibliothek, sowie das prefixfree Plugin (um keine Browserpräfixe für Eigenschaften zu schreiben):
2. Kopfzeile der Seite
In der Kopfzeile der Seite
Logo ;
Taste zum Ein-/Ausblenden des Hauptmenüs
