Learning CSS - Mobile-First Design and Device Adaptation
This episode covers mobile-first design and device adaptation: the principle of designing for small screens first, the role of the viewport meta tag, ergonomic touch target sizes, and handling safe areas on devices with notches.
#Introduction
Episode 9 introduced media queries, and episode 12 deepens the philosophy behind them: mobile-first. Instead of shrinking a desktop design down to small screens, you start from the phone and then enrich the display for larger screens. Small screens force priorities. Only the most important content and interactions fit, so mobile-first produces focused designs. Surprisingly, this approach actually makes code simpler because the base rules are written without media queries. Why does it matter? Phones are no longer the future — they're the primary device. Designing mobile-first ensures the majority of users get the best experience, not a cut-down version of a desktop design.
#Mobile-First Principles
Mobile-first means the base CSS structure represents the phone experience, and min-width media queries add progressive enhancement:
.konten {
padding: 16px;
font-size: 1rem;
}
@media (min-width: 768px) {
.konten {
padding: 32px;
font-size: 1.125rem;
}
}Main content, comfortable-to-read text, and important navigation are placed without media queries. Roomier sizes and decorative details only appear at larger breakpoints.
#The Viewport Meta Tag
Without the viewport meta, phones render the desktop page with automatic zoom — the mobile-first enemy number one:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<title>Halaman Mobile-First</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="topbar">DevNull</header>
<main>
<p>Konten utama yang dimulai dari pengalaman ponsel.</p>
</main>
</body>
</html>width=device-width sets the viewport width to follow the device screen, and initial-scale=1 ensures there's no initial zoom. Don't disable zoom — accessibility requires the ability to magnify.
#Ergonomic Touch Targets
Fingers are bigger than cursors. Accessibility guidelines recommend a minimum touch target of 44x44 pixels:
.nav-item { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 12px; border-radius: 8px; }
.tombol-aksi { min-height: 48px; font-size: 1rem; }
.ikona { width: 24px; height: 24px; }Spacing between targets also matters — leave margin or gap so fingers don't press the wrong button. Small icons inside buttons can stay compact as long as the touch area is big enough.
#Safe Areas on Modern Devices
Phones with notches and curved screens cover part of the screen edges. Modern CSS provides env for safe areas:
.topbar {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fab {
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav {
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}env(safe-area-inset-top) and env(safe-area-inset-bottom) return the safe distances reported by the device. The fallback value in the second argument keeps normal behavior on devices without a notch. Combine with calc() or max() so content doesn't sink behind system indicators.
#Testing on Real Devices
DevTools isn't the only testing tool. There are several layers to check:
npx serve . -l 3000Run the server, then open the page from a phone via the local IP on the same network. After that, open DevTools, select responsive mode, and drag from 320px to 1280px while watching the text, touch targets, and images.
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
.surface {
background-color: #0f172a;
color: white;
}
}Also test light and dark modes and portrait and landscape orientations. The prefers-color-scheme media query makes the theme follow system settings — part of the device adaptation users increasingly expect.
#Exercise: A Mobile-First Page
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); background-color: #0f172a; color: white; }
.list { display: grid; gap: 12px; padding: 16px; list-style: none; margin: 0; }
.item { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; background-color: #2563eb; color: white; }
@media (min-width: 600px) { .list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .list { grid-template-columns: repeat(4, 1fr); } }<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile First</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="topbar">
<span>DevNull</span>
</header>
<ul class="list">
<li class="item">Satu</li>
<li class="item">Dua</li>
<li class="item">Tiga</li>
<li class="item">Empat</li>
</ul>
</body>
</html>Run npx serve . and open the page in responsive mode. Notice how the base rules are already comfortable on the phone, and then columns grow as the viewport widens without changing the HTML.
#Common Mistakes and Solutions
#Automatic Zoom on Inputs
If an input triggers zoom when focused, check that the input font size is at least 16px. Mobile browsers zoom in when the font is below 16px to preserve readability.
#Ignoring Safe Areas
Buttons and menus pinned to the bottom edge can be covered by the iPhone home indicator. Use env(safe-area-inset-bottom) on elements that touch the edge.
#Touch Targets Too Small
Small buttons that are comfortable to click with a mouse are hard to tap with a finger. Make sure interactive areas are at least 44x44 pixels with spacing between elements.
#Closing
Key takeaways:
- Mobile-first writes the base styles for phones, then enriches with
min-width. - The viewport meta is a prerequisite for responsiveness on mobile devices.
- Touch targets are at least 44x44 pixels with adequate spacing.
env(safe-area-inset-*)keeps content clear of notches and system indicators.- Test on real devices, not just DevTools.
- Respect
prefers-color-schemefor an experience consistent with the system. In the next episode, episode 13, we'll cover pseudo-classes and pseudo-elements — styles for interaction states and the decorative::beforeand::afterelements.