„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.
Auch heute noch finden wir vereinzelt solche Webseiten und Onlineshops 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.
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. Sie möchten mehr über SEO lesen, dann schauen Sie sich gern unseren Blogbeitrag „Warum Sie SEO machen sollten?" an.
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 Webseite 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 Webseite. Dabei können mehrere Aspekte für die Ausgabe mit einbezogen werden:
Responsive Webdesign ermöglicht es also sogar, verschiedene Inhalte optimal auszugeben, abhängig davon, welche Geräte ein User nutzt.
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:
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.
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.
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.
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.
Bilder, die auf Smartphones ausgegeben werden, werden speziell hierfür optimiert. Das heißt, dass sie die Ladezeit einer Webseite nicht unnötig belasten. Grade mobil zählt das schnelle Laden einer Webseite. 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.
Responsivität ist King: Der Nutzer möchte eine funktionierende Website beziehungsweise einen Onlineshop auf allen seinen Ausgabegeräten und Suchmaschinen wie Google möchten ihm dieses Erlebnis geben.
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.
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.
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. Gern können Sie auch Ihre akutelle Website von unseren Experten kostenlos überprüfen lassen.
Mein Name ist Mark-Oliver Müller und ich helfe Ihnen sehr gern weiter.
