Responsive Webdesign

Responsive Webdesign ist das Schlagwort im Web 2.0 und im Internet der Dinge, denn es erscheinen immer mehr internetfähige Geräte auf dem Markt.
Besuchte man früher noch Websites ausschließlich am Computer, so greift man heute über alle möglichen Geräte zu. Das alte Konzept der Websites funktioniert daher nicht mehr und muss überarbeitet werden.

Laut dem Statistik-Portal statista hatten im Jahr 2015 bereits 66 % der Unternehmen eine eigene Website. Auch an Privatpersonen geht dieser Trend nicht vorbei und so neigen viele Nutzer dazu, Informationen im Internet bereitzustellen. In Anbetracht dessen und der stetig wachsenden Nutzung von mobilen Endgeräten stellt man sich nun die Frage, wie man alle Geräte mit seinem Webauftritt versorgen kann. Die Antwort hierauf lautet: Responsive (= reagierend) Webdesign.

Definition Responsive Webdesign

Ganz einfach erklärt bedeutet Responsive Webdesign, dass sich die eigene Website an die verschiedenen Bildschirmauflösungen anpasst. Die Website stellt sich auf jedem Bildschirm optimal dar, so dass man ohne Informationsverlust Inhalte lesen kann. Sie reagiert somit auf das Endgerät und nicht das Endgerät auf die Seite, der Besucher erspart sich dadurch das mühevolle Zoomen.

Wer bereits Websites aufgerufen hat und an mobilen Geräten häufig mit dem Zoom spielen musste kann nachvollziehen, wie ärgerlich es sein kann, dass sich die Seite nicht selbst anpasst. Um das zu umgehen, sollte man sich genau Gedanken machen, wie man seine Seite aufbaut. Denn ein einfacher Aufbau erleichtert das optimierte Darstellen auf allen Geräten.

Was bedeutet optimiert?

Optimiert bedeutet in diesem Fall, dass Texte automatisch durch Zeilenumbrüche getrennt werden und Navigationen zusammengefasst werden. Hat man am Computer seine Navigationsleiste oben mit allen Elementen, so wird diese auf dem Handy als ausklappbares Menü angezeigt. Dadurch kann man alle Menüelemente auf einem kleinen Bildschirm darstellen, ohne die Besucher mit einer riesigen Auswahl an Menüpunkten sofort zu erschlagen.

Wie erreiche ich das?

Die Tatsache, dass Texte automatisch durch Zeilenumbrüche formatiert werden, erledigt der Browser sogar schon alleine. Hierfür muss man also nichts weiter tun, als bisher auch.
Doch wenn es an die Navigationsleiste geht, ist ein wenig Arbeit gefragt. Per CSS muss dem Gerät mitgeteilt werden, dass ab einer gewissen Auflösung Elemente anders dargestellt werden müssen.

Wer es sich hier etwas einfacher machen möchte, der erstellt verschiedene CSS-Dateien und weist je nach Auflösung die entsprechende zu. Es ist jedoch auch möglich, dass man alles in eine CSS-Datei packt und der Browser sich die richtigen Elemente raussucht. Hierfür ist folgendes nötig:

@media screen and (max-width: 768px) {

}

Die Anzahl der Pixel lässt sich hierbei natürlich nach Belieben verändern und kann genau auf die Geräte abgestimmt werden. In diesem Beispiel würde der Browser ab 768 Pixeln in der Breite diese CSS-Elemente wählen. Alles was darüber liegt wäre nicht abgedeckt.

Innerhalb der geschweiften Klammern definiert man nun also die gleichen Elemente, wie üblich. Darin überschreibt man schließlich deren Eigenschaften und passt sie dadurch auf die kleinere Auflösung an. Ein Beispiel hierfür wäre, dass man Überschriften minimal verkleinert oder DIV-Elemente anders anordnet. Natürlich kann man hier auch Farben und Co. komplett überschreiben und die Seite völlig anders erscheinen lassen. Der Kreativität sind keinerlei Grenzen gesetzt.

Hat man nun Elemente, die man ab dieser Pixelanzahl nicht mehr anzeigen möchte, so setzt man einfach die Eigenschaft display: none; und fertig ist das Hexenwerk.

Ist das alles?

Nein, das ist nicht alles. Aber ich kann jeden beruhigen: Das was noch fehlt, ist ein Kinderspiel. Damit mobile Geräte ihren Fokus richtig auf den Inhalt legen ohne dass man zoomen muss, fehlt noch eine Meta-Angabe im Kopf der Seite. Man fügt hierfür ein:

<meta name="viewport" content="width=device-width">

Damit haben wir nun auch sichergestellt, dass der Fokus des Geräts auch richtig liegt und man sich wirklich das Zoomen erspart.

Nun haben wir aber alle Grundlagen beisammen, so dass jeder seine responsive Seite erstellen kann. Am besten testet man hierfür immer mal wieder seinen Stand auf einem anderen Gerät.

Tipp

Sollte man keine verschiedenen Geräte zur Verfügung haben, so bieten die meisten Browser einen Entwicklermodus. Im Google Chrome findet man diesen über einen Rechtsklick unter dem Menüpunkt Untersuchen (Q). Es öffnet sich eine wohl ungewohnte Ansicht, in der man jedoch vieles mit der Website anstellen kann.

Hier kann man nun verschiedene Dinge einstellen. Insbesondere die Auflösung. Dadurch lassen sich kleinere Displays simulieren und man sieht direkt, wie sich die eigene Website anpasst. Sollten die aufgeführten Geräte nicht den eigenen Wünschen entsprechen, so kann man auch eigene Auflösungen definieren, welche der Chrome dann anzeigt.

Um diesen Modus wieder zu verlassen, klicken man oben rechts auf das X. Aber nicht das X des Browsers, sondern innerhalb des Fensters.

Schlusswort

Ich hoffe, dass ich einigen das simple Vorgehen näherbringen konnte und der eine oder andere Hobbyentwickler sich an ein responsives Aussehen herantraut. Man sollte sich auf jeden Fall nicht von kleineren Rückschlägen oder Schwierigkeiten entmutigen lassen, denn es kann einfach sein als gedacht.

In den Verweisen werde ich auch noch weiterführende Links angeben, in denen insbesondere die responsive Navigation ausführlich erklärt wird.

Und nun wünsche ich jedem Leser viel Spaß und Erfolg bei der Erstellung eines Designs.

Verweise

Statistik-Portal statista: de.statista.com

Statista: Anteil der Unternehmen mit eigener Website in Deutschland in den Jahren 2005 bis 2015

wiki.selfthtml.org: HTML/Tutorials/responsive Webdesign

w3schools.com: How To Create a Responsive Top Navigation Menu