LU05.L03 - Webseite mobile freundlich umsetzen

Nachfolgend finden Sie eine übersichtliche Aufzählung aller Anpassungen, die an den Dateien vorgenommen habe, um das Layout exakt wie auf der Vorlage umzusetzen:

Da HTML-Grundgerüst bereits gut strukturiert war, mussten nur minimale Optimierungen für die Barrierefreiheit und Struktur vorgenommen werden:

Sprachattribut ergänzt: Im `<html>`-Tag wurde `lang=„de“` hinzugefügt. Das hilft Screenreadern und Suchmaschinen zu erkennen, dass es sich um eine deutschsprachige Seite handelt.
Strukturierende Kommentare: Es wurden aussagekräftige HTML-Kommentare (``) eingefügt, damit sofort ersichtlich ist, welcher Block (Navigation, Hauptbereich, Seitenleiste) in welcher Ansicht wohin rutscht.

Hier fand die eigentliche Magie statt. Der Desktop-Code blieb als Basis bestehen, wurde aber um zwei Media Queries erweitert.

`body { margin: 0; }` hinzugefügt: Das entfernt den standardmäßigen weißen Rand, den Browser automatisch um die Webseite legen. So schließen Header und Footer perfekt mit dem Bildschirmrand ab.

Flexibler Wrapper: `#page-wrapper` wurde von festen `960px` auf `width: 100%` umgestellt, damit die Seite auf schmaleren Bildschirmen nicht abgeschnitten wird. Ein leichtes `padding` (Seitenabstand) sorgt dafür, dass Text nicht am Glasrand klebt.
Zeilenumbruch aktiviert: Dem Container `.main-content` wurde `flex-wrap: wrap;` zugewiesen. Nur dadurch können Elemente überhaupt untereinander rutschen.
Navigation nach oben gezogen: `#mainnav` bekam `width: 100%` und `order: 1`, damit sie sich – wie in der Grafik – über die gesamte Breite über den Inhalt legt.
Seitenleiste nach links verschoben: `#sidebar` wurde auf `width: 30%` gesetzt und bekam `order: 2`. Dadurch rutscht sie auf die linke Seite.
Hauptbereich nach rechts verschoben: `main` wurde auf `width: 70%` gesetzt und bekam `order: 3`. So teilt es sich die Zeile mit der Seitenleiste und steht rechts daneben.

Alles auf 100% Breite: Für `#mainnav`, `main` und `#sidebar` wurde die Breite auf `100%` gesetzt. Dadurch bricht das Nebeneinander komplett auf und alle Elemente stapeln sich sauber untereinander.
Reihenfolge getauscht: Durch die `order`-Eigenschaften rutscht die Navigation (`order: 1`) ganz nach oben, der Hauptbereich (`order: 2`) in die Mitte und die Seitenleiste (`order: 3`) nach unten – exakt wie auf der rechten Skizze.
Artikel-Grid aufgelöst: Das zweispaltige Grid der Klasse `.post-with-image` wurde auf `grid-template-columns: 1fr;` (eine Spalte) reduziert. Dadurch rutscht der Text bei Artikel 1 unter das Bild, statt daneben gequetscht zu werden.
Bild-Optimierung: Das Bild (`article img`) nutzt nun `width: 100%`, um sich perfekt an die Breite des Smartphones anzupassen.

<!doctype html>
<html lang="de">
<head>
    <title>Responsive Webdesign</title>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
 
<div id="page-wrapper">
 
    <header>Responsive Webdesign</header>
 
    <section class="main-content">
 
        <nav id="mainnav">
            <h3>Navigation</h3>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
 
        <main id="content">
            <article class="post-with-image">
                <div class="post-image">
                    <img alt="Pferdekopf" src="https://placehold.co/600x400"/>
                </div>
                <div class="post-content">
                    <h1>Artikel 1</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut.
                    </p>
                </div>
            </article>
            <article class="post">
                <div class="post-content">
                    <h1>Artikel 2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut.
                    </p>
                </div>
            </article>
        </main>
 
        <aside id="sidebar">
            <h3>Seitenleiste</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                rhoncus ut.</p>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </aside>
 
    </section>
 
    <footer>Fusszeile</footer>
</div>
</body>

/* ==========================================================================
   1. DESKTOP-ANSICHT (Basis-Layout)
   Grafik links: Header oben | Nav (links) - Main (mitte) - Aside (rechts) | Footer unten
   ========================================================================== */
* {
    box-sizing: border-box;
}
 
body {
    font-family: sans-serif;
    margin: 0; /* Verhindert ungewollte Ränder am Bildschirmrand */
}
 
#page-wrapper {
    margin: auto;
    width: 960px; /* Feste Breite für die Desktop-Ansicht */
}
 
header, footer {
    background: lightgreen;
    text-align: center;
    padding: 10px;
    width: 100%;
}
 
.main-content {
    display: flex; /* Flexbox aktiviert das nebeneinander Anordnen */
}
 
.post-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
 
#mainnav {
    padding: 15px;
    width: 20%; /* Nav nimmt 20% Breite ein */
}
 
#sidebar {
    padding: 15px;
    width: 20%; /* Sidebar nimmt 20% Breite ein */
}
 
main {
    padding: 15px;
    width: 60%; /* Hauptbereich nimmt 60% Breite ein (Zusammen 100%) */
}
 
article img {
    margin: 0 10px 10px 0;
    max-width: 100%;
    height: auto;
    border: 3px solid black;
}
 
article {
    padding: 15px;
    margin-bottom: 5px;
    background: lightblue;
}
 
nav ul {
    padding-left: 0;
}
 
nav ul li {
    list-style: none;
    margin-left: 0;
}
 
 
/* ==========================================================================
   2. TABLET-ANSICHT (Breakpoint: unter 960px)
   Grafik mitte: Header oben | Navigation vollflächig darunter
                 Seitenleiste (links) - Hauptbereich (rechts)
                 Footer unten
   ========================================================================== */
@media screen and (max-width: 959px) {
    #page-wrapper {
        width: 100%; /* Layout passt sich flexibel der Bildschirmbreite an */
        padding: 0 10px;
    }
 
    .main-content {
        flex-wrap: wrap; /* Ermöglicht das Umbrechen der Elemente in eine neue Zeile */
    }
 
    /* Navigation wird vollflächig über die Inhaltsblöcke geschoben */
    #mainnav {
        width: 100%;
        order: 1; /* Kommt als erstes Element innerhalb von .main-content */
    }
 
    /* Seitenleiste rutscht nach links */
    #sidebar {
        width: 30%; /* Nimmt 30% der Breite ein */
        order: 2;   /* Kommt an zweite Stelle (links) */
    }
 
    /* Hauptbereich rutscht nach rechts neben die Seitenleiste */
    main {
        width: 70%; /* Nimmt die restlichen 70% der Breite ein */
        order: 3;   /* Kommt an dritte Stelle (rechts) */
    }
}
 
 
/* ==========================================================================
   3. MOBILE-ANSICHT (Breakpoint: unter 600px)
   Grafik rechts: Header | Navigation | Hauptbereich | Seitenleiste | Footer
   (Alle Elemente untereinander gestapelt)
   ========================================================================== */
@media screen and (max-width: 600px) {
    /* Alle Blöcke werden auf die volle Breite gesetzt, um untereinander zu stehen */
    #mainnav, main, #sidebar {
        width: 100%;
    }
 
    /* Reihenfolge laut Skizze anpassen */
    #mainnav {
        order: 1; /* 1. Navigation */
    }
 
    main {
        order: 2; /* 2. Hauptbereich rutscht über die Seitenleiste */
    }
 
    #sidebar {
        order: 3; /* 3. Seitenleiste rutscht unter den Hauptbereich */
    }
 
    /* Optimierung für den Artikel: Das zweispaltige Grid wird einspaltig */
    .post-with-image {
        grid-template-columns: 1fr;
        gap: 10px;
    }
 
    /* Das Artikelbild wird für Mobilgeräte zentriert dargestellt */
    article img {
        margin: 0 0 10px 0;
        width: 100%;
    }
}