Responsive Design

Responsive Design bedeutet, dass sich eine Website automatisch an die Größe des Bildschirms anpasst, auf dem sie gerade angezeigt wird. Ob Smartphone, Tablet oder großer Desktop-Monitor, die Seite sieht auf jedem Gerät ordentlich aus und ist gut bedienbar.

Das klingt selbstverständlich, war es aber lange nicht. Früher wurden viele Websites nur für Desktops gebaut. Als Smartphones aufkamen, mussten Nutzer auf winzigen Bildschirmen riesige Desktop-Layouts quer scrollen. Responsive Design hat dieses Problem gelöst.

Wie funktioniert das technisch?

• Flexible Layouts: Statt fester Pixelbreiten werden prozentuale Breiten genutzt, die sich dem verfügbaren Platz anpassen.
• Breakpoints: An bestimmten Bildschirmbreiten springt das Layout um. Zum Beispiel wechselt eine dreispaltige Ansicht auf dem Tablet zu zweispaltig und auf dem Smartphone zu einspaltig.
• Mobile First: Viele Entwickler beginnen heute mit dem mobilen Layout und erweitern es für größere Bildschirme. Das zwingt dazu, sich auf das Wesentliche zu konzentrieren.

Für Google ist Responsive Design kein optionales Extra. Google bewertet Websites seit 2019 primär nach ihrer mobilen Version. Eine Seite, die auf dem Smartphone schlecht aussieht oder langsam lädt, verliert im Ranking.