Hallo meine lieben Blog-Leser. Galiulin Ruslan ist in Kontakt. Heute werden wir über mobile Versionen von Websites sprechen, die jede Website oder jeder Blog haben muss, um an die Spitze der Suchmaschinen zu gelangen. In dem Artikel werde ich Stilcodes und vorgefertigte Seitenlayoutbeispiele geben, die Sie auf Ihren Computer herunterladen können.

Wenn Ihre Website immer noch nicht für Mobilgeräte optimiert ist, empfehle ich, meinen Rat zu befolgen oder sich an Fachleute zu wenden - http://www.mobile-version.ru der alles nach den Maßstäben der Suchmaschinen macht. Über denselben Link können Sie auch Ihre Website auf Mobilität überprüfen.

IM JAHR 2013 Google Jahr begann Druck auf Webmaster auszuüben ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), überzeugt von der Notwendigkeit, leichte Website-Modifikationen zu erstellen, und seit 2015 ist Mobilität zu einem der Ranking-Aspekte geworden ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex hinkt nicht hinterher und hat einen speziellen Wladiwostok-Algorithmus entwickelt, der die Eignung der Website für die Anzeige von Telefonen berücksichtigt.

Mobile Friendly ist heute nicht nur Besucherbetreuung, sondern eine unabdingbare Voraussetzung für Promotion.

Wenn eine Website von Grund auf neu erstellt wird, wird der Mobile-First-Ansatz angewendet. Aber die meisten haben alte Arbeitsprojekte. Die Hauptfrage, die die mobile Version der Website in solchen Situationen aufwirft, ist, wie man sie erstellt, ohne die vorhandene Vorlage zu ruinieren.

Es gibt drei Ansätze:

• Separate Adresse und Layout - platziert auf einer Subdomain der Form m.site.ru. Die Umleitung erfolgt über eine Serverumleitung durch einen Benutzeragenten.
• Responsives Design – URL und HTML bleiben die gleichen wie im Desktop-Format, aber in CSS geben Medienabfragen Regeln für verschiedene Bildschirme zurück.
• RESS ist ein responsives Design, die Adresse bleibt gleich, aber der Server sendet Stilsätze, je nachdem, welche Art von Hardware die Seite anfordert.

Für Besitzer alter Projekte optimale Wahl- Verwendung des adaptiven Layouts. Wie man es selbst macht und ohne unsichere Plugins zu verwenden, werden wir Schritt für Schritt betrachten.

Mobile Version der Website: So machen Sie es richtig

Weitere Schritte erfordern solide Grundkenntnisse in HTML und CSS oder die Fähigkeit, unverständliche Dinge schnell zu googeln.

Hinweis für Anfänger: In CSS bedeuten die Wörter vor den geschweiften Klammern die spezifischen Teile der HTML-Datei, für deren Anzeige sie verantwortlich sind. Häufiger mit einem Punkt oder einem Hash-Zeichen geschrieben - #place (Eigenschaft: Wert;).

Schritt 1. Einschränkungen entfernen.

Besitzer von fließenden Layouts können diesen Schritt überspringen. Der Rest muss hart arbeiten.

Breite- Wir suchen nach großen Abschnitten im Code mit fest definierter Darstellung. Wenn der Parameter in Pixeln oder Punkten angegeben ist, müssen Sie seinen Wert in Prozent, Ems und andere Einheiten ändern, die für die Umgebung empfindlich sind. Oft hat der Hauptcontainer oder Inhaltsbereich eine feste Breite – in den meisten Fällen werden die Einschränkungen aufgehoben, indem sie durch max-width ersetzt werden.

Bilder- Anstelle klarer Größen schreiben wir Eigenschaften für das img-Tag vor, die den Bildern Anpassungsfähigkeit verleihen. Fotos ändern das Seitenverhältnis innerhalb ihrer übergeordneten Container.

img(

Max-Breite: 100 %

Höhe: automatisch;

Tische- Vollständige Anpassungsfähigkeit kann nicht eingestellt werden, aber Sie können Seiten damit für Mobilgeräte geeignet machen, indem Sie diesen Code hinzufügen:

Tisch (

Bildschirmsperre;

Breite: 100 %;

Überlauf-x: scrollen;

Überlauf-y: versteckt;

ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-Überlauf-Scrollen: berühren;

Wraps - werden durch die Float-Eigenschaft gesetzt. Wenn Sie diese Option festlegen, können sich Boxen basierend auf Fenstereinstellungen verschieben und sich an Elemente mit einer stabilen Position oder innerhalb von übergeordneten Containern anpassen. Standardmäßige div-Elemente werden standardmäßig jeweils in übersetzt Neue Zeile. Wenn Sie beispielsweise 200-Pixel-Div-Blöcke in einem 1000-Pixel-Container platzieren, können Sie dieses Bild sehen.

Die Blöcke werden übereinander gestapelt. Das Hinzufügen von Zeilenumbrüchen entfernt Zeilenumbrüche und fügt Elemente in einer Zeile auf dem gesamten verfügbaren Platz ein.

Schritt 2: Planen Sie die Reorganisation der Inhalte.

Finden Sie heraus, welche Details der Desktop-Site auf mobilen Geräten angezeigt werden sollen. Beantworten Sie sich dazu selbst folgende Fragen:

• Welche Blöcke erfüllen nur dekorative Funktionen? - Häufiger sind dies Schieberegler, Seitenleistendekorationen, Fragebögen, zufällige Fotos.
• Was ignorieren die Besucher? - Heatmaps von Klicks und Pfaden helfen bei der Beantwortung dieser Frage. Wir verstecken rücksichtslos die am wenigsten aktiven Elemente.
• Was muss in der mobilen Version bleiben? - Normalerweise ist dies eine Anzeige, ein Formular Rückmeldung, Abonnement- oder Social-Media-Schaltflächen.
• Überlegen Sie, wie die Seite auf Tablets, Smartphones und kleinen alten Telefonen aussehen soll – Sie können für jedes Gerät Ihren eigenen Look festlegen.

Schritt 3. Bequemlichkeit.

Navigation: Telefonbildschirme sind zu klein, das übliche Seitenmenü passt selten in solche Rahmen. Es ist üblich, das Menü einzustellen, Dropdown-Menü auf der Schaltfläche.

Inhaltsbereich: Stellen Sie für Telefone in der Regel die Breite des Hauptblocks in CSS auf 100 % ein, je nachdem verfügbarer Platz. Das bedeutet, dass Text, Module, Anzeigen, Sidebar-Inhalte auf kleinen Geräten in einer Spalte angezeigt werden.

Sensoren: Finger sind nicht so genau wie eine Maus, lassen Sie viel Platz für sie. Der Abstand um Links und andere aktive Elemente muss mindestens 28 x 28 Pixel betragen.

Helfen Sie Ihren Besuchern, den aktiven Bereich zu definieren – Füllen, Hervorheben, Farbwechsel und andere Dinge, die für Berührungen eingestellt werden können, schreiben Sie die Hover-Pseudoklasse für Links und Schaltflächen vor.

Implementieren von Medienabfragen mit Beispielen

Wenn Sie schon einmal CSS-Tabellen zum Drucken erstellt haben, haben Sie bereits eine Vorstellung von den Möglichkeiten, je nach Gegebenheiten individuelle Stile zuzuweisen.

Medienabfragen sind logische Ausdrücke, der Zugriff darauf impliziert eine Antwort mit einem wahren oder falschen Parameter. Wenn das Abfrageergebnis wahr ist, d. h. die Benutzeragenten- oder Geräteabmessungen mit dem angegebenen Medientyp übereinstimmen, werden die im Medienblock angegebenen Stilregeln automatisch angewendet.

Medienabfragen können über Parameter zugewiesen werden:

• Breite und Höhe des Browserfensters;
• Gerätebreite und -höhe;
• Ausrichtung - Quer- oder Hochformat;
• Bildschirmauflösung.

Eine aktuelle Liste der Argumente finden Sie unter offizielle Spezifikation.

Kommen wir zu den Beispielen. Es gibt fertige Vorlage, die Größe seines Inhaltsteils beträgt 1000 Pixel, alle internen Elemente und Details werden in Bezug auf diesen Parameter konfiguriert.

Wenn der Bildschirm des Benutzers schmaler als der angegebene Inhaltsteil ist, wird eine Bildlaufleiste angezeigt. Schwebende Designelemente können sich auf unvorhersehbare Weise verhalten – ineinander laufen, sich ausbreiten, zu sehr verengen.

Zunächst entfernen wir die feste Größe, die den Streifen erzeugt, damit er die Anpassung nicht stört. In unserer Vorlage ist dies der Navigationswrapper. In einem Reader-Layout können dies ein oder mehrere Elemente sein. Wenn Sie mit der Definition ratlos sind, öffnen Sie die Browser-Entwicklertools - finden Sie mithilfe der Boxmodellansicht das Element, das nicht in die Bildschirmabmessungen passt.

Um dies zu beheben, entfernen wir die festen Rahmen, indem wir sie zu den Vorlagenstilen hinzufügen:

@media only screen und (max-width: 1000px) (

Navigation ( Breite: 100 %; )

Wenn nun die Breite des Benutzerbildschirms weniger als 1000 Pixel beträgt, entspricht die Breite des Menüs 100 % seiner Größe. Die Hauptversion der Vorlage sieht genauso aus wie zuvor. Durch das Ersetzen der Eigenschaft wurde die untere Bildlaufleiste beim Verkleinern des Bildschirms entfernt.

Aber die Blöcke sehen immer noch zweifelhaft aus - ändern wir ihre Anzeige, indem wir die Breite prozentual erhöhen, um sie an die gewünschten Abmessungen anzupassen.

Wir fügen der gleichen Medienabfrage hinzu:

Block (Breite: 35%;)

Wie finden Sie die optimalen Größen für die Blöcke Ihrer Website heraus? Berechnen Sie manuell oder nehmen Sie ein beliebiges vorgefertigtes Raster - Fluidraster - zugrunde. Sie können sich auf die bestehenden Standards konzentrieren: Bei zweispaltigen Layouts mit einer Fensterbreite von 980-1050px wird der Wrapper zu 95% übernommen, der Inhalt zu 60% und 30% für die Seitenleiste. Der verbleibende Platz geht an die Bildung von Rändern und Rändern für die Genauigkeit.

Sie können jedoch Box-Sizing auf den Inhalt anwenden, um nicht jedes Mal die Pixel zu berechnen, sondern nach den Gesamtmaßen zu arbeiten.

Kommen wir nun zur Einstellung der Anzeige auf Bildschirmen mit geringerer Auflösung:

@media only screen und (max-width: 600px) (

Block (

Schwimmer: keine;

Breite: 85 %;

Marge: 1em automatisch;

Wenn der Bildschirm weniger als 600 px groß ist, sollten unsere Blöcke in eine Spalte passen - wir entfernen den Umbruch, setzen neue Einzüge, zentrieren und ändern die Breite. Häufiger wird 100 % festgelegt, aber wenn dies aus irgendeinem Grund unpraktisch ist, legen wir unsere eigene Größe fest.

So können Sie nicht nur die Abmessungen von Inhaltsblöcken einstellen, sondern auch deren Darstellung. Zum Beispiel, um die Anzeige großer Elemente zu verbieten und sie durch geeignete zu ersetzen.

Demonstrieren wir die Möglichkeiten am Beispiel von wechselnden Farben und Darstellungen.

In der Smartphone-Version wird das Hauptmenü ausgeblendet und die Farbe des Blocks in Blau geändert, während der größere Bildschirm das Design ohne diese Änderungen anzeigt.

Das Ausblenden der Navigation ist in den meisten Fällen erforderlich – sie wird durch einen Button ersetzt. Es ist sinnvoller, dies mit Javascript zu tun, Sie können fertige Lösungen verwenden.

Editiert wird punktuell, der Bereich kann sowohl von oben als auch von unten begrenzt werden. Es ist schnell und bequem - eine Zeile legt ein separates CSS für fest verschiedene Geräte ohne die Hauptansicht der Website zu beeinträchtigen.

Sie können überall darin @media-Regeln deklarieren vorhandener Tisch Styles, oder erstellen Sie einen separaten für diese Deklarationen und importieren Sie ihn dann mit der @import-Regel in das Haupt-CSS.

Mobile Version der Website: wie man sie erstellt und worauf man achten muss

Mediacware wird von allen modernen Browsern verstanden, funktioniert aber nicht in IE 8 und darunter. Das Problem wird gelöst, indem auf den alten IE durch bedingte Kommentare verwiesen wird. Sie müssen im Vorlagencode geschrieben werden, nicht in CSS.

Das Skript selbst ist auf github verfügbar ( https://github.com/scottjehl/respond), fügt älteren IEs Unterstützung für minimale und maximale Abmessungen und Medienabfragen hinzu.

Ein weiteres Problem ist, dass Responsive Design die Verwendung von Html5 impliziert, was wiederum für ältere Browser unverständlich ist. Mit einem Hack behandelt:

Der Code ist in html geschrieben, zusätzlich wird die Blockdarstellung der erstellten Elemente in CSS eingestellt:

Kopfzeile, Nav, Abschnitt, Artikel, Seite, Fußzeile (Anzeige: Block;)

Lassen Sie uns sofort die Frage ansprechen - wie man einige Skripte nur dann anzeigt, wenn gegebenen Parameter Bildschirm. Wenn jquery installiert ist, müssen Sie dem Vorlagencode ein einfaches Skript hinzufügen. Die Nummern werden auf die notwendigen geändert. Es liest sich so: Wenn die Fensterbreite 980 Pixel überschreitet, wird das im Pfad angegebene Skript auf die Seite angewendet. Sie können mehrere angeben, die Syntax wird analog durch ein Semikolon in geschweiften Klammern geschrieben.

Wenn ($(Dokument).Breite() > 980) (

$.getScript("Pfad zum Skript");

Ein weiterer Punkt ist das Wie mobiler Browser Das iPhone muss den gegebenen Inhalt verarbeiten, ob seine Erhöhung erlaubt ist. Dazu wird die Anfangsskala in den Kopf geschrieben:

Es bleibt nur die Richtigkeit zu überprüfen - dazu können Sie Ihren eigenen Browser und Ihr eigenes Telefon verwenden oder sich an die Dienste wenden.

Wenn die Website konvertiert wird lokaler Server, Korrektheit kann in festgestellt werden ami.responsivedesign.is. Für eine ordnungsgemäße Anzeige müssen Besitzer von Denver die Codierung in utf-8 ändern, indem sie die Datei httpd.conf des Servers bearbeiten.

Der Dienst zeigt, wie das Projekt auf verschiedenen Geräten aussieht.

Zusätzlich wird die Vorlage getestet https://developers.google.com/speed/pagespeed/insights/ oder in besonderer Form https://www.google.com/webmasters/tools/mobile-friendly, sowie in Webmastern.

In Yandex sieht das detailliert aus und Google meldet einfach, dass es keine Probleme gibt.

Wenn alles richtig gemacht wird, gibt es kein Scrollen, keine unnötigen Elemente. Die mobile Version ist fertig, und jetzt haben Sie gelernt, wie Sie sie selbst erstellen können. Wenn das Material für Sie nützlich war, dann liken Sie es und abonnieren Sie den Blog-Newsletter. Alles Gute.

Wenn Sie unten auf eine der Schaltflächen klicken, können Sie 2 Beispiele der gefalteten Seite in dieser Lektion herunterladen und es ist einfach, damit zu arbeiten fertige Seiten und kopiere den Code.

Mit freundlichen Grüßen Galiulin Ruslan.

Heutzutage gehen die meisten Menschen über mobile Gadgets online - Tablets, Telefone, in dieser Hinsicht geht es auch um die Website-Optimierung Neues level. Wenn ein Benutzer hereinkommt und sieht, dass die Seite nicht für Mobilgeräte optimiert ist: das Bild kann nicht angezeigt werden, die Schaltflächen sind ausgefahren, die Schriftarten sind klein und unlesbar, das Design ist verzerrt – 99 von 100 %, dass er die Seite verlässt und suchen Sie nach einem anderen, bequemeren. A wird das Kästchen markieren, dass die Ressource irrelevant ist, das heißt, sie passt nicht zur Suchanfrage. Daher muss das Design der Seite an verschiedene mobile Endgeräte angepasst werden. Was ist eine mobile Version der Website, wie wird sie erstellt und wie wendet man sie am besten an? Lesen Sie mehr in diesem Artikel.

Es gibt also vier wichtige Möglichkeiten, die Website für die mobile Version anzupassen.

Methode Eins – Responsive Design

Responsive Templates ändern das Seitenbild je nach Bildschirmgröße. In der Regel sind sie standardmäßig auf 1600, 1500, 1280, 1100, 1024 und 980 Pixel eingestellt. Für die Implementierung werden Abfragen verwendet. Es ä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 keine Designentwicklung von Grund auf neu erforderlich ist, reicht es aus, CSS und HTML zu optimieren.
• eines URL-Adresse- Der Benutzer muss sich nicht mehrere Namen merken, es ist keine Weiterleitung (Weiterleitung von einer Adresse zur anderen) erforderlich, was 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 Vorlagen ihre Nachteile, die übrigens mehr als nur Vorteile sind. Trotzdem halten viele Entwickler an diesem Konzept fest, zum Beispiel die Google Corporation, deren mobile Version der Website ein adaptives Design hat. Also Nachteile:

• Responsive Design unterstützt auf Mobilgeräten nicht die gleichen Aufgaben wie auf dem Desktop. Handelt es sich beispielsweise um eine mobile Version der Website einer Bank, bei der dem Nutzer eher Informationen zum Wechselkurs oder zum nächsten Geldautomaten wichtig sind, dann reicht diese Gestaltung völlig aus. Aber wenn es sich um eine komplex strukturierte Ressource mit vielen Abschnitten und Unterabschnitten handelt, wird es den Besuchern wahrscheinlich nicht gefallen.
• Langsames Laden verwandelt eine Lieblingsseite in eine hasserfüllte. Dies gilt insbesondere für Ressourcen, in denen Animationen, Videos, Popups und andere aktive Elemente reichlich vorhanden sind. Aufgrund des großen Gewichts wird die Seite einfach „verlangsamt“, der Benutzer wird wütend und geht, und Positionen suchen Website - fallen.
• Die Unfähigkeit, die mobile Version zu deaktivieren, ist ein weiterer wesentlicher Nachteil. Wenn ein Element durch ein solches Layout verborgen ist, können Sie es nicht öffnen, im Gegensatz zu Websites, auf denen Sie es deaktivieren und zu einer regulären Domain wechseln können.

Mit einer solchen mobilen Version der Website können Sie die Ressource jedoch schnell und ohne besondere Fähigkeiten und Kosten an beliebige Gadgets anpassen. Aber in Anbetracht der aufgeführten Mängel wird es für kleine, einfache Ressourcen mit einem Minimum an Informationen und Multimedia geeignet sein, ohne schwierige Navigation und Animationen. Für eine komplexe Website sind 2 andere Methoden geeignet.

Methode zwei - eine separate Version der Website

Diese Methode ist weit verbreitet und oft erfolgreich, um die Lesbarkeit der Website auf einem mobilen Gerät zu verbessern. Im Wesentlichen wird eine separate Version der Seite erstellt, die für die Anwendung gezeichnet wird und sich auf einer separaten URL oder Subdomain befindet, z. B. m.vk.com. Gleichzeitig bleibt die Hauptfunktionalität erhalten, das Seitendesign sieht nur anders aus. Die Vorteile dieser Methode liegen auf der Hand:

• Benutzerfreundliches Bedienfeld;
• es ist einfach zu ändern und zu bearbeiten, da die Version getrennt von der Hauptressource existiert;
• Aufgrund des geringen Gewichts funktioniert eine separate Version der Website viel schneller als Responsive Vorlage;
• Meistens ist es möglich, vom Handy aus zur Hauptversion der Seite zu gehen.

Aber auch hier war es nicht ohne Nachteile:

• Mehrere Adressen - Desktop- und mobile Version der Website. Wie kann man den Benutzer dazu bringen, sich an zwei Optionen zu erinnern? Webmaster schreiben oft von der Desktop-Version auf die mobile Version vor, aber wenn diese Seite in der mobilen Version nicht vorhanden ist, erhält der Benutzer eine Fehlermeldung. Hier treten Schwierigkeiten mit Suchmaschinen auf, die es schwierig finden, 2 identische Ressourcen zu ranken, was sich direkt auf die Werbung auswirkt.
• Die mobile Version der Website von einem Computer sieht, wenn der Benutzer sie versehentlich besucht, lächerlich aus, was sich auch auf den Datenverkehr auswirken kann.
• Diese Desktop-Version ist oft stark eingeschränkt, sodass der Benutzer nur sehr eingeschränkte Funktionen erhält. Aber gleichzeitig, wenn etwas fehlt, kann der Besucher zu gehen Vollversion Seiten.

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

Der dritte Weg - RES-Design

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

Solche Anwendungen sind schnell, kostenlos, bequem und können verschiedene Arten von Informationen aufnehmen, während der Speicher des Telefons und der Internetverkehr nicht wie beim Besuch einer Website über einen Browser aufgebraucht werden. Sie sind leicht zugänglich, da der Link immer auf dem Bildschirm angezeigt wird und keine komplizierten Namen eingegeben werden müssen Adressleiste Browser.

Natürlich gibt es auch hier Nachteile, wie 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 Mobilgerät von der Anwendung nicht erkannt. Regulär technischer Support, Mängelbeseitigung. Dennoch wird diese Option aufgrund ihres produktiven, ununterbrochenen Betriebs als die beste der drei vorgeschlagenen Optionen angesehen.

Der günstigste Weg, eine mobile Website zu erstellen

Alle oben genannten Methoden beinhalten, wenn auch nicht immer langwierig und kompliziert, aber dennoch bezahlte Arbeit eines Webmasters. Wenn Sie keinen dringenden Bedarf für eine solche Entwicklung sehen, ist eine einfache und kostenlose mobile Version der Website für Sie geeignet. Was ist der einfachste Weg, es zu machen?

Laden Sie spezielle Vorlagen (Plugins) herunter für adaptive Gestaltung. Zum Beispiel WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile und andere. Sie helfen, die Seite auf dem Handy korrekter darzustellen, während Sie ein paar Tipps erhalten, was korrigiert werden muss, um die Seite besser an die mobile Version anzupassen.

Für ernsthafte Ressourcen ist diese Methode natürlich kaum geeignet. Vielmehr es kostenlose Gelegenheit ist für kleine und einfache Websites, Blogs, Newsfeeds gedacht. Vergessen Sie nicht, dass die Google-Suchmaschine sowie Yandex heute ernsthafte Anforderungen an mobile Versionen stellen. Daher besteht eine große Chance, Ihre Positionen mit dieser Methode zu senken.

Bei dieser Methode werden höchstwahrscheinlich Anzeigen und Popup-Banner abgeschnitten, aber die Seite wird schnell und ohne „Verzögerungen“ geladen.

Prinzipien der Erstellung mobiler Versionen

Es spielt keine Rolle, ob die mobile Version der Website kostenlos oder mit Hilfe von Webmastern erstellt wurde, ob sie auf dem RESS-System oder mit einem adaptiven Template erstellt wurde. Am wichtigsten ist, dass es für seinen effektiven Betrieb mehrere äußerst wichtige Prinzipien einhalten muss. Was sollte also die mobile Version der Website sein? Wie kann man es produktiv, effizient und produktiv machen?

Wir entfernen alles Unnötige

Minimalismus ist das, wonach der Entwickler der mobilen Version der Website streben sollte. Stellen Sie sich vor, wie schwer 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 sauber sein. Wählen Sie 2-3 Farben, um den Raum zu unterteilen (z. B. gebrandet). Besser, wenn einer von ihnen weiß ist. Unterteilen Sie den Raum eines kleinen Bildschirms in verständliche und lesbare Zonen. Virtuelle Tasten sollten sichtbar sein, damit der Benutzer 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 Zusatzoptionen, das in der Desktop-Version sinnvoll wäre und dem Nutzer das Leben erleichtern würde, wird hier nur Schwierigkeiten bereiten. Lassen Sie nur die wichtigsten Elemente. Animation, Werbebanner, Multimedia wird höchstwahrscheinlich nur die Arbeit der Website oder Anwendung verlangsamen und von der Hauptsache ablenken.

Ausrichtung

Das Problem der Ausrichtung ist nicht weniger akut, da der Benutzer bei falscher Ausführung nur die Endungen wichtiger Wörter erhält. Linksbündige und vertikale Ausrichtung wird allgemein akzeptiert. Stellen Sie sich vor, Sie scrollen durch den Newsfeed auf Ihrem Telefon. Sie tun es von oben nach unten, aber nicht nach links oder rechts.

Einen Verband

Wenn eine lange Kette von Übergängen nicht möglich ist, versuchen Sie, mehrere Schritte zu einem zusammenzufassen. Beispielsweise erfordert die Website eine Dateneingabe in mehreren Schritten – ein Name, dann eine Adresse, wobei jede einzelne Zelle ein separates Haus, eine Straße, eine Wohnung usw. enthält. Um den Benutzer nicht zu zwingen, zu versuchen, viele kleine Zellen zu treffen, fragen Sie ihm nur 2 auszufüllen - Name und Adresse.

Und Trennung

Manchmal ist es im Gegenteil erforderlich, auch die Verbindung zu trennen große Menge Information. Im Dropdown-Menü haben Sie beispielsweise eine Liste mit mehr als 80 Städten, in denen die Lieferung durchgeführt wird. Gruppieren Sie sie nach Region, damit der Benutzer nicht durch diese riesige Liste scrollen muss. Wenn er den Mauszeiger über das regionale Zentrum oder die Region bewegt, fällt eine weitere Liste mit Städten heraus.

Listen

Übrigens über Listen. Es gibt zwei davon - in alphabetischer oder anderer Reihenfolge und mit Substitution. Ihre Wahl hängt davon ab, was aufgelistet wird.

Fixed ist nützlich, wenn der Benutzer genau weiß, wonach er sucht. Zum Beispiel Stadt, Nummer oder Datum. Die zweite Option eignet sich für lange komplexe Namen oder für Fälle, in denen es viele Variationen desselben Namens gibt, und bringt den Benutzer dem Ziel einen Schritt näher. Die Option zum automatischen Ersetzen wird häufiger verwendet, wenn ein Besucher Hilfe benötigt. Zum Beispiel bietet eine Strickseite den Kauf von Stricknadeln an. Benutzer tritt ein Suchanfrage„Stricknadeln aus Metall“, aber im Tooltip sieht er „5 mm Stricknadeln“, „4,5 mm Stricknadeln“ usw.

Automatische Vervollständigung

Dieser Punkt gilt insbesondere für Websites, auf denen etwas online verkauft wird und die Sie ausfüllen müssen Standardformen Zahlung, Lieferung usw. Wenn eine Person einen Kauf über ein Telefon tätigt, hat sie höchstwahrscheinlich keine Zeit, zum Computer zu gelangen, was bedeutet, dass der Kaufvorgang 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 die Stadt ein, wenn Sie in derselben Region arbeiten. Sie können geändert werden, aber wenn Sie das Ziel treffen, wird die Zeit des Benutzers gespart.

Alles wird gelesen, alles wird angeschaut

Denken Sie beim Erstellen des Designs der mobilen Version der Website daran, dass die Telefone aller Menschen unterschiedlich sind, ebenso wie ihr Sehvermögen. Vielleicht wird Ihre Website von einem kleinen Bildschirm aus betrachtet, daher sollten die Schriftarten einfach und lesbar sein, die Schaltflächen sollten groß genug sein, um angeklickt zu werden, ohne auf eine andere Seite zu wechseln, und die Bilder sollten separat geöffnet werden, besonders groß, wenn wir redenüber den Online-Shop.

Einige Statistiken

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

Die Zahlen sind wie folgt. Heutzutage werden Gadgets anscheinend von 87% der Bevölkerung verwendet, mit Ausnahme der kleinsten Kinder und einiger älterer Menschen. Ökonomen prognostizieren Wachstum Mobile Commerce 100 Mal in den nächsten 5 Jahren. Gleichzeitig sind nur 21 % der Websites für die Arbeit mit mobilen Geräten angepasst. Das bedeutet, dass der Internetverkehr und der E-Commerce-Markt nur zu einem kleinen 5. Teil besetzt sind.

Denken Sie an diese Zahlen. Ist es sinnvoll, Ihre Ressource anzupassen? Ja natürlich. Außerdem, obwohl es so viele gibt Freiraum In diesem Markt können Sie Ihr eigenes Segment einnehmen.

Wo wird die mobile Version benötigt?

Die Nutzung der mobilen Version ist für jede Plattform sinnvoll, die ein hohes Ranking anstrebt. Schließlich wirkt sich dies direkt auf den Benutzer aus und schafft angenehme Bedingungen für ihn, auf Ihrer Website zu bleiben.

Ohne eine mobile Version kann nicht existieren:

• Nachrichtenportale, da die meisten auf dem Weg zur Arbeit oder zum Studium vom Telefon aus angeschaut werden;
• soziale Netzwerke - aus dem gleichen Grund, außerdem gibt es einen Online-Kommunikationsfaktor, was bedeutet, dass dafür ein bequemer, verständlicher Chat erstellt werden sollte;
• Verweise, Seiten mit Navigation usw., wohin Menschen gehen, wenn sie etwas suchen;
• Online-Shopping - eine Gelegenheit, Kunden anzuziehen, die keine Zeit mit dem Einkaufen verschwenden, sondern alles über das mobile Internet kaufen.

Anstelle eines Fazits

Heute mobile Technologien befinden sich in der Phase des aktiven Wachstums und der Entwicklung, daher muss jedes Unternehmen, das die Führung auf dem Markt anstrebt, sicherstellen, dass seine Internetressource den Anforderungen entspricht. Aufgrund der wachsenden Ansprüche der Nutzer müssen Seiten ständig modernisiert und angepasst werden verschiedene Geräte. Es ist klar, dass, wenn es für eine Person unpraktisch ist, sich auf einer bestimmten Ressource zu befinden, sie dort keine Informationen über ein Produkt oder einen Preis erhalten, eine Bestellung aufgeben, sich über die Lieferung informieren kann, dann findet sie die Website, auf der all dies möglich wird . Um den Wettbewerb zu gewinnen, ist es daher wichtig, eine flexible, praktische, funktionale und interessante Ressource zu haben.

Die mobile Version der Website Android oder Ios hilft dabei. Dazu müssen Sie eine der oben genannten Redesign-Methoden auswählen - eine adaptive Vorlage, eine neue Website auf einer Subdomain erstellen und durch Weiterleitung darauf zugreifen kostenlose Vorlagen oder Schöpfung mobile Applikation, mit der der Benutzer die Seite bequemer betreten und sich auf ihr befinden kann.

BEI moderne Welt Manchmal ist eine eigene Website genauso wichtig wie eine Telefonnummer oder Adresse Email. Leider kann nicht jeder selbst eine schöne professionelle Website erstellen, und manchmal funktioniert sogar eine Kurve nicht. Auch das Bestellen bei Programmierern ist keine ideale Lösung, da es sich nicht jeder leisten kann.

Kostenlose HTML-Website-Vorlagen helfen Ihnen, aus dieser Situation herauszukommen. Eine HTML-Site-Vorlage ist ein Satz fertiger statischer Seiten für eine Site mit einem bestimmten Thema. Mit dieser Vorlage können Sie mit Grundkenntnissen in nur wenigen Stunden eine einfache Website erstellen HTML-Markup. Im HTML-Bereich erhalten Sie dieses Wissen, wenn Sie ein paar Stunden mehr lernen, und wenn Sie die Zeit im CSS-Bereich nicht verschwenden, können Sie das Design der HTML-Site-Vorlagen vollständig steuern und vollständig anpassen zu Ihren Bedürfnissen.

Ein weiterer unbestreitbarer Vorteil von Website-Templates ist, dass sie in den meisten Fällen von Profis geschrieben werden. Ein professionelles Website-Template bedeutet nicht nur ein schönes und modernes Design, sondern auch wie der Code geschrieben wird. Suchmaschinen Sie sehen sich an, wie Ihre Website geschrieben ist, ob der Code SEO-optimiert ist oder nicht, und auf dieser Grundlage senken oder erhöhen sie Ihre Positionen in den Suchergebnissen. Daher sollte eine gute Website nicht nur schön und modern sein, was wichtig ist, sondern auch in Bezug auf den Code gut geschrieben sein.

Laden Sie kostenlose HTML-Website-Vorlagen herunter und erstellen Sie Ihre Projekte im Handumdrehen.

Heutzutage achten viele Unternehmen viel mehr darauf, qualitativ hochwertige mobile Ressourcen zu erstellen, da nach den neuesten Daten 80% der Internetnutzer diese verwenden tragbare Geräte um die benötigten Informationen zu finden. Darüber hinaus bereiten sich Vermarkter auf eine große Änderung des Google-Algorithmus vor, die am 21. April 2015 in Kraft trat. Der offizielle Blog des Unternehmens sagt, dass jetzt die Qualität Mobile Optimierung Die Ressource bestimmt weitgehend ihre Position in den Suchergebnissen.

Das kommende Update wird einen viel größeren Einfluss auf das Ranking-System haben als derselbe Panda oder , und deshalb die Verbesserung mobile Erfahrung sollte in naher Zukunft Ihre oberste Priorität sein. Laut dem Artikel von Search Engine Land zu diesem Update werden alle Websites einer rigorosen Überprüfung der Reaktionsfähigkeit auf Mobilgeräte unterzogen.

Damit Sie Ihre Seite optimal auf eine so große Veränderung vorbereiten können, haben wir 15 inspirierende Beispiele für mobiles Webdesign für Sie herausgesucht.

Shutterfly ist ein Onlinedienst, mit dem Sie Fotoalben, Grußkarten, Einladungsschreiben und mehr erstellen können. Da täglich mehr Menschen auf ihre Fotos auf ihren Smartphones zugreifen, engagiert sich Shutterfly dafür, seinen Kunden ein positives mobiles Erlebnis zu bieten.

Die mobile Website des Unternehmens bleibt aus zwei Hauptgründen erfolgreich: Sie erleichtert den Benutzern das Auffinden von Informationen zu Angeboten und verkauft sie durch schöne Bilder.

Sobald Sie auf der Website sind, werden Sie sehen, dass die Menüabschnitte hier als große Schaltflächen am unteren Bildschirmrand dargestellt werden. Dadurch können sich die Besucher sehr schnell für die Wahl der Option entscheiden, an der sie interessiert sind, und erhalten zusätzliche Informationen.

Ich habe diese Vorlage für Standardbrowser solcher Plattformen wie IOS (3.1+), Android (2.1+), Blackberry (6.0+), Windows Phone 7 sowie Opera Mobile für Android, das immer beliebter wird. Ich möchte darauf hinweisen, dass alle Standardbrowser (mit Ausnahme von Windows Phone 7 mit IE9) auf Webkit basieren.

Was ist der Unterschied zwischen der Entwicklung von Desktop-Websites und Websites für Mobilgeräte? Als nächstes werde ich über einige Tricks sprechen, die helfen, viele Probleme zu umgehen.

Welche Auflösung zu wählen ist und das Viewport-Meta-Tag

Es scheint, dass wir eine Frage haben sollten, welche Erlaubnis wir als Grundlage für unsere Website nehmen sollen. Immerhin sind jetzt Geräte mit sowohl 230x340 (z. B. HTC Wildfire S) als auch etwa 800x480,960x640 (HTC Incredible S, Iphone 4) und sogar 1280x720 (HTC One X) relevant. Abhilfe schafft das Viewport-Meta-Tag, das das Problem mit Auflösung und Skalierung löst.

• width=device-width - der Wert wird vom Gerät selbst gesetzt
• initial-scale=1 - Anfangsskalierung wird auf 1 gesetzt (d.h. 1:1)
• maximum-scale=1.0, user-scalable=no - Skalierung ist deaktiviert (Ich möchte anmerken, dass HTC trotz dieser Einstellungen immer noch hartnäckig skaliert, und die Entwickler sagten, dass dies kein Fehler, sondern ein Feature ist)

Ein bisschen über Grafik

Auch bei dieser Bandbreite an Auflösungen ist zu beachten, dass die meisten Mobilgeräte eine hohe Auflösung Sie nutzen es nicht, um ihren Arbeitsbereich zu erweitern, sondern um die Übersichtlichkeit zu erhöhen (mehr dazu). Mit anderen Worten, ihre Pixelsättigung (DPI) ist um ein Vielfaches höher als bei kleineren Auflösungen. Woher kommt der Schluss, dass Geräte mit großem PDI die Seite tatsächlich um das 2-fache komprimieren, um die gleichen Abmessungen zu erhalten wie bei Geräten mit geringerer Auflösung (z Apple-Geräte Retina-Displays haben 4-mal so viele Punkte auf der gleichen Fläche des Bildschirms, was die Klarheit erhöht). Das Ergebnis können wir im Bild unten besser sehen.

Nachdem wir nun wissen, wie Bildschirme mit hoher DPI funktionieren, lohnt es sich, über die korrekte Darstellung aller Elemente unserer Website nachzudenken.
Beginnen wir mit Elementen wie Schriftarten, Rahmen und anderen ähnlichen Elementen. Alle diese Elemente sind im Wesentlichen Vektorobjekte, die der Browser problemlos skalieren kann, daher gehen wir nicht darauf ein.
Eine andere Sache ist mit Bildern und Hintergrundbilder. Denn wenn wir das Hintergrundbild basierend auf der Tatsache, dass wir 320x480 haben, speichern, werden Geräte mit einer höheren DPI-Zahl nicht in ihrer ganzen Pracht vor uns erscheinen können, und alle Bemühungen, die Klarheit und den Charme des zu vermitteln Bild wird nichts, da sie es tatsächlich um das 2-fache vergrößern (und egal wie gut der Browser skaliert - die Qualität geht immer verloren, wenn die Software die Größe erhöht). Hier kommt der Einfallsreichtum ins Spiel! Ich versuche es mal an einem Beispiel zu erklären. Wir haben eine Seite, in deren Kopfzeile sich ein bestimmter Hintergrund befindet, der eine Breite von 320 Pixel einnimmt. Damit unsere superklaren Bildschirme dieses Bild also zu 100 % anzeigen, sollte das Originalbild nicht 320 x 50, sondern 640 x 100 (genau 2 Pixel) groß sein mal größer) , und verwende bereits css set background-size: 320px 50px;. Wir machen ähnlichen Schamanismus mit Bildern in Form von img.

Abfragen optimieren

Aufgrund der Tatsache, dass Android, BlackBerry, IOS und Windows Phone 7 Data-URL vollständig unterstützen, können wir die Anzahl der Anfragen erheblich reduzieren, indem wir alle implementieren Hintergrundbilder im CSS. Neben der Abfrageoptimierung haben wir durch das CSS-Caching einen enormen Gewinn.

Probleme mit Sprites und Bildern

Da unser Browser den Inhalt komprimiert und auf die eine oder andere Größe skaliert, kann es vorkommen, dass die Größen bei Berechnungen falsch gerundet werden. Wenn Sprites Pixel für Pixel geklebt werden, wird daher ein Streifen des nächsten Elements angezeigt. Um dies zu vermeiden, lohnt es sich, beim Kleben von ein paar Pixeln eine Lücke zu machen.

Kleines Problem mit Bildformaten

Bei einigen Geräten bin ich auch auf ein unangenehmes Problem im Zusammenhang mit Bildformaten gestoßen. Ich gebe noch einmal ein Beispiel: Es gibt 2 Bilder, die mit „Für Web speichern“ in Photoshop gespeichert wurden (eines davon ist ein linearer Farbverlauf, der sich entlang der Y-Achse erstreckt, und das zweite ist eine Art Bild, das mit einem Stück ausgeschnitten wird den Farbverlauf und sollte eigentlich in den wiederholten Farbverlauf passen), jedoch in unterschiedlichen Formaten (png und jpg). Auf einigen Geräten ist also ein Bild heller und das zweite dunkler. Um dieses Problem zu lösen, musste ich also beide Bilder im selben Format speichern.

Ausblenden der URL-Leiste

Da wir nicht so viel Speicherplatz auf unserem Gerät haben, wird es uns nicht schaden, ein paar Dutzend Pixel zusätzlich zu gewinnen. Und wir können sie finden, indem wir unsere URL-Leiste ausblenden. Dafür haben wir ein einfaches Skript:

AddEventListener("load", function() ( setTimeout(hideURLbar, 0); ), false); Funktion hideURLbar() ( window.scrollTo(0, 1); )

Aber ich merke an, dass dieses Skript uns stören kann, wenn unser Link zu einem der Anker führt neue Seite(in diesem Fall werden wir zu unserem Element gescrollt und nach dem Laden der Seite kehrt es wieder nach oben zurück), aber dies kann leicht vermieden werden, indem Sie unsere URL zusätzlich überprüfen.

Visueller Effekt beim Klicken auf ein Element

Unter IOS können wir beispielsweise mit der Pseudo-Klasse :active einen Klick-Effekt erzielen. Aber es funktioniert auch dann, wenn unser Element beim Scrollen der Seite im Fokus ist, was nicht sehr schön ist. Daher habe ich mich entschieden, ein kleines Skript zu schreiben, das einen Klick emuliert und beim Scrollen der Seite abbricht.

var Scroller = falsch; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(clickable); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(clickable); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("aktiv");), 50); ) else ( elem.removeClass("aktiv"); ) ));

Entfernen von Rändern und Hervorhebungen von Links und Schaltflächen

Wahrscheinlich ist jedem Benutzer aufgefallen, dass beim Klicken auf einen Link dieser umrahmt und hervorgehoben wird. Ein solcher Effekt kann die Idee des Designers stark verderben. Hier hilft eine Art Zurücksetzen der Stile (getestet in allen Webkit-Browsern, und dies sind native Browser IOS, Android, BlackBerry).

*( -webkit-text-size-adjust: keine; /*Fehler in IOS mit Skalierung im Querformat beheben*/ Gliederung: keine; /*Rahmen um Links und Schaltflächen entfernen*/ -webkit-touch-callout: keine; /* ggf. Texthervorhebung deaktivieren*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*Hintergrundhervorhebung von Links und Buttons entfernen*/ )

feste Unterstützung

Da sich mobile Technologien jetzt sehr schnell weiterentwickeln und zum Zeitpunkt des Schreibens der Prozentsatz der Browser, die keine Festnetzunterstützung unterstützen, gegen Null tendiert, werde ich nicht zu tief in die Beschreibung eintauchen. Ich sage nur, dass wir für diese Browser iscroll verwenden sollten. Ich werde auch einen kleinen Trick bezüglich der dynamischen Verbindung von Skripten beschreiben (dies wird benötigt, um keine zusätzliche Datei für normale Browser zu verbinden)

// Erkennung alter IOS-Version var OSName = "Unbekanntes Betriebssystem"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

BEI dieses Beispiel Ich habe überprüft, ob es sich um ein Iphone handelt und die Browserversion kleiner als 534 ist (es wird nicht behoben unterstützt). Ich füge das Skript „fixing.js“ dynamisch ein

CSS3

Vergessen Sie auch nicht, dass wir einige css3-Eigenschaften bereits in vollem Umfang nutzen können (vergessen Sie nur nicht die moz-, webkit-, o-Präfixe). Fühlen Sie sich frei, für WP7 pie.htc einzuschließen.

IOS-Desktop-Link

Wahrscheinlich wird es für IOS-Benutzer kein Geheimnis sein, dass Sie in Safari einen Link zu der Site auf dem Desktop platzieren können.
Hier ist ein Beispiel für einen solchen Link zu Forismatic.

Unter HTML-Beispiel Code für das Symbol (IOS selbst skaliert es, fügt Rundungen der Ecken hinzu), eine Ankündigung, dass dieser Link als Anwendung geöffnet werden soll (läuft im Vollbildmodus), sowie ein Code, der die URL-Leiste ausblendet. Auf Wunsch können Sie sogar ein Begrüßungsfenster anzeigen.

- kündigt an, was im Vollbildmodus geöffnet wird, blendet die URL-Leiste aus - Ändern Sie die Farbe der Statusleiste in Schwarz (verfügbare Werte sind Standard, Schwarz, Schwarz-durchscheinend). Ursprünglich - Link zum Symbol, das auf dem Desktop angezeigt wird.

Wir können ein lebendiges Beispiel für all das Obige sehen.