Mobile Optimierung für deine Website – inklusive Tipps & Tools

Teilen

Share on pinterest
Share on email
Share on twitter
Share on facebook
Share on linkedin

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.: ElementorVisual 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.

Cloud Five Website VOR der mobilen Optimierung
Cloud Five Website NACH der mobilen Optimierung

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 VideosAnimationen, 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

Ich wünsche dir gutes Gelingen und alles Liebe
Michelle

Hi, ich bin Michelle

Überzeuge deine Traumkund*innen mit deiner Website und zeige ihnen, wofür du Expertin bist! Sei eine mutige Aeronautin und werde zur Überfliegerin deiner Branche.

Ich bin Michelle Karnolz, Informatikerin und leidenschaftliche Fallschirmspringerin! Mit 360footsteps erfülle ich mir den Traum, feminines Webdesign für Business-Frauen mit großen Zielen anzubieten. Ich bin gern an deiner Seite, wenn du Hilfe bei deinem Raketenstart brauchst, damit dein Online-Business so richtig abhebt! Ich bin so gespannt auf deinen raketenstarken Lift-off – darf ich dich dabei begleiten?

Sichere dir meine kostenlose Skyrocket Challenge – lerne in 5 Tagen, was erfolgreiche Websites anders machen!

Lass uns vernetzen

Hast du Lust auf feminines Webdesign für selbstständige Frauen?

Ich bin Michelle Karnolz, Informatikerin und leidenschaftliche Fallschirmspringerin! Mit 360footsteps erfülle ich mir den Traum, feminines Webdesign für Business-Frauen mit großen Zielen anzubieten. Ich bin gern an deiner Seite, wenn du Hilfe bei deinem Raketenstart brauchst, damit dein Online-Business so richtig abhebt!

Überzeuge deine Traumkund*innen mit deiner Website und zeige ihnen, wofür du Expertin bist! Sei eine mutige Aeronautin und werde zur Überfliegerin deiner Branche mit meinem Premiumangebot Done-for-you-Webdesign, inspirierendem Website-Coaching oder meinen energiegeladenen WordPress-Workshops. Ich bin so gespannt auf deinen raketenstarken Lift-off – darf ich dich dabei begleiten?

Vielleicht interessiert dich auch…

Scroll to Top

Lerne in 5 Tagen, was erfolgreiche Websites anders machen!

Hol‘ dir meine kostenlose 5-tägige E-Mail-Challenge in dein Postfach, um mehr Conversion zu bekommen!

Marketing by
Marketing by

Die Anmeldung und die Challenge sind zu 100% kostenlos. Du erhältst nach der Anmeldung meinen Newsletter gemäß meiner Datenschutzerklärung. Abmeldung jederzeit möglich.