3 Spalten im Footer responsive gestalten

[Gunnar Bittersmann]

@@Marcel

    <header style="background-image:url(head.jpg)">
        <div id="logo">
            <a href="index.html"><img src="logo_rw.png" alt="Logo HaPaGuide"/></a>
        </div>
    </header>

Der Alternativtext ist nicht besonders gut gewählt. Hier ist weniger relevant, dass es sich um das Logo handelt; vielmehr, dass es sich um den Link zur Homepage handelt: alt="HaPaGuide Startseite".

Das div-Element ist überflüssig.

---

    <nav id="navigation">
        <a href="LINK ZUR SEITE">ENTDECKEN</a>
        <a href="LINK ZUR SEITE">PLANEN</a>
        <a href="LINK ZUR SEITE">VERGANGENES</a>
        <a href="LINK ZUR SEITE">ZUKÜNFTIGES</a>
        <a href="LINK ZUR SEITE">MAGAZIN</a>
    </nav>

VoiceOver liest das richtig vor (bei richtiger Sprachauszeichnung lang="de", die du ja getätigt hast). Ich bin aber nicht sicher, ob das alle Screereader so tun oder ob einige nicht buchstabieren: e en te de e ce ka e en …

Lieber im HTML-Quelltext normal schreiben und die Versalien mit CSS text-transform: uppercase.

Die Auszeichnung als Liste bietet sich auch an; sie gibt Nutzern assitiver Technologie zusätzliche Hinweise:

    <nav id="navigation">
        <ul>
            <li><a href="LINK ZUR SEITE">Entdecken</a></li>
            <li><a href="LINK ZUR SEITE">Planen</a></li>
            <li><a href="LINK ZUR SEITE">Vergangenes</a></li>
            <li><a href="LINK ZUR SEITE">Zukünftiges</a></li>
            <li><a href="LINK ZUR SEITE">Magazin</a></li>
        </ul>
    </nav>

---

    <div id="content">

Dass dieses div-Element überflüssig ist, wurde schon gesagt.

---

    <main>
        <article class="leftcontent">
            <h1>Willkommen auf HaPaGuide</h1>
            <p>Deine Hansa-Park Fanseite ist ab sofort im responsiven Design online.
            Noch mehr Übersicht für noch mehr Hansa-Park.</p>
        </article>
        <section class="leftcontent">
            <h2>Entdecke den Hansa-Park</h2>
            ⋮

Das ist mitnichten ein eigenständiger Abschnitt, also kein article. Das ist die Überschrift für die nachfolgenden sections. Wenn du für h1 und p ein gruppierendes Element brauchst, dann ein div; aber auch header bietet sich dafür an.

---

    <aside>
        <section class="rightcontent">
            <h3>Parknews und Updates</h3>
            <h4>Aus dem Newsletter August</h4>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

Die Überschrifthierarchie stimmt hier nicht: Es gibt kein h2 zwischen h1 und h3

Entweder der aside-Bereich bekommt eine eigene Überschrift (die du evtl. visuell verstecken kannst)

    <aside>
        <h2>Weitere Informationen</h2>
        <section class="rightcontent">
            <h3>Parknews und Updates</h3>
            <h4>Aus dem Newsletter August</h4>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

oder die Überschriften müssen eine Stufe hochrutschen

    <aside>
        <section class="rightcontent">
            <h2>Parknews und Updates</h2>
            <h3>Aus dem Newsletter August</h3>
            <p>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar.
            Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.</p>
        </section>

Anpassung der Schriftgrößen mit Nachfahrenselektor aside h2, aside h3.

---

    <footer>
        <section id="leftfooter">
            <h2>HaPaGuide - Deine Hansa-Park Fanseite</h2>
            ⋮
        </section>
        <article id="centerfooter">
            <img src="map_facts.png" alt=""/>
        </article>
        <section id="rightfooter">
            <h2>Links</h2>
            ⋮
        </section>
    </footer>

Auch hier: kein article. Faustregel: articles (und sections) beginnen jeweils mit einer eigenen Überschrift.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!