Was ist die adaptive Version der Seite?

Responsives Webdesign ist ein Ansatz in der Webentwicklung, bei dem das Design und der Inhalt der Seite automatisch an die Bildschirmgröße des Benutzers angepasst werden (Desktop, Tablet, Smartphone).

Grundprinzipien:

• Flexible Raster (Fluid Grids): Verwendung von Prozentangaben oder anderen relativen Einheiten zur Festlegung der Elementgrößen anstelle fester Pixel.
• Flexible Bilder (Flexible Images): Proportionale Größenänderung der Bilder, damit sie den Container nicht überschreiten.
• Media Queries: CSS-Regeln, die es ermöglichen, unterschiedliche Stile je nach Eigenschaften des Geräts anzuwenden, wie Bildschirmbreite, Höhe, Orientierung und Auflösung.

Beispiel für die Verwendung einer Media Query in CSS:

/* Allgemeine Stile für alle Geräte */
body {
    font-size: 16px;
}

/* Stile für Bildschirme bis zu 768px Breite (z.B. Tablets und Mobiltelefone) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Beispiel für eine Änderung des Navigationslayouts */
        display: flex;
        flex-direction: column;
    }
}

/* Stile für Bildschirme bis zu 480px Breite (z.B. Mobiltelefone) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Bilder nehmen die volle Breite des Containers ein */
        max-width: 100%;
        height: auto;
    }
}

Ziel des responsiven Designs ist es, die Nutzung der Website auf jedem Gerät komfortabel zu gestalten, ohne separate Versionen der Seiten erstellen zu müssen.

Testen der responsiven Version umfasst die Überprüfung:

• Der korrekten Anzeige der Elemente bei unterschiedlichen Auflösungen.
• Der Benutzerfreundlichkeit bei Navigation und Interaktion.
• Das Fehlen horizontalen Scrollens.
• Die Lesbarkeit des Textes.
• Die Ladeleistung der Seite.