Hotline +49 1234 5678

Ansichtssache

31.03.2015

Responsive Webdesign - optimierte Website für Smartphone, Tablet & Co

Responsive bedeutet anpassungsfähig. Denn immer mehr Internetseiten werden von mobilen Endgeräten, wie Tablets und Smartphones aufgerufen. Und die Website sollte sich auf die jeweilige Displaygröße anpassen. Laut aktuellen Umfragen surfen rund zwei Drittel der User in Deutschland auch mit dem Handy und rufen unterwegs Informationen ab. Eine Kundin berichtete mir kürzlich, dass Ihre Website zu 60% von mobilen Endgeräten aufgerufen wird.

Dieser Trend wird sich sicher noch verstärken. Was heißt das für uns als Webseitenbetreiber? Die Nutzer haben unterwegs schlechtere Internetverbindungen, kleinere Displays und wenig Zeit. Die gewünschten Informationen sollen dagegen genauso schnell gefunden werden, wie im Büro oder zuhause.

Es gilt also, mit ein und derselben Website die Anforderungen unterschiedlicher Endgeräte zu bedienen. Verschiedene Displaygrößen und -qualitäten, Betriebssysteme, Browser, etc. sind zu berücksichtigen. Damit Internetseiten auf allen Geräten - wie HD-Fernseher, große Monitore, Laptops mit Retina-Display, Tablets und Smartphones - optimal dargestellt werden, wurde die Technologie des Responsive Webdesign entwickelt.

Anwenderfreundlichkeit steht im Vordergrund

Nutzer von mobilen Endgeräten wollen schnell zur gewünschten Information und nicht erst umständlich das Menü größer ziehen, nach rechts und unten scrollen. Deshalb ändert sich auf Tablets und Smartphones mit dem Responsive Webdesign auch die Darstellung der Inhalte und die Anzeige der Navigationselemente je nach Display und Format (hoch oder quer). Die Inhalte - sowohl Texte als auch Bilder - passen sich dabei dynamisch der jeweiligen Displaygröße und -qualität an. Über sogenannte Media Queries fragt die Website ab, mit welchem Endgerät der Besucher die Seite gerade aufruft. Entsprechend dem Endgerät wird die Seite optimal dargestellt. So sieht der Besucher einer Website auf dem iPhone eine ganz andere Darstellung als auf seinem großen Desktopmonitor. Probieren Sie es mal auf dieser Seite aus und ziehen Sie einfach das Browserfenster kleiner.

Mobile Nutzung des Internets - Tendenz steigend

Die Anzahl der Webseiten im Responsive Webdesign wächst rasant. Die mobilen Endgeräte werden zum Multitalent, die Displays größer, die Bedienung dank den vielen Apps immer einfacher. Sehen Sie hier wie schnell die Nutzung mobiler Endgeräte zunimmt. Stand Ende 2014 besitzen 59% der Deutschen ein Notebook/Laptop und 58% ein Smartphone. Und das Tablet wird sicher bald aufholen. Nicht nur die Anzahl der Geräte nimmt zu, sondern auch die Nutzung selbst. Viele User verfügen über mehrere Geräte und verwenden das, welches für sie gerade greifbar und praktisch ist. Im Büro das Laptop, unterwegs das Smartphone und daheim auf der Couch das Tablet. Dabei macht es keinen Unterschied, ob wir das Web privat oder beruflich durchforsten. Fakt ist: Die Nutzung mobiler Endgeräte zum Surfen nimmt zu. Sie liegt derzeit bei ca. 60% (Quelle: marketingland.com), was ja exakt dem Statement der oben genannten Kundin entspricht.

Gerade Business-Anwender nutzen die Zeit auf dem Flughafen, im Zug oder sonstigen Wartephasen, um über mobile Endgeräte Informationen abzurufen. Google Analytics - sofern Sie es auf Ihrer Website integriert haben - liefert Ihnen Zahlen, wie hoch der Anteil der mobilen Zugriffe bereits ist. Achtung: Ist Ihre noch mit einer alten Technologie programmiert, geben diese Zahlen keinen Aufschluss, da Ihre Seite womöglich aus diesem Grund gar über Google & Co. auffindbar ist. Damit sind wir auch schon beim nächsten Thema.

Ene, mene muh und raus bist Du: Google liebt mobile Webseiten

Bereits Ende 2014 kündigte Google an, dass Webseiten, die nicht mit mobiler Technologie programmiert sind, im Ranking schlechter bewertet werden. Google ist der Meinung "Bei der Suche auf Mobilgeräten sollten Nutzer in kürzester Zeit immer die relevantesten Ergebnisse erhalten, ungeachtet dessen, ob die Informationen auf für Mobilgeräte optimierten Webseiten oder in Apps zu finden sind. Quelle: Google Webmaster-Zentrale Blog). Bei der Suche über Smartphones und Tablets werden in den Suchergebnissen also zuerst diejenigen Seiten angezeigt, die für mobile Endgeräte optimiert sind. Die Websites ohne Responsive Design rutschen im Suchranking nach unten. Google überprüft Ihre Website hinsichtlich mobiler Kriterien unter diesem Link: https://www.google.de/webmasters/tools/mobile-friendly/

Nachrüsten oder gleich neu?

Was bedeuten die Änderungen bei Google nun für Ihre Website? Es ist zunächst zu prüfen, ob Ihre Website überhaupt auf mobile Varianten umgerüstet werden kann. Das hängt von der eingesetzten Technologie ab. Wurde zum Beispiel eine Frametechnologie eingesetzt, ist eine Umrüstung technisch fast nicht möglich. Generell gilt: Je neuer Ihre Website ist, desto höher sind die Chancen, dass sie sich erweitern lässt. Ansonsten sollten Sie über eine neue Website nachdenken, wenn Sie auf die Suchergebnisse über mobile Endgeräte angewiesen sind. Responsive Design ist nicht nur für Google wichtig. Es geht ja darum, Kunden und Interessenten den bestmöglichen Service zu bieten. Gern berate ich Sie und analysiere Ihre Seite zusammen mit meinen Partnern und mache Ihnen ein individuelles Angebot.

Einmal pflegen - verschiedene Darstellungen für alle Endgeräte

Der Clou bei Responsive Websites ist, dass die Inhalte für die verschiedenen Endgeräte wie bei einer „normalen“ Website nur einmal gepflegt werden. Durch Design und Programmierung wird festgelegt, wie die Inhalte auf mobilen Endgeräten optimal dargestellt werden. So erhält der Besucher Ihrer Website immer ein optimales Ergebnis.

Beispiele für Responsive Design sind die Website von Elisabeth Platzer oder der neue Auftritt des bekannten Münchner Friseurs Gerhard Meir. Weitere Beispiele finden Sie hier.

Testen Sie Ihre eigenen Website auf aktuellen Endgeräten

Natürlich hat nicht jeder alle mobilen Geräte zum Testen zur Verfügung. Dabei bietet der RESPONSINATOR gute Dienste. Er simuliert die Darstellung auf verschiedenen Endgeräten. Unter diesem Link können Sie sich die Darstellung auf verschiedenen Endgeräten am Beispiel meiner Website anschauen. Und oben links (im Responsinator) können Sie Ihre eigene Domain eingeben. Viel Spaß beim Ausprobieren.

Hier ist ein weiteres Tool, mit dem man die eigene Website auf verschiedenen Geräten betrachten kann: http://ami.responsivedesign.is

Modernes Layout mit vorprogrammierten Templates

Der Aufwand, eine Responsive Website zu designen und zu programmieren ist um einiges höher, als bei einer "normalen" Website. Vieles muss vorab intensiver als bisher konzipiert werden, angefangen von der Navigation, Größe der Buttons und Bilder, Anordnung der Inhaltseelemente, etc. Nutzt man als Basis ein vorprogrammiertes Template, kann man schon mit geringerem Budget eine ansprechende Responsive Website erstellen. Dennoch muss auch bei Nutzung eines Templates einiges individuell angepasst werden.

Welche Vorteile haben Web-Templates?

Die Nutzung eines Templates entspricht in etwa dem Fertighaus, wenn wir die Erstellung einer Website mit dem Hausbau vergleichen. Während eine individuelle Website aufwändig für verschiedene Endgeräte geplant und programmiert wird, nutzt man bei einem Template vorgefertigte "Architekturpläne" und "Bauteile". Diese werden mehrmals genutzt, d.h. man teilt sich die Planung und Architekturleistung mit vielen anderen Kunden.

Dennoch erhält Ihre Website ein persönliches Design, indem wir Stilelemente wie Bilder, Farben, Schriften, etc. verändern. Beim Fertighaus wählen Sie Fenster, Türen, Fliesen, Küche, Bodenbeläge, Fassaden- und Wandfarbe aus. Das Webtemplate wird entsprechend auf Ihr Corporate Design angepasst. Größere Umbauten gehen sowohl beim Fertighaus als auch beim Webtemplate ins Geld. Daher gilt es vor dem Bau der Website genau zu prüfen, welcher "Fertighaustyp" am besten für Ihre Anforderungen passt. 

Wollen Sie Ihre Website "renovieren" bzw. in Responsive Design bringen? Gern recherchiere ich für Ihre neue Responsive Website ein geeignetes Template. Sie nennen mir Ihre Anforderungen und schon geht es los.

Zurück