24
Jul

Mit Responsive fit für Smartphone und Tablet

Für fast alle ist es mittlerweile selbstverständlich, über mobile Endgeräte wie Smartphones und Tablets auf Webinhalte  zuzugreifen. Gerade deswegen wird der Begriff Responsive für Website-Betreiber immer wichtiger. Dass dies längst nicht mehr nur ein Trend ist, zeigt auch eine aktuelle Statistik der Anzahl mobiler Zugriffe. Diese liegt aktuell bei mehr als 33 % – und wächst weiterhin schnell und stetig an. Das entspricht jetzt schon rund einem Drittel der Gesamtheit an Seitenzugriffen.

Doch was ist Responsive überhaupt?

Responsive WebDesign kann auch schlicht mit „anpassungsfähigen/reaktionsfähiges WebDesign“ übersetzt werden. Dabei erkennt die Internetseite, welches Endgerät mit welcher Bildschirmauflösung auf sie zugreift und passt automatisch das Layout von Inhalts- und Navigationselementen an den Bildschirm des Endgerätes an. Die Inhalte bleiben die selben wie auf der Standard-Ansicht der Website – nur der Aufbau ändert sich. So entsteht ein benutzerfreundlicher, gut lesbarer und flexibler Internetauftritt.

Braucht meine Seite eine Responsive Version?

Durch die immer stärkere mobile Nutzung ist Responsive mittlerweile sogar ein wesentlicher Punkt in der Kommunikations-Strategie einer Internetpräsenz. Die Bedürfnisse von mobilen Nutzern der eigenen Zielgruppe spielen hierbei eine tragende Rolle. Früher mussten Besucher mühselig Inhalte einer Website mit den Fingern größer zoomen (Pinch & Spread) und auf gut Glück versuchen, irgendwelche winzigen Navigationselemente – wie z.B. Buttons – zu treffen. Als Folge verließ der Seitenbesucher den Internetauftritt sehr schnell, ohne wiederzukehren. Diese Absprungrate (Bounce Rate) stieg – das Suchmaschinen-Ranking sank. Doch mit Responsive sind diese Zeiten längst vorbei! Daher beantwortet sich die Frage selbst mit einem klaren JA – jede Internertseite benötigt heutzutage eine Responsive Version!

repsonsive webdesign agentur coalo
Gleicher Inhalt – unterschiedlicher Aufbau: unsere Website coalo.de in der Standard-Ansicht (links) und der optimierten Darstellung für Smartphones (rechts).

Wie funktioniert Responsive?

Eine Website besteht aus einer Gitterstruktur (Grids), in deren Elemente die Seiteninhalte eingepflegt sind. Für eine Responsive Darstellung werden diese Grids komplett umgebaut und flexibel für das jeweilige Browserfenster (Viewport) angeordnet. Anhand von Medienabfragen (Media Queries) wird automatisiert ein passender Aufbau zugeordnet. Der Typ des Endgerätes (Tablet/Smartphone) sowie spezielle Eigenschaften, wie die Bildschirmauflösung (Resolution) und Orientierung (Hochformat/Landscape oder Querformat/Portrait View), werden ermittelt. Die Umbrüche (Breakpoints) des Browserfensters (Viewport) werden in dem Stylesheets des WebDesigns festgelegt.

Ein Beispiel: Ist die Desktop Ansicht 4-spaltig, so baut sich die Seite bei Zugriff über Tablet zweispaltig – bei Zugriff über Smartphone einspaltig – um. Die Inhalte passen sich flexibel je nach Gerätauflösung an. (sh. Abbildung oben).

Auswirkung für die Suchmaschinenoptimierung (SEO)

Nicht nur die Nutzer mögen Responsive Webseiten – auch Google behandelt diese Seiten klar bevorzugt. Im April 2015 ergänzte Google seinen Algorithmus durch die Option „mobilfreundlich“. Das verstärkt die Bedeutung der Usability als Ranking-Faktor deutlich. Google will schließlich den Wünschen und Bedürfnissen seiner suchenden Nutzer gerecht werden. Verlässt jedoch ein Nutzer die von Google vorgeschlagene Seite sofort wieder, weil diese auf einem Mobilgerät nicht ordentlich lesbar ist, registriert Google das als negatives Signal und wertet die Seite herunter. An sich kann Google zudem Responsive Seiten leichter und sehr viel schneller indexieren. Die Chancen auf eine Top-Platzierung im Ranking steigen!

Weitere Vorteile eines Responsive Designs

  • Sinkende Absprungraten: Die so genannte Bounce Rate sollte immer so gering wie möglich gehalten werden. Eine nicht-optimierte Website lässt diese unnötig in die Höhe schießen – wer scrollt heutzutage noch gern auf einer viel zu klein angezeigten und schlecht bedienbaren Website?
  • Verlängerte Verweildauer: Durch die optimierte Bedienung bleiben Interessenten länger auf der Seite und befassen sich intensiver mit den verschiedenen Themen und Angeboten.
  • Flexible Anpassungsfähigkeit: Egal ob am PC, Tablet oder Smartphone – die Inhalte einer Responsive Seite werden immer optimal und benutzerfreundlich dargestellt.
  • Umsatzsteigernd: Umso bedienfreundlicher eine Seite, desto mehr Interaktion findet statt. Durch die Anpassung können neue Kunden gewonnen und mehr Absatz erzielt werden.

Was es bei der Umsetzung zu beachten gibt

Die Optimierung der Schriften und Farben ist ebenso zu beachten. Für die Typografie eigenen sich grundsätzlich Webfonts immer besser als voreingestellte Systemschriften, da diese gerade für Webansichten optimiert sind.
Auch die Farben spielen eine tragende Rolle. Zu schwache Hell/Dunkel-Kontraste verschlechtern die Lesbarkeit und Wahrnehmung auf Responsive Design, da die Ansicht durch Spiegelungen, Gegenlicht und ständig wechselnde Lichtverhältnisse beeinflusst wird.

Ein mobil-optimierter Auftritt auch für Ihre Seite?

Die gute Nachricht: eine Responsive Version geht nicht immer einher mit einer kompletten Neuerstellung der Internetseite. Oftmals kann diese Option einfach zu Ihrer bestehenden Seite ergänzt werden. Das spart Aufwand, Zeit und Kosten.

Merken

Merken

.
Chiara Zimmermann
Autorin: Chiara Zimmermann

Chiara Zimmermann ist Projektmanagerin bei der agentur coalo. Dort ist sie für die Betreuung verschiedener Kundenprojekte im Bereich On- und Offline-Marketing zuständig, mit Schwerpunkt auf WordPress und WooCommerce.

Merken

Merken