Die Responsivität einer Website wird auf verschiedenen Geräten getestet

Warum Responsive Webdesign?

„Diese Website ist optimiert für eine Auflösung von 1024 x 768 Pixeln.“ Die Älteren unter Ihnen kennen diesen Satz vermutlich. Ende der 1990er und Anfang der 2000er Jahre war es noch üblich, Websites statisch für eine bestimmte Ausgabegröße zu entwickeln. Man ging davon aus, dass Websites nur auf Computern mit Monitoren einer bestimmten Breite ausgegeben wurden. Entsprechend winzig erschienen Internetseiten, als die ersten besseren Displays in Umlauf kamen. Und entsprechend unbedienbar wurden Websites, als Smartphones die breite Masse erreicht haben und die Größe einer Internetseite relevant wurde. Entweder wurden die Inhalte so weit runterskaliert, dass sie unleserlich wurden, oder aber sie wurden rechts einfach abgeschnitten. Professionelles Responsive Webdesign sieht anders aus.

Websites ohne Responsive Webdesign

Auch heute noch finden wir vereinzelt solche Webseiten ohne responsives Design. Das Problem: Durch die statische Programmierung passen sich die Inhalte der Webseite nicht an das Ausgabemedium an. Studien ergaben, dass die Nutzung mobiler Endgeräte heute nicht nur längst zum Standard gehört, sie werden in manchen Alters- und Berufsgruppen sogar schon fast ausschließlich verwendet. Das bedeutet, dass Webseiten, die nicht mobilfreundlich „ansurfbar“ sind, nicht mehr nutzerfreundlich sind.

Ansicht einer Webseite auf einem Smartphone ohne Responsive Webdesign

Responsive Webdesign und Suchmaschinenoptimierung (SEO)

Suchmaschinen wie Google haben sich zum Ziel gesetzt, das bestmögliche Nutzererlebnis zu schaffen. Websites, die nicht auf mobile Endgeräte ausgerichtet sind, werden somit immer weniger eine Rolle in den Suchergebnissen spielen. Das heißt, dass diese Webseiten voraussichtlich nicht mehr auf den wichtigen oberen Positionen der Suchergebnisse zu finden sein werden. Mit diesen Positionsverlusten bricht der Traffic (Datenverkehr – Zugriffe auf eine Webseite) ein und entsprechend weniger Besucher werden die Internetseite ansteuern. Hier gehen Unternehmen potenzielle Kunden verloren.

Darstellung Mobile-First gewinnt

Passgenau ausgegeben: Responsive Design

Das ist der Grund, warum Webseiten heute nicht mehr statisch, sondern dynamisch programmiert werden. Über den Einsatz sogenannter Media Queries (Medienanfragen) wird vor dem Ausgeben des Inhalts einer Website abgefragt, mit welchem Gerät der Nutzer diese ansteuert. Entsprechend wird dann die bestmögliche Darstellungsvariante der Seite für sein Ausgabemedium angezeigt. Für die Nutzung am PC oder Notebook wird dem User die Desktop-Version ausgespielt, für das Surfen im Web am Tablet oder Smartphone die mobile Webseite.

Responsiv bedeutet also im Wesentlichen das Reagieren auf verschiedene Ausgabegrößen einer Website. Dabei können mehrere Aspekte für die Ausgabe mit einbezogen werden:

  • die Anordnung der Elemente auf der Webseite
  • die Größe der einzelnen Elemente wie Bilder oder Schrift
  • die Ausgabe von Effekten
  • der Inhalt der Webseite

Responsive Webdesign ermöglicht es also sogar, verschiedene Inhalte optimal auszugeben, abhängig davon, welche Geräte ein User nutzt.

Responsivität in der Website-Program­mierung

Dynamische Programmierung bedeutet stark vereinfacht gesprochen, dass nicht mehr mit absoluten Pixelwerten gearbeitet wird, sondern mit relativen Werten. Absolute Werte sind alleine aus dem Grund gar nicht mehr möglich, da die Vielfalt der Endgeräte heute schier unendlich ist und es keine Standardwerte gibt, an die sich Gerätehersteller verbindlich halten müssten. Ein älteres Apple iPhone stellt eine Website anders dar als ein neues Google Pixel.

Bei der Entwicklung werden verschiedene Breakpoints definiert, an denen das Design „umspringt“, wenn sich die Ausgabegröße des Browsers verändert. Für folgende Viewports (Sichtfenster) wird in der Regel eine eigene Ausgabe erstellt:

  • großes Browserfenster, zum Beispiel maximierte Darstellung auf Full-HD-Monitoren
  • mittelgroßes Browserfenster
  • Tablet im Hoch- und Querformat
  • Smartphone im Hoch- und Querformat
Responsive Webdesign auf verschiedenen Ausgabegeräten

Mobile First wirkt sich auf das Design einer Webseite aus

In der Zeit, als die Ausgabe auf Desktopgeräten noch übergreifender Standard war, wurde die Website zunächst für die größtmöglichen Ausgaben konzipiert und für die nächst kleineren Geräte angepasst. Heute ist die Devise „Mobile First“: Das Design tritt in den Hintergrund und der Inhalt (Content) in den Vordergrund. Es wird mehr Wert auf intuitive Nutzerführung und schnell verfügbare Informationen gelegt als auf stylische Effekte und ansprechendes Layout. Der mobile Surfer hat andere Ansprüche und andere Suchintentionen. Denken Sie nur mal an sich selbst: Wenn Sie unterwegs Webseiten besuchen, dann müssen diese in der Regel schnell und einfach zu nutzen sein. Es ist also durchaus normal, dass auf dem Smartphone auch die Reihenfolge der ausgegebenen Inhalte einer Seite anders ist als auf dem Desktop.

Abbildung professionelles Design in der Konzeption

Bedeutung der Respon­sivität für die Konzeption

Für das Design und den Content bedeutet das also, dass Inhalte überall gleichermaßen verstanden werden müssen, ob es in einer vierspaltigen oder in einer einspaltigen Ausgabe ist. Die Dramaturgie und das Leseverständnis dürfen nicht davon abhängen, ob etwas neben- oder untereinander platziert ist. Oder es müssen zwei unterschiedliche Konzepte erstellt werden: für große Displays und für kleine Bildschirme.

Beispiel: Blogs

Deutlich wird das bei Blogs: Auf dem Desktop ist es üblich, dass ein Blog eine Sidebar hat. In dieser Sidebar sind Randnotizen wie eine kurze Autoren-Biografie oder auch ein Ansprechpartner, Kontaktinformationen, weiterführende Links, Angebote und Galerie-Elemente vorhanden. All das würde bei einem einspaltigen Mobil-Layout weit nach unten verschwinden. Je weiter unten etwas platziert ist, desto unwichtiger erscheint es. Dies gilt es also zu bedenken.

Schnellig­keit siegt, vor allem mobil

Apropos schnell und einfach: Responsive Webdesign hat noch einen anderen sehr großen Vorteil. Nach Abfrage des Ausgabegerätes werden durch sogenannte Media Queries die entsprechenden CSS-Eigenschaften geladen. Die Media Queries beschreiben wie sich ein Element bei verschiedenen Displaygrößen verhalten soll. Zum Beispiel, ob ein Bild über die gesamte oder nur über die halbe Breite geht. Das bedeutet also, dass die Inhalte perfekt auf das jeweilige Medium zugeschnitten sind. Nicht nur in ihrer Anordnung und in ihren Aussagen, sondern auch in ihren Dateigrößen.

Optimieren Sie die Ladezeit Ihrer Seite

Bilder, die auf Smartphones ausgegeben werden, werden speziell hierfür optimiert. Das heißt, dass sie die Ladezeit einer Website nicht unnötig belasten. Grade mobil zählt das schnelle Laden einer Website. Im Zweifel wird auf ausschweifende Galerien verzichtet, wenn sie der Informationsvermittlung nicht dienen. Für die Sidebar eines Blogs bedeutet das: Befinden sich dort relevante Inhalte? Dann müssen diese anderweitig zugänglich gemacht werden. Wenn in der Sidebar nur Gimmicks auftauchen, dann ist es ratsam, diese in der mobilen Ansicht nicht auszugeben, um die Ladezeit zu schonen und Besucher mit mobilen Endgeräten beim Surfen auf Ihrer Seite nicht zu enttäuschen.

Zusammengefasst: Vor­teile und Nach­teile einer respon­siven Website

Responsivität ist King: Der Nutzer möchte eine funktionierende Website auf allen seinen Ausgabegeräten und Suchmaschinen wie Google möchten ihm dieses Erlebnis geben.

Responsive Webdesign – die Vorteile

Die Vorteile einer sich anpassenden Website liegen also auf der Hand: Zum einen werden künftig nur relevante und für mobile Endgeräte optimierte Inhalte in den Ergebnissen der Suchmaschinen gut auffindbar sein und zum anderen erfreuen sich Ihre Nutzer an Informationen, die ihnen schnell und effizient Antworten auf ihre Fragen geben. Eine gute Website macht aus diesen Nutzern potenzielle Käufer, sie ermöglicht eine hohe Conversion Rate. Unternehmen erleichtern sich also gewissermaßen ihre Akquise, indem sie ihre Inhalte für mobile Surfer zuschneiden.

Responsive Webdesign begeistert Nutzer

Nachteile von responsiven Webseiten

Die Entwicklung einer responsiven Website hat aber auch Nachteile, denn sie erfordert einen höheren Aufwand in der Konzeption. Die Inhalte und Platzierungen müssen von mehreren Seiten betrachtet und entwickelt werden. Das Denken wird mit Responsive Webdesign herausgefordert, denn mobil geht es um Schnelligkeit und Effizienz. Ausschmückende Gestaltung und das Hinwegtäuschen über fehlende Fakten werden hier schnell enttarnt. Mobil geht es noch viel mehr um Inhalte. Das stellt Marken vor die Herausforderung, wie sie in dieser reduzierten Variante dennoch ihr einzigartiges Markenerlebnis einarbeiten.

Abbildung eines Zeitplans während der Konzeption

Optimale Ergebnisse mit einem profes­sionellen Partner

Die Digitalagentur alto. entwickelt seit vielen Jahren Internetpräsenzen mit Responsive Webdesign für Kunden aus dem Mittelstand. Wir sind stark in der Konzeption und beraten unsere Kunden hinsichtlich der optimalen Herangehensweise an ihr Web-Projekt. Wir führen Sie, sodass Sie sich nicht selbst um die relevanten Schritte kümmern müssen. Unsere Webdesigner, Programmierer und Projektmanager sind allesamt Digital Natives und die Denkart “Mobile First” ist tief in unserem Handeln verankert. Begeistern Sie Ihre mobilen Besucher mit professionellem Responsive Webdesign – konzipiert und umgesetzt von einer erfahrenen Agentur. Wir freuen uns auf Ihre Fragen und Herausforderungen.

Lena Küssner

Autor:

Lena Küssner

Digital Branding Expert. Findet Details wichtig, beschäftigt sich selbst aber lieber mit dem großen Ganzen. Spricht lebhaft und in Farbe. Schreibt auf dem alto. Experten-Blog über Marken, Macht und Mut.

Sie haben Fragen?
Alexander Burchard, Digitalberater

Alexander Burchard

Digitalberater Vertrieb

* Pflichtfelder

Jetzt teilen