einem Anzug vergleichen, der sich automatisch an unterschiedliche Körpergrößen anpasst, statt für jede Größe einen komplett neuen Anzug schneidern zu müssen
Was steckt dahinter?
Responsive Design lässt sich am besten mit einem Anzug vergleichen, der sich automatisch an unterschiedliche Körpergrößen anpasst, statt für jede Größe einen komplett neuen Anzug schneidern zu müssen. Eine Webseite mit Responsive Design erkennt, auf welchem Gerät sie gerade angezeigt wird – Smartphone, Tablet, Laptop, großer Desktop-Monitor – und passt Layout, Schriftgrößen, Bildgrößen und Anordnung der Elemente entsprechend an, sodass die Seite auf jedem Bildschirm gut lesbar und bedienbar bleibt. Technisch basiert Responsive Design meist auf flexiblen Rastersystemen (Grids), relativen Maßeinheiten statt fester Pixelwerte und sogenannten Media Queries in CSS, mit denen sich Stilregeln gezielt für bestimmte Bildschirmbreiten definieren lassen. Ein Element, das auf dem Desktop dreispaltig nebeneinander steht, rutscht auf dem Smartphone beispielsweise untereinander, damit nichts gequetscht oder unleserlich wird. Seit Google mobile Endgeräte beim Crawling und Ranking bevorzugt behandelt (Mobile-First-Indexierung), ist Responsive Design nicht nur eine Frage der Nutzerfreundlichkeit, sondern auch ein handfester SEO-Faktor. Eine Seite, die auf dem Handy schlecht aussieht oder sich nicht bedienen lässt, verliert nicht nur Besucher, sondern in der Regel auch Sichtbarkeit in den Suchergebnissen. Viele moderne Frameworks wie Bootstrap oder Tailwind CSS bringen responsive Grundbausteine bereits mit, sodass Entwickler nicht jede Anpassung von Hand programmieren müssen.