RESPONSIVE WEBDESIGN
für optimale Nutzererlebnisse

Responsive Webdesign auf unterschiedlichen Endgeräten dagestellt

Wie funktioniert das?

Quellcodeausschnitt HTML und CSS

Beim Responsive Webdesign wird eine Webseite je nach Bildschirmgröße und/oder Endgerät (Desktop PC, Smartphone, Tablet) anders dargestellt.

Die Anpassungen für eine Responsive Webseite finden hauptsächlich in der CSS Datei statt.

Durch den Einsatz von fluiden Einheiten und Media Queries, sowie durch moderne Layout-Techniken wie Flexbox oder Grid.

Im HTML-Dokument sorgt der Viewport-Tag für die korrekte Darstellung auf mobilen Geräten.

Responsive Layout Techniken

MEDIA
QUERIES

Ermöglichen das Anpassen des Layouts basierend auf Bildschirmgröße, Auflösung oder Geräten.

CSS GRID

Ideal für komplexe Layouts mit Zeilen und Spalten.

FLEXBOX

Perfekt für die Anordnung von Elementen in einer Reihe oder Spalte.

FLUID
DESIGN

Statt festen Breiten (px) lieber relative Einheiten (%, vw, vh, em, rem) nutzen.

RESPONSIVE
NAVIGATION

Passt sich dynamisch an verschiedene Bildschirmgrößen an, z. B. durch Burger-Menüs oder umgestaltete Menüleisten.

MOBIL FIRST
DESIGN

Das Design wird zuerst für kleine Bildschirme optimiert und dann für größere Displays erweitert.

VIEWPORT

Der <meta viewport>-Tag in HTML steuert, wie eine Webseite auf mobilen Geräten skaliert und dargestellt wird, um ein responsives Design zu ermöglichen.