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.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
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).
