Mobile Design: So macht ihr eure Webseite fit fürs Smartphone

Bestimmt habt ihr auch schon mal den Begriff „Mobile first“ gehört. Aber was bedeutet er eigentlich? Im Grunde geht es darum, den Fokus bei der Gestaltung einer Webseite darauf zu setzen, dass sie auf dem kleineren Display von Smartphone oder Tablet ideal aussieht. Denn: Die Zahl der Nutzer, die unterwegs im Internet surft, ist in den letzten Jahren rapide gestiegen – und das wird wohl auch noch eine Weile so weitergehen. Deshalb ist es wichtig, dass eure Webseite auf Handy & Co. eine gute Figur macht – auf dass möglichst viele Besucher eure Webseite besuchen und sie nicht so schnell wieder verlassen ;)

Manche denken, dass es völlig reicht, wenn ihnen die Webseite auf dem Rechner gefällt, und gehen davon aus, dass auf dem Handy einfach eine Mini-Version davon zu sehen ist. Das kann gut gehen, muss es aber nicht. Deswegen ist es immer ein schlauer Schachzug, das Design für Mobilgeräte extra zu optimieren – erst recht, wenn viele Besucher von dort auf eure Seite kommen (das seht ihr in der Statistik).

Allerdings: Die Devise „Mobile first“ in die Tat umzusetzen, birgt auch einige Fallstricke. Wir haben euch die gängigsten zusammengestellt – und natürlich ein paar wertvolle Tipps, wie ihr clever umgehen könnt.


Fallstrick 1: Euer Design ist nicht „responsive“

Vielleicht ist es ein paar Jahre her, dass ihr eure Website gebaut habt – und heute sieht sie genau so aus, wie ihr sie haben wolltet. Zumindest auf dem PC oder Mac. Das ist schon mal super! Falls ihr allerdings länger nichts daran gemacht habt, kann es sein, dass ihr noch eines unserer älteren Designs nutzt. Ihr erkennt sie daran, dass sie einen Code (z.B. F4242) anstelle eines Städtenamens tragen. Diese Designs sind zwar auch für Mobilgeräte optimiert, sie sehen darauf aber längst nicht so gut aus wie die modernen „responsive“responsive-website-ein-look-auf-allen-geraeten Designs mit einem Städtenamen.

Inwiefern ist responsive besser? Kurz gesagt: Eine responsive Website passt sich automatisch den verschiedenen Displaygrößen an. Auflösung, Bilder und Menü sehen dadurch immer perfekt aus – unabhängig davon, ob die Besucher einen Computer, ein Tablet oder ein Smartphone benutzen. Hinzu kommt, dass ein responsive Design ein Pluspunkt bei der Suchmaschinenoptimierung ist, weil Google euch leichter finden kann.

Ihr hattet noch keine Gelegenheit, eure Website auf einem Mobilgerät zu checken? Oder ihr scheut die Mühe, euer Design zu aktualisieren? Verstehen wir gut! Andererseits: Schaut euch nur mal um, wie viele Leute per Smartphone im Internet surfen. Sie alle sind potenzielle Besucher eurer Webseite – und wenn ihr nur eine Woche lang jeden Tag eine Stunde investiert, habt ihr gute Chancen, viele von ihnen für euch zu gewinnen.

Die Lösung: Geht im Menü auf Design und dann auf Designvorlagen. Jetzt seht ihr oben links euer aktuelles Design. Trägt es den Namen einer Stadt (z.B. Stockholm)? Das ist alles fein! Falls nicht, ist das Design nicht responsive und wir empfehlen euch dringend, es gegen eines unserer neuen Designs auszutauschen. Mit diesem Tool könnt ihr checken, wie eure Webseite auf verschiedenen Bildschirmen angezeigt wird.

Links seht ihr ein Kontaktformular in einem alten Layout, das auf dem Smartphone abgeschnitten aussieht.

Rechts hingegen wird mit einem neuen responsive Design alles perfekt dargestellt.

 

Fallstrick 2: Bilder und Videos machen eure Webseite langsam

Ruft eure Webseite doch mal auf einem Mobilgerät auf und zählt leise mit, wie lange es dauert, bis sie geladen ist. „1, 2, 3, …“ – es dauert drei Sekunden oder länger? In diesem Fall ist es an der Zeit zu prüfen, woran das liegt. Die Hauptverdächtigen sind Videos, Animationen und Add-ons.

Ertappt? Dann überlegt doch mal, ob sie eurer Website wirklich einen zusätzlichen Nutzen geben, der es Wert ist, dass die Seite so viel länger lädt (ganz zu schweigen vom zusätzlichen Datenvolumen, das gerade bei der mobilen Nutzung ordentlich zu Buche schlägt). Google bietet euch eine einfache und kostenlose Möglichkeit, eure Webseite auf Hindernisse für die mobile Nutzung zu checken. Dazu braucht ihr lediglich eure URL eingeben und schon erhaltet ihr Verbesserungsvorschläge.

Bedenkt auch, dass alle Widgets und Social-Media-Buttons, die auf externen JavaScripts basieren, die Ladezeit eurer Webseite deutlich verlängern. Am besten entscheidet ihr euch für zwei bis vier Social-Media-Kanäle oder ihr benutzt die „eingebauten“ Jimdo-Share-Buttons, um die Ladezeit zu verkürzen.

Zu guter Letzt bringt es eine Menge, sämtliche Bilder zu optimieren, sprich die Bildgröße anzupassen und die Dateigröße zu reduzieren. Es gibt viele Tools, die euch dabei helfen, ein Bild ohne sichtbaren Qualitätsverlust zu komprimieren. Bei einer sehr bildlastigen Webseite oder einem Hintergrundbild können schon kleine Veränderungen einen gewaltigen Unterschied machen. Vergesst nicht, dass die Ladezeiten für Google ein SEO-Faktor sind. Eine langsam ladende Website könnte euch im Ranking zurückwerfen.

Die Lösung: Macht den Check, wie lange es dauert, eure Webseite mobil zu laden. Und prüft, ob ihr Elemente entfernen oder so optimieren könnt, dass sich die Ladezeit verkürzt.

 

Fallstrick 3: Es gibt keine visuelle Hierarchie

Eure Webseite hat viel zu bieten? Dann ist es ein guter Plan, sie in logische Abschnitte zu unterteilen, um Besuchern die Nutzung zu erleichtern (die sogenannte User Experience). Anschließend verseht ihr jeden Abschnitt mit einer eigenen Überschrift und ordnet die Absätze nach Wichtigkeit (Überschrift groß, mittel oder klein). Dies erleichtert es dem Auge, eine Hierarchie zu erkennen – und die Überschriften sind ebenfalls enorm wichtig für die SEO.

Achtet darauf, dass die wichtigsten Informationen für eure Nutzer ganz oben auf der Webseite stehen. Danach folgen dann die Einzelheiten. Überlegt euch am besten, was der Nutzer zu finden hofft und beantwortet die fünf W-Fragen: Wer? Was? Warum? Wann? Wo? Last but not least: Fragt euch, ob die wichtigsten Verkaufsargumente auf eurer Webseite zu finden sind.

Grundsätzlich gilt: Je einfacher und intuitiver ihr die User Experience gestaltet, desto länger werden die Besucher auf eurer Webseite bleiben – und desto höher die Wahrscheinlichkeit, dass sie etwas kaufen.

Die Lösung: Fertigt einen Seitenplan an. Das wird euch dabei helfen, der Webseite ein klares Profil zu geben und Kategorien festzulegen, sodass ihr überflüssige Extras weglassen könnt.

Eine Webseite mit klaren Abschnitten und angenehmer visueller Struktur.

Fallstrick 4: Eure Webseite ist schwer lesbar

Es kann passieren, dass ihr die besten Inhalte der Welt auf eurer Seite stehen habt und sie trotzdem keiner liest, weil die Schrift zu klein, zu gequetscht oder aus anderen Gründen schwer zu entziffern ist. Das ist auf einem Tablet problematisch und wird auf dem Smartphone zum echten Hindernis.

So mag eine schicke Serifenschrift auf dem Rechner toll aussehen, ist aber auf dem Mobilgerät eine Qual fürs Auge. Versucht es lieber mal mit einer leicht lesbaren serifenlosen Schrift wie Open Sans oder Roboto. Und schaut bei der Gelegenheit gleich, ob die Schrift auch groß genug ist. Als Faustregel kann man sagen, dass der Fließtext mindestens 16 Punkt haben sollte. Allerdings hängt die Schriftgröße auch davon ab, welche Schrift ihr benutzt.

Einige Hintergründe wirken sich ebenfalls schlecht auf die Lesbarkeit aus, insbesondere auf dem Smartphone. Es empfiehlt sich deshalb eher eine schlichte Hintergrundfarbe und eine Schriftfarbe, die sich gut davon absetzt.

Das Beispiel zeigt, dass Kontraste entscheidend dafür sein können, wie gut man eure Texte lesen kann – oder eben nicht wirklich.

Die Lösung: Checkt eure Webseite immer in der Vorschau. Sie zeigt euch auf dem Rechner an, wie eure Webseite auf einem Smartphone oder Tablet dargestellt wird. Vielleicht bittet ihr auch Familie und Freunde, sich die Webseite auf ihren mobilen Geräten anzusehen. Falls sie Probleme haben, die Texte zu lesen, ist es an der Zeit, das Design zu vereinfachen. Ein schlichter weißer Hintergrund mit farbigen Blöcken muss keineswegs langweilig aussehen!

 

Fallstrick 5: Eure Webseite wirkt überfüllt

Die Bedeutung von Zwischenräumen ist nicht zu unterschätzen – vor allem für die Darstellung auf mobilen Geräten. Ohne ausreichend Platz zwischen den einzelnen Elementen ist es schwierig, mit dem Finger auf dem Touchscreen Buttons oder Links zu treffen. Und ihr wollt euren Besuchern den Aufenthalt auf eurer Webseite doch so angenehm wie möglich machen, oder?

Ein Call-to-Action – also eine Handlungsaufforderung an den Besucher – sollte mindestens 30 bis 40 Punkt groß sein, um genug aufzufallen. Untersuchungen haben gezeigt, dass Leute, die mobil shoppen, vor allem ihren Impulsen folgen. Das heißt: Wenn sie die Nutzung eurer Seite zu kompliziert finden, könnte es sein, dass sie deswegen nicht bei euch kaufen. Ihr seht, wie wichtig es ist, dass der Call-to-Action leicht zu finden und anzuklicken ist.

Wenn es auf eurer Webseite vor Textblöcken, Bildern und Farben wimmelt, könnte das Besucher abschrecken. Sie wünschen sich Klarheit, kein Chaos. Weiße Flächen erleichtern es erheblich, eure Webseite zu lesen und zu nutzen.

Und noch ein Wort zu den Texten: Wenn ihr – so wie ich – häufig unterwegs durch Webseiten scrollt, werdet ihr viele Artikel wahrscheinlich auch querlesen. Das heißt: Ihr wollt möglichst schnell erfassen, worum es geht. Deswegen achtet darauf, dass eure Texte kurz, strukturiert und auf den Punkt sind.

Die Lösung: Achtet darauf, dass ihr ausreichend Abstand rund um alle Elemente und Texte auf eurer Webseite habt, damit sich der Besucher nicht überfordert fühlt. Vielleicht versucht ihr auch mal, einen Button anstelle eines Links im Text zu verwenden, damit es auf dem Touchscreen leichter ist, ihn anzuklicken.

 

Fallstrick 6: Ihr überfordert die Besucher mit Formularen oder Pop-ups

Bestimmt wart ihr auch schon mal genervt, weil ihr ein Online-Formular ausfüllen musstet, um das kostenlose WLAN am Flughafen zu nutzen. Denn per Handy durch eine Webseite zu navigieren kann anstrengend sein – besonders, wenn man dann auch noch versuchen muss, die richtigen Buchstaben auf der Bildschirmtastatur zu treffen. Deshalb gestaltet auf eurer Webseite lieber direkt alles so, dass eure Besucher es möglichst einfach haben.

Gebt zum Beispiel bei einer Zufriedenheitsumfrage Smileys als Antwortmöglichkeiten vor und richtet nur für freiwillige Zusatzkommentare ein Textfeld ein. Oder stellt bei einer Newsletteranmeldung die wichtigsten Angaben in Drop-down-Menüs zur Auswahl – das ist viel komfortabler für den Nutzer, als alles selbst eingeben zu müssen.

Die Lösung: Bei JotForm findet ihr viele Formulare, die ihr kostenlos nutzen könnt. Und Pure Chat bietet verschiedenste Möglichkeiten, einen Pop-up-Chat auf eurer Webseite einzurichten. Unten seht ihr ein gutes Beispiel für ein dezentes Add-on: Die Sprechblase passt optisch und das Formular ist einfach auszufüllen. So wird der Besucher es eher nutzen. Behaltet aber im Hinterkopf, dass es trotz allem ein Add-on ist und die Ladezeit eurer Webseite eventuell erhöht.

Die Webseite von Black Yeti überzeugt auch mobil durch viel Platz zwischen einer kurzen Produktbeschreibung und einem klaren Call-to-Action. Wenn man auf die Sprechblase unten im schwarzen Balken klickt, öffnet sich ein Feld, mit dem man eine Frage an den Support schicken kann.

 

Zusammenfassen könnte man unsere Tipps vielleicht so: Der Schlüssel zum mobilen Webdesign lautet Einfachheit. Auf einem kleinen Bildschirm ist weniger mehr.

Im Grunde geht es vor allem darum, dass das Design „fingerfreundlich“ ist, man also alle Buttons und Links einfach anklicken kann. Achtet darauf, dass eure Besucher  die wichtigsten Infos auf den ersten Blick finden. Und ansonsten haltet euch einfach an die Tipps oben, dann seid ihr ziemlich weit vorn. Ihr seid euch bei irgendetwas nicht ganz sicher? Dann bitte einfach Freunde oder Kunden darum, die Bedienfreundlichkeit zu testen und euch Feedback zu geben.


Übrigens: Habt ihr schon unsere App ausprobiert? Damit könnt ihr eure Webseite nämlich direkt auf eurem Smartphone oder Tablet bearbeiten. Wir wünschen viel Spaß!