Why mobile-first isn't optional anymore
Sixty-three percent of web traffic now comes from mobile devices. That's not a trend—it's the baseline. Desktop layouts have become the exception you gracefully scale up to, not the foundation you reluctantly squeeze down.
Mobile-first means designing for the smallest, slowest, most constrained context first. Then progressively enhancing for larger screens and faster connections. It forces you to prioritize ruthlessly because a 375px-wide viewport has no room for committee compromises or nice-to-have features that clutter the interface.
Marcus outputs mobile-first markup by default because every site generated starts with the constraints that matter: thumb-friendly targets, readable text without zooming, and a performance budget that respects 3G connections. You get responsive behavior without thinking about it, but understanding the rules helps you customize intelligently.
Tap targets: the 44-pixel rule
Human thumbs are imprecise instruments. Apple's Human Interface Guidelines specify 44×44 points as the minimum tap target. Google's Material Design says 48×48 density-independent pixels. Pick either standard—both work. Go smaller and your error rate skyrockets.
The math matters: a 32-pixel button on a high-DPI phone might look fine visually but feels cramped when you're holding the device one-handed on a moving bus. Padding counts toward the target size, so a 16-pixel icon inside a button with 14 pixels of padding on all sides gives you 44 pixels total.
Navigation links need the same treatment. A row of text links with 8 pixels between them forces precision tapping. Space them 12 pixels apart minimum, or stack them vertically with full-width tap areas. Marcus navigation components ship with 48-pixel minimum touch targets and sufficient spacing by default.
Edge cases that catch everyone
Form inputs are tap targets too. That means visible labels, not just placeholder text that disappears. And checkboxes need enlarged hit areas—the actual box can stay 20 pixels for visual consistency as long as the clickable <label> wrapping it meets the 44-pixel threshold.
Typography: 16 pixels or face the zoom
Set your body text smaller than 16 pixels and mobile browsers will auto-zoom when users tap an input field. That's not a suggestion—it's iOS Safari behavior you cannot override. Android Chrome does the same at 16 pixels or below.
The auto-zoom exists because 14-pixel text is legitimately hard to read on a phone screen without glasses. Designers who learned on desktop often instinctively reach for 14px because it looks balanced on a 27-inch monitor. On a 5.8-inch phone it looks like fine print on a medicine bottle.
Use 16 pixels for body copy. Use 18 or 20 for longer-form content. Scale headings proportionally—your <h1> should be 28 to 32 pixels on mobile, not the 48-pixel desktop size. Line-height should sit between 1.4 and 1.6 for comfortable reading without lines visually merging.
Marcus uses 16-pixel base sizing across all generated sites. Headings scale with clamp() functions so they grow smoothly from mobile to desktop without breakpoint jumps. You get readable text at every viewport width without manual tuning.
The viewport meta tag you need
Every mobile-optimized page needs this exact tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it, mobile browsers assume your site is a desktop layout and render it at 980 pixels wide, then shrink the whole thing down to fit the screen. Text becomes unreadable. Tap targets become microscopic. Users pinch-zoom constantly just to navigate.
The width=device-width part tells the browser to match the screen's actual width in CSS pixels. The initial-scale=1 part prevents default zooming. Together they let your responsive CSS do its job.
Do not add maximum-scale=1 or user-scalable=no. Those tags prevent accessibility zooming and violate WCAG guidelines. Users with low vision need to be able to zoom. Your job is to make the default view readable enough they rarely need to.
When the viewport tag isn't enough
Fixed-width elements break mobile layouts even with correct viewport settings. A 1200-pixel-wide image or a table with 15 columns will force horizontal scrolling. Use max-width: 100% on images and overflow-x: auto on tables so they scroll internally without breaking the page.
Performance budgets: the three-second rule
Your site needs to show meaningful content within three seconds on a middling 4G connection. Not finish loading—show content. The psychological threshold for "this site feels fast" sits right there. Go slower and bounce rates climb measurably.
A performance budget gives you concrete numbers to design against. A reasonable starting budget for a mobile page: 200KB of HTML/CSS/JS transferred, 400KB of images. Total page weight under 600KB compressed. Time to Interactive under three seconds on a throttled connection.
Images are usually the bottleneck. Serve responsive images with srcset so phones download 640-pixel-wide versions instead of 2400-pixel desktop sizes. Use modern formats—WebP or AVIF—that compress better than JPEG. Lazy-load anything below the fold.
JavaScript is the second offender. Every framework kilobyte adds parse time on mobile CPUs that are slower than your laptop. Marcus generates lean markup with minimal client-side JavaScript because most interactions—navigation, forms, progressive disclosure—work fine with HTML and CSS.
Testing your budget
Chrome DevTools has a Lighthouse panel that audits performance against mobile baselines. Run it. Fix anything flagged red. Aim for scores above 90 in Performance and Accessibility. Those scores correlate with real user metrics better than any synthetic benchmark.
Focus states and keyboard navigation
Mobile users navigate with touch, but plenty of people use Bluetooth keyboards with tablets or enable switch control for accessibility. Your interface needs visible focus states on every interactive element.
The browser default focus ring is ugly but functional. You can style it, but never set outline: none without replacing it with a custom focus style. Use a 2-pixel colored border or a subtle background change—something with 3:1 contrast against the default state.
Test tab order. Press Tab repeatedly and watch where focus goes. It should move logically through navigation, then main content, then footer. If focus jumps erratically or skips important buttons, your DOM order is wrong. Fixing it helps screen reader users as much as keyboard navigators.
Marcus components ship with accessible focus states that meet WCAG 2.1 AA standards. The visual styling is subtle enough not to clash with your design but prominent enough to provide clear wayfinding when tabbing through the interface.
What to test on real devices
Browser DevTools device emulation is useful but doesn't catch everything. Real phones have different pixel densities, touch behaviors, and browser quirks. Test on actual hardware before calling the design done.
Six things to test on a physical phone:
- Tap accuracy on all interactive elements, especially when moving or scrolling
- Text readability without zooming, in both bright sunlight and dim rooms
- Scroll performance through long pages—any jank or lag means you have too much DOM weight
- Form inputs to verify the keyboard doesn't obscure fields and autocomplete works
- Landscape orientation behavior, especially for videos or interactive components
- Network throttling using your phone's developer settings or carrier switching to 3G
You don't need twenty devices. One mid-range Android phone and one iPhone from the past two years cover 80% of real-world usage. Borrow them if you don't own them. An hour of device testing catches more issues than a week of emulator checking.
The notch and safe areas
Modern phones have notches, camera cutouts, and rounded corners that intrude into layout space. Use env(safe-area-inset-top) and related CSS variables to pad content away from these zones. Test especially with full-screen navigation or fixed headers that might render partially behind the status bar.
How Marcus handles mobile by default
Every Marcus site starts mobile-first. The AI generates semantic HTML that works without JavaScript, then progressively enhances. Tap targets meet the 48-pixel threshold. Body text defaults to 16 pixels with comfortable line-height. The viewport meta tag is correct.
Responsive behavior uses fluid typography with clamp() and container queries where appropriate, so components adapt intelligently without brittle breakpoints. Images get automatic srcset attributes. Forms have proper <label> associations and focus states.
You pay €29 per project per month on the Builder plan. That includes unlimited edits, version history, and hosting on infrastructure optimized for mobile performance. No separate mobile site, no separate AMP version, no responsive retrofitting—just one codebase that works everywhere.
The Studio plan at €290 per month adds collaborative editing, custom domain management, and white-label options for agencies shipping client work. Same mobile-first foundations, more control over branding and deployment.
Common mobile-first mistakes to avoid
Even experienced designers trip over these patterns when adapting desktop habits to mobile constraints.
Hamburger menus that hide critical navigation. If your top three pages are buried in a collapsed menu, users won't find them. Put primary navigation in a visible tab bar or expose the most important links directly.
Modal dialogs that can't be dismissed. A close button in the top-right corner is hard to tap one-handed. Add a full-width "Dismiss" button at the bottom or let users tap outside the modal to close it.
Hover-dependent interactions. Dropdowns that open on hover don't work on touch devices. Use click or tap to toggle state. If you need hover behavior on desktop, add it as progressive enhancement with a @media (hover: hover) query.
Text over images without fallbacks. That hero image with white text looks great until it doesn't load or takes 10 seconds on a slow connection. Use a solid background color or gradient as a fallback, or overlay the image with a semi-transparent color layer to guarantee contrast.
Ignoring thumb zones. The bottom third of a phone screen is easiest to reach one-handed. The top corners are hard. Put your primary actions where thumbs naturally rest. Reserve the top for context and secondary information.
Marcus doesn't automatically fix design judgment calls—you still decide navigation structure and content hierarchy—but it prevents the technical mistakes. Generated markup avoids hover-only interactions, includes proper fallbacks, and places interactive elements in thumb-friendly zones when you use standard component patterns.