Zurzeit gibt es weltweit rund 1,76 Mrd. Smartphone-Nutzer. Eine weitere Milliarde soll bis 2018 hinzukommen. Der Siegeszug der mobilen Geräte setzt sich also weiter fort: 2014 dürfte das letzte Jahr sein, in dem mehr Website-Aufrufe von Desktop-Geräten als von Smartphones und Tablets aus kommen.

Rund drei Viertel der Schweizerinnen und Schweizer besitzen ein Smartphone – Tendenz steigend. Ein Viertel des Webshoppings wird bereits über Smartphones und andere Mobilgeräte abgewickelt. Trotzdem haben noch längst nicht alle Webseiten-Betreiber auf diesen Trend reagiert. Das wird einem immer dann bewusst, wenn man einen QR-Code auf einem Inserat, Plakat oder Lieferwagen scannt – und dann auf einer Website landet, die auf dem Handy einfach nicht vernünftig wiedergegeben wird. Deshalb sind heute Websites gefragt, auf denen auch Smartphone-, Phablet- und Tablet-User gern surfen – also Seiten mit responsivem Design, bei denen nicht je nach Gerät mühselig vergrössert und gescrollt und gedreht werden muss, um die Inhalte einigermassen lesbar darzustellen.

Responsive Design – was genau ist das?
Im Prinzip können die Besucher von praktisch jedem Endgerät aus auf jede Website zugreifen. Ist sie responsiv, wird sie auf jedem Endgerät – auf Smartphones und Tablets, aber auch auf Laptops oder Desktop-PCs – bestmöglich dargestellt, denn die aufgerufene Seite passt sich automatisch und flexibel dem jeweiligen Bildschirm an, unabhängig von Auflösung, Pixelgrösse, Dimension und Seitenverhältnis, aber auch vom eingesetzten Betriebssystem. Responsives Website-Design (RWD) ordnet die Elemente der Seite so neben- oder untereinander an, dass sie genügend gross abgebildet werden. Und selbstverständlich reagiert das responsive Design auch auf die vorhandenen Eingabegeräte, ob also eine Tastatur oder eine Maus angeschlossen ist.

Verschiedene Wege zum Glück
Neben dem eigentlichen responsiven Design werden aber auch andere Möglichkeiten genutzt. Einige Betreiber richten spezielle mobile Websites mit eigener URL ein, die speziell auf Smartphones und Tablets ausgerichtet sind. Andere setzen auf adaptive Websites. Der Unterschied zur responsiven Seite: Die Inhalte passen sich nicht «fliessend» den jeweiligen Bildschirmen an, sondern sie werden für jeden Gerätetyp einzeln vordefiniert. Dem responsiven Design am ähnlichsten ist die liquide Website. Der grösste Unterschied: Während beim responsiven Design Bilder nur bis auf ein bestimmtes Format verkleinert werden, wird auf der liquiden Seite das Bild einfach proportional zur Gesamtdarstellung angepasst, ja nach Gerät also fast bis zur Unkenntlichkeit geschrumpft.

Responsives Design
shadow

Weshalb nicht einfach eine mobile und eine «normale» Website?
Eine mobile und eine konventionelle Website parallel betreiben: Das hat seine Vorteile. Denn Design und Layout können bis ins Detail perfekt an die jeweiligen Ausgabegeräte angepasst werden. Vor allem die Bedienung (mit dem Finger antippen oder mit der Maus navigieren) unterliegt verschiedenen Gesetzmässigkeiten, die auf diese Weise berücksichtigt werden können. Nicht zuletzt deshalb – und wegen der unterschiedlichen Ladezeiten – entscheiden sich die Anbieter grosser Portale wie zum Beispiel News-Seiten oft für diese Variante. Auf der anderen Seite verursachen Seitenpflege und -unterhalt zweigleisig geführter Websites höhere Kosten, da das Design immer wieder an neue Endgeräte angepasst werden muss. Deshalb ist die Umstellung auf responsives Design zwar mit höherem Initialaufwand verbunden; langfristig dürfte sie sich aber auszahlen. Ausserdem bedeutet Responsivität gleichzeitig auch eine tiefere Absprungrate und – was bei Webshops besonders wichtig ist – entsprechend mehr Conversions.

Google liebt responsives Design
Was Google nicht so gerne sieht, ist «Duplicate Content» – also identischer Inhalt auf zwei Websites mit unterschiedlicher URL. Mit responsiven Seiten kann dieses Problem vermieden werden. Bereits seit dem Hummingbird-Update von 2013 bevorzugt Google responsive Seiten und hat sich auch auf die Eigenheiten der mobilen Nutzung eingestellt: Auf dem Smartphone geben schon viele User ihre Suchanfrage mündlich ein, meist ganze Sätze wie «Wo ist das beste China-Restaurant in der Nähe?». Google hat sich auf die Auswertung solcher Keyword-Ketten vorbereitet, wobei die eingegebenen Wörter unterschiedlich gewichtet werden. In unserem Beispiel wird Google auf der Resultatseite eine Liste mit positiv bewerteten China-Restaurants ausgeben. In seinen Richtlinien für Webmaster empfiehlt Google ausdrücklich, responsives Design einzusetzen. Entsprechend werden auch die Resultatlisten ausgegeben: Bei der Suche von einem Mobilgerät aus passt Google die Resultate an die Bedürfnisse des Users an. Beispielsweise tauchen Seiten, die Flash benötigen, schon gar nicht auf. Responsive Seiten dagegen werden nach oben geschoben. In Kürze werden sie sogar noch ein Handy-Icon zur Seite gestellt bekommen, das signalisiert: Diese Seite eignet sich speziell für Mobilgeräte. Offenbar schätzt Google RWD ganz grundsätzlich. Sogar auf Desktop-Rechnern verbessert sich das Ranking responsiver Seiten deutlich!

Responsives Design: nicht erst ab 2015 ein Muss

Sandro Bertschinger

Er fand Computer relative lange nicht so spannend. Ein Amiga 500 als "Game-Machine" war der Höhepunkt. Als das Internet aufkam und man entsprechend "coole" Webseiten machen konnte, kam das Thema Computer schon eher in den Mittelpunkt. Per Zufall kreuzte dann 2001 eine Internetfirma seinen Weg.

2