5 Fakten zur Gestaltung einer mobilen Website

Von Judith: 5 Fakten zur Gestaltung einer mobilen Website

Das Internet wird mobil: Mehr und mehr User gehen von mobilen Endgeräten wie Smartphones oder PC-Tablets ins Netz. Die kleineren Bildschirme und Bildauflösungen dieser Geräte stellen an die Webseiten, die auf ihnen dargestellt werden, spezielle Herausforderungen. Lange Ladezeiten, schwierige Bedienung, unübersichtliche Struktur – Seiten mit diesen Mängeln auf Handys & Co. erreichen nur eines: dass die User abspringen, die Seite verlassen – und als Kunde verloren gehen.

In den Webdepartments von wwwe entstehen mobile Webseiten, die kleinen und mittleren Unternehmen einen erstklassigen Auftritt auf mobilen Endgeräten garantieren. Die mobile Website für die deutsche Beachvolleyballer-Nationalmannschaft Ludwig/Walkenhorst, designed by wwwe, wurde kürzlich sogar von der US-amerikanischen „Web Marketing Association“ mit dem „MobileWebAward 2013“ ausgezeichnet, als „Outstanding Mobile Website“.

Lesen Sie hier 5 Fakten von unserem Experten Christian Drescher aus unserem Webdepartment Berlin zu mobilen Webseiten, die das Prädikat „Sehr Gut“ verdienen.

1. „Mobile first“

„Mobile first“ ist das Maß aller Dinge bei Konzeption, Design und Programmierung einer mobilen Website. Das bedeutet, dass man das Webdesign nicht vom großen Desktop-Layout Schritt für Schritt verkleinert, sondern dass man die mobile  Webseiten-Ansicht als Ausgangspunkt nimmt und diese dann schrittweise für größere Bildschirmformate optimiert.  Webdesigner sollten also mit dem Minimum an Information und Funktion für die leistungsschwächsten und kleinsten mobilen Geräte beginnen. Davon ausgehend sollten die Programmierer sie Stück für Stück für die stärkeren und größeren Geräte fit machen.

2. Benutzerfreundlichkeit

Auf  einer mobilen Website erfolgt das Navigieren nicht per Mausklick, sondern per Fingerdruck. Oftmals halten die Nutzer ihr Mobilgerät nur mit einer Hand und benutzen den Daumen zum Navigieren. Möglich machen das bei einer sehr guten mobilen Website klare Designs und eine einfache Nutzerführung – beispielsweise durch gestreckte Buttons, die über die gesamte Breite des kleinen Bildschirms gehen, anstelle von kleinen, unpraktischen Text-Links.

3. Weniger ist mehr

Bevor ein Besucher auf der mobilen Website überhaupt mit dem Surfen beginnen kann, müssen deren Bestandteile erst einmal alle zu sehen sein… Beim Inhalt sollte man den Besucher auf mobilen Websites nicht überfordern. Informationen müssen schnell und einfach verfügbar sein. Zusätzliche Links, die normalerweise in der so genannten „Sidebar“ einer Website stehen, oder überflüssige Animationen können bei mobilen Seiten entfallen.

4. Navigation

Für  die Bedienung einer mobilen Webseite ist eine gut funktionierende Navigation von zentraler Bedeutung. Da vor allem auf Geräten mit kleineren Display-Größen eine Navigation sehr viel Platz einnimmt, ist es wichtig, sich über die Anordnung und Funktion der Navigation für ein mobiles Endgerät ausgiebig Gedanken zu machen. Des Weiteren sollte beachtet werden, dass die mobile Navigation auch mit den Fingern gut bedienbar ist. Es bietet sich also an, dass sie  zunächst außerhalb der sichtbaren Bildschirmfläche platziert und erst auf Knopfdruck aktiviert und sichtbar wird – sozusagen einfliegt.

5. Bilder

Bilder müssen für die mobile Website entsprechend angepasst und von der Größe möglichst klein gehalten werden, da ein großes Bild bei mobilen Endgeräten zu langen Lade-/Wartezeiten führen  kann. Die Variante für den Desktop-PC stellt die Bilder auf großem Bildschirm und schnellem Internet wie gewohnt schnell und gestochen scharf dar.

Autor: Christian Drescher hat die mobile Website des Beachvolleyball-Teams Ludwig/Walkenhorst gestaltet. Als Webdesigner im Berliner Webdepartment von wwwe weiß er, worauf es beim Design von professionellen, individuellen und maßgeschneiderten mobilen Webseiten für mittelständische Unternehmen ankommt.

0 Kommentare

Bis jetzt noch keine Kommentare.

Sag uns Deine Meinung

Folgende HTML-Tags sind erlaubt:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Zum Seitenanfang