Stell dir vor, es ist Sommer und du gönnst dir einen Nachmittag am See. Während du an deinem Eistee schlürfst, willst du nur schnell kontrollieren, ob dein neuer Blogbeitrag auf deiner Website online gegangen ist. Doch nach Blick auf ihr Handy schmeckt der Eistee plötzlich nicht mehr erfrischend: Deine Website sieht gar nicht gut aus auf dem kleinen Display. Musst du das jetzt auch noch optimieren?
Pflichtprogramm: Mobile Optimierung deiner Website
9 praktische Tipps für deinen mobilen Webauftritt
Passe deine Schriftarten und -größen an
Website mobil optimieren: Blende Bilder aus
Verändere den Ausschnitt deiner Hintergrundbilder
Weniger Inhalt ist auf dem Smartphone mehr
Pflichtprogramm: Mobile Optimierung deiner Website
Muss ich wirklich noch erklären, warum die mobile Optimierung deiner Website kein „nice-to-have“, sondern absolutes Pflichtprogramm ist?
Okay!
Egal in welcher Branche du tätig bist und wie alt deine Zielgruppe ist: jede:r guckt Websites mittlerweile mit dem Smartphone an. Vielleicht handhabst du das anders und bist eine der wenigen Ausnahmen, deine potenziellen Kund:innen sind es wahrscheinlich nicht.
Und selbst wenn du wirklich in so einer speziellen Nische arbeitest und deine User:innen tatsächlich über ihren Laptop auf deine Seite zugreifen: Google macht’s nicht mehr.
Möchtest du mit deiner Website eine gute Platzierung in den Suchergebnissen erreichen, ist unter anderem eine einwandfreie mobile Optimierung Pflicht.
9 praktische Tipps für deinen mobilen Webauftritt
Die Bedienung einer Website auf dem Smartphone unterscheidet sich von der Desktop-Variante. Du kannst nicht mit einem Mauszeiger navigieren, sondern wählst Funktionen über die Touch-Funktion aus. Das Display ist natürlich deutlich kleiner und im Hochformat und die Internetverbindung kann ohne Wi-Fi langsamer als im heimischen Netzwerk sein.
Das sind alles Anforderungen, die du bei der mobilen Optimierung kennen und beachten solltest. Dabei helfen dir die folgenden Tipps:
Passe deine Schriftarten und -größen an
Du hast dir sicher viele Gedanken um die passenden Schriftarten auf deiner Website gemacht und dich bewusst entschieden. Doch leider funktionieren nicht alle gleich gut auf Desktop und am Smartphone.
Gerade bei geschwungenen Schreibschriften, die einen tollen Effekt auf dem Desktop haben, ist die Lesbarkeit am kleinen Bildschirm eher schlecht.
Du musst daher unbedingt überprüfen, wie sich deine Schriftarten auf den unterschiedlichen Bildschirmgrößen verhalten.
Das Gleiche gilt für deine Schriftgröße. Deine Überschriften sehen auf dem Laptop oder großen Monitor in Schriftgröße 55 Pixel wahrscheinlich gut aus, auf dem Smartphone sind sie jedoch nicht mehr zu lesen. Auch das solltest du entsprechend einstellen.
Website mobil optimieren: Blende Bilder aus
Bilder und Grafiken sind enorm wichtig für deine Website. Sie lockern auf, animieren zum Lesen oder unterstützen die Aussage deines Textes.
Auf dem Desktop hast du im Querformat auch jede Menge Platz, um mit Bildern zu arbeiten. Auf dem Smartphone sieht das leider anders aus.
Im Hochformat kommen notgedrungen alle Inhalte untereinander und eine Website auf dem kleinen Display zu lesen, erfordert einige Scrollarbeit. Verwendest du dazu viele Bilder, wird die Seite noch länger. Bei contentstarken Websites ist das für User:innen doppelt anstrengend.
Ich empfehle dir daher, Bilder, die keinen Inhalt erklären, in der mobilen Variante auszublenden und so deine Website kompakter zu gestalten.
Verringere deine Abstände
Weißraum auf einer Website ist toll! Wenn die einzelnen Elemente genügend Abstand zueinander haben, wirkt dein Webauftritt locker und leicht lesbar. Auf dem Smartphone sieht die Sache aber anders aus.
Natürlich sollten auch auf den kleinen Displays deine Elemente wie Text, Bilder, Grafiken, Slider, Kontaktformulare und so weiter, nicht direkt untereinander weg liegen. Aber du brauchst wahrscheinlich deutlich weniger Abstand, damit es auf dem hochformatigen Bildschirm stimmig aussieht.
Das gilt auch für die Abstände rechts und links. Während du auf einem Breitbild-Monitor den Abstand zum Rand vergrößerst, um die Lesbarkeit zu vereinfachen, solltest du das für Smartphone und Tablet wieder rückgängig machen.
In diesem Artikel kannst du unter anderem noch mehr zum Weißraum erfahren: 15 praktische Webdesign-Tipps für DIY-Selbstständige.
Verändere den Ausschnitt deiner Hintergrundbilder
Verwendest du vollformatige Bilder im Hintergrund oder als optischen Trenner? Ich liebe das als Designelement auf dem Desktop. Verändert sich jedoch das Seitenverhältnis für die Ansicht auf dem Smartphone, wird oft automatisch nur die Mitte des Bildes als Ausschnitt angezeigt.
Das kann dann plötzlich ganz schön merkwürdig aussehen. Verwende daher für die mobile Variante andere Ausschnitte als für die Desktop-Variante deiner Website.
Reduziere Effekte
Viele Websites verwenden Effekte. Kontaktformulare schweben von der Seite rein, Bilder bewegen sich beim Scrollen mit oder der Header ist ein Slider, der automatisch unterschiedlichen Content anzeigt.
Auf dem Laptop wirken solche Effekte – wenn man sie gezielt und nicht zu häufig verwendet. Auf dem Smartphone funktionieren sie jedoch häufig nicht oder verwirren optisch.
Ich rate dir, Effekte in der mobilen Variante stark zu reduzieren oder ganz zu deaktivieren. Das wirkt sich auch positiv auf die Ladegeschwindigkeit deiner mobilen Website aus.
Gehe nicht in die Breite
Ein sehr häufiger Fehler bei der mobilen Optimierung deiner Website liegt in der Breite. Abstände oder ganze Elemente gehen rechts und links über den Rand hinaus und sind nicht mehr lesbar. Das ist ein absolutes No-Go!
Niemand scrollt zusätzlich zur Seite. Alle Inhalte müssen auf dem schmalen Bildschirm zu sehen sein, damit Besucher:innen deinen Content lesen.
Auch für Google ist das ein Grund, deine Website mit einer schlechteren Platzierung abzustrafen.
Weniger Inhalt ist auf dem Smartphone mehr
Generell gilt für deinen Content: So lang wie nötig und so kurz wie möglich. Komm zum Punkt, denn niemand liest gerne lange Texte am Bildschirm.
Auf dem Smartphone ist das sogar noch wichtiger. User:innen wollen nicht bis in alle Ewigkeit nach unten scrollen, um die wichtige Information im letzten Satz zu finden.
Es ist daher üblich, Inhalte bei der mobilen Optimierung noch weiter zu kürzen, die Reihenfolge zu verändern oder einzelne Text- und Inhaltspassagen auszublenden.
Pop-ups gezielt (und reduziert) einsetzen
Ich will ehrlich sein: Ich finde Pop-ups ziemlich nervig. Ich will nicht schon nach fünf Sekunden auf einer Website mit einem Call-To-Action konfrontiert werden, den ich wegklicken muss, um weiterlesen zu können.
Trotzdem haben solche aufploppenden Textboxen ihre Berechtigung und es gibt sogar Studien, dass sich User:innen darüber eher zu einem Newsletter, einem Webinar oder ähnlichem anmelden.
Auf dem Smartphone solltest du Pop-ups trotzdem nur ganz reduziert einsetzen. Sie überlagern oft den kompletten Inhalt und können schnell aufdringlich oder gar unprofessionell wirken.
Viel Aufwand für die mobile Optimierung
Da kann ich dir nur zustimmen. Du tüftelst wochenlang an deiner Website, freust dich über das gelungene Design und zum Schluss darfst du es für die mobile Variante wieder unspektakulär reduzieren.
Aber der Aufwand lohnt sich! Deine potenziellen Kund:innen haben eine tolle Erfahrung auf deiner Website, du wirkt professionell und Google freut das auch.
Professionelle Website-Analyse selbst gemacht!
Finde schnell & einfach heraus, wie der Zustand deiner Website ist und wie du sie überarbeiten kannst. In Zukunft bekommst du außerdem regelmäßig Tipps, Wissenswertes, Anleitungen und Angebote, um deine Website weiter verbessern zu können. Meine Website-Analyse erhältst du als Dankeschön direkt nach der Anmeldung.
0 Kommentare