„Responsive Webdesign“ bedeutet, dass Ihre Website sich automatisch an verschiedene Bildschirmgrößen anpasst. Dabei reagiert der Programmier-Code auf die unterschiedlichen Endgeräte und verändert Design und Funktionen entsprechend. So sieht die jeweilige Internetseite sowohl auf Desktop-Bildschirmen wie auch auf Notebooks, Tablets und Smartphones gut aus. Wichtiger ist jedoch, dass sie auf jedem Endgerät komfortabel bedienen lässt. Über 30% aller Suchanfragen werden mittlerweile von mobilen Endgeräten aus gemacht – Tendenz steigend. Deshalb empfehle ich meinen Kunden, Ihre Websites von Anfang an für verschiedene Bildschirme zu konzipieren oder entsprechend anzupassen. Was bedeutet „Responsive Design“ von Internetseiten?
Responsive = Antworten, Reagieren – Webdesign, das sich anpasst
„Responsive Design“ – kostenlose Tools zum Testen Ihrer Seite
Ist meine Seite responsive? So finden Sie es einfach raus.
Intuitiv zu bedienen ist das Test- Tool „Am I Responsive?“ von Justin Avery. Der Nachteil: Die Seite zeigt nur vier Größen an. Trotzdem gewinnen Sie hier sehr leicht einen guten ersten Eindruck. Zum Finetuning bei der Gestaltung von Internetseiten eignet sich eher responsivepx von Remy Sharp. Bei diesem Tool geben Sie Ihre URL ein und können dann die gewünschte Breite und Höhe der Ausgabe eingeben. In jedem Fall lohnt es sich, sich jeweils über die aktuell häufigsten Bildschirmgrößen zu informieren. So können Sie gut Entscheidungen treffen, wo Sie am besten gestalterische Prioritäten setzen.
Was passiert bei der Bildschirmanpassung?
Welche Elemente Ihrer Internetseite sich verändern
Bildelemente und Logos verkleinern sich entweder oder ordnen sich untereinander an.
Der Text bleibt jedoch gut lesbar. Die Schriftgröße bleibt gleich, ordnet sich jedoch mehr untereinander an. Hier fördern kleinere Texteinheiten und Zwischenüberschriften die Lesefreundlichkeit.
Die Navigation verändert sich so, dass sie auch bei kleinen Endgeräten gut bedienbar bleibt. Das ist häufig in Form eines Drop-down-Menüs.
Was ist beim Relaunch zu beachten?
Wenn Sie Ihre bestehende Website responsive werden soll
Nicht jedes Design und Programmiersystem eignet sich für responsive Design. Deshalb kann in manchen Fällen eine Umstellung auf eine andere Programmierung sinnvoll sein.
Das Content Management System „WordPress“ bietet bereits vorgefertigte Programmiermodule. Dadurch wird häufig die „responsive“ Gestaltung eines Internetauftritts preisgünstiger als mit anderen Programmierungen.
Eine horizontale Navigation oben auf der Seite eignet sich besser als eine vertikale Navigation. Hier sind ggf. Umstellungen sinnvoll.
Slider & Co bei responsive Internetdesign
Animierte Elemente auf der Website
Sie können jeweils entscheiden, ob animierte Elemente wie Slider bei mobilen Endgeräten aktiv oder inaktiv sein sollen. Hier ist die Zielsetzung der Website und die Ladegeschwindigkeit wichtiges Planungsinstrument. Bei einer Innenarchitektin wie bei www.purbuero.de, wo die Bilder zentral für den Verkaufsprozess sind, kann ein Slider auch auf dem Smartphone Sinn machen, wobei er bei einer Buchungsplattform nur die Ladegeschwindigkeit belasten würde.
Header bei responsive Design
Beispiel einer Organisationsberaterin aus Köln
Der Header kann sich entweder proportional verkleinern wie bei der Gestaltung der Internetseite von Cornelia Cremer, www.cornelia-cremer.de . Sie kann jedoch auch statisch bleiben. Je nach Design ist die eine oder andere Variante geeigneter.
