Obwohl die Zahl der Websites ohne mobile Optimierung schrumpft, gibt es immer noch einige, die nur für Desktops konzipiert sind. Leider wurde der bisherige Webdienst "Mobilizer" von Google eingestellt. Der geistige Nachfolger des Dienstes ist Google Weblight, das auf die Optimierung für langsame Verbindungen ausgelegt ist, anstatt Websites für die mobile Anzeige zu überarbeiten. Über den Dienst von Google hinaus gibt es eine Reihe von Praktiken und Tools, die bei der Entwicklung einer Website für Mobilgeräte berücksichtigt werden sollten.
Schritte
Teil 1 von 2: Experimentieren mit Google Weblight
Schritt 1. Analysieren Sie, wie Weblight funktioniert
Weblight ist ein von Google entwickelter Algorithmus, um Benutzern bei schlechten Netzwerkbedingungen schnellere und leichtere Seitenladevorgänge zu ermöglichen. Das bedeutet, dass Weblight keine Benutzeroberfläche hat und im Backend arbeitet. Seiten werden von ihren komplexeren Elementen befreit, was ein reduziertes, leichtes Erlebnis bietet, anstatt explizit für die mobile Plattform optimiert zu sein.
Schritt 2. Site-Änderungen mit Weblight testen
Hängen Sie auf Ihrem Mobilgerät einfach Ihre vollständige Website-URL an das Ende der Weblight-Adresse an (wenn Ihre Website beispielsweise "mywebsite.com" ist, geben Sie https://googleweblight.com/?lite_url=https://mywebsite.com. ein). Die Seite lädt eine vereinfachte, aber funktionale Version von sich selbst. Mit den entfernten Elementen können einige Websites auf den Bildschirmen von Mobilgeräten viel besser angezeigt werden.
Schritt 3. Erkennen Sie die Einschränkungen
Beachten Sie, dass dies kein explizites Konverter-Tool ist, das für Benutzerinteraktionen entwickelt wurde. Während die manuelle Eingabe der Website zur Not verwendet werden kann, ist Weblight auf Geschwindigkeit und nicht auf Benutzerfreundlichkeit ausgelegt.
Teil 2 von 2: Design für mobile Kompatibilität
Schritt 1. Beachten Sie die Einschränkungen des Mobilgeräts
Mobile Geräte haben einige Aspekte gemeinsam, die sie von ihren Desktop-Pendants unterscheiden. Diese Kernfunktionen sollten bei der Erstellung einer Website für die mobile Nutzung im Vordergrund stehen.
- Kleine Bildschirme und Vertikalität: Obwohl die Bildschirmauflösungen auf mobilen Geräten ständig verbessert werden, bleiben Größe und Formfaktor ein Problem für das Website-Design. Das Entwerfen einer Site in einem einspaltigen Layout ist am besten für Telefone geeignet (Tablets können häufig Desktop-Sites ohne allzu große Probleme verwenden).
- Touch-Oberflächen: Seitenelemente sollten in Fingergröße platziert werden. Elemente, die Mouseover verwenden, sollten minimiert oder für die Berührung neu gestaltet werden (z. B. Dropdown-Menüs).
- Datengeschwindigkeiten: Einer der großen Vorteile mobiler Geräte ist die Nutzung außerhalb der WLAN-Reichweite, aber Datenverbindungen sind in der Regel langsamer und weniger zuverlässig. Benutzeroberflächen (UI) sollten einfach bleiben und Inhalte sollten sichtbar und zugänglich sein. Zu viel Unordnung wird die Ladezeiten verlangsamen und die Navigation erschweren.
Schritt 2. Verwenden Sie einen Content Management System (CMS)-Dienst
Für diejenigen, die mit weniger Ressourcen entwickeln, ist die Verwendung eines CMS-Dienstes wie Wordpress oder Squarespace eine großartige Option für ein kostengünstiges, benutzerfreundliches mobiles Design. Themes, die Responsive Webdesign verwenden, bieten die einfachste Vorlage für eine mobile Website.
Responsive Webdesign ist eine Theorie des Webdesigns, die die Verwendung flüssiger Designelemente fördert, um reibungslose Übergänge von Design und Benutzerfreundlichkeit über Plattformen hinweg zu ermöglichen
Schritt 3. Testen Sie die Bildschirme von Mobilgeräten mit der Desktop-Software
Es gibt eine Reihe kostenloser Webanwendungen, mit denen Sie mobile Geräte emulieren können, um die Ästhetik und Funktionalität der Website zu testen. Die Verwendung dieser Tools ist so einfach wie die Auswahl des gewünschten Testgeräts und das anschließende Aufrufen der Zielwebsite zur Vorschau. Die meisten enthalten Tools für Variablen wie Bildschirmausrichtung, Pixeldichte oder sogar Browserauswahl. Einige beliebte Beispiele sind:
- Emulator für den Chrome-Gerätemodus
- handyemulator.com
- screenfly (eine Untermenge von Quirktools)
- mobiletest.me (kostenpflichtige Mitgliedschaft)
