LU05.L03 - Webseite mobile freundlich umsetzen

Lösungshinweis

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

Änderungen im HTML (`index.html`)

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

Änderungen im CSS (`style.css`)

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

1. Allgemeine Basis-Anpassung (Desktop)

2. Für die Tablet-Ansicht (`@media screen and (max-width: 959px)`)

3. Für die Mobile-Ansicht (`@media screen and (max-width: 600px)`)

Sourcecode: index.html

<!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>

style.css

/* ==========================================================================
   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%;
    }
}

Volkan Demir