Wie eine Webseite entsteht (6): HTML und CSS

28.01.2015 | Code

Das HTML und CSS für ein responsives Webdesign nach Mobile First: Von der Smartphone-Version bis zur Desktop-Variante.

Um eine responsive Webseite nach dem Mobile-First-Ansatz zu erstellen, braucht man erst einmal nur einen Meta-Tag im HTML-Header und ein paar Media-Queries für die verschiedenen Layout-Stufen der Seite. Das haben wir im letzten Teil schon alles vorbereitet. Jetzt geht es jetzt um das HTML-Grundgerüst und das CSS.

Das HTML-Grundgerüst

Im Idealfall liegt ein fertiges Design im Grafik-Format vor, dass man dann strukturiert in HTML und CSS umsetzen kann. Entsprechend der Trennung von Format (HTML) und Design (CSS) fängt man am besten mit einer einigermaßen sauberen HTML-Struktur an. Für das neue Design der Trendschau sieht das HTML-Gerüst in einer sehr abgespeckten Version etwa so aus:

<!DOCTYPE hmtl>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrapper">
        <header>
            <div class="logo">
                <h1>trendschau</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Nav 1</a></li>
                    <li><a href="#">Nav 2</a></li>
                    <li><a href="#">Nav 3</a></li>
                </ul>
            </nav>
            <aside class="quote">
                <img/>
                <blockquote>
                    Das ist mein Zitat und es wird noch weitere geben.
                </blockquote>
            </aside>
        </header>
        <div class="main">
            <section>
                <article class="teaser">
                    <h2>Eine Überschrift</h2>
                    <small>Datum, Tags und Co.</small>
                    <p>Ich bin eine Description. Ich darf auch ruhig was länger sein, damit es einen Zeilenumbruch gibt.</p>
                    <div class="readMore">
                        <a href="#">Lesen</a>
                    </div>
                </article>
                <article class="teaser">
                    <h2>Eine Überschrift</h2>
                    <small>Datum, Tags und Co.</small>
                    <p>Ich bin eine Description. Ich darf auch ruhig was länger sein, damit es einen Zeilenumbruch gibt.</p>
                    <div class="readMore">
                        <a href="#">Lesen</a>
                    </div>
                </article>
            </section>
        </div>
        <aside>
                <h4>Themen</h4>
                <p>Hier kommt die Sidebar mit den Tags rein.</p>
        </aside>    
        <aside>
                <h4>Abonnement</h4>
                <p>Hier kommt die Sidebar mit den Abo-Buttons rein.</p>
        </aside>    
        <footer>
                <h4>Footer</h4>
                <p>Hier kommt der Footer mit Impressum und Co. rein.</p>
        </footer>
    </div>
</body>
</html>

Die Struktur dürfte selbsterklärend sein: Ein Wrapper-Div dient als Hilfskonstruktion, mit der der Inhalt in der Mitte positioniert und gegebenenfalls die Breite der Seite begrenzt wird. Der Inhalts-Bereich mit den Artikeln und Artikel-Teasern wird mit der Div-Klasse "main" umschlossen. Die übrigen Elemente sind soweit wie möglich mit semantischen HTML5-Tags wie header, footer, aside, article, section etc. ausgezeichnet. Etwas problematisch ist der erste aside-Block, mit dem das Zitat umschlossen wird. Von der Semantik dürfte es eigentlich richtig sein (mit aside sind nicht nur Elemente in der Sidebar gemeint, sondern auch andere Inhaltsblöcke, die nicht in unmittelbarem Zusammenhang mit dem umgebenden Inhalt stehen bzw. entbehrlich sind). Allerdings soll sich das "aside" mit dem Zitat anders verhalten, als die übrigen aside-Blöcke. Daher bekommt das Zitat noch die Klasse "quote".

Das CSS

An den Beginn der CSS-Datei kommen erst einmal zwei Fixes rein:

@import url('normalize.css');
*{ box-sizing: border-box; } 

Mit dem Import wird die CSS-Datei "normalize" integriert. Dabei handelt es sich um eine Standard-Datei, die das Verhalten der Browser vereinheitlicht bzw. einige Voreinstellungen der Browser normalisiert. Damit hat man schon eine Menge uneinheitlicher Verhaltensweisen abgefangen. Die zweite Angabe wendet auf alle Elemente ein "box-sizing: border-box" an. Dadurch werden Paddings nicht zu der Größe eines Div-Bereichs hinzuaddiert, sondern der Div-Bereich behält auch bei Paddings seine ursprüngliche Größe. Dieses Verhalten durch einen Stern * auf alle Elemente anzuwenden, ist reichlich rabiat und wäre vermutlich bei einem Progressive Enhancement Ansatz eher verpönt. Andererseits scheint die Angabe relativ breite Unterstützung zu finden (siehe caniuse), sodass ich mir so etwas Mühe spare.

Um im nächsten Schritt in Ruhe die Mobile-Variante am Laptop zu gestalten, kann man einfach den Body oder Wrapper auf die gewünschte maximale Breite setzen. Fangen wir einfach mal mit der Standard-Größe 320px an:

.wrapper { max-width: 320px; }

Sobald die Smartphone-Version fertig ist, kann man die Angabe entfernen und den Browser so lange in die Breite ziehen, bis man den ersten Breakpoint setzen will, sich das Layout also ändern soll. Die entsprechende Pixel-Angabe kann man zum Beispiel im Firebug oder in den Developer-Tools des Browsers ablesen.

Für das Grundlayout benötigt man nur etwa 40 Zeilen CSS:

body{
    font-family: Roboto, sans-serif;
    font-size:16px;
    font-weight: 300;
    line-height: 1.5em;
    color: #454545;
    margin: 0;
    padding: 0;
}
.wrapper{
    margin: auto;
    max-width: 320px;
}
header, aside, footer, article{
    background: #FFF;
    padding: 5% 10%;
}
header{
    border-top: 4px solid #454545;
    text-align: center;
}
.quote{
    border-top: 1px dashed #454545;
    border-bottom: 1px dashed #454545;
    margin-top: 20px;
    padding: 0;
}
.logo p, .logo h1{
    font-size: 1.4em;
    font-weight: 300;
    text-transform: uppercase; 
}
nav ul{
    display: inline-block;
    padding: 0;
}
nav ul li{
    display: inline-block; 
}

Das CSS ist sehr einfach gehalten, und dennoch steht damit das Grundlayout: Den weißen Hintergrund bekommt nicht der Body, sondern die einzelnen Inhaltselemente wie header, aside, footer und article. Da es bislang noch keine Abstände zwischen den Artikeln gibt, wirkt der gesamte Hintergrund weiß. In der nächsten Stufe wird der Body jedoch einen Hintergrund bekommen und die genannten Elemente erhalten Abstände. Eine sehr schlanke Variante, die aber recht effektvoll sein wird.

Ansonsten braucht es kaum große Erklärungen. Wer noch viel mit floats arbeitet, wird hier sehen, dass die Positionierung von Elementen nebeneinander durch die Angabe "display: inline-block" realisiert wurde. Wer früher mit Wrappern gearbeitet hat, kennt das Problem: Der Wrapper hat keinen Float, die darin liegenden Elemente aber schon, dadurch fliegt der Wrapper aus dem Float heraus und wird nur noch als Strich am oberen Rand dargestellt, anstatt die übrigen Elemente zum umschließen. Diese Verhalten hat man früher oft mit einer leeren Hilfs-Div "clearfix" am Ende der Float-Elemente gelöst. Mit der Float-Alternative "display: inline-block" benötigt man diese Hilfskonstruktion zum Glück nicht mehr.

Im Browser sieht die Mobile-Version jetzt so aus:

Einfache Mobile-Version der Trendschau

Den Breakpoint für die erste Layout-Änderung setze ich bei 360px, das wären also etwas größere Smartphones. Viel soll sich am Design nicht ändern: Es soll lediglich einen Hintergrund geben, der durch einen Rahmenabstand vom Body und durch Abstände zwischen den Elementen sichtbar wird. Da auch diese Version irgendwann sehr gestreckt aussieht, wird die maximale Breite auf 600px festgelegt. Ein größeres Tablet würde dann eben etwas mehr vom hübschen Hintergrund sehen:

@media only screen and (min-width: 360px) {
    body{ 
        background: url("pattern/subtle_white_mini_waves.png") repeat;
        padding: 20px;
    }
    .wrapper{
        max-width: 600px;
    }
    header, aside, article, footer{
        margin-bottom: 20px; 
    }
    aside, footer{
        border-top: 4px solid #454545;
    }
}

Der letzte Breakpoint wird bei 900px gesetzt. Dann ist der Browser breit genug für ein ordentliches zweispaltiges Layout. Auch hier passiert im Code nicht so wahnsinnig viel: Der Wrapper bekommt wieder eine maximale Breite, ansonsten kommen eigentlich nur Floats hinzu, mit denen der Header und die Sidebar auf die linke Seite geschoben werden und der Main-Content sowie der Footer auf die rechte Seite.

@media only screen and (min-width: 900px) {
    body{
        padding: 40px;
    }
    .wrapper{
        max-width: 1000px;
    }
    header, aside{
        width: 30%;
        float: left;
    }
    .quote{
        float: none; 
        width: 100%;
        padding: 0;
    }
    .main, footer{
        width: 65%;
        float: right;
    }
    header, aside, footer{
        padding: 2%;
    }
}

Man sieht, dass man für den Sonderfall ".quote" leider Code überschreiben muss. Außerdem sind die header-, footer- und aside-Elemente mit den neuen Padding-Angaben nicht ganz so stringent. Um das zu ändern, müsste man im HTML allerdings wieder leere Div-Elemente einfügen, was ich im Sinne einer einfachen HTML-Struktur vermeiden möchte. Insgesamt ist der Code sehr schlank und leicht zu handeln, sodass man eine brauchbare Grundstruktur hat. Außerdem sieht man sehr schön, wie der Code für größere Versionen immer nur additiv hinzukommt und oft schon kleine Änderungen eine große Wirkung erzielen.

Die Version sieht im Browser jetzt so aus:

Desktop-Version der Trendschau

Das Grundlayout steht also, jetzt kann man noch viel Zeit mit der CSS-Gestaltung der einzelnen Elemente wie Buttons, Links und Co. verwenden.

Vorschau auf den nächsten Teil

Das Thema des nächsten Teils steht noch nicht ganz fest: Entweder gibt es noch einen kurzen Zwischenpart, in dem es um die Font-Icons, embedded Fonts und das Drucklayout geht. Oder es geht um die Integration in ein CMS, also das Templating. Vielleicht überspringe ich auch das und gehe mit einem Measurement-Plan und ein paar Tipps für Tracking-Scripts direkt zum finalen Marketing-Part über. Also einfach dran bleiben…

Dieser Beitrag gehört zu der Serie "Webseite". Das sind alle Artikel der Serie:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus