Mobile First Ansatz

Mobile First bedeutet, dass du dein Design zuerst fuer kleine Bildschirme entwickelst und es dann fuer groessere Bildschirme erweiterst. Dieser Ansatz hat sich als Best Practice in der modernen Webentwicklung durchgesetzt.

Warum Mobile First?

Die Zahlen sprechen fuer sich

Ueber 60% des globalen Web-Traffics kommt von Mobilgeraeten
Google bewertet Webseiten nach ihrer mobilen Version (Mobile-First Indexing)
Mobile Nutzer sind ungeduldig — langsame Seiten werden sofort verlassen

Mobile First vs. Desktop First

/* Desktop First: Erst Desktop, dann Mobile anpassen */
.container {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
}

@media (max-width: 1024px) {
    .container {
        grid-template-columns: 250px 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

/* ———————————————————— */

/* Mobile First: Erst Mobile, dann Desktop erweitern */
.container {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 250px 1fr;
    }
}

@media (min-width: 1024px) {
    .container {
        grid-template-columns: 250px 1fr 300px;
    }
}

Vorteile von Mobile First

Aspekt	Mobile First	Desktop First
Performance	Mobil schnell, Desktop auch	Desktop schnell, mobil langsam
SEO	Google bevorzugt es	Nachteil bei Mobile-First Indexing
Entwicklung	Erweitern ist einfacher	Reduzieren ist schwieriger
Content	Fokus auf Wesentliches	Tendenz zur Ueberladung

Mobile First in der Praxis

Schritt 1: Basis-Styles (Mobile)

/* Reset und Grundlagen */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

/* Container */
.container {
    width: 100%;
    padding: 0 1rem;
}

/* Navigation: Vertikal auf Mobile */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

/* Einspaltiges Layout */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Bilder responsive */
img {
    max-width: 100%;
    height: auto;
}

Schritt 2: Tablet-Erweiterung

@media (min-width: 768px) {
    .container {
        padding: 0 2rem;
        max-width: 768px;
        margin: 0 auto;
    }

    .nav-links {
        flex-direction: row;
        gap: 2rem;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

Schritt 3: Desktop-Erweiterung

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 0 3rem;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

Progressive Enhancement

Mobile First folgt dem Prinzip der progressiven Erweiterung: Du startest mit dem Minimum und fuegest Funktionen hinzu.

Typografie

/* Basis: Kompakte Schriftgroessen */
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
p { font-size: 1rem; }

/* Tablet: Etwas groesser */
@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
}

/* Desktop: Volle Groesse */
@media (min-width: 1024px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }
}

/* Noch besser: clamp() macht Media Queries ueberfluessig */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.375rem, 1rem + 1.5vw, 2rem); }

Abstaende

/* Basis: Kompakte Abstaende */
section {
    padding: 2rem 1rem;
}

/* Groessere Bildschirme: Mehr Luft */
@media (min-width: 768px) {
    section {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1024px) {
    section {
        padding: 5rem 3rem;
    }
}

/* Besser mit clamp(): */
section {
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem);
}

Ein vollstaendiges Mobile First Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile First Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <a href="/" class="logo">Logo</a>
            <nav>
                <ul class="nav-links">
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">Ueber</a></li>
                    <li><a href="/kontakt">Kontakt</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h1>Willkommen</h1>
                <p>Das ist eine Mobile-First-Webseite.</p>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <div class="grid">
                    <div class="feature-card">Feature 1</div>
                    <div class="feature-card">Feature 2</div>
                    <div class="feature-card">Feature 3</div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>

/* ===== MOBILE (Basis) ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

.container {
    width: 100%;
    padding: 0 1rem;
}

/* Header */
.header {
    background: #1a1a2e;
    padding: 1rem 0;
}

.header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.logo {
    color: #e44d26;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

/* Hero */
.hero {
    padding: 3rem 0;
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
}

/* Features Grid */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.feature-card {
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

/* ===== TABLET (768px+) ===== */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .header .container {
        flex-direction: row;
        justify-content: space-between;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .hero {
        padding: 5rem 0;
    }
}

Touch-freundliches Design

Auf Mobilgeraeten tippen Nutzer mit dem Finger — das erfordert angepasste Groessen:

/* Mindestgroesse fuer Touch-Targets: 44x44px */
button, a, input, select {
    min-height: 44px;
    min-width: 44px;
}

/* Genug Abstand zwischen klickbaren Elementen */
.nav-links li {
    margin: 0.5rem 0;
}

/* Groessere Formularfelder auf Mobile */
input, select, textarea {
    font-size: 16px; /* Verhindert Auto-Zoom auf iOS */
    padding: 0.75rem;
}

Uebungen

Uebung 1: Mobile First umsetzen

Nimm ein bestehendes Desktop-Layout und schreibe es als Mobile First um. Starte mit einem einspaltigen Layout und erweitere es mit min-width Media Queries.

Erstelle eine Navigation mit:

Mindestens 44px hohe Touch-Targets
Ausreichend Abstand zwischen den Links
Horizontale Darstellung auf Desktop

Uebung 3: Progressive Enhancement

Erstelle eine Seite, die auf Mobile nur die wichtigsten Inhalte zeigt. Auf Tablet und Desktop werden zusaetzliche Inhalte (Sidebar, erweiterte Beschreibungen) eingeblendet.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du alles ueber Responsive Bilder und Medien:

srcset und sizes fuer optimale Bildauslieferung
Das <picture>-Element
Responsive Videos und Iframes

Zusammenfassung

Mobile First bedeutet: Zuerst fuer kleine Bildschirme, dann erweitern
Verwende min-width Media Queries statt max-width
Progressive Enhancement: Starte einfach, fuege Komplexitaet hinzu
clamp() kann viele Media Queries ersetzen
Touch-Targets muessen mindestens 44x44px gross sein
font-size: 16px auf Inputs verhindert Auto-Zoom auf iOS

Pro-Tipp: Entwickle mit einem echten Smartphone neben dir! Chrome DevTools simulieren Mobilgeraete gut, aber nichts ersetzt das echte Erlebnis. Verbinde dein Handy ueber WLAN mit deinem lokalen Entwicklungsserver und teste in Echtzeit.