Website mobil optimieren – Darauf musst du achten

Womit surfst du eher im Internet – mit dem Handy oder mit dem Computer? Gerade, wenn du unterwegs Mails liest, in denen spannenden Artikel verlinkt sind, oder von Instagram und Facebook Werbung oder interessante Empfehlungen erhältst, auf die du klickst, ist es vermutlich eher das Handy.

Und bestimmt hast du dich auch schon häufiger darüber geärgert, dass

• eine Website auf dem Handy nicht wirklich nutzbar war,
• Text über einem Foto unleserlich war,
• du dich für einen Newsletter gar nicht eintragen konntest oder
• ein Formular nicht funktioniert hat?

Bei der mobilen Version deiner Website gibt es einige Fallstricke, die du recht einfach umgehen kannst.

In diesem Blogartikel zeige ich dir, worauf du bei der mobilen Website-Version achten solltest und wie du deine Website für Mobilgeräte testen kannst.

Warum ist es so wichtig, seine Website für Mobilgeräte zu optimieren?

Ca. 65% der Besucher*innen rufen Websites vom Handy aus auf – Tendenz steigend! Spannend übrigens, dass der Tabletanteil so gering ist:

 

Auch die wichtigste Suchmaschine Google nutzt mittlerweile nur noch die mobile Version („mobile only“), um deine Website zu analysieren und einzuschätzen, auf welchem Platz sie für welches Suchwort ranken soll. Allein aus diesen beiden Gründe darfst du heutzutage die mobile Version deiner Website nicht mehr vernachlässigen.

Was ist bei der mobilen Version anders?

Viele Themes versuchen dir die Arbeit abzunehmen. Was das Divi Theme z. B. macht:

Elemente, die du nebeneinander darstellst, werden untereinander angeordnet. In den meisten Fällen ist das prima so. Es kann allerdings zu Problemen führen, wenn du Inhalte, die zueinander gehören, untereinander anordnest und sich jeweils daneben noch andere Elemente befinden. Lass mich das an einem Beispiel verdeutlichen:

Vielleicht hast du 3 Angebote nebeneinander platziert und möchtest die Buttons, damit sie auch bei unterschiedlicher Textlänge in den Angebotstexten auf gleicher Höhe anfangen, in einer neuen Zeile einfügen. Sieht in der Desktopversion super aus:

In der mobilen Version werden allerdings zuerst die Inhalte aus Zeile 1 nebeneinander angezeigt, danach die Inhalte aus Zeile 2. Das sieht dann so aus:

Und ist vermutlich nicht das, was du dir vorgestellt hast. Hier hast du im Grunde 2 Möglichkeiten: Du lässt es dir egal sein, ob die Buttons auf unterschiedlicher Höhe anfangen und platzierst sie direkt in der ersten Zeile unter der Textbox. Oder du blendest die komplette Version mit Zeile 1 und 2 für die Mobilversion aus und erstellst eine neue Variante nur für Handy und Tablet. Du siehst, es ist leider nicht immer ganz einfach, das zu entscheiden.

Worauf du bei der mobilen Version besonders achten musst

Gerade wenn du mit Pagebuildern wie z. B. dem Divi Builder oder Elementor arbeitest, gelten ein paar „Vorsichtsmaßnahmen“. Bei Divi sind viele geneigt, sich die Felder mit der Maus so hinzuziehen, dass es auf dem Computer hübsch aussieht. Please don’t! Divi fügt dann nämlich die entsprechenden Abstände pixelgenau hinzu – das ist prima für genau den Bildschirm, auf dem du jetzt arbeitest, aber NICHT für größere und kleinere Bildschirme. Und meist leider eine Katastrophe, wenn du es dir dann auf dem Handy anschaust. Oft fehlen dann deine Inhaltsbereiche ganz, weil sie einfach aus dem sichtbaren Bereich herausgeschoben wurden.

Was ich auch häufig sehe: Für die mobile Version wird ALLES mögliche individuell eingestellt. Also jede einzelne Schriftgröße, jeder Abstand, jede Bildgröße wird für die Tabletversion anders eingestellt als für die Desktopversion und für die Handyversion wieder anders. Das ist zwar möglich (und mit dem Divi Builder sehr einfach zu realisieren), macht die ganze Seite aber wesentlich langsamer. Je mehr individuelle Einstellungen du vornimmst, desto mehr Code wird die Seite am Ende enthalten, der dann auch immer geladen werden muss. Wann immer möglich beschränkst du dich also am besten darauf, einen guten Mittelweg zu finden, der auf allen Geräten gut aussieht.

Die einzelnen Punkte, die du unbedingt in der mobilen Version beachten und prüfen solltest, sind:

• Hero Section

Wenn du ganz oben auf einer Seite ein schönes, großes Hintergrundbild einfügst und Schrift darauf platzierst, kommt es häufig vor, dass diese in der Handyversion über wichtige Teile des Bildes ragt.

Beispiel Desktopversion:

Beispiel Handyversion – diese könnte dann so aussehen:

 

Hier kannst du z.B. das Hintergrundbild in der mobilen Version ausblenden und separat einfügen.

• Textgrößen

Wähle eine ausreichend große Größe (mind. 18, eher 20 Pixel) und prüfe dann, ob auch alles auf Handy (&Tablet) gut lesbar ist.

• Abstände

Da sich die einzelnen Inhaltsboxen und Kästen auf Mobilgeräten ein wenig verschieben und anders darstellen, müssen manchmal die Abstände etwas vergrößert werden, damit kein Text in ein anderes Feld hineinragt.

• Formulare

Rufe alle Formulare auf Tablet und Handy auf und fülle sie vollständig aus. Ist das problemlos möglich? Super! Falls einzelne Felder nicht lesbar oder abgeschnitten sind, solltest du nochmal nacharbeiten.

• Buttons

Auch hier prüfst du, ob alle Buttons sichtbar und anklickbar sind.

• Textfelder

Mit am häufigsten tritt der Fehler auf, dass Texte über die Ränder der Mobilgeräte ragen. Das liegt meist daran, dass händisch große Abstände in der Desktopversion eingestellt wurden, die dann fürs Handy übernommen worden sind. Hier darfst du also nochmal nachkorrigieren.

• Ladegeschwindigkeit

Mit den Google Page Speed Insights kannst du kostenlos prüfen, wie schnell deine Website auf dem Handy oder der Desktopversion geladen wird. Das Tool macht dir auch Verbesserungsvorschläge und zeigt genau, was du angehen solltest (z.B. Bilder verkleinern). Wie genau das im Detail geht, kannst du übrigens in meinem „Speed me up“ Workshop lernen.

• Theme

Die meisten neueren Themes sind mittlerweile responsive, also passen sich (mehr oder weniger automatisch) für Mobilgeräte an, wie schon oben erklärt. Einige veraltete Themes können das aber nicht. Achte hier vor allem bei der Auswahl darauf, wie lange das Theme schon nicht mehr aktualisiert worden ist und prüfe kritisch die Bewertungen anderer Nutzer*innen. Mit dem Divi Theme und dem zugehörigen Divi Builder oder alternativ dem Astra/WP Ocean Theme und dem Elementor Pagebuilder kannst du nichts falsch machen.

• Spezialeffekte und -elemente

Jaaa, fancy Elemente machen Spaß, ich weiß! Aber oftmals sind sie auf dem Handy nicht so gut zu nutzen. Für die Desktopversion gibt es z. B. Klappkarten, die sich umdrehen und Inhalte zeigen, wenn man mit der Maus drüberfährt. Davon mal abgesehen, dass dies selbst am Computer oftmals nicht direkt ersichtlich ist, müsste man auf dem Handy aktiv auf das Bild klicken, damit etwas passiert. Intuitiv wissen das die wenigsten – also solltest du solche Effekte auch lieber nicht nutzen.

• Menüs

Hast du schonmal versucht, ein Menü auf der 4. Ebene auf dem Handy zu bedienen? Gerade, wenn der Text im Menüeintrag etwas länger ist (und die Finger etwas dicker), ist das eine wahre Kunst! Am besten hältst du dein Menü schön klein und schlank (5-7 Punkte) und nutzt maximal 2 Ebenen, also einen Untermenüpunkt, wenn überhaupt.

• Kontraste

Wir alle lieben Sonnenschein – aber weißer Text auf hellgelbem Button ist in der Sonne auf dem Handy leider kaum bis gar nicht zu lesen. Nutze also insbesondere für die mobile Version kontrastreiche Farben.

• Widgets

Die Seitenleiste neben deinen Blogartikeln heißt zwar Seitenleiste – wird allerdings bei mobilen Geräten automatisch UNTER deinen Artikeln dargestellt. Falls du also unter deinen Blogartikeln sowieso z. B. eine Autorenbox hast, solltest du darauf achten, dass die Inhalte dann nicht doppelt / direkt hintereinander angezeigt werden.

• Popups

Auch Popups musst du auf dem Handy prüfen – je nachdem, mit welchem Plugin oder Einbettungscode du sie konfiguriert hast, können diese schonmal aus dem Bild herausragen. Das ist sowohl ärgerlich, wenn das mit den Feldern zum Eintragen passiert – aber fast noch ärgerlicher, wenn man nicht an das X kommt, um das Popup auf dem Handy zu schließen (die Besucher*innen sind dann schnell verärgert).

 

Wie du die mobile Version testen kannst

Dass du die mobile Version auf deinem Handy und Tablet testen kannst, ist dir bestimmt klar. Aber falls du z. B. kein Tablet hast oder es direkt am Computer testen möchtest, geht das natürlich auch.

Im Browser

Jeder Browser hat die sogenannten Entwicklerwerkzeuge. Im Google Chrome kannst du z. B. auf „View“ / „Ansicht“ (je nachdem, ob du die deutsche oder englische Version nutzt) klicken, dann auf „Developer“ / „Entwickler“ und dort auf „Developer Tools“ / „Entwicklerwerkzeuge“. Mit dem Handy-Tablet-Symbol auf der rechten Seite kannst du die aktuell aufgerufene Website dann in der mobilen Version testen. Auf der linken Seite findest du voreingestellte Geräte inkl. der korrekten Abmessungen, du kannst allerdings auch händisch bestimmte Pixelmaße eintragen:

Mit Tools

AmIResponsive

Eins meiner Lieblingstools, allein schon, weil es die einzelnen Bildschirme so hübsch nebeneinander in einem Mockup darstellt. Du kannst deine Website hier in 4 verschiedenen Bildschirmen anschauen und bedienen: Desktop (Auflösung: 1.600 x 992 Pixel), Laptop (1.280 x 802 Pixel), Tablet (768 x 1.024 Pixel) und Mobile (320 x 480 Pixel):

Responsive Test Tool

Hier kannst du mit einer bestimmten Bildschirmgröße direkt live, wie deine Website dann aussehen würde. Es gibt unzählige Gerätegrößen als Voreinstellung und du hast die Möglichkeit, ganz invdividuelle Auflösungen einzustellen:

Fazit

Ich hoffe, du konntest aus diesem Blogartikel ganz viel für dich mitnehmen und erstellst eine fantastische mobile Website für deine Besucher*innen!

In meinem Website Programm „Website Ready„, welches 2x im Jahr startet, bekommst du übrigens schon mobil optimierte Vorlagen und ein komplettes Kapitel mit Anleitungen für die Bearbeitung der mobilen Version 🙂 Trag dich gern unverbindlich auf die Warteliste ein – ich informiere dich dann, wenn die Türen wieder öffnen.