Responsive Webdesign für mobile Endgeräte

Die Anzahl der Smartphone-/ und Tabletbesitzer steigt täglich und auch über den Fernseher ist es heutzutage möglich im Internet zu browsen und Webseiten zu besuchen. Daher ist es nicht verwunderlich, dass sich die Suchanfragen langsam aber sicher auf verschiedene Endgeräte umlagern. Schon 2013 startete dann mit dem Hummingbird Update von Google der Trend um die Erstellung responsiver Webseiten. Heute sind es etwa 50% der großen Firmen, welche auf eine Weiterleitung auf eine abgespeckte mobile Webseite verzichten und auf sich anpassende Webseiten umsteigen.

Responive Webdesign (RWD) oder auch Responsive Layout genannt hat es deshalb zur Aufgabe, dass eine Webseite auf allen Endgeräten, sei es Fernseher, Computer, Tablet oder Smartphone, richtig dargestellt wird. Wichtig ist, dass vor allem die einzelnen Elemente wie Texte, Bilder und andere Grafiken mit skalieren, damit alle Inhalte lesbar sind und keine Inhalte verschluckt werden. Zudem ist auf die Ladegeschwindigkeit und die Umsetzung von Maus und Tastatur zu Touchscreen und Fernbedienung wichtig.

Responsive Webseiten werden mit HTML5, CSS3 und JavaScript erstellt. Starre Gestaltung, wie bei Print Medien, ist hier nicht mehr möglich. Media Queries analysieren das Endgerät welches der Webseitenbesucher nutzt und passen die Webseite dann entsprechend an. Dabei ist die Webseite mit einem Grid wie in verschieden Kasten aufgeteilt, welche je nach Endgerät kleiner oder nach unten verschoben werden. Bevor auf das RWD umgestellt wurde, hatte man liquid Layouts genutzt. Diese haben die Webseitenelemente je nach breite der Webseite nach einer von vier regeln skaliert und somit die Webseite an bestimme Größen angepasst. Doch hierbei gibt es oft Probleme mit dem Zeilenumbruch oder zu kleinen beziehungsweise sich überlappenden Texten und Bildern.

Damit also die Webseite nicht einfach nur skaliert wird, gibt es einige designtechnische Faktoren welche die zuständige Agentur berücksichtigen muss, damit die Webseite keine Fehler und eine allgemeine Übersichtlichkeit und Benutzerfreundlichkeit aufweist.

Zu aller erst sollte man eines bei Webseiten, besonders auf Tablets und Smartphones nicht vergessen: der Inhalt geht über das Design! vor allem bei Smartphones gibt es das Problem, dass bei den kleinen Bildschirmen viele Designelemente nicht Mehr richtig oder gar nicht mehr angezeigt werden (können). Zudem lenken diese Designelemente auf den kleinen Bildschirmen viel zu stark vom Inhalt ab und machen die Webseite oft unübersichtlich. Daher ist hier Simplizität angesagt. Die Webseite muss in kleinerer Skalierung schlicht und übersichtlich gehalten werden, dennoch aber alle wichtigen Funktionen enthalten. Die Texte müssen auch für Menschen mit schlechteren Augen leserlich bleiben und Bilder dürfen zum einen nicht zu klein aber auch nicht zu groß gezogen werden, da diese sonst nicht mehr erkennbar beziehungsweise zu verpixelt sind.

Machen Sie sich auch Gedanken über die verfügbare Eingabemethoden der verschiedenen Endgeräte. Beispielsweise verfügt Ein Fernseher nur über eine Fernbedienung oder einem angeschlossenen Kontroller, Smartphones über wenige Knöpfe und einen Touchscreen. Die übliche Maus eines Computers fehlt also. Daher müssen sie Funktionen Ihrer Webseite für diese Methoden, wenn nötig, umgestalten. Wichtig sind hier Unterschiede zu beachten, wie der Unterschied zwischen dem anklicken oder dem hovern über ein Element und das Buttons auch mit dem Finger leicht zu benutzen sind.

Neben dem Aussehen der Webseite sind auch einige programmiertechnische Faktoren wichtig. Da Smartphones meist unterwegs über das mobile Netz genutzt werden, ist die Internetverbindung nicht so schnell wie im WLAN. Daher ist es wichtig die Webseite so schlank wie möglich zu gestalten. Bilder und andere Dateien dürfen nicht zu groß sein sonst laden sie zu lange, was dazu führt, dass Webseitenbesucher die Seite schnell wieder verlassen. Doch gibt es hier einige Möglichkeiten die Webseite, beispielsweise durch einklappbare Listen, übersichtlicher und leistungsfähiger zu gestalten.

Falls Sie Ihre Seite von Grund auf neu gestalten wollen oder noch gar keine Webseite haben ist es immer ratsam erst mit den Mobile Seiten anzufangen, diese sind dann einfach zu gestalten, ohne dass Sie Designelemente entfernen müssen. Wenn Sie dann zu der Desktopdarstellung über gehen, könne Sie dann gänzlich frei und flexibel die Webseite umgestalten.

Möchten auch Sie nun Ihre Webseite für alle Endgeräte kompatibel gestalten oder eine Webseite von uns erstellen lassen? Dann sind bei uns genau richtig. Vordern sie jetzt eine kostenlose Vorabanalyse an oder melden sie sich bei uns telefonisch!