Above The Fold Essentials

---
name: elite-frontend-ux-above-the-fold-essentials
description: 'Sub-skill of elite-frontend-ux: Above-the-Fold Essentials (+4).'
version: 1.0.0
category: development
type: reference
scripts_exempt: true
---

# Above-the-Fold Essentials (+4)

## Above-the-Fold Essentials

Must fit within one viewport:
1. Headline (5–10 words)
2. Supporting subheadline (value proposition)
3. Single primary CTA
4. Hero visual


## Section Flow

```
1. Hero (headline + CTA + visual)
2. Social proof (logos, snippet)
3. Problem / Solution
4. Features / Benefits (3–4 max)
5. Testimonials
6. Pricing (if applicable)
7. FAQ
8. Final CTA
9. Footer
```


## CTA Design

- Height: min 44px; padding: 2× font size
- Copy: action verbs, first-person ("Get my free trial" > "Sign up")
- Length: 2–5 words max
- One primary CTA per viewport


## Pricing Tables

- 3–4 tiers max (more causes paralysis)
- Highlight recommended tier
- Annual/monthly toggle showing savings
- CTA button on every tier


## Form Optimization

- Single column (120% fewer errors vs multi-column)
- Minimize fields (4 vs 11 fields = 120% more conversions)
- Never ask for phone unless essential (58% abandon)
- Labels above inputs; validate on blur, not while typing

---