Das bedeutet Responsive Webdesign

Eine Webseite die sich anpasst

Sie können eine Webseite mit dem Notebook, Desktop-PC, Tablet oder Smartphone betrachten. Jedes dieser Geräte hat eine andere Displaygröße. Das menschliche Auge kann gegenüber Bildern Schrift aber erst ab einer gewissen Größe lesen, somit darf Schrift nicht zu klein sein. Man kann also den Inhalt einer Webseite nicht beliebig verkleinern.

Wie löst man das Problem, dass Webseiten immer gut lesbar sind?

Webseiten müssen so gestaltet werden, dass diese sich automatisch an das jeweilige Gerät anpassen und alle Elemente der Webseite immer gut lesbar und zugänglich sind.

Man unterteilt das Layout in 3 Teile:

für große Displays: Notebooks, Desktop-PCs und TVs
für mittlere Displays: Tablets, Phablets und E-Book-Reader
für kleine Displays: Smartphones

Bei großen Displays werden die Elemente nebeneinander in mehreren Spalten gesetzt. Desto kleiner das Display wird, je mehr brechen die Elemente um und platzieren sich untereinander.

Damit nicht drei Webseiten erstellt werden müssen, gibt es eine Technik, die es einem erlaubt diese 3 Zustände in der Formatierung anzusprechen. Die Webseite erkennt dann anhand der Displaygröße den richtigen Zustand und passt sich automatisch an.

Ein Smartphone kann mehr

Ein Smartphone hat gegenüber einem Notebook bzw. Desktop-PC einige Funktionen, die man nutzen sollte. Auf der Webseite sollte deswegen eine Möglichkeit zum direkten ☎ Anrufen geschaffen werden. Außerdem hat sich das ≡ Bar-Symbol (3 vagerechte Linien untereinander) etabliert, dieses verbirgt die Navigation und klappt nach Bedarf aus. Somit wird Platz beim Layout gespart und es ist im oberen sichtbaren Bereich mehr vom Inhalt zu sehen.