Responsive Design für Webseiten

Responsive Design: So holen Sie das Beste raus

https://wortparade.de/sites/default/files/pictures/hands-coffee-smartphone-technology-large-001.jpg

Ob ihre Firmenwebseite Responsive Design unterstützt oder nicht, ist bereits seit April 2015 ein weiteres Bewertungskriterium für das Ranking bei Google. Nicht-responsive Seiten werden abgestraft, und somit ist der Platz Ihrer Webseite in den Suchergebnissen auch davon abhängig, ob Ihre Webseite auch von mobilen Geräten abgerufen werden kann. Hier erfahren Sie, worauf Sie – gemeinsam mit Ihrem Programmierer – achten müssen, um Responsive Design für Ihre Webseite optimal umzusetzen.

Responsive Design ist mehr als nur „smartphonetauglich machen“

Beim Responsive Design geht es nicht nur darum, Ihre Webseite auf einem kleinen Display darzustellen. Viel wichtiger ist es, Ihre Kunden und die Besucher Ihrer Webseite im Hinterkopf zu haben: In welchen Situationen rufen diese Ihre Seite auf? Was erwarten die User von der Homepage, welche Informationen wollen sie in welcher Detailfreudigkeit bekommen? Welche Bilder sind wichtig, welche Überschriften sind ansprechend? Geben Sie Ihren Usern ein komplettes Verwöhnpaket an die Hand – nicht nur eine verkleinerte Ausgabe Ihrer bestehenden Webseite.

Es gibt noch mehr als nur Smartphones

Viele glauben, Responsive Design beziehe sich nur auf die Darstellung auf dem Smartphone. Wer so denkt, vergibt viele Chancen. Responsive bedeutet vielmehr, dass Ihre Webseite von jedem Endgerät aus optimal zu bedienen und zu navigieren ist: Vom Smartphone über Tablet, Notebook und PC bis hin zum großen Flatscreen-TV. Das sind schon ganz andere Anforderungen an Design und Programmierung, als die Seite „nur zu verkleinern“.

Denken Sie universal

Es ist trotzdem nicht nötig, für jede Bildschirmgröße ein eigenes Template zu erschaffen. Die Anforderung an Ihren Programmierer und Webdesigner muss lauten: Entwickele mir ein Template, das auf allen mobilen und stationären Geräten gleich gut zu bedienen ist und den User zufriedenstellt.Update 2017: Mittlerweile setzt Google die mobilen Versionen über die Desktop-Versionen. Das heißt, Google schaut nicht mehr, ob es zur Desktop-Version auch eine mobile Version gibt, sondern genau umgekehrt - die mobile Version der Webseite wird stärker gewichtet; wenn diese nun noch eine Desktop-Version im Hintergrund hat, umso besser.

Usability heißt das Zauberwort

Responsive Design kann und sollte auch bedeuten, dass jeder User an jedem Punkt auf der Welt mit jedem Endgerät und jedem Browser mit jeder Internetverbindung Ihre Webseite problemlos bedienen kann und dann genau das findet, was er gesucht hat. Ein unmögliches Unterfangen? Sicherlich können Sie diese Anforderungen nicht zu 100 % erfüllen. Aber versuchen Sie, diese Messlatte so weit wie möglich zu erreichen: Durch Programmierung, Design, kurze Ladezeiten und professionelle Webexte.

Sauber, ansprechend und perfekt verzahnt: auch das ist Responsive Design

Die erfolgreiche Webseite mit bestmöglichem Responsive Design ist ein Zusammenspiel aus Programmierung, Design und Texten. Alle drei Faktoren müssen sauber ineinandergreifen, um dem User eine befriedigende Erfahrung zu bieten. Was nützt eine Seite, die sich schnell und problemlos öffnet und leicht zu navigieren ist, wenn die Texte nicht ansprechend sind und die Informationen bereits Moos ansetzen? Und wem bringen tolle Texte etwas, wenn die Seite nicht von unterwegs aus geladen werden kann oder überdimensionierte Bilder die Ladezeit ins Unendliche steigern? Achten Sie also auf professionelle Ausführung in allen Bereichen.

Aus alt mach Neu oder neu statt alt?

Wenn Sie bereits eine bestehende Firmenwebseite haben, ist es ein verlockender Gedanke, diese "einfach auf Responsive Design umzustellen".Aber glauben Sie mir: Das ist komplizierter und weniger Erfolg versprechend, als wenn Sie eine Seite komplett neu machen lassen. Denn die bisherige Webseite war bis ins Detail auf Nutzer ausgelegt, die von zuhause aus zugreifen. Hier nun ein Responsive Design überzustülpen hieße, mit halber Kraft zu fahren. Wie Sie im vorigen Punkt gesehen haben, muss das Zusammenspiel passen und auch die Texte müssen nun ebenfalls das mobile Publikum einbeziehen und ansprechen. Geben Sie also lieber eine komplett neue Seite in Auftrag, anstatt Ihre bestehende Firmenwebseite irgendwie ummodeln zu wollen. Gerne stehen mein Kompagnon Peter Berwanger von Wreb.de Ihnen zur Seite.

Bilder und Schrift

Generell ist es wie gesagt gut möglich, ein einheitliches Template zu programmieren, das für alle Endgeräte geeignet ist. Besondere Beachtung sollten Sie bzw. Ihr Programmierer aber den Fotos schenken, die nicht immer 1:1 übernommen werden können. Auf einem Flatscreen-TV sieht eine Panoramaaufnahme atemberaubend aus – auf dem kleinen Screen eines Smartphones sind dagegen eher Detailfotos und Nahaufnahmen gefragt. Hier lohnt sich die Arbeit, verschiedene Fotos für verschiedene Bildschirmgrößen zu hinterlegen und generell zu überlegen, welche Fotos überhaupt bei der Wiedergabe auf kleinen Monitoren sinnvoll und nützlich sind. Behalten Sie immer Ihre User im Hintergrund: Für mobile Nutzer ist ein erklärendes Foto wie die Detailaufnahme einer technischen Sache als Erläuterung sicherlich nützlich. Ein reines „Deko-Foto“ kann an dieser Stelle vielleicht einfach unterdrückt werden und Platz machen für wichtige Informationen im Text. Ebenso sollten Sie eine Schriftart wählen, die auf allen Bildschirmgrößen gleich gut funktioniert. Verspielte und schnörkelige Schriften sind auf dem Bildschirm eines Smartphones kaum zu entziffern.

Fazit:

Responsive Design ist weitaus mehr als die reine Lesbarkeit vom Smartphone aus. Behalten Sie stets alle User im Hinterkopf, die zu jeder Zeit und mit jedem Gerät in jeder Situation auf Ihre Seite zugreifen und die wichtigsten Informationen abrufen sollen. Dafür müssen Programmierung, Design und Texte miteinander verzahnt sein und auch die Fotos müssen nicht nur von der Größe her optimiert sein, sondern auch in Ihrer Aussage zu den verschiedenen User-Situationen passen. Versuchen Sie nicht, Ihrer bestehenden Webseite ein Responsive Design überzustülpen, sondern investieren Sie in eine saubere Neugestaltung. So stellen Sie sicher, dass Ihre Webseite im Responsive Design nicht nur ein voller Erfolg ist, sondern Ihnen auch neuen Erfolg bringt.Wenn Sie Fragen zum Responsive Design haben oder Ihre Webseite im Responsive Design gestaltet haben möchten, stehe ich Ihnen gern zur Verfügung. Gemeinsam mit meinem Netzwerkpartner Peter Berwanger biete ich Ihnen als designParade komplette responsive Webseiten aus einer Hand zum fairen Preis.