„Das Ende des Geräte-Dschungels?“

… oder ein Relaunch im Responsive Webdesign

Responsive Webdesign für eine neue Website? Für eine Webagentur ist ein Relaunch immer eine besondere Herausforderung. Egal, ob sie sich nun in New York oder Lübeck befindet. Die Trends für ein zeitgemäßes Webdesign entwickeln sich genauso schnell wie die Verfügbarkeit neuer Hardware und Technologien. Auf diesem Gebiet haben wir sehr gute Lösungen für eine Anpassung von Websites an Smartphones, Tablets und Desktop-PCs.

Responsive Webdesign oder „kleine Webseiten für kleine Monitore“

Der Desktop-PC Markt ist 2013 um 10% eingebrochen und es werden mehr Tablets und Smartphones als PCs verkauft. Neben der Verfügbarkeit von verschiedensten Monitorgrößen verändert sich auch die Art der Bedienung von Webseiten. Die Bedienung mit der Maus scheint ausgedient zu haben. Touchscreens in den unterschiedlichsten Qualitäten werden mit den Fingern bedient. Da wird es höchste Zeit jeweils eine passende Webseite bereitzustellen, oder nicht?
Im Idealfall sollte jede Webseite auf das Endgerät des Besuchers angepasst sein. Doch die Zeiten in denen mit Javascript die Auflösung des Besuchers ermittelt und dieser dann umständlich auf eine für seine Auflösung angepasste Seite weitergeleitet wurde, sind lange vorbei.
Das Zauberwort lautet Responsive Webdesign. Mit Hilfe von modernen Webstandards wie HTML5, CSS3 und modernen Grid Systemen passen sich Webseiten den Geräten an und nicht umgekehrt.
Es werden kontrolliert Teile der Webseite an die passende Position verschoben, nur bei Bedarf eingeblendet oder gar nicht erst geladen. Das aufreibende Rein- und Rauszoomen wird überflüssig. Damit einher geht die Etablierung und Anwedung ganz neuer Design und Abstimmungswege der Umsetzung einer Webseite.

Adaptive Images – das sind „kleine Bilder für kleine Geräte“

Mit der Verschiebung der Nutzungsraten von den Desktop- zu den mobilen Geräten geht die massive Ausbreitung des mobilen Internets einher. Auf einmal werden wieder die Datenmengen interessant die zum Aufbau einer Webseite auf den Browser des Nutzers übertragen werden müssen. Gerade bei missionskritischen b-2-b Anwendungen sollten die Nutzer die Anwendungen auch bei geringen Bandbreiten anwenden können.
Die zur Darstellung der Webseiten notwendigen Bilder und weiteren Medien, wie beispielsweise Videos, sind der kritische Anteil an möglichen zu hohen Datenmengen pro Seite.
Mit Adaptive Images wird die Bildschirmgröße des Nutzers erkannt und automatisch eine passend skalierte Version der in der Webseite eingebetteten Bilder erzeugt und für spätere Nutzungen gespeichert. So lädt ein Smartphone Browser viel kleinere Bilder als ein 50 Zoll Fernseher und hat so nicht nur das richtige Format parat, sondern schont auch die in mobilen Netzen oft beschränkte Bandbreite. Dabei wird sogar auf die Pixeldichte der Geräte Rücksicht genommen. Ist die entsprechende Technologie in das CMS korrekt integriert, so ist kleinerlei Änderung am Kode der Webseiten notwendig. Dieser Ansatz ist für die Verwendung mit Responsive Webdesigns vorgesehen und kann mir fluiden Imagedarstellungen kombiniert werden.
Warum das alles? Ihre Website wird in einem zunehmenden Maß auf kleineren, langsameren Geräten über niedrigere Bandbreiten aufgerufen. Auf diesen Geräten werden Webseiten mit Bildern für Desktop-PCs nur langsam dargestellt. Die Nutzer müssen daher lange warten und Sie verlieren Kontakte und potentielle Kunden.

Eine Kombination aus Responsive Webdesign und Adaptive Images löst diese Problematik!

„Click to Call“

– oder klickbare Rufnummern

In diesem Zusammenhang ist für Ihre „mobilen Besucher“ mit iPhone und Android-Smartphones ein klickbarer Rufnummern-Link vom Vorteil. Ein Ansatz der auch die Kontaktmöglichkeiten zu dem Betreiber einer Website erhöht. In der Umsetzung würde dieser Ansatz so aussehen:

0451 486680

Es ergibt sich aber ein Problem, auf Desktop PC’s führt der Rufnummern-Link zu einer Fehlermeldung. Um einen Rufnummern-Link nur in mobiler Umgebung nutzbar zu machen, nutzt man beispielsweise eine CSS Media Query, siehe nachfolgend für ein Beispiel. Diese Rufnummer ist nur auf den Monitoren von Smartphones klickbar.

0451 4866800451 486680

Ein weitere Ansatz, der (noch) oftmals im WWW gefunden wird, ist schon aus Google SEO Sicht nicht ratsam:

Rufen Sie an!

Darüber hinaus bieten die verschiedenen CMS-Systeme auch interne eigene Lösungen an. Es ergeben sich also vielfältige Möglichkeiten den Nutzern mit Smartphones die passenden klickbaren Rufnummern zu bieten. Entsprechend wird die Rufnummer im Footer dieser Responsive Webdesign Seite mit einer Funktion von WordPress für Smartphones klickbar ausgegeben.