Das Design mobiler Websites ist kompliziert, da eine mobile Version einer Website möglicherweise nicht mit jedem Gerät kompatibel ist. Die Designer müssen sich der besten Designpraktiken bewusst sein, um Ihren mobilen Auftritt sinnvoll und lohnenswert zu machen.
Unter Web-Entwicklern wird ständig darüber diskutiert, welche Art der Erstellung einer für Mobilgeräte optimierten Website die beste ist. Es gibt drei führende Methoden zur Entwicklung einer mobilen Website.
Diese sind:
- Sich anpassendes Webdesign.
- Spezielle mobile Websites.
- RESS: Server-seitige Programmierung gibt je nach Gerätetyp CSS und HTML aus.
Jede Methode hat ihre Vor- und Nachteile. Ein Webentwickler muss sich jeder Technik bewusst sein, um die beste für die jeweilige Situation zu implementieren.
3 Möglichkeiten zur Gestaltung einer mobilen Website
Responsive Web Design (RWD)
RWD verwendet CSS3-Medienabfragen, um das Layout einer Webseite an die Größe des Anzeigebereichs eines Geräts anzupassen. Derselbe HTML-Code wird verwendet, um verschiedene Webseitenlayouts für Tablets, Mobilgeräte, Desktops und andere Gadgets darzustellen.
Leistungen:
- Ihre Website wird über ähnliche Inhalte und HTML-Markierungen verfügen, sodass mobile Besucher unabhängig vom verwendeten Gerät dieselbe Erfahrung machen können.
- Eine einzige URL erleichtert Benutzern das Verknüpfen und Teilen von Inhalten. (Wenn die Webseite unter mehr als einer URL-Adresse verfügbar ist, können Benutzer verwirrt werden.)
Nachteile:
Es ist nicht möglich, mobile Inhalte separat zu optimieren. Daher kann ein Designer, der RWD verwendet, den Inhalt nicht separat für mobile Benutzer anpassen.
Laut Daten aus dem HTTP-Archiv vom Januar 2013 beträgt eine durchschnittliche Webseite etwa 1,3 MB. Die meisten RWD-Standorte sind jedoch vergleichsweise größer. Diese größere Größe verringert die Leistung mobiler Websites und macht sie langsamer.
Benutzer von Mobiltelefonen sind stärker auf mobile Design-Muster für Benutzeroberflächen eingestellt. Darüber hinaus sind mobile Benutzer an das Multitasking gewöhnt. Wenn die Navigationsstruktur nicht für bestimmte Geräte angepasst wird, können Benutzer Probleme beim gleichzeitigen Ausführen mehrerer Aufgaben haben.
Dedizierte mobile Websites
Diese Methode verbessert die Benutzerfreundlichkeit mobiler Benutzer, indem eine völlig separate Website erstellt wird.
Leistungen:
- Einfache Verwaltung: Für mobile und Desktop-Sites sind separate Änderungen erforderlich. Die vorgenommenen Änderungen sind auf die jeweilige Version beschränkt. Dies bedeutet, dass auf Änderungen für die mobile Plattform nicht vom Desktop aus zugegriffen werden kann.
- Wenn Sie eine für Handys spezifische Website entwickeln, wird es einfacher, sie speziell für dieses Publikum zu rationalisieren und zu optimieren.
- Inhalt und Navigationsstruktur können für mobile Benutzer angepasst werden.
Nachteile:
Das Teilen einer Webseite über soziale Medien wird schwieriger, da es bei dedizierten mobilen Websites mehrere URLs für Seiten gibt. Wenn Desktopbenutzer auf mobile URLs klicken, die auf Social-Media-Plattformen freigegeben sind, erhalten sie möglicherweise versehentlich die mobile Version der Website und nicht die Desktopversion.
Um doppelte Inhaltsprobleme zu vermeiden, muss der Webentwickler die Metatags rel = "alternative" und rel = "canonical" verwenden. Wenn ein mobiler Nutzer Google sucht und auf eine Desktop-URL klickt, kann er entweder die Desktop-Version anzeigen oder zur mobilen Version der Webseite umgeleitet werden. Wenn die mobile Version nicht vorhanden ist, wird dem Benutzer eine Fehlermeldung angezeigt.
Das Erstellen einer völlig anderen Website für mobile Benutzer bedeutet, dass die Website speziell für mobile Benutzer angepasst wird. Um diesen Zweck zu erfüllen, müssen Webentwickler jedoch Funktionalität und Inhalt ausschneiden, was für sie ein Alptraum ist.
Sich anpassendes Webdesign+ Serverseitige Komponenten (RESS)
Diese Methode hängt von der serverseitigen Programmierung ab, um benutzerdefiniertes HTML und CSS für verschiedene Geräte bereitzustellen. Der Code für mobile Benutzer unterscheidet sich von dem für Desktop-Benutzer.
Das Hauptziel dieser Implementierung ist die Verbesserung der Leistung der Website. Diese Methode funktioniert gut, wenn sie mit responsivem Webdesign kombiniert wird. Daher kann diese Implementierung als Responsive Web Design + serverseitige Komponenten (RESS) bezeichnet werden.
Leistungen:
- Die Navigationsstruktur kann für verschiedene Aufgaben angepasst werden, die von Desktop- und mobilen Benutzern ausgeführt werden.
- Entwickler können Seitenelemente aus HTML und CSS entfernen, um die gewünschte Anzeige zu erzielen.
- Es ist möglich, unnötiges JavaScript aus HTML zu entfernen, wodurch die CPU-Ressourcen, der Arbeitsspeicher und der Cache mobiler Geräte freigegeben werden.
Nachteile:
- Dynamisches HTML erhöht die Belastung des Servers.
- Die Geräteerkennung kann nicht verlässlich sein.
- HTML und CSS sind für die mobile Leistung optimiert. Die Desktopversion verwendet mehr HTTP-Anforderungen und Java-Skripts.
Welche Methode soll man wählen?
Die Entscheidung, eine für Mobilgeräte optimierte Website zu entwerfen, hängt von den von Ihnen verkauften Produkten, Ihrer Zielgruppe, den erforderlichen Investitionen, Ihrer Konkurrenz, den Conversion-Raten usw. ab Auflösungen.
Die meisten responsiven Webdesign-Websites werden nicht optimal implementiert. Daher dauert das Laden dieser Websites länger. Da der Wettbewerb hart ist, können Sie Kunden verlieren, wenn Ihre Website langsamer arbeitet. Ein Benutzer wechselt einfach zu einer anderen Website, deren Öffnung weniger Zeit in Anspruch nimmt. Es ist zwar möglich, Websites mit kürzeren Ladezeiten mit dedizierten mobilen Websites zu erstellen, aber auch diese Implementierung hat verschiedene Nachteile.
RESS bietet die Vorteile von RWD, die zwei Hauptnachteile überwinden. Der Hauptnachteil von RESS ist, dass die Geräteerkennung unzuverlässig ist. Sie müssen häufig auf neue Geräte testen, um sicherzustellen, dass der Prozess weiterhin ordnungsgemäß funktioniert.
Es gibt Dienste wie DeviceAtlas, WURFL und andere, die neue Geräte erkennen können. Es wird eine große Hilfe sein, um neue Geräte in Ihrer Datenbank zu aktualisieren.
Mobiles Webdesign ist nur dann erfolgreich, wenn eine Website ordnungsgemäß auf einem mobilen Gerät angezeigt wird. Obwohl es eine gewaltige Aufgabe für Designer ist, alle wichtigen Teile einer Desktop-Site in einem kleinen, mobilen Fenster darzustellen, werden täglich neue Techniken entwickelt, um mobile Websites besser, schneller und umfassender zu machen.
Mobile Website Foto über Shutterstock
15 Kommentare ▼
