Mobile First: Responsive Websites richtig designen

Über 60% aller Website-Besuche kommen von mobilen Geräten. Zeit, Mobile First zu denken!

CSS Media Queries – Mobile First

/* Mobile Basis */
.container {
    padding: 1rem;
}

/* Tablet (ab 768px) */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        max-width: 720px;
    }
}

/* Desktop (ab 1024px) */
@media (min-width: 1024px) {
    .container {
        padding: 3rem;
        max-width: 960px;
    }
}

Touch-freundliche Elemente

/* Mindestgröße für Touch: 44x44px */
.button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
}

Flexible Grid

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

Fluid Typography

:root {
    --font-size-h1: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

h1 {
    font-size: var(--font-size-h1);
}

Mobile First ist kein Trend, sondern die Realität.