Was ist Responsive Design?

Etwa die Hälfte aller Nutzer, welche sich im World Wide Web aufhalten, rufen eine Website mit einem mobilen Gerät auf. Hierbei kann es sich zum Beispiel um ein Smartphone oder ein Tablet handeln. Diese Tendenz ist seit Jahren stark steigend. Aus diesem Grund ist es für Betreiber einer Website sehr wichtig, dass die klare Struktur sowie die Benutzerfreundlichkeit und das ansprechende Layout in jedem Fall erhalten bleiben. Unabhängig davon, ob der User die Website auf einem PC, Notebook, Smartphone oder auch über einen Fernseher betrachtet. Die Praktiken, um eine Website für alle Endgeräte zu optimieren, nennt sich Responsive Design. Dieses wird im Normalfall mit Hilfe von sogenannten CSS-Media-Queries umgesetzt. Eine Media Query ist ein in der CSS-Datei enthaltene Abfrage, welche beispielsweise auf die maximale Breite oder Höhe des verwendeten Endgerätes reagiert. Somit kann eine CSS Regel erstellt werden, welche nur dann gültig ist, wenn die Bildschirmbreite des Endgerätes maximal 800 Pixel beträgt.

Wozu dient Responsive Design?

Bevor ein Responsive Design für eine Website umgesetzt werden kann, muss der passende Viewport gesetzt werden. Beim Viewport handelt es sich um den für den User sichtbaren Bereich, welcher im HTML Code angegeben muss. Dadurch wird verhindert, dass der User beim Navigieren innerhalb der Website auf seinem Smartphone oder Tablet zoomen muss, wie man es von Websites ohne Responsive Design kennt. Bei der Umsetzung des Designs einer Website kann grundsätzlich zwischen zwei Vorgehensweise gewählt werden: Desktop-First und Mobile-First. Beim Desktop-First-Prinzip wird das Design der Website so gestaltet, dass diese passend für standardmäßige Bildschirmauflösungen von Desktop-PCs ist. Anschließend wird dieses so erweitert, dass die Gestaltung Website auch für Geräte mit kleineren Bildschirmen passend und die Benutzerfreundlichkeit gegeben ist. Beim Mobile-First-Aufbau ist dies genau umgekehrt – zunächst wird eine Version erstellt, welche passend für Smartphones und Tablets ist, anschließend wird das Design für Desktop-PCs hinzugefügt.