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.

Weiter im Fahrplan: Bildergalerie · Theorie dazu: Media Queries