Hauptnavigation

Gut geplant zur responsiven Website

Responsive Design am Beispiel der Initiative Mindestlohn

Wie, ihr seid noch nicht responsiv?“ So oder ähnlich schallt es Kommunikationsabteilungen entgegen, wenn die Webseiten ihrer Unternehmen oder Organisationen noch nicht für die mobile Nutzung optimiert sind. Denn genau das steckt hinter dem Buzzword „Responsivität“ oder „Responsive Web Design“ (RWS): Eine Webseite, deren Inhalte und Struktur so gestaltet sind, dass sie sich optimal verschiedenen Bildschirmgrößen anpassen.
Der Hype um responsive Webseiten wächst mit der zunehmenden mobilen Nutzung des Internets und den Ansprüchen der User. Die Investition in eine responsive Webseite ist folglich ein Tribut an die mobile Nutzerfreundlichkeit (mobile usability). Aber auch bei der Suchmaschinenoptimierung (SEO) spielt responsives Webdesign neuerdings eine Rolle.

 

Google macht Responsivität zum Rankingfaktor

Die Suchmaschine Google hat dem Thema Responsivität in diesem Jahr einen weiteren ordentlichen Schub verpasst: Wie responsiv eine Seite ist, ist seit April 2015 auf der Liste der Rankingparameter. Google bewertet seither bei mobilen Suchanfragen auch, ob die Treffer eine mobil optimierte Seite aufweisen und lässt dies ins Ranking einfließen.

Damit reagiert das Unternehmen auf die verlässlich steigenden Zahlen mobiler Internetnutzer und deren Ansprüchen an eine Webseite. Die Zuwächse sind immens: Zwischen 2012 und 2014 stieg die Zahl der mobilen Internet-User in Deutschland von 27 auf 54 Prozent.

Aber keine Panik: 2014 waren erst etwa 12 Prozent der Top 100.000 Webseiten tatsächlich responsiv. Viele vermeintlich responsive Seiten setzen auf Stückwerk und sind nicht wirklich gut durchdacht. Man kann dem Trend zur Responsivität getrost folgen, sollte sich jedoch genügend Zeit für die passende Responsivstrategie nehmen.

 

Content is King

Die responsive Welle hat bisher aus Nutzersicht eine wesentliche Verbesserung mit sich gebracht: Content is King. Der Fokus liegt auf direkt zugänglichen Inhalten und interessengeleiteter Nutzerführung, nicht auf verzweigten Navigationsmenüs, Buttons, Bannern und Links.

Inhaltlich gut durchdachte responsive Webseiten erleichtern beim Surfen auf dem Smartphone oder Tablet den Zugang zu den wichtigsten Inhalten. User müssen weniger scrollen oder zoomen, die Texte sind kompakter und für kürzere Aufmerksamkeitsspannen konzipiert.

Ein wichtiger Schritt in der Planung der Responsive-Strategie ist somit eine geeignete Content-Strategie, die die etwas anderen Surf- und Lesebedürfnisse berücksichtigt, die man unterwegs und auf kleineren Bildschirmen hat.

 

Die passende Strategie

Die eigene Responsivstrategie will gut geplant und durchdacht sein. Je nach Budget, Zeitrahmen, Organisationsstruktur und Zielgruppe gibt es verschiedene Möglichkeiten, eine Webseite für die mobile Nutzung zu optimieren: Vom Relaunch mit responsivem Layout bis zur bereichsweisen Adaption der Desktop-Seite für die mobile Nutzung.

 

Aus Klein mach Groß: Mobile First Responsive Design

Visualisierung Mobile First

Als Königsweg der Responsivstrategien gilt in der Web-Community die Entwicklung eines responsiven Webdesigns nach dem „Mobile First“-Prinzip. Das heißt, man geht bei der Layoutentwicklung vom kleinsten Display aus und arbeitet sich bis zur Desktopversion vor. Das Layout „lernt“ in diesem Prozess, wie es sich bei verschiedenen Anzeigengrößen verhalten soll. Indem man von Anfang an den Weg des größten Widerstandes geht, vermeidet man spätere Darstellungsprobleme bei kleinen Displays. Anstatt sich auf bestimmte Größen zu fixieren, umfasst dieser Ansatz ein ganzes Spektrum an Bildschirmauflösungen.

Ein weiteres Plus ist die weitgehende Zugänglichkeit auch für ältere Mobilgeräte, die keine Medienabfragen unterstützen. Medienabfragen werden zum Beispiel eingesetzt, wenn eine mobile Seite zusätzlich zur Desktopversion realisiert wurde.
Für ein konsequentes „Mobile First“-Layout ist ein Redesign erforderlich. Idealerweise erfolgt dies im Rahmen eines Relaunches und einer Neustrukturierung der Webseite. Wer diesen zukunftsweisenden Weg wählt, braucht das passende Budget und Zeit. Nicht zu unterschätzen ist das notwendige konzeptionelle Umdenken für alle Projektbeteiligten. Bei größeren Organisationen und Unternehmen sollte der Relaunch mit einem kontinuierlichen Change Management einhergehen, um die Akzeptanz für neue Strukturen und ggf. eine neue Content-Strategie zu erhöhen.

Auch die Nutzer/innen sollten nach Möglichkeit auf den Relaunch vorbereitet werden: Ist die primäre Zielgruppe viel mobil unterwegs, wird hier die Begeisterung für die neue Seite sicher überwiegen. Etwas mehr Überzeugungsarbeit brauchen eingefleischte Desktop-User mit traditionellen Lesegewohnheiten.

 

Aus Groß mach Klein: Responsive Retrofitting

Bild von verschiedenen Geäten auf denen die Webseite www.igmetall-nrw.de aufgerufen wird.

Für schnellere Ergebnisse und schmalere Budgets ist Responsive Retrofitting eine Möglichkeit. Auf Basis der bestehenden Stylesheets wird dabei das Layout fit für kleinere Bildschirme gemacht, also renoviert. Die gewünschten Ansichten für mobile User werden vom Desktop ausgehend adaptiert („Desktop First“-Prinzip).

Die User müssen sich bei dieser Variante nicht mit einer gänzlich neuen Seite auseinandersetzen, wie es bei einem Relaunch und neuen inhaltlichen Strukturen der Fall ist. Andererseits sind damit auch nicht alle Möglichkeiten responsiven Webdesigns auszuschöpfen, die ein konzeptioneller Neustart bietet. Letztlich wird eine umfangreiche Desktopversion in kleinere Mobilansichten gepfercht. Da hierfür in der Regel dennoch alle Inhalte einer für große Bildschirme entwickelten Seite geladen werden, kann sich dies nachteilig auf die Performanz einer Seite auswirken. Responsive Retrofitting ist vergleichsweise schnell umsetzbar und kann dadurch kostengünstiger sein. Das hängt jedoch stark von der Komplexität und Anzahl der verschiedenen Seitenlayouts ab. Dies sollte man unbedingt im ersten Schritt prüfen.

Aus Eins mach Zwei: Mobile Seitenversion

Die Umsetzung einer eigenen Mobilseite als mobile Variante der Desktopversion (üblicherweise zugänglich unter m.domainname.de, daher bezeichnet als m-dot Seite) ist ein weiterer Weg zur Verbesserung der mobile usability. Genau genommen ist dies eine schon etwas in die Jahre gekommene Alternative zu einer Responsivstrategie. Statt eines responsiven Layouts sind hier zwei Layouts im Einsatz: Ein Layout für die Desktop-Version und ein zweites für die mobile Website-Version. Über eine Medienabfrage des CSS wird eine Liste von Kriterien an das Ausgabemedium gesendet, die erfüllt sein müssen, um das passende Stylesheet der Seite auf diesem Gerät zu verarbeiten.
Konzeption und Umsetzung von zwei Layoutvarianten sind bei komplexeren Seite allerdings zeit- und kostenintensiv. Bei einfachen Seiten ohne aufwändige Funktionalitäten kann es aber durchaus schnell gehen.

Administrativ und redaktionell erfordert eine mobile Seite zusätzlichen Pflegebedarf, z.B. hinsichtlich notwendiger Redirects, Anpassung von Inhalten oder Suchmaschinenoptimierung. Ältere Mobilgeräte unterstützen zudem oft keine Medienabfragen, so dass die User nicht auf die Mobilseite umgeleitet werden und auf der Desktopversion landen.

Die Vorteile: Mit einer mobilen Seite ist sehr gut steuerbar, welche Inhalte man mobilen Usern zur Verfügung stellt. Man kann zielgenau ihre Ansprüche erfüllen, was z.B. die Länge der Inhalte oder die Nutzerführung angeht. Daher wählen viele Medienseiten diesen Weg, trotz des doppelten Pflegeaufwandes.

 

Fazit

An einer Optimierung der eigenen Online-Kommunikation für die mobile Nutzung kommt man auf lange Sicht nicht vorbei. Die Ansprüche der User werden mit dem steigenden Angebot an gut geplanten responsiven oder mobilen Seiten wachsen. Im Idealfall geht das responsive Webdesign mit einem konzeptionellen Neustart der Webseite einher. Anstatt auf „Flickenlösungen“ sollte man auf vorausschauende Planung setzen: Den passenden Zeitpunkt für einen Refresh oder Relaunch wählen, das Projektteam ins Boot holen und offen für neue inhaltliche Konzepte sein.


Quellen:
http://www.initiatived21.de/portfolio/mobile-internetnutzung-2014/
http://www.guypo.com/rwd-ratio-in-top-100000-websites-refined/
http://bradfrost.com/blog/post/responsive-strategy/

 

Teilen

Diesen Link in Social Media mitteilen (Funktion am Seitenfuß aktivieren):

Neuer Kommentar

Bitte füllen Sie alle mit einem Sternchen (*) gekennzeichneten Felder aus.
Bildbasierter Sicherheitstest zur Unterscheidung zwischen Mensch und Maschine.


Andere Artikel