Compress the Donahoe Method into mobile-first single-column layouts: thumb-zone CTA placement, Fitts-sized touch targets, mobile reading-pattern adaptation, sticky bottom CTA, and Method-density preservation under 375px width.
Use when designing or rebuilding mobile rendering of a sales page, VSL page, lead-magnet page, or any direct-response asset where mobile traffic dominates and the Method must hold without losing layers.
Not for desktop-first spec (use /convert above-fold or /convert scroll-rhythm) and not for native mobile-app design.
Instrucciones de origen · Vista previa de solo lectura
name
convert-mobile
slash_command
false
pack
business-conversion
family
visual_conversion
description
Compress the Donahoe Method into mobile-first single-column layouts: thumb-zone CTA placement, Fitts-sized touch targets, mobile reading-pattern adaptation, sticky bottom CTA, and Method-density preservation under 375px width.
Use when designing or rebuilding mobile rendering of a sales page, VSL page, lead-magnet page, or any direct-response asset where mobile traffic dominates and the Method must hold without losing layers.
Not for desktop-first spec (use /convert above-fold or /convert scroll-rhythm) and not for native mobile-app design.
{"lineage":"The Donahoe Method (Wayland-owned operating system); Fitts's law (Paul Fitts, 1954) for touch-target sizing; Steven Hoober thumb-zone research (UXmatters, 2013) for mobile reachability mapping"}
Convert Mobile - Mobile-First Compression of the Donahoe Method
"60%+ of web traffic is mobile. The Method must hold there or it doesn't hold." - Wayland conversion playbook
Mobile is not "the desktop page, but smaller." Mobile is a different reading device, a different interaction surface, a different physical posture. This skill takes any direct-response asset built with The Donahoe Method and engineers the mobile rendering so that every Method layer survives the 375px squeeze.
Designing or rebuilding the mobile rendering of a long-form sales page, VSL page, squeeze, OTO, or lead-magnet page
The desktop page exists but mobile feels broken, slow, or under-converting
A net-new page where mobile is the primary or sole device
Diagnosing why the mobile bounce rate is high and desktop is fine
Do NOT use for:
Native iOS or Android app design (this is web-only)
Desktop-only spec - use /convert above-fold + /convert scroll-rhythm
Auditing a live URL - use /market landing <url>
Generating the desktop page first - desktop is downstream of mobile in this skill's worldview, but if the user wants the full asset, route to /convert sales-page
Why Mobile-First (the operating principle)
A mobile-first page works on every device. A desktop-first page that's "responsive" almost always loses something on mobile - a layer of the Open compressed away, a CTA pushed below the fold, a proof block that wraps awkwardly, a Cascade Close that fragments.
So: design the mobile version first. Then expand for tablet and desktop. Every Method layer must be present at 375px or it doesn't ship.
The Mobile Operating Constraints
Constraint 1 - The viewport
Device class
Width
Design baseline
Smallest still-shipping
320px
iPhone SE 1st gen - design must not break
Modern compact
375px
iPhone SE 2/3, iPhone 12/13 mini - design baseline
Modern standard
390-430px
iPhone 14/15, most Android - abundant space
Large mobile
430px+
iPhone Pro Max, large Android - extra space, treat as standard
Design and test at 375px. Verify nothing breaks at 320px.
Constraint 2 - Fitts's law (1954) - touch target sizing
Fitts's law (Paul Fitts, 1954): the time required to acquire a target = function of the distance to the target and the size of the target.
Translation for mobile: bigger CTAs that are closer to the thumb get clicked. Specifications:
Element
Minimum
Method-grade
Primary CTA height
44pt (Apple HIG)
56-64px
Primary CTA tap area
44×44pt
56×280px+ (full-width on mobile)
Secondary CTA / link
44×44pt
48×120px+
Form input height
40px
48-56px
Tap-target spacing
8px gap
12-16px gap
Body text size
16px (anti-zoom)
17-18px (comfortable read)
Line height (body)
1.4
1.5-1.6
Anything below the minimums creates rage-taps and abandonment. Method-grade is what we ship.
Constraint 3 - The thumb zone (Hoober, 2013)
Steven Hoober's research ("How Do Users Really Hold Mobile Devices?", UXmatters, 2013, replicated since) maps mobile reachability into three zones based on one-handed grip.
+--------------------+
| HARD | ← top corners - slow, awkward
| ~~~~~~~~~~~~ | (especially top-far-corner for the dominant thumb)
|--------------------|
| OK | ← middle - comfortable
| |
|--------------------|
| EASY | ← bottom-center - natural thumb arc
| ~~~~~~~ | (sticky CTA lives here)
+--------------------+
Application rules:
Primary CTAs in the EASY zone. Sticky bottom CTA on long pages = +10-25% conversions vs top-fixed (varies, folklore-leaning).
Hamburger menus in the HARD zone are standard but ergonomically poor. Accept the convention (Jakob's Law); don't reinvent.
Long-press destructive actions stay in the HARD zone - friction is a feature there.
Constraint 4 - Single-column composition
No multi-column layouts on mobile. The three-thirds of the desktop scroll-rhythm collapse to a single vertical column. Section ordering becomes the only visual hierarchy. Sub-heads do more work.
Constraint 5 - Speed budget
Mobile loads on cellular. Web Vitals targets:
LCP (Largest Contentful Paint) <2.5s; >4s is failure
CLS (Cumulative Layout Shift) <0.1; layout shifts cause accidental taps
INP (Interaction to Next Paint, replaces FID 2024) <200ms
Existing mobile rendering - for porting / compression
Primary device target - if the audience skews iOS or Android (rarely matters; Hoober applies)
out_path - caller-controlled output. Defaults via build_report_path("business-conversion", instruction)
The Mobile Method Compression Rules
Every Method layer must survive. Six compression rules:
Rule 1 - Open compression (Four-Layer Open)
Desktop hero shows Layer 1 (headline) + Layer 2 (subhead). Mobile shows the same two, just smaller type. Layers 3-4 unspool below in the body - same as desktop.
NEVER strip Layer 2 from mobile to fit the CTA. If the CTA doesn't fit, shrink the headline. The Open is sacred.
Rule 2 - Three Locks compression (zone proportions)
Zone proportions hold on mobile. The Want / Trust / Excuse percentages from convert-scroll-rhythm do not change. Mobile is taller, but the proportional split holds.
What changes: section dividers (white space + hairline rules) become the only visual zone marker since horizontal layout is gone.
Rule 3 - CTA anchor compression
Desktop typical CTA count holds. Long-form mobile gets 5-9 CTAs same as desktop, plus:
Sticky bottom CTA bar appears once the reader scrolls past Section 5 (Trust zone entry). Always EASY-zone. Always full-width.
Inline CTAs are full-width buttons (not centered narrow buttons) - easier thumb hit.
Final CTA + P.S. + P.P.S. + FAQ all retain anchor presence.
Rule 4 - Proof Stack compression
Logo bars wrap to 2 rows at 375px (3-4 logos per row). Video testimonials show poster image + play-on-tap (never autoplay; bandwidth hostile). Quote-photo-result cards stack vertically; never side-by-side on mobile. See /convert proof-stack for the proof-stack-specific rules.
Rule 5 - Bullet System compression
Bullets keep the four types (Keyhole / Flip / Snapshot / Scar) and keep the rhythm - but the visual checkmark + bullet copy stacks vertically. Each bullet gets its own visual block (12-16px between blocks). No two-column bullet grids on mobile.
Rule 6 - Cascade Close compression
The Stack → Vision → Math → Safety Net → Door cascade holds. The Math close in particular benefits from a visual "math card" style (highlighted pricing block with the comparison) - this is the section most likely to need redesign on mobile because desktop math tables collapse poorly.
If convert-above-fold and convert-scroll-rhythm have run, lift their outputs. If not, ask the user whether to design mobile-first (we run those skills with mobile-first defaults) or compress an existing desktop spec.
Step 2 - Map the section order to a vertical column
Take the section list from convert-scroll-rhythm (14-18 sections). For each section, define:
Which mobile pattern it uses (full-width text, scannable bullet block, image+text card, video poster, etc.)
Its compressed type sizes
Its CTA presence (inline button or rely on sticky bar)
Its visual divider (white space + optional hairline rule)
Above the fold at 375px must contain: headline + subhead + CTA + microcopy. Trust strip can wrap to row 2 below the fold; logo + menu live in the top bar.
Appears once scrollY > [end of Section 5 / Trust zone entry]
Disappears when in viewport with the inline CTA (avoids double-CTA visual clash)
Background: solid color with 12-16px top padding for thumb safety
56-64px tall; full-width
Copy: shortest CTA copy ("Get my access", "Start my trial")
Disclaimer line above (12px, 60% opacity): "Used by 1,847 founders" or guarantee blurb
Step 5 - Spec each section's mobile rendering
For each of the 14-18 sections from the desktop scroll-rhythm:
Type sizes (compressed): h2 = 26-32px, h3 = 20-24px, body = 17-18px
Section padding: 24-32px horizontal, 48-72px vertical between sections
Image / video treatment (poster, lazy-load, max width 100%)
Bullet / list treatment (vertical stack only)
Optional inline CTA (full-width)
Section divider (white space + optional hairline)
Step 6 - Form mobile audit (if forms exist)
Element
Method-grade mobile spec
Field count
3-5 max for lead-capture; one-per-screen for multi-step
Field height
48-56px
Label
Floating or above-field; never placeholder-only
Input mode
type="email", type="tel", type="url" for native keyboards
Autofill
autocomplete attributes set correctly
Submit button
Full-width, 56px+, value-loaded copy
Error inline
Specific message; never wipe the form on submit error
Multi-step
Progress indicator at top
Step 7 - Speed audit checklist
LCP image WebP, <100KB, preloaded if hero
Below-fold images lazy-loaded
Hero video: poster image only at first paint; play on user gesture
Render-blocking JS removed from hero
Fonts subset + preloaded
CSS minified, critical CSS inlined for hero
Third-party scripts deferred or async
CDN serving static assets
Step 8 - Read the page out loud, scrolling on a phone
Final check: pull up the page on an actual mobile device. Read out loud. Scroll with one thumb. Tap each CTA. The Method's voice rules require this - read aloud reveals the rhythm. Mobile reveals the friction.
Pull the rendered page on a phone. Read it. Scroll with one thumb. Each CTA must be reachable. Each transition must read naturally. If the rhythm breaks, return to /convert chute for transition rewrites.
How to deploy
Spec mobile first (this skill), then expand to desktop with /convert above-fold + /convert scroll-rhythm.
Pair with /convert proof-stack for mobile-specific proof block layouts.
Pair with /convert sales-page to write the actual content into the mobile-first frame.
Run /convert audit on the rendered page once content is in.
Run real-device check at 320px (smallest), 375px (baseline), 414px (typical).
## Pitfalls
- **Stripping Layer 2 to fit.** Common move: hide the subhead on mobile to save space for the CTA. Don't. Layer 2 is half of the Open's "side door"; without it, Layer 1 lands as a naked headline. Shrink the headline instead.
- **Tap target violations.** Anything under 44pt fails Apple HIG and frustrates the thumb. Method-grade is 56-64px. The cost of an extra 12px is negligible; the cost of a rage-tap is the conversion.
- **Sticky CTA collision.** Sticky CTAs that overlap a scrolling inline CTA confuse the user. Implement viewport detection: hide the sticky bar when the inline CTA is on screen.
- **Hamburger overload.** Mobile nav menus tend to grow until they're a sitemap. On a sales page, you don't want a sitemap. Cut nav to 2-3 items max - or remove it entirely on dedicated landing pages.
- **Image-heavy hero on mobile.** A 1200×800 hero image at full quality is a 600KB+ payload that wrecks LCP. WebP, smaller dimensions for mobile breakpoint, lazy-load below-fold.
- **Autoplay video on mobile.** Almost every browser blocks autoplay-with-sound and many block silent autoplay. Use a poster image; play on tap.
- **Long forms.** A 7-field form on mobile feels like a tax return. Each field reduces conversion ~7%. Cut to 3-5; multi-step if you must capture more.
- **Desktop-first responsive afterthought.** "We'll fix the mobile layout later" almost always strips a Method layer. Mobile-first is the rule, not the courtesy.
## Lineage
- **The Donahoe Method** (Wayland-owned operating system) - every Method layer (Open / Three Locks / Bullets / Cascade Close / Voice Rules) must survive mobile compression
- **Fitts's law** (Paul Fitts, 1954) - touch-target sizing
- **Apple Human Interface Guidelines** - 44pt minimum touch target floor
- **Steven Hoober thumb-zone research** - *"How Do Users Really Hold Mobile Devices?"* (UXmatters, 2013) for EASY/OK/HARD zone mapping
- **Jakob's Law** (Nielsen Norman Group) - mobile patterns users already know (hamburger top-corner, sticky bottom bar)
- **Google Web Vitals** - LCP / CLS / INP targets (2020+)
- **WCAG 2.1 AA** - touch target spacing (8px min) and contrast (4.5:1)
## Notes
- Mobile is downstream of nothing and upstream of everything. Spec mobile first, then expand.
- Sticky bottom CTA on long-form mobile is the single highest-leverage move. Not optional.
- Read-aloud test on an actual phone - not a desktop emulator - is the only real verification.
- The Method's density (proof every 2-3 sentences, mixed bullet types, multi-layer Cascade Close) holds on mobile if compressed thoughtfully. The mobile compression rules above protect each layer.
- This skill composes with `convert-above-fold` (hero spec, mobile-first), `convert-scroll-rhythm` (section order, zone proportions), `convert-proof-stack` (proof block mobile patterns), `convert-sales-page` (content into the frame), and `convert-audit` (verifies Method survival post-compression).
