SEO Webdesign: Die 5 wichtigsten Erfolgsfaktoren
von Raffael Karlovich - Letztes Update 7. Oktober 2024
SEO Webdesign kombiniert Suchmaschinenoptimierung und Webgestaltung, um die Online-Sichtbarkeit und Benutzerfreundlichkeit einer Website zu maximieren.
Es umfasst technische Optimierungen, wie schnelle Ladezeiten und mobile Anpassung, sowie die visuelle und strukturelle Gestaltung von Websites.
Ziel ist es, das Ranking in Suchmaschinen zu verbessern, mehr Besucher anzuziehen und gleichzeitig eine optimale Benutzererfahrung zu bieten.
Das grösste Dilemma bei der Erstellung von Websites, die gut für Suchmaschinen optimiert sind, ist folgendes:
Es gibt viele Webdesigner.
Es gibt einige SEO Spezialisten.
Aber es gibt nur wenige, die wirklich beides beherrschen.
In diesem Artikel schauen wir uns die 5 wichtigsten Faktoren an, die beachtet werden müssen, um SEO und Webdesign unter denselben Hut zu bringen, ohne das ein Bereiche übermässig Schaden nimmt von diesem Balanceakt.
Eine kurze Vorschau auf den Text:
- SEO Webdesign: Warum Google interaktive Elemente auf Websites nicht besonders mag
- SEO-freundliches Grundgerüst und die 3-Klick-Regel im SEO Webdesign: So leitest du Besucher geschickt durch deine Seite
- Wie das Design und die Gestaltung deiner Website Suchmaschinenoptimierung verbessert
- Typografie im SEO Webdesign: Wie Schriftarten viel wichtiger sind, als man denkt
Zusammenhang SEO und Webdesign
Was genau versteht man unter SEO-Webdesign?
SEO-freundliches Webdesign.
Es geht darum, eine Website so zu gestalten und zu strukturieren, dass sie für Suchmaschinen möglichst attraktiv und einfach zu finden ist.
Genau so wichtig ist es, die Benutzererfahrung für Besucher auf einer Website zu optimieren.
SEO-freundliches Webdesign zielt darauf ab, eine Website so zu gestalten und zu strukturieren, dass sie nicht nur für Suchmaschinen optimiert ist, sondern dass sie auch das Nutzererlebnis verbessert.
Schauen wir uns nun die 5 wichtigsten Erfolgsfaktoren an, damit die Suchmaschinenoptimierung mit dem Webdesign harmoniert.
1. SEO Webdesign: Interaktive Elemente
Willst du, dass Google deine Website besonders mag?
Dann musst du dich von einigen deiner interaktiven Lieblingsdesign-Elemente verabschieden.
Interaktive Elemente wie:
- Popup-Fenster
- Automatisch abspielende Videos im Hintergrund
- Übertriebene Parallax-Scrolling-Effekte
- Slider und Karusselle
Ich weiss, es tut weh, aber glaub mir – es lohnt sich!
“Kill your darlings” – ein Grundsatz, der vielen Designern Bauchschmerzen bereitet.
Oft sind die visuellen, interaktiven Spielereien der Blickfang einer Website.
Wieso also weg damit?
Interaktiv und schön hört sich doch gut an?
Aus SEO-Sicht leider nicht.
Nehmen wir die oft verwendeten Slider als Beispiel.
Du weisst schon, diese automatisch bildwechselnden Fotokarusselle, die meist von der ersten Stelle einer Website grüssen.
Im Namen der Verständlichkeit baue ich widerwillig einen kleinen Slider ein.
Klar, eine Website steht und fällt nicht durch einen Slider.
Es ist die Ansammlung und zu starke Betonung auf interaktive Elemente, die sich negativ auf die Suchmaschinenoptimierung auswirken können.
Also, wieso stört sich das SEO an diesen Slidern und an anderen interaktiven Elementen auf einer Website?
4 Gründe:
Interaktives Webdesign und SEO: 4 Gründe, wieso Slider keine gute Idee sind
1. Slider machen Websites langsamer
Google hasst langsame Websites.
Und speicherintensive Elemente wie Slider bremsen deine Seite aus.
Du kannst die Geschwindigkeit deiner Website mit Hilfe von Googles kostenlosem Tool PageSpeed Insights testen.
Die Analyse dauert rund 30 Sekunden.
Danach siehst du 4 Werte von 1-100.
Der erste Wert, die Leistung, ist der wichtigste Faktor.
2. Googlebots sind ungeduldig
Slider verwirren die Googlebots, die deine Website prüfen und indexieren.
Damit deine Seite in den Suchergebnissen ganz oben landet, müssen deine Inhalte für Google leicht zu verstehen sein.
Die Googlebots (auch Webcrawler oder Spider gennant) müssen sich durch einen längeren, komplizierteren Code kämpfen, den es benötigt, um interaktive Elemente darzustellen.
So wird die Arbeit der Webcrawler unnötig schwerer gemacht, den eigentlichen Text zu finden und zu verarbeiten.
3. Untaugliche Informationsquelle
Besucher ignorieren den Text innerhalb von Slidern häufiger, als statische Inhalte ohne Slider.
Wichtige Inhalte, die automatisch verschwinden und auftauchen in einem zeitlich vorgegebenen Takt?
Achtest du auf den Inhalt aller Slider und gehst sie einzeln durch, wenn du eine Website besuchst?
Die meisten Nutzer wissen unterbewusst, dass sich dahinter keine wichtigen Infos verstecken.
Höhere Absprungraten sind die Folge – und das ist Gift für dein SEO.
4. Anpassung auf mobile Geräte
Slider sind ein Problem für Smartphones und Tablets.
Sie sind auf eine horizontale Darstellung ausgerichtet, während Smartphones Inhalte vertikal darstellen.
Entweder müssen sie stark angepasst oder ganz weggelassen werden.
Und unterschiedliche Inhalte auf Desktop und Mobile verwirren Google nur noch mehr.
Slider sind ein gutes Beispiel dafür, wie interaktive Elemente Probleme für SEO schaffen können.
Sie stehen für viele andere interaktive Website-Elemente, die ähnliche Schwierigkeiten verursachen, wenn sie zu oft verwendet werden.
Minimiere den Einsatz interaktiver Elemente wie Slider, Popup-Fenster und automatisch abspielender Videos auf deiner Website. Dies verbessert die Ladezeit, erleichtert Google das Crawlen und optimiert die Nutzererfahrung.
2. SEO und Webdesign: Websitestruktur
Auch die sorgfältigste inhaltliche und gestalterische Arbeit an einer Website verpufft, wenn du deine Website-Besucher sich selbst überlässt.
Ohne klare Struktur und Orientierung verlieren sich diese nur allzu schnell in den Untiefen deiner Website.
Die Folgen: Besucher verlassen deine Website schneller, ein schlechtes Nutzererlebnis und damit fatale Signale an Google.
Für die Struktur einer Website gibt es eine goldene Regel:
Die Drei-Klick-Regel.
Jeder Besucher sollte jede Seite deiner Website mit maximal drei Klicks erreichen können.
Und das von jeder beliebigen Seite aus.
Besucher sollten jede Seite von jedem Punkt aus in maximal drei Klicks erreichen können, um hohe Absprungraten und ein schlechtes Nutzererlebnis zu vermeiden.
Dein Ziel muss es sein, deine Seiteninhalte so zu ordnen und zu verknüpfen, dass sich jeder Besucher intuitiv und schnell zurechtfindet.
Das erhöht nicht nur die Verweildauer der Website-Besucher, sondern erleichtert auch Google das Crawlen und Indexieren.
Erstelle einen Plan deiner Website, der die Hierarchie der einzelnen Seiten zeigt.
So sollte deine Website nicht aussehen.
Zu wirr.
Verästelungen und Verzweigungen ohne logische Struktur.
6 Klick-Ebenen sind viel zu viel.
Mach es besser so:
Brotkrummen wie bei Hänsel und Gretel
“Breadcrumb”-Navigationspfade zeigen deine aktuelle Position innerhalb der Website-Struktur.
Die Brotkrummen von Hänsel und Gretel, die den Weg nach Hause weisen, haben bei der Namensgebung tatsächlich Vorbild gestanden.
Besonders auf grossen Seiten, wie Online-Shops mit vielen verschiedenen Artikeln, sind Breadcrumbs unverzichtbar.
Sie helfen zum Beispiel bei Galaxus, dass man sich in den Unterkategorien besser zurechtfindet.
Einfache Navigation
“Don’t Make Me Think” ist ein Design-Prinzip von Steve Krug.
Es besagt, dass Webseiten oder Produkte möglichst intuitiv und selbsterklärend bedienbar sein sollten.
Steve Jobs und Apples Mantra.
Nutzer sollten ohne Nachdenken verstehen, wie etwas funktioniert, damit sie sich auf die wesentlichen Inhalte konzentrieren können.
Wichtig sind dabei:
- Konsistente Platzierung von Navigationselementen
- Logische Hierarchie der Seiten
- Wichtige Informationen an den Anfang
- Prägnante, relevante Titel für jede Seite
Nutze klare Navigation, flache Hierarchien und aussagekräftige interne Verlinkungen, um ein intuitives Nutzererlebnis zu schaffen.
3. Visuelle Gestaltung: SEO-freundliches Design
SEO-Webdesign heisst, die optische Gestaltung der Website unterstreicht deine Inhalte.
Achte auf folgende Punkte:
- Konsistentes Farbkonzept
- Betonung der wichtigsten Inhalte
- Offene (weisse) Flächen (White Space)
- Auflockerung der Texte durch Titel und Absätze
- Lesbarkeit: Die passende Schrift
1. Farbauswahl
2. Zentrale Inhalte hervorheben
Diese Text-Box ist für Skimmer gedacht. Wieso? Dafür musst du schon den ganzen Text lesen, der abseits dieser auffälligen Text-Boxen zu finden ist.
3. Whitespace - Raum zum Atmen
4. Text-Auflockerung durch Titel, Absätze und Bullet-Points
Jeder kennt es:
Man liest einen Text und fragt sich danach, was zur Hölle man da eigentlich gelesen hat.
Wieso passiert das?
Klar, man ist mit dem Kopf nicht ganz bei der Sache.
Aber auch der Schreiber trägt dabei oft eine Mitschuld.
Die Struktur und Darstellung eines Textes können das Abschweifen weiter bewirtschaften und ankurbeln.
Wie das?
So:
Vermeide es also endlos erscheinende Texte zu veröffentlichen.
Vermeide Monotonie.
Kurze, kompakte Sätze, wenn möglich.
Optische Veränderungen regen das Denken neu an und reissen den Leser sanft aus seinem hypnotischen Zustand des Alibi-Lesens.
Arbeite mit Überschriften, Absätzen und Zeilenabständen, um lange Texte in verdauliche Häppchen aufzuteilen.
“Das Auge liest mit”, wie man so schön sagt.
Ok, sagt man nicht.
Aber sinnvoller als mitessende Augen ist es allemal.
5. Typografie für Webdesign & SEO: Lesbarkeit
Adrian Frutiger, Hans Edward Meiner, Max Bill.
Nicht wenige Schriftartpioniere stammen aus der Schweiz.
Ob Helvetica, Univers oder Frutiger – viele zeitlose Klassiker haben ihre Wurzeln zwischen Genf und St. Gallen.
Grund genug, dass auch du in Sachen digitaler Schriftart höchste Massstäbe anlegst.
Immerhin entscheidet die typografische Qualität massgeblich darüber, wie lange Besucher Texte tatsächlich lesen.
Eine unpassende Schrift wirkt amateurhaft, hobbymässig, unseriös.
Comic Sans.
Eine Zweiwort-Punchline für jeden Designer.
Comic Sans gilt wohl als die meistgehasste Schrift der Welt.
Und sie ist Opfer unzähliger Memes im Internet.
Eine kleine Auswahl.
Schriftarten sind also durchaus imstande Emotionen zu transportieren.
Schauen wir uns weitere Schriftarten an, von denen du grossen Abstand halten solltest.
Eine kurze Tour, durch Schriften, die man für Online-Inhalte nicht nutzen sollte. (Lobster)
Für kurze, grafische Akzente können solche Schriften durchaus sinnvoll sein. (Pacifico)
Aber nicht für wichtige Inhalte. (Press Start 2P)
Auch Kreativität hat ihre Grenzen. (Risque)
Solche Schriften möchtest du deinen Lesern nicht zumuten. (Workbench)
Geh bei der Wahl von Schriften keine Experimente ein. Leserlichkeit steht im Vordergrund.
Serif oder Sans Serif?
Wer holländisch kann, der weiss, der Begriff “Serif” stammt vom Wort “Schreef”, übersetzt “Strich”.
Und “sans” ist Französisch und bedeutet “ohne”.
Wieso braucht es 2 verschiedene Sprachen für den Begriff “Sans Serif”?
Keine Ahnung.
An Kreativität mangelt es Designern selten, daher erfinden sie auch gerne mal ein holländisch-französisches Wort, zu dessen Nutzung wir dann verdammt sind.
Wie auch immer…
Sans Serif heisst also “ohne Strich”.
Auf Deutsch spricht man von Serifenschriften und serifenlosen Schriften.
Aber wo liegt der Unterschied? Mit und ohne Strich?
Die bekannteste Serifenschrift ist Times New Roman, die in der Regel als Standardschrift bei Microsoft Word eingestellt ist.
Bei den serifenlosen Schriftarten wird oft Open Sans benutzt.
Wir sehen bei den Serifenschriften zusätzliche, verschnörkelte Linien, die bei serifenlosen Schriften (Sans Serif) nicht vorhanden sind.
Für Schriften, die von Bildschirmen abgelesen werden, ist es Best- Practice, serifenlose Schriften wie Open Sans, Roboto oder Lato zu verwenden.
Bei physischem Druck dagegen sind Serifenschriften erste Wahl.
Warum diese Einteilung in Bildschirm und Druck?
Als man noch Bildschirmauflösungen hatte, bei denen man die Pixel einzeln zählen konnte, wirkten die Serifenschriften unsauber und unordentlich auf dem Monitor.
Heute besteht dieses Problem zwar nicht mehr.
Aber weil seit Anbeginn der Computer serifenlose Schriftarten genutzt wurden, ist es auch heute noch so.
Gewohnheit.
Und wir Menschen mögen Gewohnheit.
Auswirkung Schriftarten aufs SEO
Aus SEO-Perspektive ist die Sache einfach:
Je holpriger sich Inhalte lesen, desto schlechter schneidet eine Seite ab im Vergleich mit lesefreundlicheren Inhalten.
Was sich gut liest, wird auch gern und lange gelesen.
Und gut liest sich das, was man gewohnt ist zu lesen.
Will heissen:
Serifenlose Schriften für Bildschirme nutzen.
Serifenschriften für Druck in jeglicher Form nutzen.
Fazit: Gewohnheit senkt die Absprungrate (Bounce Rate).
Weitere wichtige Punkte bezüglich Schriftart
Wer einen Fliesstext in 11 Pixel Schnörkelschrift auf dunkelgrauem Grund präsentiert, braucht sich über mässige Rankings nicht zu wundern.
Wer soll das lesen?
Die Schriftgrösse sollte mindestens 17px betragen, je nach Schriftart.
Ich mag es grösser.
Diese Schrift (Poppins), die du gerade liest, ist auf Desktop Computern und Laptops 20px, mit 45px Zeilenhöhe.
Angenehm?
Achte auf starke Kontraste zwischen Hintergrundfarbe und Schriftfarbe.
Streu ab und zu Bullet-Points ein.
Diese sorgen für zusätzliche Abwechslung.
Wähle Schriftarten sorgfältig: Serifenlose Schriften wie Open Sans eignen sich für Bildschirme am besten. Achte auf Lesbarkeit, passende Schriftgrösse (mindestens 17px) und hohe Kontraste, um das Nutzererlebnis zu verbessern und die Absprungrate zu senken.
4. Die Inhalte - Content erstellen
Für einen Webdesigner ist es wichtiger, eine optisch beeindruckende Seite für Kunden zu erstellen, als eine sehr gut SEO optimierte Website abzuliefern.
Wieso?
Weil SEO nicht sichtbar ist für SEO-Unkundige.
Die Optik aber ist der erste Bewertungsfaktor.
Niemand identifiziert sich mit einer Website aufgrund hochwertiger Suchmaschinenoptimierung.
Das Aussehen ist entscheidend, wieder einmal.
Um die inneren Werte kümmert man sich später, die werden erst mit der Zeit sichtbar.
Zuerst freut man sich über das schöne Äussere.
Umso schwerer wiegen dann die Probleme, die erst später erkannt werden.
Man muss von Neuem beginnen.
Aber zurück zum Webdesign und SEO.
Ohne Text, kein SEO.
Folgende 4 Probleme tauchen oft auch und bremsen das fliessende Zusammenspiel von gutem Webdesign und wirkungsvoller Suchmaschinenoptimierung.
- Schlechte, unbrauchbare Inhalte
- Unflexible, generische Bausteine
- Zu starke Content-Verlagerung auf Blog
- Fehler bei Bildern und Grafiken
Nutzlose, schlechte Inhalte
Expertise ist das A und O deiner Inhalte, das sollten keine externen Agenturen autonom übernehmen.
Auf jeden Fall nicht, ohne ausgiebiger Beratung mit dem Unternehmen.
SEO-optimierte Texte, die viel Klicks bringen, aber die falsche Zielgruppe anziehen, sind wertlos.
Gerade für erklärungsbedürftige Produkte und Dienstleistungen.
Hier wollen Leser oft tief ins Thema eintauchen, um eine fundierte Kaufentscheidung zu treffen.
Je anspruchsvoller ein Thema, desto höher die Platzierung von langen, aber hochwertigen Texten auf einer Website.
Die Erstellung von Inhalten ist zentral im On-Page-SEO, einem Teilbereich der Suchmaschinenoptimierung.
Webdesign Bausteine gegen SEO
Ein Grossteil der Webdesigner arbeitet mit vorgefertigten Templates, also Mustern, die man bereits verwendet hat und die sich bewährt haben.
Daher haben viele neue Websites einen sehr ähnlichen Aufbau.
Solche Templates sind relativ starr und für die Textmenge erstellt, die am besten aussieht.
Wenn du nun mehr Text, längere Titel oder mehr Knöpfe haben möchtest als bei der Vorlage, verliert das Design mit jeder zusätzlichen Änderung an Eleganz.
Schwer zu erklären.
Lass es mich demonstrieren:
Nehmen wir die Seite, die ich vorhin benutzt habe, um zu zeigen, wie wichtig White Space sein kann.
Schick…
Wenn man nun eine Seite im gleichen Stil haben möchte, aber mehr Text, im Titel oder der Beschreibung einbauen will, so sieht das schnell nicht mehr ganz so schick aus.
Pfui…
Daher wird oft versucht, die gewünschte Textlänge der Website an die Beispiels-Textlänge der Templates anzugleichen.
Die Kosten dafür sind schlechtere Rankings bei Google und zu dünner Inhalt mit zu wenigen Informationen für potentielle Kunden.
Hier wird das Dilemma der Beziehung zwischen qualitativem SEO und qualitativem Design besonders deutlich.
Was wäre dir lieber?
Schlecht gefunden werden
oder
Besucher, die deine Website schnell wieder verlassen, weil sie von den schlechten Inhalten abgeschreckt werden?
Natürlich möchten wir keines von beiden.
Ein Mittelweg muss also gefunden werden.
Wie stellen wir das an?
Zentral ist es, das Design um die Informationen herum zu bauen, nicht umgekehrt!
Weitere wichtige Punkte:
- Texte so kurz und knackig wie möglich, Füllwörter und unnötigen Ballast vermeiden. ABER inhaltlich keine Konzessionen eingehen. Im Zweifelsfall ist mehr Text besser.
- Reduzierte optische Elemente, wie Hintergründe oder Bilder. Möglichst sinnvolle Bilder. Nicht nur Stimmungsbilder, sondern auch Bilder, die den Inhalt besser kommunizieren und unterstreichen.
- Die wichtigsten Inhalte so weit oben auf der Seite wie möglich platzieren und niemals hinter PDFs, Dokumenten oder ausklappbaren Elementen “verstecken” (Toggle-Elemente).
- Webdesigner (falls nicht du derjeniche bist), der dieser Problematik zu 100% bewusst ist und keine Abkürzungen nimmt.
Es folgt eine Auswahl an leider oft SEO-schädigenden Webdesign-Floskeln.
SEO-schädigenden Webdesign-Floskeln.
Mein Skepsis-Radar schlägt bei folgenden Aussagen aus:
- Nicht zu viel Text
- Text langweilt Besucher in dieser kurzlebigen, glitzerding- jagender Gesellschaft
- Optik ist wichtiger als lange Texte
- Die SEO-Optimierung nehmen wir nach der Fertigstellung der Website ins Visier
- Ja nicht zu komplex
- Suchmaschinen bevorzugen kurze Inhalte
- Wir schreiben die Text selber und optimieren sie für die Suchmaschine. Sie können danach Inputs geben.
Der Zufall will es, dass weniger Text, weniger Arbeit bedeutet, weil – wie bereits erwähnt – die Gestaltung viel einfacher ist.
Möchtest du mehr über gute Inhalte und Strategien erfahren?
Im Content-Marketing dreht sich alles um die Erstellung von Inhalte für die passenden Zielgruppen.
Verlagerung auf Blog
Eine gute Lösung für die gestalterische Entlastung der Website ist es, einen Blog zu führen.
Fehlende Inhalte auf der Website komplett kompensieren kann aber auch ein Blog nicht.
Blogs eignen sich für dynamische Inhalte.
Die Hauptwebsite für statische Inhalte.
Diesen statischen Elementen sollte man besonders grosse Beachtung schenken.
Bilder: Grösse, Format und Zweck
Neben dem Text sind Bilder ein wichtiger Faktor fürs SEO.
Zudem lockern Bilder Textinhalte auf und sorgen für optische Akzente.
Um Bilder möglichst SEO-tauglich zu machen, musst du folgendes beachten:
Grösse, Dimension und Format anpassen
Bilder sollten im Normalfall nicht über 100KB gross sein.
Falls sie über 100KB sind, verkleinere sie mit einem Tool, z.B Squoosh.
Grosse Bilder brauchen länger, bis sie geladen werden und verlangsamen so deine Website.
Und Google mag keine langsamen Websites.
Nutzer auch nicht.
Am bekanntesten sind die Bildformate JPEG und PNG, wobei PNG für Bilder mit durchsichtigem Hintergrund und Illustrationen gedacht ist.
Für Fotografie und realistischere Bilder hingegen JPEG.
Verwende aber wenn möglich das Format WebP.
Es ist etwas neuer, stellt Bilder verlustfreier dar und braucht gleichzeitig weniger Speicher.
WebP eint die Stärken von PNG und JPEG.
Hier die optimalen Werte für Bilder auf Websites:
Beitragsbilder (üblich):
- Dimensionen: 1200×800 Pixel
- Dateigröße: Unter 100 KB, besser unter 50 KB
- Format: WebP
Thumbnails (Vorschaubilder):
- Dimensionen: 150×150 Pixel
- Dateigröße: Unter 15 KB
- Format: WebP
Hintergrundbilder:
- Dimensionen: 1920×1080 Pixel
- Dateigröße: Unter 200 KB
- Format: WebP
Logos:
- Dimensionen: 300×100 Pixel
- Dateigröße: Unter 20 KB
- Format: SVG
Icons:
- Dimensionen: Anpassbar (skalierbar)
- Dateigröße: Unter 5 KB (variiert je nach Komplexität)
- Format: SVG
Titel und Alt-Tag
Für die Suchmaschinenoptimierung solltest du alle Bilder im Alt-Tag (Alt-Text) kurz beschreiben.
Platziere darin deine Keywords, falls sinnvoll.
Google nutzt den Alt-Tag, um den Inhalt des Bildes zu verstehen.
Der Titel des Bildes ist nicht direkt SEO-relevant, kann aber von Besuchern gesehen werden, daher lohnt es sich, jeweils einen kurzen Titel zu setzen.
Deko oder inhaltlich relevant
Für Stimmungsbilder und Bilder, die inhaltlich keinen Bezug zum Text haben, braucht es keinen Alt-Tag.
Einfach leer lassen.
Versuche Bilder zu finden und zu benutzen, die deine Inhalte tatsächlich stützen und erweitern.
Bilder, die mehr sind als nur Dekoration.
Infografiken sind eine gute Option.
Produktbilder, die die Eigenschaften des Produkts visuell vermitteln.
Auch Videos und Clips können Inhalte einfacher rüberbringen.
5. Responsive Design
Digitaler Konsum geht inzwischen mehrheitlich über kleine Screens.
Games, Videos, Social Media.
Und eben auch Websites und Suchmaschinen.
Das hat gravierende Auswirkungen, die bis tief hinein in die Konzeption einer Website reichen.
Mobile First
Responsive Design ist die Anpassung einer Website auf verschiedene Geräte, mit verschiedenen Bildschirmgrössen, also Auflösungen.
Lange war für Webdesigner klar, dass eine Website zuerst für Desktop PCs und Laptops erstellt wird.
Ist diese fertiggestellt, wird die Seite auf mobile Geräte angepasst.
Mobile First dreht den Spiess um.
Man startet zuerst mit dem Erstellen der Website für mobile Geräte, vor allem Smartphones und arbeitet sich dann hoch, bis zu der Anpassung auf grosse Bildschirme.
Welchen Weg sollte man wählen, Mobile First oder das übliche Vorgehen?
Ganz einfach, bei den Geräten, von denen deine Website am häufigsten aufgerufen werden.
Und dort, wo die Nutzer am häufigsten die Aktion ausführen, die du haben möchtest, wie beispielsweise einen Verkauf.
Du kannst bei Google Search Console und Google Analytics (GA4) prüfen, auf welchen Geräten deine Seite am häufigsten aufgerufen wird.
Falls die Website von Grund auf neu gebaut wird und es noch keine Statistiken über die Auswahl der Geräte der Besucher gibt, solltest du dir folgende Fragen stellen.
Ist meine Website vor allem zur Vermittlung von Informationen gedacht, die zur Kontaktaufnahme der Besucher führen soll?
oder
Ist meine Website vor allem für den direkten Verkauf von Produkten und Dienstleistungen gedacht?
Ist die Antwort von Frage 1 Ja, so ist Mobile First tendenziell die bessere Wahl, weil die Suche mit mobilen Geräten öfters genutzt wird, als von grösseren Geräten.
Ein Ja bei Frage 2 spricht für den klassischen Aufbau einer Website. Denn auch wenn Suchanfragen mittlerweile häufiger bei mobilen Geräten sind, so sind Käufe trotzdem auf Laptops und Desktop PCs ungemein höher.
Buchst du beispielsweise einen Flug über dein Smartphone? Wie siehts beim Kleiderkauf aus?
Fazit: Wichtige Käufe werden überwiegend mit Hilfe grösserer Geräte abgewickelt.
Weitere wichtige Punkte für die Anpassung von Websites auf verschiedene Geräte
Die Benutzerführung auf mobilen Geräten muss intuitiv über Tap und Swipe funktionieren.
Direkte Steuerung mit den Fingern ist ungenauer als die indirekte Steuerung via Maus oder Touchpad.
Die Inhalte müssen vertikal angelegt werden.
Wurstfinger sind klar im Nachteil bei der Bedienung mobiler Geräte.
Diese Problematik wird skurrilerweise tatsächlich als Fat Finger Syndrom bezeichnet.
Für die Seitennavigation haben sich ausklappbare Hamburgermenüs auf kleinen Bildschirmen bewährt.
Hamburgermenüs sind die 3 horizontalen Striche übereinander, die bei einem Touch ausfahren.