Blogbeitrag

Responsive & der Mobile Only Index von Google

SEO Responsive Bootstrap Breakpoints

Der „Mobile Only Index“ von Google

Ursprünglich bereits im September 2020 angekündigt, geht Google aufgrund einiger Verzögerungen durch die Corona-Pandemie im März 2021 den nächsten Schritt in der Mobile First Optimierung: Mobile Only!

Die Gründe für responsive Webseiten sind vielfältig und begannen ursprünglich mit der Suchmaschinenoptimierung. Mittlerweile gehört eine mobil optimierte Webseite zum absoluten Standardprogramm und kann mit überschaubarem Programmieraufwand unkompliziert realisiert werden. Frameworks wie Bootstrap, Materialize, Uikit unterstützen hier. 

Bereits seit 2019 greifen über 70% der Nutzer von mobilen Endgeräten auf das Internet zu. Betrachten wir das von der anderen Seite, bedeutet das: Ohne Mobiloptimierung werden über 70% der Nutzer ausgesperrt!

Was bedeutet „responsive“ überhaupt?

Am treffendsten ist hierzu die deutsche Übersetzung „reagierend“ – sprich, das Layout der Webseite reagiert auf die verschiedenen Bildschirmauflösungen dynamisch.

Wenn also der Bildschirm eine bestimmte Größe über- bzw. unterschreitet, greifen andere Formatierungsregeln für die Website - man spricht hier von sogenannten Breakpoints, die diese Grenzen markieren. 

 

Professionelle Webseite - nur so!

Sucht man beispielsweise bei Google oder Bing von einem mobilen Endgerät, werden die Webseiten besser positioniert, die dementsprechend für Handys oder Tablets optimiert wurden. Damit lautet die Anforderung an jede Webseite-Programmierung: mobiloptimierte Programmierung ist ein MUSS!

Unser Liebling: Bootstrap

Auch wir stehen bei jedem Website-Projekt wieder vor der Herausforderung, die Wünsche und Vorstellungen unserer Kunden umzusetzen und diese gleichzeitig in einer mobilen Ansicht zu realisieren. Dabei haben wir immer wieder die Erfahrung gemacht, dass der Bolide Bootstrap derzeit für uns am besten funktioniert, um effizient eine individuelle und gleichzeitig mobil optimierte Website zu programmieren. Bei der Erstellung von Internetseiten mit WordPress setzen wir derzeit auf die Verwendung von Elementor. Dieser bringt ein eigenes CSS-Framework für die responsive Optimierung mit.

Alternative zum responsiven Design: eine mobile Website

Wir unterscheiden hier responsives Webdesign - also eine Website, die sich dynamisch anpasst - von einer mobilen Website. Eine mobile Website bedeutet für uns in diesem Fall eine separate Entwicklung, die speziell auf die Anforderungen der mobilen Nutzung ausgelegt ist.

Ein Beispiel: Nehmen wir ein Autohaus: Die Nutzer der regulären Website werden umfangreich über die aktuellen Angebote informiert, hier findet man alles über Neuwagen, Gebrauchtwagen, Service, Finanzierungen uvm.

Die Nutzer der mobilen Webseite bekommen dagegen nur eine „abgespeckte“ Oberfläche angezeigt (z.B. mobil.autohaus-xyz.de), die lediglich folgende Möglichkeiten bietet:

  • Terminbuchung (Service / Beratung)
  • Rückruf anfordern
  • Neuwagen / Gebrauchtwagen
  • Probefahrt
  • Kundenkonto

Dadurch wird dem Interessenten am Handy gezielt das gezeigt, was seinen Bedürfnissen entspricht - das sind beispielsweise die Serviceleistungen des Unternehmens, die die Kunden dann benötigen, wenn sie unterwegs sind.

Erfahrungen

Eine unserer zentralen Erfahrungen dazu ist, dass gerade die mobilen Nutzerzahlen von Branche zu Branche doch sehr unterschiedlich sein können. Die Kernfrage, die sich hier wie immer stellt:

Was braucht der Nutzer und wie arbeitet er?

Es ist also die Frage nach dem maximalen Kundennutzen - womit wir direkt beim Thema „Use-Cases“ angelangt sind. Je nach Projektgröße ist es also unabdingbar, seine Besucher zu analysieren und kennen zu lernen - besser: sie zu verstehen! Und das mit optimaler Usability zu verbinden.

Ähnliche Artikel

Das Barrierefreiheitsgesetz

Stichtag 28. Juni 2025 - Pflicht zur Barrierefreiheit für Unternehmen.

Neuer Webauftritt für einen guten Zweck

Mit Hilfe der von uns erstellten online Börse kann die Freiwilligenagentur Schaffenslust ab sofort unkompliziert Ehrenämter vermitteln.

Univortrag "Webentwicklung Hands-on"

Ein kurzer Einblick in die Hauptaufgaben eines Browsers, Grundlagen in HTML, CSS, Kommunikation zwischen Browser & Server und JavaScript Basics.