Day 21 of 28 · Vibe Coding Challenge
Mobile-First Design
⏱ 6 min
📊 Intermediate
Over 60% of web traffic comes from mobile devices. If your app doesn't look great on a phone, you're losing more than half your audience. Today you'll learn to build mobile-first — and it's easier than you think.
What is mobile-first?
Mobile-first means designing for the smallest screen first, then expanding for larger screens. It's the opposite of what most people do instinctively (building on a big monitor and hoping it works on phones).
Why mobile-first works better:
It forces simplicity. Small screens have no room for clutter. You focus on what matters most.
It's easier to expand than shrink. Adding features for bigger screens is easier than cramming a desktop layout onto a phone.
It matches reality. Most of your users will see the mobile version first.
Knowledge Check
What does "mobile-first" design mean?
A
Building a mobile app instead of a website
B
Using a mobile-specific framework
C
Designing for small screens first, then adapting the layout for larger screens
D
Making the site only work on phones
Mobile-first is a design approach, not a technology choice. You start by making things work beautifully on a phone screen. Then you use the extra space on tablets and desktops to enhance the layout — adding sidebars, wider grids, more columns.
Responsive design in vibe coding
The good news: most AI coding tools generate responsive code by default, especially when using frameworks like Tailwind CSS. But "responsive by default" isn't always "good on mobile."
Check my landing page on mobile. I designed it on desktop and haven't tested mobile at all. Fix any issues you find.
Checked your landing page at mobile viewport (375px). Found and fixed these issues:
🔴 **Navigation** — Desktop nav with 6 links was overflowing. Added a hamburger menu that slides out on mobile.
🔴 **Hero text** — Heading was 64px, way too large for mobile. Scaled to 36px on small screens.
🟡 **Feature grid** — 3-column grid was cramped. Changed to single column stacked layout on mobile.
🟡 **Images** — Product screenshots were fixed width. Made them responsive (max-width: 100%).
🟢 **Pricing cards** — Horizontal layout now stacks vertically on mobile.
🟢 **Footer** — 4-column layout now stacks into 2x2 grid on small screens.
All changes only apply below 768px — your desktop layout is unchanged.
↻ Replay conversation
Knowledge Check
What's the most common mobile issue with desktop-designed pages?
A
Colors look different on phones
B
Mobile browsers can't run JavaScript
C
Images don't load on mobile
D
Elements that work in a wide layout (multi-column grids, large text, wide navigation) don't fit on a narrow screen
Desktop layouts use horizontal space that phones don't have. Three columns become too narrow to read. Large headings overflow the screen. Navigation links don't fit in a row. All of these need to adapt — stacking vertically, shrinking text, or collapsing into menus.
Mobile-specific prompts
When building with AI, add mobile instructions to your prompts:
"Stack elements vertically on mobile" — Horizontal layouts (grids, multi-column) should stack into a single column.
"Add a mobile hamburger menu" — Replace horizontal navigation with a collapsible menu on small screens.
"Use responsive font sizes" — Headers that look great at 64px on desktop should scale down on mobile.
"Make touch targets large enough" — Buttons and links should be at least 44px tall on mobile. Tiny links are impossible to tap.
"Test at 375px wide" — iPhone SE width. If it works there, it works everywhere.
Build a dashboard with a sidebar, main content area with stats cards, and a data table. Make it fully responsive:
- On desktop: sidebar on the left, content on the right
- On tablet: sidebar collapses to icons only
- On mobile: sidebar becomes a bottom navigation bar, content is full width, data table scrolls horizontally
Responsive dashboard built ✓
🖥️ **Desktop (1024px+)**
- Full sidebar with icons + labels
- Content area with 4 stats cards in a row
- Full data table
📱 **Tablet (768px–1023px)**
- Collapsed sidebar (icons only, expands on hover)
- Stats cards in 2x2 grid
- Full data table
📲 **Mobile (< 768px)**
- Bottom navigation bar with 4 icons
- Stats cards stacked vertically
- Data table with horizontal scroll
Smooth transitions between all breakpoints.
↻ Replay conversation
One codebase, three layouts. Each optimized for its screen size.
Knowledge Check
Why should buttons on mobile be at least 44px tall?
A
Smaller buttons don't render on mobile screens
B
It's a legal requirement
C
Mobile browsers add padding automatically
D
Human fingers are much larger than mouse pointers — small buttons are frustrating to tap accurately
Apple's Human Interface Guidelines recommend 44x44pt minimum touch targets. Your finger covers about 40px on a screen — a 20px button means missed taps, accidental clicks, and frustrated users. Make things easy to tap.
Week 3 recap
This week leveled up your skills from "building things" to "building things well":
Day 15 — Debugging with AI — finding and fixing bugs systematically
Day 16 — Refactoring — improving code quality without changing behavior
Day 17 — Version control — Git as your safety net and time machine
Day 18 — Working with existing code — modifying and extending real projects
Day 19 — Testing — verifying your app works with AI-written tests
Day 20 — Performance — making your apps fast
Day 21 — Mobile design — ensuring your apps work on every screen size
You're no longer just building. You're building professionally. Week 4 is where it all comes together — real products, real payments, real users.
Final Check
What percentage of web traffic comes from mobile devices?
Over 60% of all web traffic is mobile. In some markets and demographics, it's over 80%. If your app doesn't work well on a phone, you're not reaching most of your potential users. Mobile-first isn't optional — it's essential.
📱
Day 21 Complete — Week 3 Done!
"Design for the smallest screen first. If it works on a phone, it works everywhere."
Tomorrow — Day 22
Building a SaaS Product
Week 4 — the final stretch. Tomorrow you start building a real SaaS product from the ground up. Everything you've learned comes together.