Responsive Craft
Content-First Breakpoints
Don't design for iPhone 14 Pro and MacBook Pro. Design for the content.
Process
- Start with the narrowest viewport (320px)
- Slowly widen the browser
- When the layout starts looking bad, THAT is your breakpoint
- Name breakpoints by behavior, not device:
--layout-single, --layout-sidebar, --layout-full
Fluid Typography
clamp() Formula
/* Minimum size, preferred size (viewport-relative), maximum size */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
/* Practical scale */
--text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
--text-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
Fluid Spacing
Same principle applies to spacing:
--space-section: clamp(3rem, 2rem + 5vw, 8rem);
--space-container: clamp(1rem, 0.5rem + 3vw, 4rem);
Beyond Stack-on-Mobile
Navigation
- Desktop: horizontal nav bar
- Tablet: priority+ pattern (most important items visible, rest in overflow)
- Mobile: bottom tab bar for primary actions, hamburger for secondary
Tables
- Desktop: full table
- Tablet: horizontal scroll with fixed first column
- Mobile: card-based layout with key-value pairs
Forms
- Desktop: multi-column where logical
- Mobile: always single column, larger touch targets, sticky submit button
Images
- Art direction: different crops for different viewports (not just scale)
- Use
<picture> with srcset for art direction
- Lazy load below-fold images
Touch Considerations
- Minimum touch target: 44x44px (Apple) / 48x48px (Material)
- Spacing between targets: minimum 8px
- Thumb zone: primary actions in bottom 60% of screen on mobile
- Swipe gestures: provide button alternatives (not everyone discovers gestures)
Performance as Design
- Mobile users are often on slower connections
- Critical CSS inline, rest deferred
- Images: WebP/AVIF with fallbacks
- Skeleton screens instead of loading spinners
- Perceived performance matters more than actual performance
1---2name: responsive-craft3description: Content-driven breakpoints, fluid typography, responsive patterns beyond just "stack on mobile," and designing for real device diversity.4---56# Responsive Craft78## Content-First Breakpoints910Don't design for iPhone 14 Pro and MacBook Pro. Design for the content.1112### Process131. Start with the narrowest viewport (320px)142. Slowly widen the browser153. When the layout starts looking bad, THAT is your breakpoint164. Name breakpoints by behavior, not device: `--layout-single`, `--layout-sidebar`, `--layout-full`1718## Fluid Typography1920### clamp() Formula21```css22/* Minimum size, preferred size (viewport-relative), maximum size */23font-size: clamp(1rem, 0.5rem + 2vw, 2rem);2425/* Practical scale */26--text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);27--text-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);28--text-h2: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);29```3031### Fluid Spacing32Same principle applies to spacing:33```css34--space-section: clamp(3rem, 2rem + 5vw, 8rem);35--space-container: clamp(1rem, 0.5rem + 3vw, 4rem);36```3738## Beyond Stack-on-Mobile3940### Navigation41- Desktop: horizontal nav bar42- Tablet: priority+ pattern (most important items visible, rest in overflow)43- Mobile: bottom tab bar for primary actions, hamburger for secondary4445### Tables46- Desktop: full table47- Tablet: horizontal scroll with fixed first column48- Mobile: card-based layout with key-value pairs4950### Forms51- Desktop: multi-column where logical52- Mobile: always single column, larger touch targets, sticky submit button5354### Images55- Art direction: different crops for different viewports (not just scale)56- Use `<picture>` with `srcset` for art direction57- Lazy load below-fold images5859## Touch Considerations60- Minimum touch target: 44x44px (Apple) / 48x48px (Material)61- Spacing between targets: minimum 8px62- Thumb zone: primary actions in bottom 60% of screen on mobile63- Swipe gestures: provide button alternatives (not everyone discovers gestures)6465## Performance as Design66- Mobile users are often on slower connections67- Critical CSS inline, rest deferred68- Images: WebP/AVIF with fallbacks69- Skeleton screens instead of loading spinners70- Perceived performance matters more than actual performance
dragoon0x