Responsive Webseite: Deine Homepage wird mobiltauglich

vom 27.02.2017 von Leo Kobes

Mehr als die Hälfte der Webnutzung passiert am Handy. Zeit, deine Tutorial-Homepage fit dafür zu machen. Die Theorie steht im Kapitel Responsive Design, hier kommt die Praxis-Checkliste zum Abarbeiten.

Schritt 1: Fundament prüfen

Steht der viewport-Tag im head? Ohne ihn ist alles Weitere wirkungslos:

<meta name="viewport" content="width=device-width, initial-scale=1">

Wenn du dem Tutorial von Anfang an gefolgt bist, ist er längst da, das Grundgerüst bringt ihn mitt.

Schritt 2: Die üblichen Verdächtigen entschärfen

CSS: drei Universalregeln

* { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

body {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

Regel eins macht Breiten berechenbar (Box Model), Regel zwei hindert Bilder am Ausbrechen, Regel drei gibt der Seite eine Lesespalte mit Luft an den Rändern, das seitliche padding ist auf dem Handy Gold werrt.

Schritt 3: Layout und Menü stapeln

@media (max-width: 700px) {
    .layout {
        grid-template-columns: 1fr;   /* Spalten stapeln */
    }
    nav ul {
        flex-direction: column;       /* Menü untereinander */
    }
}

Das Zweispalten-Layout wird einspaltig, das Menü kippt ins Senkrechte. Bei drei Menüpunkten reicht das völlig, ein Klappmenü wie das dieser Website ist die Ausbaustufe für später (Spoiler: es ist ein umgestyltes details).

Schritt 4: Finger-Test

Sind Links und Buttons groß genug zum Antippen? Als Richtwert: Klickflächen nicht unter etwa 44 Pixeln Höhe, padding hilft.
Ist die Schrift lesbar ohne Zoomen? Fließtext nicht unter 16 Pixel.
Scrollt irgendwo die ganze Seite horizontal? Dann bricht meist ein Bild, eine Tabelle oder ein Codeblock aus, ab in den Scroll-Container damit.

Schritt 5: Testen wie ein Profi

Fenster schmal ziehen ist der Schnelltest. Gründlicher: Entwicklerwerkzeuge öffnen (F12), Gerätesymbol anklicken, verschiedene Handygrößen durchschalten. Und einmal die Seite auf dem eigenen Telefon öffnen, nichts ersetzt echte Daumen auf echtem Glass.

Bonus: Bilder gezielt fürs Handy sparen

Wenn deine Seite steht und läuft, lohnt eine letzte Optimierungsrunde bei den Bildern: Mit dem srcset-Attribut liefert der Browser je nach Bildschirmbreite automatisch die passende Bildgröße aus:

<img src="garten-800.jpg"
     srcset="garten-400.jpg 400w, garten-800.jpg 800w"
     sizes="(max-width: 700px) 100vw, 800px"
     alt="Blühender Garten im Juni" width="800" height="600">

Das Handy lädt die 400er-Version, der Desktop die große, niemand lädt zu viel. Der Aufwand (jedes Bild in zwei, drei Größen exportieren) lohnt ab bildlastigen Seiten, für die Übungs-Homepage ist es die Kür nach der Pflicht. Die Verwandtschaft dieser Technik, das picture-Element für komplett unterschiedliche Bildzuschnitte, steht in der Referenz.

Weiter im Fahrplan: Bildergalerie · Theorie dazu: Media Queries