Mobile First Design: Principles and Best Practices

Mobile First is not just a buzzword; it is a design philosophy. Start with the constraints of mobile, then enhance for desktop.

The Philosophy

Graceful Degradation: Build for Desktop, then hide stuff for mobile. (BAD)

Progressive Enhancement: Build for Mobile, then add features for desktop. (GOOD)

CSS Implementation

Use min-width media queries.

/* Base styles (Mobile) */
.container {
    width: 100%;
    padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

UX Considerations

• Touch Targets: Buttons must be at least 44x44px.
• Hover States: Don't rely on hover (mobile has no cursor).
• Content Priority: Mobile forces you to decide what is truly important.

Testing

Don't just resize your browser window. Use Chrome DevTools Device Mode, or better yet, a real phone.