Mobile-first design principles banner - Nandann Creative

Why Mobile‑First Still Matters

Most of the world experiences your brand on a pocket‑sized screen, in motion, with imperfect networks and brief attention. Mobile‑first is not a slogan; it is a constraint that forces clarity. When you design for the smallest screen first, you are compelled to choose: one primary action, one message, one path. That discipline eliminates bloat, simplifies decisions, and creates interfaces that convert on all devices—not just phones.

/* Mobile-first CSS approach */
.container {
  padding: 16px; /* Mobile-first padding */
  max-width: 100%;
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Start With Real Content

Wireframes without copy invite decoration. Mobile‑first begins with real words: the 8–12 word headline that earns a scroll, the two‑sentence value proposition, the three bullets that answer "why this, why now," and the label on the primary button. With content in hand, structure falls out: sections are short, modules are single‑purpose, and the primary action is obvious.

<!-- Content-first HTML structure -->
<section class="hero">
  <h1>Build Websites That Convert</h1>
  <p>Professional web development that drives real business results. Fast delivery, modern design, proven results.</p>
  <button class="cta-primary">Start Your Project</button>
</section>

<section class="benefits">
  <h2>Why Choose Us</h2>
  <ul>
    <li>7-day delivery guarantee</li>
    <li>Mobile-first responsive design</li>
    <li>SEO optimized from day one</li>
  </ul>
</section>

Information Architecture Under Constraint

Small screens surface organizational problems. We recommend a "one screen, one job" approach: each section should do one thing well—introduce, prove, explain, ask. If a section requires multiple taps to understand, it is probably two sections. Navigation should reflect this hierarchy: keep it shallow, predictable, and scannable. Avoid hamburger menus on landing pages; favor inline navigation or a short sticky header when appropriate.

<!-- Mobile navigation structure -->
<nav class="mobile-nav">
  <div class="nav-brand">Logo</div>
  <div class="nav-links">
    <a href="/services">Services</a>
    <a href="/portfolio">Portfolio</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

<!-- One screen, one job sections -->
<section class="intro">
  <h1>What We Do</h1>
  <p>We build fast, beautiful websites.</p>
</section>

<section class="proof">
  <h2>Our Results</h2>
  <div class="stats">...</div>
</section>

<section class="explain">
  <h2>How It Works</h2>
  <div class="process">...</div>
</section>

<section class="ask">
  <h2>Ready to Start?</h2>
  <button>Get Quote</button>
</section>

Typography That Breathes

Readable typography is the fastest performance win. Favor a single, well‑hinted variable font or a system stack; keep sizes legible (16–18px base), maintain comfortable line‑height (1.5–1.7), and use spacing to create rhythm. Resist the temptation to shrink text to fit content; edit content to fit text. Accessibility settings (text size, contrast) must never break layout—test them early.

/* Mobile-first typography system */
:root {
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --font-family: system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

p {
  margin-bottom: 1rem;
  max-width: 65ch; /* Optimal reading width */
}

Layout and Spacing Tokens

Establish tokens for space (4/8‑point scale), radii, and shadows. Tokens harmonize design and development and make refactors safe. In mobile‑first systems we prefer generous spacing between tap targets (8–12px minimum gutters), comfortable paddings (16–24px blocks), and radii that clearly separate interactive and static surfaces.

/* Design tokens for mobile-first spacing */
:root {
  /* Spacing scale (4/8-point system) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

.button {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin: var(--space-xs);
}

Buttons, Gestures, and Tap Targets

Touch interactions must be forgiving: 44×44px minimum target, 8–12px separation, and large, descriptive labels. Avoid relying solely on gestures that are not discoverable (e.g., hidden swipes); always provide a visible control. The primary action should be the largest, most visually prominent element on screen, and secondary actions should be styled as links or ghost buttons to reduce competition.

/* Mobile-friendly button system */
.button {
  min-height: 44px; /* Minimum touch target */
  min-width: 44px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 16px; /* Prevent zoom on iOS */
  cursor: pointer;
  transition: all 0.2s ease;
}

.button-primary {
  background: #007bff;
  color: white;
  border: none;
  font-weight: 600;
}

.button-secondary {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
}

.button-ghost {
  background: transparent;
  color: #666;
  border: none;
  text-decoration: underline;
}

/* Ensure adequate spacing between interactive elements */
.button + .button {
  margin-left: var(--space-sm);
}

Imagery and Media

On mobile, imagery either clarifies or clutters. Use media to communicate concrete value: product in context, before/after states, social proof. Technically, load only what is needed: responsive sources, AVIF/WEBP, and lazy‑load below‑the‑fold. Avoid background images for critical hero content so the browser can prioritize decoding and layout. Always provide concise alt text; it improves both accessibility and SEO.

<!-- Responsive images with proper optimization -->
<picture>
  <source 
    srcset="/images/hero-mobile.webp" 
    media="(max-width: 767px)"
    type="image/webp">
  <source 
    srcset="/images/hero-desktop.webp" 
    media="(min-width: 768px)"
    type="image/webp">
  <img 
    src="/images/hero-fallback.jpg" 
    alt="Professional web development services - Nandann Creative"
    loading="eager"
    width="800"
    height="400">
</picture>

<!-- Lazy-loaded images below the fold -->
<img 
  src="/images/feature-1.webp" 
  alt="Fast website delivery in 7 days"
  loading="lazy"
  width="400"
  height="300">

<!-- Social proof images -->
<img 
  src="/images/client-logo.webp" 
  alt="Trusted by leading businesses"
  loading="lazy"
  width="200"
  height="100">

Forms That Don't Fight the Thumb

Short forms convert. Group related fields, enable autofill, and choose the right virtual keyboard (email, phone, number). Validate inline with plain language and preserve user input when errors occur. For multi‑step flows, show progress and allow back navigation without losing state. Captchas should be invisible or very gentle; challenging captchas on mobile kill conversions.

<!-- Mobile-optimized form -->
<form class="contact-form">
  <div class="form-group">
    <label for="name">Full Name</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      autocomplete="name"
      required
      aria-describedby="name-error">
    <div id="name-error" class="error-message" role="alert"></div>
  </div>
  
  <div class="form-group">
    <label for="email">Email Address</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      autocomplete="email"
      required
      aria-describedby="email-error">
    <div id="email-error" class="error-message" role="alert"></div>
  </div>
  
  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input 
      type="tel" 
      id="phone" 
      name="phone" 
      autocomplete="tel"
      aria-describedby="phone-error">
    <div id="phone-error" class="error-message" role="alert"></div>
  </div>
  
  <button type="submit" class="button-primary">
    Get Free Quote
  </button>
</form>

/* Mobile form styling */
.form-group {
  margin-bottom: var(--space-md);
}

label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

input {
  width: 100%;
  padding: var(--space-sm);
  border: 2px solid #ddd;
  border-radius: var(--radius-sm);
  font-size: 16px; /* Prevent zoom on iOS */
  min-height: 44px;
}

input:focus {
  border-color: #007bff;
  outline: none;
}

.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: var(--space-xs);
}

Performance as a Design Constraint

Performance is part of design. Define budgets early: total JS under a threshold, hero LCP under 2.0s on a midrange device, total image weight below a set ceiling. Mobile‑first choices naturally help: fewer fonts, smaller images, simpler animations, and less JavaScript. If a visual flourish requires heavy code or blocks rendering, reserve it for desktop or remove it.

// Performance budgets and monitoring
const PERFORMANCE_BUDGETS = {
  lcp: 2000, // 2 seconds
  cls: 0.1,  // Cumulative Layout Shift
  inp: 200,  // Interaction to Next Paint
  jsSize: 100000, // 100KB JavaScript
  imageWeight: 500000 // 500KB total images
};

// Monitor Core Web Vitals
function monitorWebVitals() {
  if ('web-vital' in window) {
    getCLS(console.log);
    getFID(console.log);
    getLCP(console.log);
  }
}

// Lazy load non-critical resources
function loadNonCriticalResources() {
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          loadResource(entry.target);
          observer.unobserve(entry.target);
        }
      });
    });
    
    document.querySelectorAll('[data-lazy]').forEach(el => {
      observer.observe(el);
    });
  }
}

Motion, Feedback, and Meaning

Use motion to clarify—not to decorate. Short, natural easing communicates cause and effect: buttons press, panes glide, inputs confirm. Respect the user's reduced‑motion preference. On mobile, micro‑interactions should be brief and purposeful; nothing should slow the path to the primary action.

/* Respectful motion design */
@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: transform 0.1s ease, background-color 0.2s ease;
  }
  
  .button:active {
    transform: scale(0.98);
  }
  
  .card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

/* Disable motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Micro-interactions */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

Accessibility From the Start

Mobile environments amplify accessibility needs. Ensure sufficient color contrast, visible focus styles, and logical DOM order. All interactive controls must be reachable by keyboard and assistive tech. Labels should be programmatic, not just visual. Test with screen readers and device accessibility settings, not just automated tools.

/* Accessibility-first styling */
:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .button-primary {
    background: #000;
    color: #fff;
    border: 2px solid #000;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #333333;
  }
  
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  
  input {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
  }
}

<!-- Accessible HTML structure -->
<main>
  <h1>Page Title</h1>
  
  <section aria-labelledby="services-heading">
    <h2 id="services-heading">Our Services</h2>
    <div role="list" aria-label="Service offerings">
      <div role="listitem">
        <h3>Web Development</h3>
        <p>Custom websites built for performance.</p>
      </div>
    </div>
  </section>
  
  <form aria-label="Contact form">
    <fieldset>
      <legend>Contact Information</legend>
      <label for="contact-name">Name (required)</label>
      <input 
        id="contact-name" 
        type="text" 
        required 
        aria-describedby="name-help">
      <div id="name-help">Enter your full name</div>
    </fieldset>
  </form>
</main>

Progressive Enhancement Over Polyfills

Design the minimal usable experience first; enhance when capabilities exist. For example: render content and forms server‑side, then add client‑side hydration for richer interactions. Fail gracefully when features are unavailable. This approach improves reliability on flaky networks and aging devices without special‑casing them in code.

// Progressive enhancement approach
function enhanceForm() {
  const form = document.querySelector('.contact-form');
  if (!form) return;
  
  // Basic form works without JavaScript
  // Enhance with client-side validation
  form.addEventListener('submit', handleSubmit);
  
  // Add real-time validation if supported
  if ('input' in document.createElement('input')) {
    addRealTimeValidation(form);
  }
}

function handleSubmit(event) {
  event.preventDefault();
  
  // Show loading state
  const button = event.target.querySelector('button[type="submit"]');
  const originalText = button.textContent;
  button.textContent = 'Sending...';
  button.disabled = true;
  
  // Submit form data
  fetch('/api/contact', {
    method: 'POST',
    body: new FormData(event.target)
  })
  .then(response => response.json())
  .then(data => {
    showSuccessMessage();
  })
  .catch(error => {
    showErrorMessage();
  })
  .finally(() => {
    button.textContent = originalText;
    button.disabled = false;
  });
}

// Graceful degradation
if ('fetch' in window) {
  enhanceForm();
} else {
  // Fallback for older browsers
  console.log('Form will submit normally');
}

SEO and Content Strategy

Google's mobile‑first indexing means your phone experience is your SEO. Use clear headings, concise copy, and FAQ sections where they genuinely help. Include alt text, structured data, canonical links, and Open Graph images so shares look great. Internal links should be descriptive and finger‑friendly—no tiny tap targets buried in body copy.

<!-- SEO-optimized HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-First Web Development | Nandann Creative</title>
  <meta name="description" content="Professional mobile-first web development services. Fast, responsive websites that convert on every device.">
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.nandann.com/services">
  
  <!-- Open Graph -->
  <meta property="og:title" content="Mobile-First Web Development | Nandann Creative">
  <meta property="og:description" content="Professional mobile-first web development services.">
  <meta property="og:image" content="https://www.nandann.com/images/services-og.jpg">
  <meta property="og:url" content="https://www.nandann.com/services">
  
  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Nandann Creative",
    "description": "Mobile-first web development agency",
    "url": "https://www.nandann.com",
    "telephone": "+1-XXX-XXX-XXXX",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "US"
    }
  }
  </script>
</head>
<body>
  <main>
    <h1>Mobile-First Web Development</h1>
    
    <section>
      <h2>Why Mobile-First Matters</h2>
      <p>Most users browse on mobile devices...</p>
    </section>
    
    <section>
      <h2>Our Process</h2>
      <ol>
        <li>Mobile-first design</li>
        <li>Performance optimization</li>
        <li>SEO implementation</li>
      </ol>
    </section>
    
    <!-- FAQ Section for SEO -->
    <section>
      <h2>Frequently Asked Questions</h2>
      <div itemscope itemtype="https://schema.org/FAQPage">
        <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
          <h3 itemprop="name">How long does development take?</h3>
          <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <div itemprop="text">Most projects are completed within 7 days.</div>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Design System Hand‑Off

Mobile‑first shines when paired with a design system. Provide tokens, components, and usage guidance, not just mockups. Developers should be able to assemble pages using standard parts with predictable behavior on small screens. Document component dos and don'ts (e.g., when a card becomes a list) and performance notes (e.g., image sizes, lazy‑loading rules).

/* Design system component documentation */
/* Card Component - Mobile-first responsive behavior */
.card {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Mobile: Stack vertically */
@media (max-width: 767px) {
  .card-grid {
    display: block;
  }
  
  .card {
    width: 100%;
    margin-bottom: var(--space-md);
  }
}

/* Tablet+: Grid layout */
@media (min-width: 768px) {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
  }
}

/* Performance notes for images */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  /* Lazy load below fold */
  loading: lazy;
}

/* Component states */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

// Design system component usage examples
// Card component with proper mobile behavior
function Card({ title, description, image, href }) {
  return (
    <div className="card">
      {image && (
        <img 
          src={image.src} 
          alt={image.alt}
          className="card-image"
          loading="lazy"
          width="300"
          height="200"
        />
      )}
      <h3>{title}</h3>
      <p>{description}</p>
      {href && (
        <a href={href} className="button-primary">
          Learn More
        </a>
      )}
    </div>
  );
}

// Usage in different contexts
function ServiceCards() {
  return (
    <div className="card-grid">
      <Card 
        title="Web Development"
        description="Custom websites built for performance"
        image={{ src: "/images/web-dev.webp", alt: "Web development services" }}
        href="/services/web-development"
      />
      <Card 
        title="SEO Optimization"
        description="Improve your search rankings"
        image={{ src: "/images/seo.webp", alt: "SEO optimization services" }}
        href="/services/seo"
      />
    </div>
  );
}

Testing That Mirrors Reality

Validate on midrange hardware and real networks. Emulate throttled 4G/3G conditions, large text settings, and dark mode. Check Web Vitals (LCP/CLS/INP) and collect real‑user data after launch. A quick "bus test" works wonders: can someone complete the main task one‑handed while walking to a meeting?

// Real-world testing utilities
// Performance monitoring for mobile devices
function monitorMobilePerformance() {
  // Check if we're on a mobile device
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  
  if (isMobile && 'performance' in window) {
    // Monitor Core Web Vitals
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.entryType === 'largest-contentful-paint') {
          console.log('LCP:', entry.startTime);
          // Alert if LCP > 2.5s on mobile
          if (entry.startTime > 2500) {
            console.warn('Poor LCP on mobile:', entry.startTime);
          }
        }
        
        if (entry.entryType === 'layout-shift') {
          console.log('CLS:', entry.value);
          // Alert if CLS > 0.1
          if (entry.value > 0.1) {
            console.warn('Poor CLS:', entry.value);
          }
        }
      });
    });
    
    observer.observe({ entryTypes: ['largest-contentful-paint', 'layout-shift'] });
  }
}

// Network-aware loading
function loadWithNetworkAwareness() {
  if ('connection' in navigator) {
    const connection = navigator.connection;
    
    // Adjust loading strategy based on connection
    if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
      // Load only critical resources
      loadCriticalResources();
    } else if (connection.effectiveType === '3g') {
      // Load critical + important resources
      loadCriticalResources();
      loadImportantResources();
    } else {
      // Load everything
      loadAllResources();
    }
  }
}

// One-handed usability test
function testOneHandedUsability() {
  // Check if primary CTA is reachable with thumb
  const primaryCTA = document.querySelector('.button-primary');
  if (primaryCTA) {
    const rect = primaryCTA.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    
    // CTA should be in bottom 1/3 of screen for thumb reach
    const isThumbReachable = rect.top > (viewportHeight * 0.66);
    
    if (!isThumbReachable) {
      console.warn('Primary CTA may not be thumb-reachable on mobile');
    }
  }
}

/* Testing styles for different scenarios */
/* Large text testing */
@media (prefers-reduced-motion: no-preference) {
  .test-large-text {
    font-size: 24px; /* Test with large text */
    line-height: 1.5;
  }
}

/* Dark mode testing */
@media (prefers-color-scheme: dark) {
  .test-dark-mode {
    background-color: #1a1a1a;
    color: #ffffff;
  }
  
  .test-dark-mode .button-primary {
    background-color: #0066cc;
    color: #ffffff;
  }
}

/* High contrast testing */
@media (prefers-contrast: high) {
  .test-high-contrast {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
  }
}

/* Reduced motion testing */
@media (prefers-reduced-motion: reduce) {
  .test-no-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Pitfalls

Desktop‑first components squeezed into a narrow column.
Walls of copy with no hierarchy or breathing room.
Primary actions competing with secondary buttons of equal weight.
Huge hero images that push the value proposition below the fold.
Animations that stall rendering or ignore reduced‑motion preferences.

/* Common Pitfall Examples - What NOT to do */

/* ❌ Desktop-first component squeezed into mobile */
.desktop-card {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .desktop-card {
    width: 100%; /* This creates cramped layout */
    height: auto;
  }
}

/* ✅ Mobile-first component that scales up */
.mobile-first-card {
  width: 100%;
  padding: var(--space-md);
  display: block;
}

@media (min-width: 768px) {
  .mobile-first-card {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: row;
  }
}

/* ❌ Wall of text with no hierarchy */
.bad-text-wall {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* ✅ Proper text hierarchy */
.good-text-hierarchy h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.good-text-hierarchy h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.good-text-hierarchy p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 65ch;
}

/* ❌ Competing buttons of equal weight */
.bad-buttons .button-primary,
.bad-buttons .button-secondary {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  font-weight: 600;
}

/* ✅ Clear primary/secondary hierarchy */
.good-buttons .button-primary {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
}

.good-buttons .button-secondary {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  padding: 10px 22px;
  font-weight: 500;
  font-size: 14px;
}

/* ❌ Huge hero image */
.bad-hero {
  height: 100vh;
  background-image: url('huge-image.jpg');
  background-size: cover;
}

.bad-hero .hero-content {
  position: absolute;
  bottom: 20px; /* Content pushed way down */
}

/* ✅ Reasonable hero with content above fold */
.good-hero {
  min-height: 60vh;
  background-image: url('optimized-image.webp');
  background-size: cover;
  display: flex;
  align-items: center;
}

.good-hero .hero-content {
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
}

/* ❌ Animations that ignore preferences */
.bad-animation {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ✅ Respectful animations */
.good-animation {
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .good-animation:hover {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .good-animation {
    transition: none;
  }
}

Launch Checklist

One clear primary action above the fold; supporting content below.
Readable type (16–18px base, 1.5–1.7 line‑height); tokens in place.
Tap targets ≥ 44×44px; spacing ≥ 8–12px between controls.
Images responsive (AVIF/WEBP) and lazy‑loaded below the fold.
Vital budgets met on a midrange device (LCP ≤ 2.0s, CLS < 0.1, INP < 200ms).
Structured data, canonical, and OG/Twitter images verified.
Accessibility checks passed (contrast, labels, focus, screen reader).

// Launch checklist validation script
function validateMobileFirstLaunch() {
  const checklist = {
    primaryActionAboveFold: false,
    readableTypography: false,
    adequateTapTargets: false,
    optimizedImages: false,
    performanceBudgets: false,
    seoElements: false,
    accessibilityCompliant: false
  };
  
  // 1. Check primary action above fold
  const primaryCTA = document.querySelector('.button-primary');
  if (primaryCTA) {
    const rect = primaryCTA.getBoundingClientRect();
    const viewportHeight = window.innerHeight;
    checklist.primaryActionAboveFold = rect.top < (viewportHeight * 0.8);
  }
  
  // 2. Check readable typography
  const bodyText = document.querySelector('body');
  if (bodyText) {
    const computedStyle = window.getComputedStyle(bodyText);
    const fontSize = parseFloat(computedStyle.fontSize);
    const lineHeight = parseFloat(computedStyle.lineHeight);
    checklist.readableTypography = fontSize >= 16 && lineHeight >= 1.5;
  }
  
  // 3. Check tap targets
  const interactiveElements = document.querySelectorAll('button, a, input, select, textarea');
  let adequateTargets = true;
  interactiveElements.forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.width < 44 || rect.height < 44) {
      adequateTargets = false;
    }
  });
  checklist.adequateTapTargets = adequateTargets;
  
  // 4. Check optimized images
  const images = document.querySelectorAll('img');
  let optimizedImages = true;
  images.forEach(img => {
    if (!img.src.includes('.webp') && !img.src.includes('.avif')) {
      optimizedImages = false;
    }
    if (!img.hasAttribute('loading') || img.getAttribute('loading') !== 'lazy') {
      optimizedImages = false;
    }
  });
  checklist.optimizedImages = optimizedImages;
  
  // 5. Check performance budgets
  if ('performance' in window) {
    const navigation = performance.getEntriesByType('navigation')[0];
    if (navigation) {
      const loadTime = navigation.loadEventEnd - navigation.loadEventStart;
      checklist.performanceBudgets = loadTime < 2000; // 2 seconds
    }
  }
  
  // 6. Check SEO elements
  const hasCanonical = document.querySelector('link[rel="canonical"]');
  const hasOGImage = document.querySelector('meta[property="og:image"]');
  const hasStructuredData = document.querySelector('script[type="application/ld+json"]');
  checklist.seoElements = !!(hasCanonical && hasOGImage && hasStructuredData);
  
  // 7. Check accessibility
  const hasAltText = Array.from(document.querySelectorAll('img')).every(img => img.alt);
  const hasLabels = Array.from(document.querySelectorAll('input')).every(input => 
    input.hasAttribute('aria-label') || 
    document.querySelector('label[for="' + input.id + '"]')
  );
  checklist.accessibilityCompliant = hasAltText && hasLabels;
  
  // Report results
  console.log('Mobile-First Launch Checklist:', checklist);
  
  const passedChecks = Object.values(checklist).filter(Boolean).length;
  const totalChecks = Object.keys(checklist).length;
  
  if (passedChecks === totalChecks) {
    console.log('✅ All checks passed! Ready for launch.');
  } else {
    console.log('⚠️ ' + (totalChecks - passedChecks) + ' checks failed. Review before launch.');
  }
  
  return checklist;
}

// Run validation on page load
document.addEventListener('DOMContentLoaded', validateMobileFirstLaunch);

Mobile‑first is not a trend. It is a practical method for building focused, fast experiences that convert. Start small, validate often, and let success on the smallest screen shape everything else.

See how this flows into our Services and Same‑Day Delivery.

Mobile‑First Design Principles That Convert