Erinnern Sie sich an das Internet um 1997? Die Seiten wurden für CRT-Monitore mit niedriger Auflösung und langsame Modems entwickelt. Text beherrschte das Web und gelegentlich schmückten JPEG- und GIF-Bilder hier und da Seiten. Meistens haben wir sie nicht gesehen, da das Ausschalten der Bilder eine sichere Möglichkeit war, aus einem DFÜ-Modem etwas mehr Geschwindigkeit herauszuholen. Mehr als ein Jahrzehnt später hat sich die gesamte Internetlandschaft verändert. Breitband-Internet über Kabel- und DSL-Verbindungen ist der Standard in der entwickelten Welt, und Webseiten können komplexere Elemente – jede Menge Bilder, Transparenzeffekte und sogar Videos – zur Bereitstellung von Inhalten verwenden. Wir können sogar ganze Filme aus dem Internet auf unseren Computer streamen, ohne auf den Download der Dateien warten zu müssen!
So groß der Wandel hin zu Monitoren mit höherer Auflösung, Breitbandgeschwindigkeiten und ausgefallenen Grafikoptionen auch war, ein zweiter Trend hatte erhebliche Auswirkungen auf das World Wide Web, wie es heute existiert. Da die Telefontechnologie immer fortschrittlicher und kostengünstiger geworden ist, sind Smartphones zu einem integralen Bestandteil des Interneterlebnisses geworden. Mobile Geräte stellen für Millionen und Abermillionen von Benutzern, die keinen PC besitzen, ein wichtiges Tor zum Internet dar. In Indien beispielsweise stieg die Nutzung des beliebten Webbrowsers Opera Mini zwischen März 2010 und März 2011 um 300 Prozent. In vielen Teilen der Welt befindet sich das Fenster zum Internet nicht auf einem 23-Zoll-Monitor. Es befindet sich auf einem 3-Zoll-Telefonbildschirm. Selbst billige „dumme“ Telefone ohne Touchscreen oder leistungsstarke Hardware können im Internet surfen.
Rufen Sie die mobile Website auf. Da die Popularität der mobilen Internetnutzung mit Hochgeschwindigkeits-Internetdiensten und leistungsfähigerer Computerhardware einhergeht, stehen Entwickler von Online-Inhalten vor einer einzigartigen Herausforderung. Websites, die für große Monitore, schnelle Computer und schnelles Internet konzipiert sind, basieren stark auf Grafiken und modernster Programmierung, die auf kleineren Bildschirmen und langsameren Netzwerken mobiler Geräte nicht immer funktionieren. Die Lösung liegt in mobilen Websites – Seiten, die speziell auf kleinere Geräte zugeschnitten sind und wichtige Inhalte liefern und gleichzeitig auf die Grafiken verzichten, die das Laden der Seite verlangsamen. Obwohl mobile Websites absichtlich einfacher sind als vollständige Websites, bedeutet das nicht, dass sie einfach zu erstellen sind. Mobile Websites erfordern immer noch Aufmerksamkeit für Design und Technologie, und die strengen Einschränkungen mobiler Hardware machen die Sache nicht einfacher.
Warum mobile Websites besondere Designüberlegungen erfordern
Beim Wechsel von einem Desktop-Browser zu einem mobilen Browser geht es nicht nur darum, den Bildschirm zu verkleinern. Es geht darum, den Lärm zu beseitigen. Wenn Sie eine mobile Website entwerfen, machen Sie die Dinge nicht nur kleiner. Sie überdenken, worauf es ankommt.
Desktop-Benutzer erwarten visuelles Flair. Sie verfügen über die Bandbreite und die Pixelanzahl, um damit umzugehen. Mobile Nutzer? Nicht so sehr. Ein Benutzer mit einer 3G-Verbindung in einer ländlichen Gegend wartet nicht darauf, dass ein Heldenbild geladen wird. Sie wollen den Text. Sie wollen die Daten. Wenn Sie einem mobilen Gerät ein Desktop-Erlebnis aufzwingen, sind Sie nicht innovativ. Du bist ein Hindernis.
Dies stellt Entwickler vor ein besonderes Problem. Wie bringen Sie den Bedarf an umfangreichen Inhalten mit der Realität begrenzter Ressourcen in Einklang?
Die wichtigsten Einschränkungen des mobilen Webdesigns:
- Der Platz auf dem Bildschirm ist knapp. Ein 3-Zoll-Bildschirm kann nicht das gleiche Layout wie ein 23-Zoll-Monitor anzeigen. Die Navigation muss intuitiv und nicht überladen sein.
- Die Hardwareleistung variiert stark. Smartphones sind zwar leistungsstärker geworden, es gibt aber immer noch einfache Telefone. Code, der auf einem iPhone reibungslos läuft, kann auf einem Android-Einstiegsgerät oder einem Feature-Phone zum Erliegen kommen.
- Netzwerkinstabilität ist die Norm, nicht die Ausnahme. Im Gegensatz zur stabilen Breitbandverbindung zu Hause schwanken Mobilfunknetze. Schwere Ressourcen verkürzen die Ladezeiten.
Es ist eine Gratwanderung. Sie schneiden zu viel ab und die Seite sieht kaputt aus. Wenn man zu viel behält, fühlt es sich an, als wäre man noch einmal im Jahr 1998.
„Mobile Websites sind bewusst einfacher als vollständige Websites, das heißt aber nicht, dass sie einfach zu erstellen sind.“
Es geht nicht darum
Bildschirmfläche bestimmt das Design
Es kommt auf Quadratzoll an. Oder besser gesagt, das Fehlen davon.
Selbst die größten Smartphone-Bildschirme – solche mit einer Diagonale von mehr als 4 Zoll (10,2 cm) – sehen neben einem Desktop-Monitor wie Briefmarken aus. Die Auflösungszahlen mögen steigen, aber die Physik lügt nicht. Eine hohe Pixelanzahl auf einem winzigen Display kann immer noch keine vollständige Website leserlich darstellen. Am Ende kneifen Sie, um zu zoomen, und kämpfen mit mehrspaltigen Layouts, die die Navigation zu einem Schlag-gegen-Maulwurf-Spiel machen.
Bei gutem mobilen Webdesign geht es nicht darum, eine Desktop-Site zu verkleinern. Es geht darum, mit einspaltigen Layouts von vorne zu beginnen.
Das bedeutet, alles in einem vertikalen Strom zu verdichten. Sie ordnen Navigationslinks neu an. Sie entfernen dekorativen Müll. Sie verkleinern die primäre Spalte, um sie an die tatsächliche Breite des Telefons anzupassen. Die meisten Monitore sind breite Rechtecke. Telefone? Es sind hohe Streifen. Natürlich können Sie das Gerät in den Querformatmodus drehen, aber das Standarderlebnis ist Hochformat. Entwerfen Sie zuerst den schmalen Streifen.
Dann gibt es noch das Problem mit der Eingabemethode.
Desktop-Browser sind auf die Maus angewiesen. Bewegen Sie den Mauszeiger über ein Menü und ein Dropdown-Menü wird angezeigt. Versuchen Sie das mit einem Daumen. Es funktioniert nicht. Mobiles Webdesign erfordert ein Überdenken dieser „Mouseover-Zustände“. Menüs müssen angetippt und nicht mit der Maus bewegt werden. Die Tasten müssen groß genug für einen Finger sein, nicht für einen präzisen Cursor. Wenn Ihre Website auf Hover-Effekten basiert, ist sie auf Mobilgeräten bereits kaputt.
Der Alptraum der Gerätefragmentierung
Das Erstellen für den Desktop ist schon schwer genug. Sie haben Internet Explorer-Anfälle, Firefox macht sein Ding und Chrome frisst den ganzen RAM. Aber mobil? Es ist ein ganz anderes Biest.
Die Hardwarevielfalt ist atemberaubend. Auf der einen Seite gibt es „dumme“ Telefone mit winzigen Bildschirmen mit niedriger Auflösung und einfachen Browsern. Auf der anderen Seite gibt es Smartphones mit gestochen scharfen, hochauflösenden Touch-Displays und leistungsstarken Prozessoren.
Eine Einheitsgröße passt nicht für alle. Manchmal benötigt man separate Schnittstellen.
Schauen Sie sich Facebook an. Es stellt nicht nur jedem den gleichen HTML-Code zur Verfügung. Es erkennt, welches Gerät Sie verwenden. Wenn Sie ein iPhone oder Android verwenden, erhalten Sie ein maßgeschneidertes Erlebnis, das für die jeweilige Bildschirm- und Browserfunktion optimiert ist. Wenn Sie ein Feature-Telefon verwenden, erhalten Sie eine leichtere Version.
Eine mobile Website reicht nicht aus. Sie müssen für das Gerät entwerfen, nicht nur für den Browser.
Diese Erkennungslogik ist die Brücke zwischen dem Benutzer und der richtigen Schnittstelle. Es ist die Technologie, die das Design ermöglicht.
Intelligenter, nicht einfacher
Die Vereinfachung der Benutzeroberfläche bedeutet nicht, dass das Erlebnis abgeschwächt wird. Tatsächlich können Mobilgeräte für bestimmte Aufgaben leistungsfähiger sein als Desktops.
Smartphones verfügen über Hardware, die PCs fehlt. Kameras. GPS. Beschleunigungsmesser.
QR-Codes sind ein perfektes Beispiel. Richten Sie Ihre Kamera auf einen Code und sie startet sofort eine Website oder lädt eine App herunter. Keine Eingabe von URLs. Kein Suchen. Einfach scannen und loslegen.
Karten sind mit GPS-Daten verknüpft, um Ihnen Echtzeitanweisungen oder Restaurantempfehlungen basierend auf Ihrem genauen Standort zu geben. Dies ist nicht nur „eine kleinere Website“. Es ist ein anderes Dienstprogramm.
Die Erstellung einer effizienten mobilen Website erfordert den intelligenten Einsatz dieser Backend-Technologie. Es geht nicht nur um CSS und HTML. Es geht darum, das Gerät selbst zu nutzen. Design und Technologie sind zwei Seiten derselben Medaille. Man kann das eine nicht ohne das andere haben.
Schauen wir uns genauer an, wie diese Erkennung erfolgt. Woher weiß Facebook, dass Sie ein iPhone und kein altes Nokia verwenden?
Bereitstellung des mobilen Erlebnisses: Erkennung, Subdomains und Benutzerauswahl
Sie sehen die klaren Linien und den lesbaren Text. Es sieht einfach aus. Unter der Haube steckt ein Durcheinander cleverer Technik. Modernes Webdesign basiert auf Cascading Style Sheets oder CSS. Dieser Code bestimmt Schriftarten, Farben, Ränder und Seitenbreite. Der Inhalt befindet sich in einer Datenbank oder in HTML-Dateien. CSS entscheidet, wie dieser Inhalt aussieht.
Alle zuvor erwähnten Designänderungen finden hier statt. Um eine mobile Website schnell zu machen, tauschen Sie ein kräftiges Hintergrundbild gegen ein Volltonbild aus. Das spart Bandbreite. Dadurch wird das Laden der Seite beschleunigt.
Der Aufbau der Website ist Schritt eins. Der zweite Schritt besteht darin, die Leute dazu zu bringen, es zu nutzen. Es gibt keinen einzigen richtigen Weg, eine mobile Website bereitzustellen. Es gibt mehrere Möglichkeiten.
Die einfachste Methode ist ein Link. Sie haben es auf die vollständige Website gestellt. Es heißt „Mobile Website anzeigen“. Oft verwenden Entwickler eine Subdomain wie „m.website.com“. Dies ist leicht zu analysieren. „Website.com“ wechselt zur Desktop-Version. „m.website.com“ wechselt zur mobilen Version. Einige Websites verwenden aufgrund des iPhone „i.website.com“. Der Code funktioniert genauso.
Einige Benutzer müssen „m.website.com“ manuell eingeben. Die meisten Websites automatisieren diesen Prozess.
Wie mobile Websites Ihr Gerät erkennen
Andere Techniken sind komplexer. Viele Websites erkennen Ihren Gerätetyp automatisch. Sie entscheiden basierend auf Ihrer Hardware, welche CSS-Datei bereitgestellt werden soll.
Dies geschieht durch Abfrage des Geräts. Der Server überprüft identifizierende Faktoren wie die Bildschirmbreite in Pixel. Es liest die Benutzeragentenzeichenfolge. Diese Zeichenfolge gibt an, welcher Browser die Seite lädt.
Medienabfragen sind Zeilen CSS-Code. Sie verweisen auf die Benutzeragentenzeichenfolge. Sie greifen bestimmte Erkennungsfaktoren heraus. Wenn sich der Benutzeragent als mobiler Browser mit schmalem Bildschirm identifiziert, lädt der Server die mobile Seite.
Diese Methode weist Mängel auf. In einigen Browsern können Sie den Benutzeragenten fälschen. Neue Browser veröffentlichen ständig neue Zeichenfolgen. Server senden im Allgemeinen die richtige Site an das richtige Gerät. Aber es ist nicht perfekt.
Dieses Identifikationssystem knüpft an eine weitere Option an. Geben Sie dem Benutzer eine Wahl. Navigieren Sie auf einem Telefon zu IMDB.com. Die mobile Website wird automatisch geladen. Außerdem werden Sie aufgefordert, eine mobile App herunterzuladen. Die App bietet weitere Funktionen.
Vor- und Nachteile mobiler Browser
Mobile Websites funktionieren in der Regel besser als vollständige Websites auf Smartphones. Sie sind maßgeschneidert für kleine Bildschirme. „Einheitsgröße“ funktioniert selten.
Aber „besser“ ist relativ. Mobile Websites bieten ein begrenztes Erlebnis. Sie berücksichtigen Geräteeinschränkungen. Die Navigation verschwindet oft. Es ist nicht genügend Platz auf dem Bildschirm vorhanden, um die Menüs jederzeit sichtbar zu halten.
Die Interaktion mit einer Website ist der schwierigste Teil des mobilen Surfens. Das Scrollen durch ein Eingabeformular nimmt Zeit in Anspruch. Das Auswählen von Feldern ist mühsam. Das Tippen auf einem Telefon ist langsamer als auf einem Computer. Touchscreens und Softwaretastaturen verschlimmern die Situation.
Telefonbrowser können Cookies speichern. Sie merken sich Passwörter wie Desktop-Browser. Das hilft. Browser mit Desktop-Äquivalenten wie Firefox für Android und Opera Mobile können Daten synchronisieren. Sie übernehmen Ihre gespeicherten Daten von Ihrem Computer. Dies vereinfacht das Surfen auf beiden Plattformen.
Telefone haben auch Tricks. Durch Pinch-to-Zoom wird der Text vergrößert. Durch Tippen zum Zoomen wird ein Absatz an die Bildschirmbreite angepasst.
Warum Flash-Video auf Mobilgeräten fehlschlägt
Flash-Videos finden Eingang in jede Diskussion über mobiles Surfen. Es stellt hohe Anforderungen an die Prozessoren. Dadurch wird die Akkulaufzeit verkürzt. Es hat sich im Laufe der Jahre verbessert. Es funktioniert auf vielen Geräten.
Es funktioniert auf keinem Apple-Gerät.
Apple blockiert Flash-Videos auf iOS. Stattdessen unterstützen sie HTML5-Videos. YouTube verwendet HTML5-Videos. Viele andere Websites tun dies auch.
Sie können Flash-Videos in mobile Webseiten einbetten. Es verstößt gegen die Prinzipien des mobilen Designs. Einfachheit ist die größte Stärke mobiler Websites. Sie laden schnell, da sie Text und kleine Bilder verwenden. Flash macht das kaputt.
Durch die Integration von Flash auf Ihrer Website werden iPhone-Nutzer eingeschränkt. Sie können nicht mit der Seite interagieren. Sie verlieren einen großen Teil Ihres Publikums.
Mobiles Einkaufen: Ist es tatsächlich sicherer als Desktop?
Hier ist eine Wendung. Ihr Telefon ist möglicherweise der sicherere Ort, um Ihre Kreditkarte aufzubewahren.
Die meisten Webviren zielen auf Windows ab. Sie laufen nicht auf iOS oder Android. Sie sind für eine große Schadsoftware praktisch unsichtbar, einfach weil Sie sich nicht an einem PC befinden. Moderne Telefone unterstützen HTTPS- und SSL-Verschlüsselung genau wie Ihr Laptop.
Aber werde nicht übermütig.
Sie müssen weiterhin auf die URL-Leiste achten. Suchen Sie nach dem Schlosssymbol. Bleiben Sie bei seriösen Websites. Wenn eine Website auf einem Desktop lückenhaft aussieht, sieht sie auf einem Telefon lückenhaft aus. Nur kleiner. Die Bedrohungslandschaft ändert sich, aber das Prinzip bleibt bestehen. Vorsichtig ist besser als Nachsicht.
Mobiles Seitendesign erklärt
Was ist überhaupt ein mobiles Seitendesign?
Es ist nicht nur eine verkleinerte Website. Es handelt sich um eine spezielle Optimierung für Touchscreens und schmale Ansichtsfenster. Denken Sie kleiner. Einfacher. Keine Unordnung.
Desktop-Sites sind auf Mausbewegungen und präzise Klicks angewiesen. Mobile verlässt sich auf Daumen. Das verändert alles. Knöpfe werden größer. Menüs werden ausgeblendet. Inhalte werden priorisiert. Wenn Sie versuchen, einen dichten Absatz auf einem 6-Zoll-Bildschirm zu lesen, kämpfen Sie gegen das Gerät. Gutes mobiles Design beendet diesen Kampf, bevor er beginnt.
Mobile Websites vs. traditionelle Websites
Die Leute verwechseln diese Begriffe ständig. Trennen wir sie.
Eine Standard-Website wird für Desktops erstellt. Tastaturen. Mäuse. Große Monitore. Es setzt voraus, dass Sie über Bandbreite und Geduld verfügen.
Eine mobile Website wurde für Smartphones und Tablets erstellt. Es entfernt das Fett. Funktionen, die auf Touchscreens nicht funktionieren, werden gestrichen. Bilder werden komprimiert. Skripte werden leichter.
Der Unterschied ist wichtig.
Warum? Weil mobile Websites schneller laden. Sie verbrauchen weniger Daten. Dies ist nicht nur eine Annehmlichkeit für Apple-Benutzer in Manhattan. Es ist eine Notwendigkeit für Menschen in Entwicklungsländern, in denen Hochgeschwindigkeitsinternet ein Luxus und kein Nutzen ist. Wenn Ihre Website umfangreich ist, kann sie nicht geladen werden. Zeitraum.
Warum mobiles Design wichtig ist
Es kommt auf die Reibung an.
Das Surfen auf dem Desktop ist effizient. Mobiles Surfen ist bequem. Sie haben das Internet in Ihrer Tasche. Aber das Tippen auf einem Glasbildschirm ist mühsam.
Gutes mobiles Design lässt diese Langeweile verschwinden. Es respektiert Ihre Zeit. Es respektiert Ihren Datentarif. Es berücksichtigt die Tatsache, dass Sie wahrscheinlich gehen, während Sie es benutzen.
Auch hier funktioniert Werbung. Aber riesige Pop-ups? Nein. Diese werden von den meisten mobilen Browsern ohnehin verboten. Google AdSense ist genau das Richtige. Klein. Nicht aufdringlich. Relevant.
Das mobile Web ist keine geringere Version des Desktop-Webs. Es ist ein anderes Tier. Behandle es so.
