Day 21: Mobile Optimization

Today’s focus was on enhancing the mobile experience across the Shika Digital website. Mobile-first isn’t just about responsive design - it’s about creating an experience that feels native to the platform.

What Was Built

1. Self-Hosted Fonts for Performance

Problem: Google Fonts require external network requests that can delay time to first paint, especially on mobile networks.

Solution: Switched to self-hosted fonts via @fontsource/jost:

/* Self-hosted Jost font (Latin subset only for performance) */
@import '@fontsource/jost/latin-400.css';
@import '@fontsource/jost/latin-400-italic.css';
@import '@fontsource/jost/latin-600.css';
@import '@fontsource/jost/latin-700.css';
@import '@fontsource/jost/latin-900.css';

Benefits:

  • Eliminates render-blocking external requests
  • Reduces time to first paint
  • Total font bundle: ~50KB (woff2)
  • No FOUT (Flash of Unstyled Text) from external CDN delays

Updated Tests: Font loading tests now verify self-hosted fonts instead of Google Fonts links.

2. Safe Area Insets for Notched Devices

Implementation in global.css:

:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

Benefits:

  • Content properly avoids the notch on iPhone X and later
  • Bottom navigation doesn’t overlap with home indicator
  • Proper left/right margins in landscape mode
  • Graceful fallback (0px) for devices without notches

Viewport Update in BaseLayout.astro:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

The viewport-fit=cover enables the safe-area-inset CSS variables.

3. Touch Handling Improvements

Implementation in global.css:

/* Mobile touch improvements */
@media (pointer: coarse) {
  /* Ensure all interactive elements have proper touch handling */
  button, a, [role="button"], input, select, textarea {
    touch-action: manipulation;
  }
}

@supports (touch-action: manipulation) {
  button, [role="button"] {
    touch-action: manipulation;
  }
}

Benefits:

  • touch-action: manipulation disables double-tap-to-zoom on interactive elements
  • Removes 300ms click delay on mobile browsers
  • Faster, more responsive tap interactions
  • Uses @media (pointer: coarse) to target touch devices only

4. Responsive Layout Refinements

Updated Components:

ComponentChanges
Assessment.tsxIncreased padding for mobile, improved spacing between elements
ClosingCTA.astroAdded responsive padding that uses safe area insets
Footer.astroBottom padding accounts for safe area on notched devices
Header.astroTop padding accounts for notch/status bar area
Hero.astroSimplified responsive padding, consistent across breakpoints
MobileMenu.tsxFull-height menu respects safe areas, improved touch targets
how-we-work.astroIncreased min-height for better readability, refined padding

Hero Component Simplification: Removed unnecessary media queries by applying consistent padding and gap values across all screen sizes, improving maintainability.

5. Smooth Scrolling Enhancement

Implementation:

html {
  -webkit-overflow-scrolling: touch;
}

Benefits:

  • Enables momentum-based scrolling on iOS Safari
  • More natural, native-feeling scroll behavior
  • Reduces scroll jank on older devices

Testing

  • All font loading tests updated and passing
  • Manual testing on various device sizes
  • iPhone notch simulation verified
  • Touch responsiveness confirmed on mobile devices

Notes

  • Self-hosted fonts trade a small increase in initial bundle size (~50KB) for eliminating external requests - a worthwhile trade for mobile performance
  • The env() function for safe area insets has excellent browser support (iOS Safari 11+, Chrome 69+)
  • touch-action: manipulation is widely supported and safe to use without feature detection
  • Using CSS custom properties for safe areas allows easy reuse across components