Wenn es um das Thema Website geht, dann gibt es ja so einige Buzzwords, mit denen gerne um sich geworfen wird. Eins davon ist definitiv “Mobiloptimierung”. Ich hab vor einiger Zeit bei Instagram die Frage gestellt bekommen, auf welche Punkte man denn bei der Mobiloptimierung genau achten muss. Deswegen greife ich das jetzt gerne einmal als Thema für das heutige Video auf und gehe etwas mehr ins Detail, was du auf deiner Website unbedingt beachten musst, damit sie auf dem Handy nicht nur gut aussieht, sondern auch weiterhin verkauft.
Falls du übrigens auch eine bestimmte Frage zum Thema Website hast, dann schick mir gerne eine Nachricht bei Instagram.
Meine Empfehlung:
Gestalte erst deine komplette Website für die Desktop Ansicht. Mach dich erst an die Mobiloptimierung, wenn die Seite steht und du nichts mehr am Layout veränderst. Hier erfährst du, wie du im Divi Theme deine Website für die mobile Ansicht anpasst.
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Deine mobile Website muss responsiv sein
Dieser Punkt zählt heutzutage eigentlich schon zum Standard und wenn du deine Website in den letzten Jahre erstellt hast, dann ist die Wahrscheinlichkeit sehr hoch, dass deine Seite bereits responsive ist.
Aber was bedeutet dieser Begriff überhaupt?
Es heißt nicht anderes, als dass sich der Inhalt deiner Website an verschiedene Bildschirmgrößen anpasst. Dh. Deine Texte sind nicht fest fixiert sondern verschieben sich individuell. Ein Handy Bildschirm ist natürlich sehr viel schmaler als ein Laptop oder geschweige denn ein richtiger Desktop. Deswegen werden hier die Inhalte untereinander dargestellt und der Besucher kann einfach ganz bequem die Seite hoch und runterscrollen.
Vielleicht bist du aber auch schon mal auf einer Seite gelandet, die seit 1990 nicht mehr aktualisiert wurde und wo du dann richtig heranzoomen musst, um den Text überhaupt lesen zu können.
Fun Fact: Ich habe gerade das Spiel Candy Crush für mich entdeckt (ja, ich weiß…i’m late to the game). Und wenn ich bei irgendeinem Level hänge und einfach nicht weiterkomme, google ich schon mal ganz gerne nach Tipps, wie ich dieses Level endlich meistern kann. Und es gibt eine Seite, die immer die besten Tipps hat – die aber tatsächlich nicht responsive ist. Hier muss ich dann tatsächlich immer mit zwei Fingern zoomen, um den Ausschnitt zu vergrößern…aber dann ist der Text auch noch so breit, dass ich immer nach links und rechts wischen muss. Wirklich super nervig!
Also falls du zu den wenigen Leuten gehören solltest, die noch eine Website aus der Steinzeit haben, (die nicht responsive ist) dann mach dich jetzt sofort dran, es zu ändern. Ich denke aber, dass die allermeisten von euch diesen Punkt bereits abhaken können.
Nutzerfreundlichkeit ist bei der mobilen Ansicht noch wichtiger
Damit wären wir auch schon beim zweiten großen Punkt angekommen – und zwar sind wir hier beim Thema Nutzerfreundlichkeit. Dank TikToks und Instagram Reels ist die Aufmerksamkeit am Handy mittlerweile noch viel kürzer als am Desktop. Das bedeutet, wenn eure Besucher sich nicht zurecht finden, nicht verstehen, wo sie klicken sollen oder wo sie was finden, werden sie sehr schnell wieder weg sein.
Geh am besten einmal selbst deine Website auf dem Handy durch. Leg dir Zettel und Stift parat und notiere dir alles, was potenziell nervig sein könnte. Dabei kannst du besonders auf die folgenden Punkte achten:
Weg mit den Popups
Popups sind diese Boxen, die dir manchmal unaufgefordert entgegenspringen, wenn du auf einen Button klickst oder versuchst eine Seite zu verlassen. Sie wollen dich meistens dazu verleiten länger auf der Seite zu bleiben und dich für ein Freebie einzutragen. Popups sind schon in der Desktop Version nervig aber auf dem Handy umso mehr! Vor allem, wenn sie dann nicht richtig eingestellt sind und du den “Schließen Button” nicht siehst und das Popup nicht mehr zu bekommst….alles schon gesehen.
Fixiere deinen Header, bitte
Ich sage ja immer wieder, dass du deinen Header mit der Menüleiste unbedingt fixieren solltest. Auf dem Handy ist es auch nochmal wichtiger. Je nachdem wie lang deine Seite ist, müssen die Besucher erstmal ewig lang wieder nach oben scrollen, um zu einer anderen Unterseite zu navigieren. Das ist alles andere als nutzerfreundlich! Achte bei der Handyansicht von deinem Header aber auch darauf, dass er schön kompakt ist. Der fixierte Header nimmt nämlich dauerhaft Platz auf dem Bildschirm weg, daher sollten wir den Bereich so klein wie möglich halten. Bedeutet, bitte nicht oben fett dein Logo platzieren und das Hamburger Menü darunter packen. Es wirkt viel schlanker und aufgeräumter, wenn dein Logo klein in der Ecke zu sehen ist und sich das Hamburger Menü rechts daneben in einer Linie befindet.
Bedienbarkeit mit einer Hand
Von "DIY" zur Profi Website in nur einem Tag!
Klicke auf den unteren Button, um den Inhalt zu laden.
Mit der Anforderung des Ratgebers meldest du dich zu meinem E-Mail Crewletter an, in dem du wertvolle Tipps und Infos zu neuen Angeboten bekommst. (Datenschutzerklärung).
Schnelle Ladezeit
Schauen wir uns jetzt mal das Thema Ladezeit an. Keine Angst, es wird jetzt nicht zu technisch! Die Geschwindigkeit ist definitv ein Thema, mit dem wir uns auseinander setzen müssen, denn das ist auch ein Punkt, der auf deiner mobilen Website noch wichtiger ist. Braucht deine Seite mehr als ein paar Sekunden zum Laden, sind die Besucher schnell wieder weg…wie gesagt: die Aufmerksamkeitsspanne und auch die Geduld sind super kurz!
Aber was sind eigentlich Faktoren, die eine Website langsam laden lassen?
Medien
Zum einen natürlich Bilder und Videos. Ich sehe sehr oft bei meinen Kunden, dass sie Bilder hochladen, die teilweise mehrere MB groß sind – und das wirkt sich unglaublich stark auf die Ladezeit aus. Letztens saß ich bei einer Kundin mehrere Stunden daran, die Bilder herunterzuladen, zu verkleinern und komprimieren und wieder hochzuladen. Gerade, wenn du einen Blog hast und wirklich regelmäßig neue Bilder hochlädst ist es daher ratsam, von Vornherein darauf zu achten, keine großen Bilder hochzuladen.
Das Divi Theme bietet dir sogar die Möglichkeit für die Handyansicht deiner Website separate Bilder einzufügen. Falls du Videos auf deiner Website hast, dann lad sie bitte nicht direkt bei WordPress hoch (bzw. bei deiner Website Plattform), sondern nutze Drittanbieter, wie Youtube oder Vimeo, um die Videos einzubetten.
Hier zeige ich dir, wie du deine Website Bilder ganz easy verkleinerst.
Animationen
Ja, Animationen machen deine Seite interessanter aber leider machen sie deine Seite auch langsamer. Also überlege dir gut, ob es wirklich so wichtig ist, dass deine Inhalte von allen möglichen Seite einfliegen. Oder ob es nicht vielleicht wichtiger ist, deine Besucher möglichst lang auf der Website zu behalten, um sie von deinem Angebot überzeugen zu können. Wenn du unbedingt Animationen verwenden möchtest, dann nutze sie bitte sehr sparsam und übertreib nicht.
Passe das Design für die mobile Ansicht deiner Website an
Wir sind schon beim dritten großen Punkt angelangt. Die folgenden Faktoren haben auch wieder größtenteils was mit der Nutzerfreundlichkeit zu tun – aber sie betreffen hauptsächlich das Design.
Schriftgröße anpassen
Reihenfolge der Inhalte
Kontraste überprüfen
Tatsächlich auch etwas, das ich sehr oft sehe. Du hast wahrscheinlich sehr lange an deinem Branding gesessen und ewig gebraucht, um die passende Farbpalette für dein Branding zu finden. Verständlich, dass du nun alle Farben kombinieren und zeigen möchtest. Aber es kommt auf die richtige Kombination an! Deine Besucher sollen deine Texte schließlich gut und flüssig lesen können, ohne Kopfschmerzen zu bekommen. Heller Text auf hellem Hintergrund ist daher keine gute Idee. Sei auch bei Hintergrundbildern vorsichtig! Selbst, wenn du tiefschwarzen Text verwendest, ist der manchmal auf hellen Hintergrundbildern nicht gut lesbar. Bei Hintergrundbildern solltest du daher immer mit Overlays arbeiten.
Ein gutes Tool, mit dem du checken kannst, ob deine Farb Kombis genug Kontrast haben, ist das hier.
Tool Tipp
Abschließend möchte ich dir noch dieses Tool von Google selbst vorstellen, mit dem du ganz einfach überprüfen kannst, ob deine Seite mobiloptimiert ist. Du gibst hier einfach deine URL ein, wartest kurz und schaust dir dann das Ergebnis an. Wenn es Optimierungsbedarf gibt, werden dir die Punkte von Google hier aufgelistet.
Allerdings kann Google natürlich nur die technischen Aspekte kontrollieren und kann nicht überprüfen, ob deine Website auch inhaltlich und designtechnisch für die mobile Ansicht optimiert ist.
