Das Design mobiler Websites schlägt fehl und wie man sie vermeidet

"Mobile first" ist ein gebräuchlicher Begriff, der von Website-Experten eingeführt wird. Aber was bedeutet das wirklich? Im Wesentlichen ist dies der Fall, wenn Sie eine Website (oder Software) entwerfen, bei der das mobile Erlebnis im Vordergrund steht und nicht ein Desktop-Computer. Die Zahl der Menschen, die auf ihren Mobilgeräten im Internet surfen, hat in den letzten Jahren erheblich zugenommen und wird voraussichtlich weiter zunehmen. Aus diesem Grund ist eine schöne Website auf Mobilgeräten so wichtig, um potenzielle Besucher anzulocken und Ihre Absprungrate auf Mobilgeräten zu minimieren.

Einige Leute gehen davon aus, dass ihre Website auf dem Desktop großartig aussieht, sodass sie wie eine coole Mini-Version für mobile Geräte aussieht, aber dies ist nicht unbedingt der Fall. Und wenn ein Großteil Ihres Website-Verkehrs von mobilen Seitenaufrufen stammt (Sie können dies in Ihren Statistiken überprüfen), sollten Sie Ihre Website auf jeden Fall für mobile Geräte optimieren.

Deshalb haben wir einige häufig auftretende Probleme beim Design mobiler Websites zusammengestellt und wie Sie diese vermeiden können! Lesen Sie auch unser schrittweises Tutorial zum Erstellen einer für mobile Geräte optimierten Website.

Sie haben Ihre Website wahrscheinlich vor einigen Jahren erstellt und jetzt sieht sie endlich so aus, wie Sie es möchten (auf Ihrem Desktop). Wenn Sie Ihre Vorlage lange nicht mehr geändert haben, verwenden Sie wahrscheinlich immer noch eine unserer älteren Vorlagen. Ältere Vorlagen haben einen Code anstelle eines Städtenamens (z. B. F4242), sind "mobilfreundlich", sehen aber nicht so gut aus wie moderne "reaktionsfähige" Vorlagen (benannt nach einer Stadt).

Wie ist die Reaktionsfähigkeit besser? Ihre Website "reagiert" automatisch auf die Größe des Geräts, das Ihr Besucher verwendet. Die Auflösung, Bilder und das Menü sehen perfekt aus, wenn Sie ein Tablet, einen Desktop oder ein Smartphone verwenden. Es ist auch besser für Ihre SEO, da Google Sie leichter finden kann.

Vielleicht hatten Sie noch keine Gelegenheit, Ihre Website auf einem Mobil- / Tablet-Gerät zu überprüfen? Oder können Sie sich nicht die Mühe machen, Ihre Vorlage zu aktualisieren und Ihre gesamte Website zu überarbeiten? Wir verstehen voll und ganz, woher Sie kommen. Aber werfen Sie einen Blick auf all die Menschen in Ihrer Umgebung, die mit öffentlichen Verkehrsmitteln auf ihren Handys surfen. Sie alle sind potenzielle Besucher, die Sie eine Woche lang jeden Tag für diese zusätzliche Arbeitsstunde bekommen könnten.

Ein Beispiel für eine Vorlage, die nicht reagiert. Das Kontaktformular verlässt die Seite.

Die neue reaktionsschnelle Innensohle sieht perfekt aus.

Lösung: Um Ihre aktuelle Vorlage anzuzeigen, öffnen Sie Ihr Menü und wählen Sie Design> Main> Vorlagen. Ihre aktuelle Vorlage wird in der oberen linken Ecke angezeigt. Stellen Sie sicher, dass Ihre Jimdo-Vorlage der Name einer Stadt ist (z. B. Stockholm). Wenn nicht, antworten Sie nicht und wir empfehlen Ändern des Designs Ihrer Vorlage zu etwas Modernerem. Du kannst Verwenden Sie dieses Tool um zu überprüfen, wie Ihre Website auf jedem Gerät angezeigt wird!

Durchsuchen Sie Ihre Website auf einem mobilen Gerät und zählen Sie, wie lange das Laden von "1-2-3 …" dauert. Wenn es 3 Sekunden oder länger gedauert hat, sollten Sie Ihre Seite durchgehen und herausfinden, was Sie verlangsamt. Die Hauptverdächtigen sind in der Regel zusätzliche Videos, Animationen oder Plugins. Überlegen Sie, ob diese wirklich einen Mehrwert für Ihre Website darstellen und ob es sich lohnt, die Ladezeit der Seite zu verlängern (ganz zu schweigen vom Verbrauch mobiler Daten!). Google bietet auf seiner Website eine kostenlose und einfache Möglichkeit, viele mobile Probleme zu diagnostizieren. Geben Sie einfach Ihre Website-URL ein und Sie erhalten einige Verbesserungsvorschläge für Ihre mobile Website.

Beachten Sie, dass Social-Sharing-Widgets oder Schaltflächen, die auf externen JavaScripts basieren, die Ladezeit verkürzen. Priorisieren Sie also 2-4 Social-Media-Kanäle oder verwenden Sie die integrierten Freigabetasten von Jimdo, um die Ladezeit zu verkürzen.

Es empfiehlt sich, die Bilder auf Ihrer Website zu optimieren. Dies bedeutet, bei Bedarf die Größe eines Bildes zu ändern und die Dateigröße zu verringern. Es gibt viele Tools, mit denen Sie ein Bild komprimieren können, ohne an Qualität zu verlieren. Selbst eine geringfügige Reduzierung der Dateigröße auf einer Seite mit einem großen Bild oder Hintergrundbild kann spürbare Auswirkungen haben. Denken Sie daran, dass Google die Ladezeiten von Seiten als SEO-Faktor verwendet. Dies kann sich negativ auf Ihr Ranking auswirken, wenn das Laden Ihrer Seite einige Zeit in Anspruch nimmt.

Lösung: Überprüfen Sie, wie lange es dauert, bis Ihre Website auf Mobilgeräten geladen ist, und überprüfen Sie dann Ihre Website, um Elemente zu entfernen oder zu optimieren, die Ihre Website möglicherweise verlangsamen.

Es passiert zu viel und Ihr Auge weiß nicht, ob es sich auf das Logo, den Header oder den Aufruf zum Handeln konzentrieren soll. Das Navigieren auf einer Website auf einem mobilen Gerät ist zeitaufwändig. Erleichtern Sie die Benutzererfahrung erheblich, indem Sie Inhalte logisch in Abschnitte unterteilen. Erstellen Sie dann für jeden Abschnitt individuelle Überschriften mit den Tags H1, H2 und H3. Durch die Bereitstellung einer intuitiven Benutzererfahrung werden Benutzer länger angezogen und die Wahrscheinlichkeit eines Kaufs auf Ihrer Website erhöht.

Wichtige Informationen für Ihre Besucher sollten sich oben auf Ihrer Website befinden. Dann gehen Sie unten ins Detail. Überlegen Sie, was der Besucher erwartet, und beantworten Sie die 5 Fragen: Wer? Was? Warum? Wann? Wo? Dann fragen Sie sich, ob Sie die wichtigsten Verkaufsargumente oder die Nachricht auf ihrer Website sehen können.

Ein Beispiel für eine Website mit einer klaren Struktur und einer visuellen Hierarchie.

Lösung: Machen Sie einen Lageplan. Auf diese Weise können Sie einen Überblick über Ihre Website erstellen und Kategorien erstellen, um unnötige Extras zu vermeiden.

Fehler 4: Ihre Website ist schwer zu lesen

Es hat vielleicht den besten Inhalt der Welt, aber niemand wird ihn lesen, wenn Sie blinzeln und einen Text kneifen oder kneifen müssen, um ihn durchzugehen. Dieses Problem ist auf Smartphones aufgrund der Bildschirmgröße noch deutlicher als auf Tablets.

Diese ausgefallene Serifenschrift mag auf einem Desktop großartig ausgesehen haben, aber jetzt ist sie auf einem mobilen Gerät etwas schwer zu lesen. Versuchen Sie es mit einer serifenlosen Schriftart wie Open Sans oder Roboto, die leicht zu lesen ist, und stellen Sie dann sicher, dass Ihre Schriftgröße groß genug ist. Als Faustregel gilt, dass Sie Ihren Körpertext auf mindestens 16 Punkte beschränken müssen. Beachten Sie jedoch, dass diese Zahl von der verwendeten Schriftart abhängt.

Einige Hintergrundbilder können die Lesbarkeit unterwegs beeinträchtigen und das Lesen Ihres Textes erschweren. Versuchen Sie also, eine einfache Hintergrundfarbe und eine Textfarbe beizubehalten, die sich gegenseitig ergänzen.

Stellen Sie sicher, dass der Kontrast zwischen Ihrem Hintergrund und Ihrem Text stark genug ist, damit der Text leicht zu lesen ist

Lösung: Überprüfen Sie immer Ihre Website unter Ansichtsmodus. Mit dieser Funktion können Sie Ihre Website auf dem Desktop anzeigen und eine Vorschau anzeigen, wie sie für Benutzer von Mobilgeräten / Tablets aussehen wird. Es lohnt sich, Ihre Freunde und Familie zu bitten, Ihre Website auf Ihrem Gerät zu überprüfen. Wenn Sie Probleme beim Lesen Ihres Textes hatten, ist es möglicherweise an der Zeit, die Suche auf Ihrer Website zu vereinfachen. Ein schlichter weißer Hintergrund mit ein paar Farbblöcken, um ihn hervorzuheben, muss nicht langweilig sein!

Auf einem kleineren Bildschirm ist es noch wichtiger, Leerzeichen zu lassen, damit Ihre Finger eine Taste wie den Aufruf zum Handeln berühren können. Menschen, die mobile Geräte verwenden, benötigen noch größere Texte und Schaltflächen, als sie erwarten können, um eine Website bequem nutzen zu können.

Calls to Action (CTAs) müssen mindestens 30-40 px groß sein, um hervorzuheben. Mobile Shopper sind in der Regel impulsive Shopper. Wenn die Website nicht einfach zu navigieren und schwer zu nutzen ist, kann dies ein Grund sein, die Transaktion abzubrechen. Stellen Sie daher sicher, dass der CTA leicht zu erkennen und zu aktivieren ist.

Viele Elemente, Bilder und Farben können Ihre Website überladen erscheinen lassen und Ihre Besucher erschrecken. In diesem Fall ist es Zeit, ein Leerzeichen zwischen Absätzen, Texten und anderen Elementen einzufügen. Durch Leerzeichen können Sie auf Ihrer Website viel einfacher navigieren und lesen, was wichtig ist.

Wenn Sie im Bus durch eine Website scrollen (wie ich), lesen Sie wahrscheinlich ein bisschen. Das heißt, Sie möchten die benötigten Informationen klar angegeben finden. Das Ausführen dauert beispielsweise nicht lange, um große Textmengen auf einem mobilen Gerät zu lesen. Stellen Sie sicher, dass Ihr Text kurz, scannbar und pünktlich ist und zwischen den Absätzen viel Platz bleibt.

Lösung: Stellen Sie sicher, dass um Ihre Elemente und Ihren Text genügend Leerraum vorhanden ist, damit sich der Besucher nicht von den Informationen überfordert fühlt. Sie können auch versuchen, eine Schaltfläche anstelle eines Links im Text für wichtige Inhalte zu verwenden, um das Berühren zu erleichtern.

Kennen Sie dieses Gefühl der Belästigung, wenn Sie feststellen, dass Sie ein Online-Formular ausfüllen müssen, um am Flughafen kostenloses WLAN zu erhalten? Denken Sie darüber nach, wenn Sie Popup-Fenster hinzufügen möchten, die auf einem Touchpad eingegeben werden müssen. Die Navigation auf einem mobilen Gerät kann ohne die zusätzliche Schwierigkeit, auf einem Touchpad zu tippen, recht schwierig sein. Versuchen Sie, alles so einfach wie möglich zu gestalten, indem Sie so wenig Maßnahmen wie möglich ergreifen.

Wenn Sie beispielsweise eine Zufriedenheitsumfrage hinzufügen müssen, können Sie ganz einfach mit einem Smiley abstimmen und einfach ein Textfeld für zusätzliche Kommentare hinzufügen. Wenn es sich um ein Newsletter-Abonnement handelt, versuchen Sie, nur die wichtigen Details oder Dropdown-Listen anzugeben, um dies so einfach wie möglich zu gestalten.

Lösung: Schauen Sie sich die vielfältigen Formen an JotForm oder fügen Sie ein Chat-Popup mit hinzu Pure Chat zum Beispiel. Wie Sie im folgenden Beispiel sehen können, finden Sie ein Plugin, das diskret ist wie die Dialog-Sprechblase am Ende der Seite. Dies wird Ihre Benutzererfahrung nicht unterbrechen und Ihre Besucher werden sie eher berühren. Denken Sie daran, dass dies auch ein Plugin ist, damit es Ihre Ladezeit verlangsamen kann.

blackyeti.com zeigt die Bedeutung des Leerraums und den klaren Aufruf zum Handeln. Schauen Sie sich die Sprechblase unten auf der Seite an. Dies ist ein Live-Support-Chat-Plugin.

Diskretes Live-Chat-Support-Plugin, das erst angezeigt wird, wenn Sie es berühren.

Der Schlüssel zum mobilen Webdesign ist die Einfachheit. Weniger ist definitiv mehr auf einem kleineren Bildschirm. Es lohnt sich, die Herausforderungen zu berücksichtigen, die ein Touchpad für die Benutzererfahrung mit sich bringen kann. Der Trick besteht also darin, sich das Seitenlayout für Ihre Finger vorzustellen, damit die Funktionen leicht berührt oder verschoben werden können. Stellen Sie sicher, dass Ihre Besucher die wichtigsten Informationen sofort finden, und befolgen Sie dann die obigen Ratschläge, und alles wird gut! Wenn Sie sich nicht sicher sind, können Sie jederzeit einige Usability-Tests mit Kunden oder Freunden durchführen.

Wenn Sie unsere kostenlose App noch nicht ausprobiert haben, ist jetzt ein guter Zeitpunkt, sie auszuprobieren. Dies ist der perfekte Weg, um von einem Mobil- oder Tablet-Gerät aus den Überblick über Ihre Website zu behalten, wenn Sie nicht an Ihrem Schreibtisch sitzen.