Wusstest du, dass es in vielen Länder dieser Erde mehr Smartphones als PCs gibt? Heutzutage überweist man eben schnell mal eine Zahlung über das Smartphone und der Kundin schreibt man eine E-Mail easy über das mobile Outlook zurück. Das Smartphone ist überall und so wurde auch die Nutzung der letzten Jahre verstärkt. Durch diese Zunahme an der mobilen Nutzung veränderte sich auch die Website-Aufrufe für uns selbstständige Frauen. Wichtiger denn je ist es, die mobile Optimierung für die eigene Website zu implementieren oder auszubauen.
Mobile Websites optimieren
Viele Websites sind aufgebaut auf Parallax-Effekte und aufwändige Brand-Präsentationen – darüber solltest du dir für mobile Endgeräte Gedanken machen, nämlich ob du sie streichst. Die Nutzer*innen, die über mobile Endgeräte auf eine Website zugreifen, möchten schnell Informationen sammeln: Eine Telefonnummer finden, zum Restaurant navigieren oder Bewertungen anderer Benutzer*innen lesen. Multimedia-Schnick-Schnack und lange Angebotslisten sind hier fehl am Platz. Mobile Optimierung hat andere Ziele, als deine Website in der Desktop-Variante.
Do’s & Dont’s für die mobile Optimierung deiner Website
Gleich vorweg, gibt es wichtige Do’s & Don’ts für die mobile Optimierung deiner Website.
Do’s: Informationen mit wenigen Klicks und wenig Scrollen schnell auffindbar machen.
Don’ts: Auf das vorgegebene Design mit kleiner Schriftart und riesigen Videos setzen.
Das bedeutet nicht, dass du deine Website komplett umbauen musst. Mit einfachen Tipps & Tricks machst du deine Website für das mobile Zeitalter sattelfest.
Mobile First: Mobile Optimierung der Website vorrangig
Mehr als die Hälfte aller Website-Aufrufe in Europa 2020 werden über das Mobilgerät durchgeführt, Tendenz steigend. Der Trend zeigt: Mobile First. Bereits vor etlichen Jahren hat Google bestätigt, dass die mobile Optimierung der Website eine wichtige Rolle in der Suchmaschinenoptimierung spielt.
Dir sollte spätestens jetzt klar sein, dass deine Website im mobilen Zeitalter unbedingt für mobilen Endgeräte optimiert werden sollte. Viele Frauen, die ihr Webdesign selbst umgesetzt haben, denken nun: Oh Gott, schon wieder etwas Technisches! Ich kann dich beruhigen: Wenn du deine eigene Website gemeistert hast, ist die mobile Optimierung kein Hexenwerk mehr 
Verliere deine Kund*innen nicht durch eine schlechte mobile Website
Ein fataler Denkfehler ist: „Sollen sie doch über einen PC auf meine Website zugreifen“, denn dadurch verlierst du Interessent*innen. Dass man ohne Maus und Tastatur mit einem viel kleineren Bildschirm auf die Optimierung achten muss, sollte klar sein. Hast du deine Website erst kürzlich von einer/einem Webdesigner*in erstellen lassen, sollte diese selbstverständlich mobiloptimiert sein. Nachprüfen schadet jedoch nie.
In meinem Blogartikel zeige ich dir, worauf du bei der mobilen Optimierung deiner Website achten solltest, welche Möglichkeiten dir zur Verfügung stehen und welche Tools dir dafür zur Verfügung stehen.
Was bedeutet „mobile Optimierung“ meiner Website?
Wenn wir Webdesigner*innen über die mobile Optimierung deiner Website sprechen, verstehen wir alle Maßnahmen für die optimale Anzeige und auch Nutzung deiner Website-Inhalte auf den unterschiedlichsten mobilen Endgeräten. Wenn dein Text also über den Bildschirmrand hinausgeht oder dein Button die halbe Bildschirmgröße einnimmt, weißt du: Ich muss dringend etwas tun 
Was ist der Unterschied zwischen Smartphone und Tablet in der mobilen Optimierung?
- Smartphones wie iPhone, Android-Geräte und Windows-Phones. Unsere kleinen Begleiter können Websites meistens genau so lesen wie wir es von unserem Desktop-PC kennen. Mit dem Unterschied, dass die Bildschirmgrößen stark variieren. Während wir am Desktop meist alles im Querformat sehen, sehen wir im Smartphone alles im Hochformat. Das bedeutet für uns, dass erst einmal alles etwas „auf den Kopf gestellt“ ist.
- Tablets benutzen zwar die meisten von uns auch im Hochformat, jedoch hat ein Tablet einen größeren Bildschirm als unsere Smartphones. Die Nutzer*innen deiner Website gehen davon aus, am Tablet alles so zu sehen, wie auf deiner Desktop-Variante.
Ich empfehle dir bei der mobilen Optimierung auf beides zu achten. In den meisten Fällen funktioniert in WordPress mit einem guten Editor alles „in einem Aufwischen“ 
Häufige Fehler der mobilen Optimierung im Webdesign
- Zu kleine Schriftgröße: Versetz dich einmal in deine Zielgruppe. Selbst wenn es sich dabei um die jüngere Generation handelt, erlebe ich oft Websites, deren Schriftgröße winzig ist. Eine zu kleine Schriftgröße ist für die Augen wahnsinnig mühsam. Die Nutzerfreundlichkeit sinkt in den Keller und man verlässt die Website. Nutzer*innen im digitalen Zeitalter möchten schnell ihre Informationen finden oder Leistungen kaufen, nicht ihre Augen anstrengen.
Achtung: Falls dein Webdesign ein/e Grafiker*in designed und du das Webdesign umgesetzt hast, dann weise den/die Grafiker*in bitte darauf hin. Die richtige Schriftgröße ist essentiell und wenn deine Website verkaufen soll, steht die angenehme Schriftgröße definitiv vor dem Design. Eine zu kleine Schriftgröße fällt deinen Nutzer*innen auf, dass das Design des/der Grafiker*in nicht zu 100% umgesetzt wurde nicht! - Buttons sind zu groß: Häufig sind die Buttons auf Websites zu groß und können gar nicht mehr vollständig gelesen werden. Sie schießen über den Bildschirmrand heraus und/oder sind gar nicht klickbar, da sie mit dem Text verschmelzen. In beiden Fällen ist das für deine Nutzer*innen fatal. Im Endeffekt natürlich auch für dich, denn wenn deine Buttons nicht funktionieren, wird deine Leistungen auch niemand in Anspruch nehmen.
- Texte sind außerhalb des Bildschirms: Wenn du bei den Texten deiner Website erst mit deinen Fingern hinein- oder herausscrollen musst, ist deine Website definitiv nicht mobil-optimiert. Ohne herum zu scrollen oder die Website zu verkleinern oder vergrößern, muss dein Text gut lesbar sein.
- Videos können nicht abgespielt werden: Oft hervorgerufen durch Cookies-Banner oder auch verschiedene Lizenzen. Wenn dein Video dann zu klein angezeigt wird und der Banner für Cookies oder die Lizenz zu groß sind, ist es oft nicht möglich, das Video abzuspielen. Wähle am besten ein Videoformat, dass auf allen Endgeräten angesehen werden kann oder passe es für die mobilen Endgeräte extra an (dauert keine 2 Minuten ;-)).
Lerne in 5 Tagen, was erfolgreiche Websites anders machen!
In meinem kostenlosen 5-tägigen E-Mail-Kurs „Skyrocket Challenge – Lerne, was erfolreiche Websites anders machen“ bekommst du wertvollen Input, den du sofort umsetzen kannst, um mehr Conversion zu schaffen.
Der heilige Gral für deine mobile Website
Wenn man Google als Entwickler*in nutzt, ist bestimmt schon über „SEO für Fortgeschrittene“ gestoßen. In dieser Dokumentation bietet Google „3 Möglichkeiten zur Implementierung deiner mobilen Website“. Vorgeschlagen werden folgende Varianten: Responsives Webdesign, dynamische Bereitstellung und unterschiedliche URLs.
Während die letzten zwei für Fortgeschrittene sind, kannst du responsives Webdesign, das von Google auch empfohlen wird (und auch von mir), für deine Website ohne Technik-Kram oder Programmierkenntnisse implementieren.
Responsives Webdesign für die mobile Optimierung
Solltest du deine Website erst kürzlich mit einem Template/Theme erstellt haben, sollte dieses grundsätzlich responsiv sein. Responsives Webdesign ist kein Bonus mehr, sondern ein Must-Have geworden. JEDE moderne Website ist auf jeden Fall auch responsiv.
Im Hintergrund ist es recht simpel: Der CSS-Code wurde von den Entwicklern bereits an die verschiedenen mobilen Geräte angepasst. Der Indikator für den Googlebot ist in diesem Fall der „viewport-Metatag“, den du im Header finden kannst. Bei dieser Variante werden die Pixel deiner Website unabhängig vom Endgerät (Desktop als auch mobil) dargestellt. Die Website passt sich so an den Ausgabebildschirm an.
Um das zu erreichen musst du meist nur mehr in deinem grafischen Editor (z.B.: Elementor, Visual Composer, …) die Anpassungen vornehmen.
Du bist responsiv, wenn alle deine Website-Inhalte – also Fotos, Videos, Texte, Buttons & co – auch in der mobilen Version einwandfrei und nutzerfreundlich lesbar & nutzbar sind.
Ladezeit für mobile friendly Websites
Wichtiger denn je, ist die Ladezeit auf deiner mobilen Website. Du kannst die Geschwindigkeit deiner Website mit Google SpeedInsights messen. Achte hier, dass dein Reiter bei der Auswertung auf „Mobil“ liegt. Die Geschwindigkeit deiner Website ist mobil in den meisten Fällen langsamer. Praktisch: Du erhältst auch Auswertung und Information darüber, was du verbessern kannst. Vieles davon mit kostenlosen WordPress Plugins.
Experten-Tipp: Breakpoints für die mobile Optimierung deiner Website
Experten-Tipp von Michelle: Falls dir ein bestimmter Abschnitt deiner Website mobil einfach nicht so gut gefällt oder man die Schrift nicht lesen kann, dann setze Breakpoints ein. Bei der Seite einer lieben Kundin von Cloud Five war bei einem Abschnitt die Schrift sehr schwer zu lesen. Zuerst habe ich den Abschnitt dupliziert, dann mittels Breakpoints den ursprünglichen Abschnitt für mobile Geräte ausgeblendet. Den „neuen“ duplizierten Abschnitt habe ich wiederum für die Desktop-Ansicht ausgeblendet. So kann ich zwei völlig unterschiedliche Ansichten mit demselben Inhalt verwenden. Diese Vorgangsweise gilt natürlich auch für Texte, Buttons, Fotos & co.
Beispiel mobiler Optimierung
Vor der mobilen Optimierung: Kaum lesbar, Bild überschlägt sich mit Text. Für mich macht gutes Webdesign aus, dass man sich hier auch etwas hinein fühlt. Sicher „passt’s“. Die Schrift ist groß genug, aber nutzerfreundlich war es nicht.
Nach der mobilen Optimierung: Lesbar durch Farbverlauf im Hintergrund. Man hätte ebenso das Foto komplett streichen können, dann wäre es NOCH besser lesbar gewesen. Jedoch finde ich ergibt das mit dem Farbverlauf so ein schönes, stimmiges Bild.
Das Zauberwort hier: Breakpoints!
Breakpoints verwenden: Beinahe in jedem WordPress Editor gibt es die Möglichkeit Breakpoints zu verwenden. Alternativ kannst du Breakpoints auch per CSS einsetzen. Am besten nutz du Google mit „DeinEditor Breakpoints“. Also „Elementor Breakpoints“ etc.
Google und die mobile Optimierung deiner Website
Google liebt Nutzerfreundlichkeit, das ist kein Geheimnis mehr. Nicht verwunderlich, dass die „Mobile Friendliness“ zu einem eigenen Rankingfaktor geworden ist. Hier gilt wieder die goldene Regel: Mögen deine Benutzer*innen deine Website, mag auch Google deine Website
Falls du z.B. über Ubersuggest deine Keywords trackst, werden dir die zwei Spalten aufgefallen sein: Desktop & Mobil. Damit kannst du genau feststellen, wo noch Verbesserungsbedarf in der mobilen Ansicht ist.
Technische Optimierung für deine mobile Website
Natürlich gibt es neben der visuellen Optimierung auch noch die technische Seite. Anbei erläutere ich dir einige Tipps, die oft mit Plugins automatisch optimierbar sind.
- Dateigröße von Bildern verringern: Du hast die Möglichkeit, deine Bilder einzeln mit kostenlosen Tools wie Compress JPEGS zu verkleinern oder du wählst ein Plugin in WordPress wie Smush (eines meiner Favoriten) aus. Dieses komprimiert dir nicht nur automatisch deine Bilder (auch alle, die du neu hoch lädst) sondern hat auch lazy load integriert. Durch lazy load werden z.B. Bilddateien erst aufgerufen, wenn du scrollst oder die Website vergrößerst – also erst, wenn die Bilddatei auch wirklich benötigt wird. Dadurch vermeidest du beim Aufrufen deiner Website unnötige Ladezeit.
- Verzicht auf zusätzliches Multimedia: Viele Websites haben Videos, Animationen, eine Musik im Hintergrund,… Falls du darauf bestehst, lass das Wichtigste vorhanden und verzichte auf den Rest. Eine Hintergrundmusik ist in den meisten Fällen störend. Stell dir vor du sitzt in der U-Bahn und plötzlich ertönt ohne Vorwarnung Musik aus deinem Smartphone. Alles rund um Multimedia hat in unsachgemäßen Händen leider horrende Ladezeiten.
- CSS & JavaScript optimieren/minimieren : Long story short, ohne technisch zu werden, kannst du durch diese Maßnahme eine bessere Ladezeit erreichen, die insbesondere für mobile Endgeräte wichtig ist. Ich lege dir das WordPress Plugin Autoptimize ans Herz. Mit diesem Plugin kannst du auch deine Google-Schriftarten optimieren, die oft viel Ladezeit in Anspruch nehmen.
Tool-Tipps für deine mobile Optimierung
Neben den oben bereits erwähnten Tools, habe ich hier noch einen kostenlosen Tool-Tipp für dich.
Google Search Console: kostenlos
Natürlich bietet Google mit ihrer Search Console auch ein Tool, dass dir dabei hilft, deine Website auf die mobile Benutzerfreundlichkeit zu testen. In wenigen Sekunden erhältst du Aufschluss darüber, inwiefern du die mobile Optimierung deiner Website verbessern kannst und ob deine Website bereits für Mobilgeräte optimiert ist.
Die mobile Optimierung deiner Website
Hoffentlich konnte ich dir einen Überblick verschaffen, wie du schnell & einfach deine Website mobil optimierst. Das Thema ist – wie so vieles im Webdesign – riesig und kaum in einen einzigen Blogartikel zu packen Falls du noch Fragen oder Wünsche hast, schreib es mir super gerne in die Kommentare.
Ich wünsche dir alles Liebe und viel Spaß mit deiner mobil optimierten Website!
Deine Michelle
