Responsive Design
Kurzdefinition
Responsive Design bedeutet, dass eine Website Layout, Schriftgröße und Navigation automatisch an Smartphone, Tablet und Desktop anpasst.
Derselbe Seitencode zeigt auf dem Smartphone eine einzige Spalte, auf dem Tablet zwei Spalten und auf dem Desktop ein breites Raster. Möglich machen das flexible CSS-Raster und sogenannte Media Queries, die auf die Bildschirmbreite reagieren. Bilder, Schaltflächen und Text skalieren mit dem Bildschirm, sodass Besucher nie seitlich scrollen müssen.
Responsive Design ist heute Standard, weil die meisten Besucher über ein Smartphone kommen und Google Websites vor allem nach ihrer mobilen Darstellung bewertet.
Es wird oft mit adaptivem Design verwechselt. Adaptives Design baut für jedes Gerät ein eigenes, festes Layout, während responsives Design ein einziges flexibles Layout nutzt, das sich selbst anpasst und dadurch einfacher zu pflegen ist.
Der häufigste Fehler besteht darin, das Layout zuerst für den Desktop zu entwerfen und es anschließend für mobile Geräte zusammenzuquetschen, wodurch zu kleine Tippflächen und ineinander verschachtelte Menüs entstehen. Richtig ist der Mobile-First-Ansatz: Sie gestalten zuerst für den schmalen Bildschirm und fügen mit wachsender Breite weitere Spalten hinzu, sodass jedes antippbare Element groß genug bleibt und ausreichend Abstand hat.
Warum es wichtig ist
Ein Besucher, der Ihre Website auf dem Handy öffnet und ein zerschossenes Layout vorfindet, verlässt sie sofort. Responsive Design verhindert diesen Verlust: Eine einzige Website funktioniert auf jedem Bildschirm, eine separate mobile Version entfällt samt ihren Kosten.
Beispielszenario
Der Produktkatalog eines Bodenbelagherstellers zeigt auf dem Desktop ein breites Raster und auf dem Handy eine einzige Spalte, gleiche Seite, gleicher Inhalt, kein separates Layout nötig.
