Im letzten Jahr stieg die mobile Internetnutzung weltweit um 148%. In der nahen Zukunft wird die Zahl der smarthpones immer allgegenwärtiger werden. Als Entwickler ist es jetzt an der Zeit, ernsthaft zu überlegen, ob Sie Ihr mobiles Publikum ansprechen sollten.
Heute möchten wir Ihnen einige Möglichkeiten aufzeigen, wie Sie Ihre Website für mobile Geräte etwas freundlicher gestalten können.
Analysieren Sie Ihr Publikum
Bevor Sie sich mit der Verbesserung Ihrer Website aus der mobilen Perspektive beschäftigen, sollten Sie herausfinden, wie viel von Ihrem Datenverkehr tatsächlich von mobilen Geräten kommt. Wenn Sie Google Analytics oder ähnliches verwenden, werfen Sie einen kurzen Blick auf den Zusammenbruch des Browsers, um sich mit dieser Nummer vertraut zu machen. Dann können Sie eine fundierte Entscheidung darüber treffen, wie weit Sie mit Ihrer mobilen Unterkunft gehen möchten.
Dabei ist zu beachten, dass diese Zahl unter Umständen auf den derzeit schlechten Zustand Ihrer Website auf mobilen Geräten zurückzuführen ist, wenn diese Zahl extrem niedrig ist. Treffen Sie eine Entscheidung, ob Sie einfach die Erfahrung Ihrer aktuellen mobilen Benutzer verbessern möchten oder aktiv mehr mobile Benutzer suchen möchten, indem Sie eine dedizierte mobile Website, Web-App oder iPhone-App starten.
Erstellen Sie mobile Stylesheets
Einer der größten Schritte, die Sie zur Mobilisierung Ihrer Website unternehmen können, ist die Erstellung von benutzerdefiniertem CSS für mobile Geräte. Dies kann eine viel kleinere Aufgabe sein, als Sie sich vorstellen können, wenn Sie das Gesamtbild der Website beibehalten möchten. Sehen wir uns an, wie Sie Ihr mobiles CSS so richten können, dass es nur auf mobilen Geräten geladen wird.
Medientypen
Wenn Sie unterschiedliche Medientypdeklarationen verwenden, können Sie für bestimmte Verwendungszwecke unterschiedliche Stylesheets zuweisen. Die meisten Desktop-Browser erkennen? Viele mobile Geräte verwenden den? Handheld? Befehl. Schauen Sie sich das folgende Beispiel an:
Mit dieser einfachen Deklaration können Sie Erstellen Sie eine Handheld.css-Datei, die nur auf Handheld-Geräten aktiviert wird (zumindest die, die das Styling ermöglichen). Dies funktioniert natürlich nicht auf jedem Gerät, wird aber ordentlich ausfallen. Einige Entwickler gehen sogar so weit, diese Methode mit einem leeren Stylesheet zu verwenden, um alles zurückzusetzen und es für das mobile Betrachten zu vereinfachen.
Verwenden Sie Fluid Layouts
Leider ist es nicht leicht herauszufinden, wie Ihr Layout auf allen mobilen Browsern aussehen wird, da es zu viele Geräte gibt, um sie alle nachverfolgen zu können. Sie können dieses Problem umgehen, indem Sie Layouts verwenden, die sich automatisch an die Bildschirmgröße anpassen.
Eine Möglichkeit, dies zu erreichen, ist zu Vermeiden Sie die Einstellung der Breite in Pixel und stattdessen nach Prozentsätzen oder Ems suchen. Zum Beispiel statt
einfach verwenden
Laden Sie den folgenden Artikel herunter, um einige vorgefertigte flüssige mobile Layouts herunterzuladen:
Perfekte mehrspaltige CSS-Flüssigkeitslayouts - iPhone-kompatibel
Unnötigen Inhalt ausblenden
Wenn Ihre Website viele kleine Fußzeilen-Links oder überfüllte Werbeflächen enthält, empfiehlt es sich, diesen Inhalt in der mobilen Version abzugrenzen. Beachten Sie, dass die kleine Bildschirmgröße mobiler Browser nicht ideal ist, um auf kleine Objekte zu klicken oder auf großen, inhaltsgefüllten Seiten zu blättern. Versuchen Sie, Ihre Inhalte zu kürzen, um das Durchsuchen in einem einspaltigen Format zu erleichtern mit großen, anklickbaren Bereichen und klar definierten Kopfzeilen.
Fügen Sie das folgende CSS für jedes Element ein, das Sie ausblenden möchten:
Bilder richtig dimensionieren
Große Bilder werden möglicherweise in mobilen Browsern nicht richtig angezeigt, und Sie können darauf wetten, dass sie eine mobile Website wirklich schlecht machen. Es empfiehlt sich, sie auf dem Server zu verkleinern oder mit dem Befehl max width CSS zu verwenden. Denken Sie jedoch daran, dass Letzteres etwas Prozessorintensiver ist und einige Zeit zum Laden benötigen kann.
Sicherzustellen, dass Bilder nicht zu groß sind, ist nicht das einzige Problem. Wie im vorherigen Tipp angegeben, müssen auch anklickbare Bereiche neu gedacht werden. Viele mobile Geräte verwenden einen Finger als primäres Eingabegerät, das erheblich weniger genau ist als Maus und Zeiger. Aus diesem Grund müssen Bilder, die als Schaltflächen oder Verknüpfungen dienen, berücksichtigt und gegebenenfalls angepasst werden, um sicherzustellen, dass sie mit einem Punkt und einem Berührungspunkt anstelle eines Punkts und Klickens ausgewählt werden können. Unsicher, wie groß ein Button sein soll? Sehen Sie sich die Größe Ihrer eigenen Fingerspitze als Indikator dafür an, ob ein Bild auf einem mobilen Gerät problemlos ausgewählt werden kann.
Interaktivität
Das Hinzufügen einiger interaktiver Elemente zu einer Site macht es manchmal viel angenehmer und weniger statisch / langweilig. Reduzieren Sie auf der für Mobilgeräte optimierten Version Ihrer Website jedoch die Interaktivität auf ein Minimum (es sei denn, Sie erstellen natürlich ein Spiel oder ähnliches). Auf mobilen Geräten kann die Interaktion leicht schiefgehen und Ihre Benutzer werden mit all ihrer Arbeit frustriert. Suchen Sie nach Stellen, an denen Sie die Eingaben, die Sie von Benutzern benötigen, einschränken können, insbesondere im Bereich der Texteingabe, da die Verwendung winziger Tastaturen zu den schlimmsten Teilen des mobilen Web-Erlebnisses gehören kann.
iPhone-spezifische Techniken
Viele von Ihnen kamen zu diesem Artikel und suchten nicht so sehr nach Informationen im mobilen Web im Allgemeinen, aber in der Hoffnung, dass Sie einige gute Tipps zur Optimierung des iPhone finden. Ich möchte nicht enttäuschen, daher sind hier einige Dinge aufgeführt, die Sie dem König der mobilen Web-Clients bieten können.
Hinzufügen eines Startbildschirmsymbols
iPhone und iPod Touches verfügen über eine integrierte Funktion, mit der Benutzer Ihre Website als Symbol auf dem Startbildschirm hinzufügen können. Sie können dieses Symbol einfach anpassen, indem Sie eine Datei in Ihrem Stammverzeichnis mit dem Titel? Apple-touch-icon.png? (Stellen Sie sicher, dass das Bild mindestens 57 bis 57 beträgt). Alternativ können Sie den folgenden Code in Ihren HTML-Code einfügen:
Selbstverständlich passen Sie den Dateipfad und den Namen für Ihr eigenes Bild an.
Ansichtsfenster: Standardzoom
Ihre Website verfügt möglicherweise über einen integrierten weißen Bereich, der auf einem Desktop gut aussieht. Dies bedeutet jedoch einen zusätzlichen Zoom für iPhone-Benutzer, die diesen weißen Bereich nicht sehen möchten, weil dadurch die Lesbarkeit und Größe des Hauptinhalts eingeschränkt wird. Verwenden Sie das folgende Snippet, um die Breite Ihres Inhalts automatisch zu vergrößern.
Die Breite = 320; bestimmt die Vergrößerungsstufe des Inhalts. Stellen Sie diese Zahl auf den für Ihren Inhalt geeigneten Wert ein (320 Pixel ist die Breite des iPhone-Bildschirms in vertikaler Ausrichtung).
iPhone-spezifisches Stylesheet
Wenn Sie CSS erstellen möchten, das nur für Ihre iPhone-Benutzer gilt, verwenden Sie den folgenden Code:
Dies betrifft nur Geräte mit einer maximalen Bildschirmbreite von 480 Pixel, nämlich iPhones und iPod Touches.
Mobile Site Builders
Es gibt einige Websites, die Ihnen dabei helfen, eine mobile Website zu erstellen, die wenig oder gar keine Kenntnisse in HTML und CSS hat. Meines Erachtens ist Mobify das vielversprechendste, aber ich habe auch ein paar Alternativen eingebracht. Wenn Sie eine dieser Optionen (oder andere) ausprobiert haben, teilen Sie uns die Vor- und Nachteile und Ihren Gesamteindruck mit.
Mobify
Mofuse
Wirenode
bMobilisiert
Zinadoo
Lesen Sie weiter
In diesen anderen großartigen Artikeln erfahren Sie, wie Sie mobile optimierte Websites erstellen. Jeder von ihnen hat mir bei meiner Recherche geholfen und enthält viele zusätzliche Informationen.
- So gestalten Sie Ihre Website mobil
- Das 5-minütige CSS Mobile Makeover
- Machen Sie Ihre Website mobil und iPhone freundlich
- 7 Tipps, um Ihre Website mobil zu machen
- 6 Tipps zur Optimierung Ihrer Website für das iPhone
- Mit CSS eine Website iPhone-freundlich gestalten
- Grundsätze und Richtlinien für die Erstellung großartiger iPhone-Inhalte
Fazit
Die Tipps oben zeigen nur einige Möglichkeiten, wie Sie das wachsende Segment der mobilen Webbenutzer ansprechen können. Verwenden Sie die Kommentare unten und teilen Sie Ihre Tipps für die mobile Optimierung. Ich möchte auch von Ihnen lernen!