Responsive Webdesign

Responsive Webdesign

Mein erster Kontakt mit Webdesign und HTML war im Jahre 1999, ich war 13 Jahre jung. Seitdem hat sich das Webdesign stetig und teils sehr drastisch verändert.

Ich habe die Zeit der Frames miterlebt, ebenso die der ressourcenhungrigen Tabellenlayouts und die Zeit der pixelgenauen Webdesigns.

Seit 2007 ist alles anders

Doch den größten Schritt hat das Internet 2007 gemacht, als Steve Jobs das erste iPhone vorstellte. Plötzlich hatte man das Internet immer dabei. Man konnte problemlos am Strand shoppen, in der Bahn seine E-Mails beantworten oder im Café Nachrichten lesen.

Webdesign für mobile Geräte

In den Folgejahren kamen immer mehr Smartphones und auch Tablets mit den unterschiedlichsten Displaygrößen auf den Markt. Für Webdesigner stellte das eine große Herausforderung dar, denn der Anspruch war, dass die Website auf jedem Gerät gleich gut zu benutzen ist.

Responsive Webdesign

Dabei war es nicht wichtig, dass die Website auf jedem Gerät gleich aussieht, sondern dass sie auf jedem Gerät perfekt zu bedienen ist.

Die einfachste Art, dies zu bewerkstelligen, war, die Website responsiv zu gestalten. Die Website erkennt, wieviel Platz ihr zur Verfügung steht und ordnet die einzelnen Elemente der Webseite entsprechend neu an. Die folgende Grafik veranschaulicht dieses Prinzip. Dieses Verhalten kannst Du heutzutage auf diversen Seiten entdecken (so auch hier).

„responsive” bedeutet so viel wie „reagierend”, das heißt, die Website reagiert auf die gegebenen Umstände wie Displaygröße oder Eingabemöglichkeit (Maus/Tastatur oder Touchscreen).

Grafik: Wie funktioniert Responsive Webdesign?

Mobile First

Seit einiger Zeit gehen Webdesigner sogar einen Schritt weiter und entwickeln zuerst die Version für Smartphones und erweitern die Website dann um die Versionen für Tablets und Desktop-PCs bzw. Laptops.

Warum mobile first?

Zum einen ist der Anteil der Mobilgeräten in den letzten Jahren sehr stark gestiegen. Auf vielen von mir betreuten Websites liegt der Anteil der Besucher mit mobilen Geräten mittlerweile bei über 50%. Mit „mobile first” sorgt man also dafür, dass die Website von vornherein für den Großteil der Besucher konzipiert wird.

Zum anderen legt man damit den Fokus wieder auf das Wesentliche: Den Inhalt. Auf den Displays der Mobilgeräte ist nicht sehr viel Platz für Design-Spielereien vorhanden, außerdem möchte man gerade unterwegs möglichst schnell an die gewünschten Informationen kommen und sich nicht von (überflüssigen) Designelementen ablenken lassen.

Auch ich konzentriere mich vermehrt auf den mobile first-Ansatz

So habe ich diese Website auch nach dem mobile first-Konzept entwickelt. Mir war wichtig, dass die Texte und die Blogeinträge vor allem von Smartphones und Tablets gut zu lesen sind. Für die meisten Branchen macht dieser Ansatz Sinn, vor allem immer dann, wenn die Zielgruppe recht jung ist.

Der erste Kunde, bei dem mir aufgefallen war, dass die Besucher überwiegend Mobilgeräte nutzten, war ein Fitnessstudio aus Hamburg mit dem Folus auf jugendliche Kunden.

Die Zielgruppe ist entscheidend

Dabei darf man aber nie die Zielgruppe aus den Augen verlieren. Bevor man eine Website konzipiert, sollte man die Zielgruppe und ihre Gewohnheiten definieren.

Für ein Restaurant, ein Ladengeschäft oder das o.g. Fitnessstudio mit junger, internetaffinen Zielgruppe ist eine mobile Website deutlich wichtiger als z.B. für einen Großhändler im B2B-Bereich oder einen Fotografen, der seine Fotografien in möglichst hoher Auflösung präsentieren möchte. Obgleich auch für die letztgenannten eine mobile Website durchaus sinnvoll sein kann.

Ein Immobilienmakler oder Bauträger hingegen sollte seine Webpräsenz aus meiner Erfahrung möglichst auch für Tablets optimieren, denn ein iPad o.ä. ist abends auf der Couch, wenn die ganze Familie zusammensitzt, am entspanntesten und wird dementsprechend häufig genutzt.

Suchmaschinenoptimierung

Wer möchte, dass seine Website von den Suchmaschinen wohlwollend betrachtet werden, sollte ein paar Punkte beachten. Die folgenden Punkte sind nur ein Auszug aus den diversen Faktoren, die das Ranking bei Google & Co. bestimmen

Nützliche Inhalte

Der wichtigste Punkt ist, den Besuchern Mehrwert in Form von nützlichen Inhalten, Bildern und Texten zu liefern. Das freut nicht nur die Suchmaschinen, sondern natürlich auch die menschlichen Besucher selbst. Du solltest Deine Website in regelmäßigen, nicht zu langen Abständen mit neuen Inhalten füttern. Ein Blog, in dem mindestens einmal pro Woche - besser noch häufiger - neue Artikel veröffentlicht werden.

Richtige HTML-Seitenstruktur

Die richtige HTML-Struktur ist wichtig für die Suchmaschinen, damit sie die vorliegenden Inhalte richtig strukturieren, deuten und bewerten können. Dazu gehören z.B. die Überschriften H1 - H6 oder die neuen HTML5-Elemente wie section oder article.

Auch die Beschreibung der Bilder mit Hilfe des alt-Attributes ist sinnvoll, da die Suchmaschinen (und Screenreader wie sie z.B. von Menschen mit Sehbehinderung eingesetzt werden) nicht automatisch erkennen können, was auf einem Bild gezeigt wird.

Ladegeschwindigkeit

Spätestens seit wir mobil auch im Internet surfen, ist die Ladegeschwindigkeit einer Website zu einem entscheidenen Faktor geworden. Auch für die Suchmaschinen. Es gibt verschiedene Maßnahmen, um die Geschwindigkeit einer Website zu erhöhen. Dazu gehören z.B. die Optimierung der Bilder, Reduzierung der Anzahl der eingebundenen CSS- und Javascript-Dateien, serverseitige GZIP-Kompression, Leverage Browser Caching und vieles mehr.

Mit Hilfe von Google PageSpeed Insights lässt sich anhand eines Rankings von 0 bis 100 erkennen, inwieweit die Ladegeschwindigkeit einer Website optimiert ist.

Optimierung für Mobilgeräte

Seit einiger Zeit ist auch die Optimierung für mobile Geräte ein Ranking-Faktor bei Google. Unabhängig davon ist es ohnehin sinnvoll, eine Website mobil zu optimieren, um möglichst viele Besucher zu erreichen.

SSL-Verschlüsselung

Wenn man einen Online-Shop oder allgemein eine Website betreibt, auf der persönliche Daten abgefragt werden (da genügt schon ein einfaches Kontaktformular), ist es ratsam, die Verbindung mittels SSL-Verschlüsselung abzusichern.

Zum einen erhöht eine verschlüsselte Verbindung das Vertrauen des Besuchers in eine Website, zum anderen werden SSL-geschützte Websites seit kurzem von Google etwas besser gerankt als nicht-verschüsselte. SSL-Zertifikate kosten nicht viel Geld oder sind im Falle von Let's Encrypt sogar kostenlos. Du solltest Deine Seite also unbedingt sichern

Backlinks

Eine der effektivsten Maßnahmen in der Suchmaschinenoptimierung ist das Setzen von relevanten Backlinks. Das bedeutet, dass andere Websites, die thematisch möglichst zu Deiner Website passen und selbst möglichst gut optimiert sind, per Link auf Deine Website verweist.

Dabei geht es nicht darum, möglichst viele Backlinks zu erhalten, sondern möglichst starke. Wenige Backlinks von Websites, die selbst gut von Google bewertet werden, sind deutlich mehr wert als viele Backlinks von nicht relevanten Websites.