Webseiten, die für die Verwendung auf Mobilgeräten optimiert sind, unterscheiden sich von denen, die auf Desktop- und Laptop-Computern angezeigt werden. Letztere sind für große Bildschirme und präzise Mausklicks ausgelegt, während mobile Webseiten für kleinere Bildschirme und unpräzises Fingertippen ausgelegt sind.
- Entwickelt für kleinere Bildschirme und unpräzises Tippen mit den Fingern.
- Entwickelt für große Bildschirme mit präzisem Mausklick.
Angesichts der Tatsache, dass die meisten Website-Besuche von Mobilgeräten stammen, müssen Website-Designer Versionen bereitstellen, die sowohl mit Mobilgeräten als auch mit Desktop-Computern funktionieren. Der gebräuchlichste Ansatz ist die Verwendung von responsivem Webdesign, das automatisch die richtige Version liefert, basierend auf dem Gerät und der Bildschirmgröße des Benutzers, die vom Browser erkannt wird.
In jedem Fall unterscheiden sich für Mobilgeräte optimierte Webseiten in vielerlei Hinsicht von Desktop-Versionen.
Seitendesign: Mobile Bildschirme haben weniger Platz
- Smartphone- und Tablet-Displays haben eine Diagonale von 4 bis 10 Zoll.
-
Klapp- oder erweiterbare Menü-Widgets ersetzen normalerweise Seitenleisten und sperrige Kopfzeilenmenüs.
- Grafiken in voller Breite mit gerichtlicher Verwendung des Abstands zwischen Text.
- Die meisten Desktop-Monitore haben eine Diagonale von 19 Zoll bis 24 Zoll.
- Gesponserte Links und große Werbebanner häufiger.
- Dauerer Text mit mehr Spielraum für Grafiken.
Der offensichtlichste Unterschied zwischen Desktop- und mobilen Webseiten ist die Bildschirmfläche. Während die meisten Desktop-Monitore mindestens 19 Zoll bis 24 Zoll in der Diagonalen messen, sind Tablets in der Regel etwa 10 Zoll groß. Smartphones haben eine Diagonale von etwa 4 Zoll. Durch einfaches Herauszoomen wird eine Webseite nicht erfolgreich in eine für Mobilgeräte optimierte Version konvertiert, da der Text dadurch unlesbar wird und vom Website-Besucher ein zusätzlicher Schritt erforderlich ist. Außerdem wird es unmöglich, genau auf winzige Elemente zu tippen.
Um das Problem zu beheben, können Designer Seitenleisten und Grafiken entfernen, die nicht unbedingt erforderlich sind. Stattdessen verwenden sie kleinere Grafiken, vergrößern die Schriftgröße und reduzieren Inh alte in erweiterbare Widgets. Diese Platzbeschränkung hat unter Webdesignern zu einer ganz anderen Denkweise geführt.
Außerdem ersetzen zusammenklappbare oder erweiterbare Menü-Widgets normalerweise Seitenleisten und sperrige Kopfzeilenmenüs. In ihrem Bestreben, jeden Millimeter Platz auf dem Bildschirm zu nutzen, entfernen Designer überflüssigen weißen Raum und achten dabei sorgfältig auf die Lesbarkeit.
Viele gesponserte Links und große Werbebanner funktionieren einfach nicht auf einem Telefon oder kleinen Tablet. Stattdessen sind kleine Popup-Anzeigen auf mobilen Webseiten häufiger anzutreffen.
Layouts mit Text, der um eine Grafik gewickelt ist, werden auf Mobilgeräten nicht gut wiedergegeben. Stattdessen geben Designer diesen Grafiken oft die volle Breite des Bildschirms und lassen den Text darunter oder darüber laufen. In ähnlicher Weise zerlegt gutes Webdesign Text zur besseren Lesbarkeit in Stücke; Niemand möchte solide Textwände lesen. Dies wird auf kleinen Bildschirmen noch wichtiger. Die vernünftige Verwendung von Leerraum ist entscheidend.
Seitensteuerelemente: Desktop-Präzision vs. mobile Blobs
-
Große Tippbereiche oder Hotspots für eine genauere Navigation.
- Andere URL: Fügt den Buchstaben "m" hinzu. Oft eine Option, um die Desktop-Version einer Website anzuzeigen.
- Anmeldeinformationen haben oft einen eigenen Platz, manchmal mit Fingerabdruckzugriff.
- Präzisere Cursor-basierte Links und Sch altflächen.
Im Gegensatz zu einem präzisen Mauszeiger auf Ihrem Desktop ist der menschliche Finger ein Fleck, und das Tippen erfordert große Ziele auf dem Bildschirm für Hyperlinks. Für Mobilgeräte optimierte Websites bieten große Tippbereiche (oder Hotspots), um eine genaue Navigation zu ermöglichen.
Für Mobilgeräte optimierte Webseiten enth alten häufig auch den Buchstaben m in ihren Adressen; Beispielsweise lautet die mobile Adresse von Facebook m.facebook.com. Die mobile URL wird in der Regel automatisch für Sie gewählt, wenn Sie mit einem mobilen Tablet oder Smartphone surfen. In einigen Fällen sehen Sie einen antippbaren Link, mit dem Sie zur regulären Desktop-Version der Seite wechseln können.
Login- und Passwortfelder, die für Desktops und Laptops gedacht sind, werden auf einem Telefon winzig und unbrauchbar, daher vergrößern Web-Publisher diese und geben ihnen manchmal ihre eigenen Seiten für eine einfachere Verwendung. Die Anmeldung mit einem Fingerabdruck oder einem anderen Konto wie Google oder Facebook wird immer häufiger, da sich Geräte- und Dienstfunktionen weiterentwickeln.
Warum ist das wichtig?
Mobile Webseiten sind für Handheld-Geräte konzipiert und unterscheiden sich stark von Seiten, die für das Lesen auf dem Desktop erstellt wurden. Während Sie normalerweise die Desktop-Version einer Webseite auf einem mobilen Gerät anzeigen können und umgekehrt, sind sie anders gest altet, um das Anzeigen, Lesen und Navigieren von Inh alten zu erleichtern.
