Responsive design to protect against mobile-first conversion

Im September 2020 erfolgte die Umstellung auf den Mobile-First-Index von Google. Das bedeutet, dass Websites nicht mehr wie bisher nach der Desktop-Ansicht (Computer), sondern nur noch nach der Smartphone-Version bewertet werden.

Date: 21/02/2024

post.title

Inhaltsverzeichnis:

  • Mobile-First Index von Google
  • Was ist liquid Design?
  • Was ist responsives Design?
  • Bewährte Praktiken für Responsive Design
  • Die Auswirkungen auf SEO und Werbung
  • Schlussfolgerung: Vorbereitungen für die Mobile-First-Zukunft

Kategorien:

ResponsiveOnline-AnzeigenLiquid DesignMobile first WebdesignResponsives WebdesignSmartphone-VersionBenutzererfahrung

Mobile-First Index von Google

Im September 2020 erfolgte die Umstellung auf den Mobile-First-Index von Google. Das bedeutet, dass Websites nicht mehr wie bisher nach der Desktop-Ansicht (Computer), sondern nur noch nach der Smartphone-Version bewertet werden.

Viele Websites, die bei Google ganz oben rangieren, werden unter dieser Umstellung leiden, wenn sie nicht rechtzeitig eine gute und mobile Version ihrer Website haben.

Google hat auch mitgeteilt, dass es nicht mehr zeitgemäss ist, eine separate mobile Version der Website zu erstellen, so dass man die bestehende Website einfach so belassen kann, wie sie ist. Die gesamte Website als solche muss also auf Desktop und Smartphones funktionieren. Dies gilt nicht nur für die organische Reichweite, sondern auch für den Preis Ihrer Anzeigen bei Google und Facebook

Die genauen Begriffe für dieses Verhalten einer Website sind "Responsive Design" und "Liquid Design". Sie sollten diese beiden Begriffe unbedingt kombinieren, aber dazu später mehr.

Was ist liquid Design?

Flüssiges Design bedeutet, dass Texte, Boxen, Schaltflächen und Ähnliches auch dann größer und kleiner werden, wenn das Browserfenster vergrößert oder verkleinert wird. Die Struktur der Webseite sollte jedoch gleich bleiben.

Man kann sich das so vorstellen: Wenn eine Webseite auf dem Computer 3 Spalten nebeneinander hat, hat sie auch auf dem Smartphone 3 Spalten nebeneinander. Natürlich sind diese dann extrem zusammengequetscht. Das Layout der Website ist in diesem Fall für einen Computer und nicht für Smartphones gedacht. Um dieses Problem in den Griff zu bekommen, muss man ein wenig mehr tun, als variable Breiten zu verwenden.

Was ist responsives Design?

Im Gegensatz zum flüssigen Design ändert das responsive Design die Seitenstruktur und das Layout auf verschiedenen Bildschirmgrößen.

Mit dem vorherigen Beispiel würden wir mit responsivem Webdesign auf dem Smartphone nur noch eine Spalte haben, so dass der Inhalt genügend Platz hat und sich nicht gegenseitig bedrängt.

Ebenso ist es möglich, dekorative Bilder in der mobilen Version der Website wegzulassen, damit die Nutzer nicht ewig lange Beiträge oder Seiten ansehen müssen. Nachdem nun alles untereinander steht, muss man auf die Länge des Inhalts achten. Dabei ist es wichtig, dass auf dem Smartphone keine Texte entfernt werden, denn Google achtet nur auf die Smartphone-Version Ihrer Website und Sie wollen, dass Ihre Texte für Google und auch im Google-Ranking auffindbar sind.

Bewährte Praktiken für Responsive Design

  1. Flexible Raster: Verwenden Sie Raster-Layouts, die sich an verschiedene Bildschirmgrößen anpassen, um sicherzustellen, dass der Inhalt gut strukturiert und auf jedem Gerät leicht zu bedienen ist.

  2. Medienabfragen: Implementieren Sie CSS-Media-Queries, um unterschiedliche Styling-Regeln auf verschiedene Geräte anzuwenden und so die Benutzerfreundlichkeit zu verbessern, indem Sie Layout-Änderungen auf verschiedenen Geräten optimieren.

  3. Optimieren Sie Bilder: Stellen Sie sicher, dass Bilder reaktionsfähig sind und je nach Gerät des Nutzers in unterschiedlichen Größen geladen werden, um die Ladezeiten der Seite zu verkürzen und den Datenverbrauch zu senken.

  4. Vereinfachen Sie Menüs: Wandeln Sie mehrstufige Menüs in einfache Dropdown-Menüs für kleinere Bildschirme um, um die Benutzerfreundlichkeit und den Zugang zu verbessern.

Die Auswirkungen auf SEO und Werbung

Mit der Mobile-First-Indexierung wirkt sich die Mobilfreundlichkeit Ihrer Website nicht nur auf das organische Suchranking aus, sondern auch auf die Kosten und die Wirksamkeit Ihrer Anzeigen auf Plattformen wie Google und Facebook. Websites, die ein nahtloses mobiles Erlebnis bieten, schneiden in der Regel sowohl in den organischen als auch in den bezahlten Suchergebnissen besser ab.

Schlussfolgerung: Vorbereitungen für die Mobile-First-Zukunft

In der heutigen digitalen Landschaft, in der die Abhängigkeit von Smartphones allgegenwärtig ist, ist es unerlässlich, dass Ihre Website optimiert ist. Stellen Sie sich vor, dass Sie ein gastfreundliches Ambiente schaffen, in dem sich jeder Besucher wie zu Hause fühlt, unabhängig davon, ob er mit einem kompakten Telefon oder einem größeren Tablet navigiert. Wenn Sie sich für ein responsives Design entscheiden, stellen Sie im Grunde sicher, dass Ihr Online-Bereich für alle einladend ist und jedem Besucher ein nahtloses und angenehmes Surferlebnis bietet. Und es geht nicht nur darum, nett zu sein; es hilft Ihnen auch, in den Suchmaschinen-Rankings vorne zu bleiben, vor allem, da diese sich auf Websites konzentrieren, die gut mit mobilen Nutzern zusammenarbeiten.

Mehr Blogbeiträge

Content Marketing in verschiedenen Formen

Content Marketing in verschiedenen Formen

Content Marketing ist die Kunst, mit Inhalten Reichweite auf Google, Facebook und allen anderen Social-Media-Plattformen zu erzielen. Es gibt viele verschiedene Formen von Content Marketing. Diese unterscheiden sich zum einen durch das Medium des Inhalts, z.B. Video, Audio-Podcast oder Text (mehr dazu im nächsten Blogpost), zum anderen unterscheiden sie sich in der Form des Inhalts. Hier unterscheiden wir zwischen aktuellen Artikeln und Evergreen Content.

Corporate Websites zukunftssicher aufbauen

Corporate Websites zukunftssicher aufbauen

Im digitalen Zeitalter dient eine Corporate Website als digitales Abbild eines Unternehmens. Zudem ist diese häufig die erste Anlaufstelle für potenzielle Kunden, Partner und Mitarbeiter. Da sich Technologie und Verbrauchererwartungen rasant weiterentwickeln, ist es für Unternehmen von entscheidender Bedeutung, sicherzustellen, dass ihre Website aktuell ist. Jedoch nicht nur die Aktualität, sondern auch die Zukunftssicherheit ist von enormer Bedeutung. Das heisst, dass Websites so entworfen und umgesetzt werden müssen, dass sie sich an die sich im Laufe der Zeit ändernden Trends, Technologien und Benutzerbedürfnisse anpassen können.

Brauche ich einen Tech-Co-Founder?

Brauche ich einen Tech-Co-Founder?

Die Entscheidung, ob Sie einen Tech-Mitgründer für Ihr Start-up benötigen oder nicht, hängt von diversen Faktoren ab. Insbesondere das eigene Geschäftsmodell, die Rolle der Technologie im Unternehmen, dessen Produkt oder Dienstleistung, das eigene technische Fachwissen und die zur Verfügung stehenden Ressourcen spielen eine grosse Rolle. Hier sind einige Überlegungen, die bei solch einer Entscheidung helfen können:

Bezahlte Werbung (soziale Medien/Suchmaschinen)

Bezahlte Werbung (soziale Medien/Suchmaschinen)

Entdecken Sie die Macht bezahlter Werbung in sozialen Medien und Suchmaschinen. Lernen Sie, wie Sie Ihre Online-Präsenz mit zielgerichteten Anzeigenkampagnen auf Facebook, Google und anderen Plattformen steigern können.

Content marketing und content upgrades im Detail

Content marketing und content upgrades im Detail

Eine weitverbreitete Form der aktiven Monetarisierung ist die Bereitstellung von sogenannten Content-Upgrades für Blogbeiträge. Dabei handelt es sich meist um Hörbücher oder Videos zu einem bestimmten Thema.

Aktive Monetarisierung

Aktive Monetarisierung

Unter «aktiver Monetarisierung» einer Website verstehen wir bei Webentertainer, dass sich der Website-Besucher eindeutig für den Kauf eines Produktes oder einer Dienstleistung entscheiden muss. Dies sind Online-Shops, kostenpflichtige Downloads oder Spendenaufrufe, bei denen der Kunde seine Kreditkarte oder eine andere Zahlungsmethode verwenden muss.