Responsive Design
Responsive Design bedeutet, dass sich das Layout einer Website automatisch an die Bildschirmgröße des Endgeräts anpasst – Smartphone, Tablet, Laptop oder Desktop. Statt separate mobile Versionen einer Website zu bauen, reagiert ein responsives Layout flexibel: Spalten stapeln sich, Schriften skalieren, Bilder passen sich an, Navigation klappt auf ein Hamburger-Menü um.
Wie Responsive Design technisch funktioniert
Die Grundlage bilden CSS Media Queries – Bedingungen, die unterschiedliche Styles ab bestimmten Bildschirmbreiten (Breakpoints) aktivieren. Ein typischer Ansatz:
/* Standard: Mobile-First */
.container { width: 100%; }
/* Ab 768px: Tablet */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
}
/* Ab 1200px: Desktop */
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}Mobile First vs. Desktop First
- Mobile First – das Design beginnt für die kleinste Bildschirmgröße, und wird dann für größere Screens erweitert. Empfohlener Ansatz: erzwingt Fokus auf das Wesentliche, ist performanter und entspricht dem Ranking-Modell von Google.
- Desktop First – Design für große Screens zuerst, dann Anpassung nach unten. Älterer Ansatz, oft in Legacy-Projekten noch anzutreffen.
Responsive Design und WordPress
Alle modernen WordPress-Themes sind responsiv – das ist heute eine Selbstverständlichkeit, kein Feature. Bei Page-Builder-Seiten (Elementor, Divi, Bricks) gibt es oft eigene Breakpoint-Einstellungen, mit denen sich das Verhalten für jede Gerätegröße separat steuern lässt. Bilder sollten als responsive Bilder eingebunden werden (srcset-Attribut), damit Browser die passende Bildgröße laden.
Responsive Design und SEO
Google verwendet Mobile-First-Indexing: Die mobile Version einer Website ist die Grundlage für das Ranking. Eine Website, die auf dem Smartphone schlecht aussieht oder langsam lädt, wird in den Suchergebnissen schlechter bewertet. Responsive Design ist damit nicht nur Nutzererlebnis – es ist SEO.
