79. Optymalizacja mobilna landing pages

Poziom: Średni | Czas: 8 min

60-70% ruchu landing pages to mobile. Jeśli strona nie działa na telefonie, tracisz ponad połowę potencjalnych klientów.

Mobile-First Mindset

Zamiast: desktop → adapt to mobile
Lepiej: mobile FIRST → enhance for desktop

Dlaczego? Większość odwiedzających to mobile users

Kluczowe Zasady Mobile Optimization

1. Szybkość Ładowania

BENCHMARKS:
✅ <2 sekundy: Doskonałe
⚠️ 2-3 sekundy: Akceptowalne
❌ >3 sekundy: Zbyt wolno (bounce rate >50%)

JAK PRZYSPIESZYĆ:

☑ Optimize images:
- Format: WebP (not JPG/PNG)
- Max size: 200KB per image
- Use TinyPNG.com or similar

☑ Minimize scripts:
- Remove unnecessary tracking pixels
- Defer non-critical JavaScript

☑ Enable caching (GHL does this automatically)

☑ Use CDN (GHL handles this)

TEST SPEED:
- Google PageSpeed Insights
- GTmetrix
- WebPageTest.org

2. Touch-Friendly Design

CTA BUTTONS:
❌ 30px height → Too small, hard to tap
✅ 48-56px height → Easy thumb target

SPACING:
❌ Buttons close together → Accidental taps
✅ 8-12px spacing minimum

FORMS:
❌ Tiny input fields → Frustrating to tap
✅ Large inputs (48px+ height)
✅ Proper input types:
  - type="email" (shows @ key)
  - type="tel" (shows number pad)
  - type="text" for names

3. Responsive Typography

FONT SIZES (minimum):

Headline (H1): 28-32px (mobile) → 48-56px (desktop)
Subheadline (H2): 20-24px → 32-40px
Body text: 16px minimum (never smaller!)
Button text: 16-18px

LINE HEIGHT:
Mobile: 1.5-1.6 (more air, easier to read)
Desktop: 1.4-1.5

LINE LENGTH:
Mobile: 45-55 characters per line max
Desktop: 60-75 characters

WHY: Small screens = need larger type for readability

4. Single Column Layout

❌ DESKTOP: 2-3 column layout
↓
✅ MOBILE: Single column, stacked

Content order (mobile):
1. Headline
2. Subheadline
3. Hero image/video
4. Benefits (bullet points)
5. Form/CTA
6. Social proof
7. FAQ (if needed)

Everything flows vertically → no horizontal scrolling!

5. Above-The-Fold Optimization

First screen user sees (without scrolling):

MUST INCLUDE:
✅ Clear headline (what's the offer?)
✅ Subheadline (key benefit)
✅ CTA button (visible immediately)
✅ Short form (name + email only)

OPTIONAL:
- Small hero image
- Trust badge ("100% Free")

Goal: User understands offer in 3 seconds

6. Form Optimization

DESKTOP FORM:
First Name | Last Name
Email | Phone
[Submit]

MOBILE FORM (better):
First Name
Email
[Submit]

Less fields = higher conversion!

TIPS:
✅ Pre-fill country code (phone fields)
✅ Auto-capitalize names
✅ Show inline validation (✓ Looks good!)
✅ Large submit button (full width)
✅ Clear placeholder text

7. Navigation Simplification

DESKTOP:
Header with logo, menu items, CTA button

MOBILE:
Header with just:
- Logo (left)
- Hamburger menu (right, if needed)
- Sticky CTA button (bottom of screen)

OFTEN BEST:
Remove header entirely on mobile landing pages!
→ Fewer distractions = higher conversion

GHL Mobile Optimization Tools

Editor → Mobile View:

1. Sites/Funnels → Edit Page
2. Top bar → Toggle to Mobile View (phone icon)
3. See exactly how it looks on mobile
4. Adjust:
   - Text sizes
   - Button sizes
   - Image sizes
   - Spacing

TIP: Edit in mobile view first, then check desktop!

Device-Specific Settings:

Each element → Settings → Advanced:

☑ Hide on mobile
☑ Hide on desktop
☑ Different padding mobile vs desktop
☑ Different font size mobile vs desktop

Example:
Hero image: 
- Mobile: 300px height
- Desktop: 600px height

Mobile-Specific Layouts:

GHL allows separate layouts for mobile:

Row/Column → Settings:
- Desktop: 2 columns (text | image)
- Mobile: 1 column (image on top, text below)

Auto-responsive!

Mobile Testing Checklist

Test BEFORE launching:

☑ Load time <3 sec
☑ All text readable (min 16px)
☑ CTA button easy to tap (48px+ height)
☑ Form fields large enough
☑ No horizontal scrolling
☑ Images load quickly
☑ Videos work (and not auto-play with sound!)
☑ Links/buttons have 44px+ tap target
☑ Spacing between elements (no cramping)
☑ Test on real iPhone
☑ Test on real Android
☑ Test on tablet too (medium screen)

Common Mobile Mistakes

❌ Desktop video background on mobile
→ Eats data, slows load time
✅ Use static image on mobile, video on desktop only

❌ Long  forms (10+ fields)
✅ Short forms (2-3 fields), collect more later

❌ Tiny font size (12-14px)
✅ Minimum 16px body text

❌ Pop-ups that cover entire mobile screen
✅ Smaller pop-ups or slide-ups

❌ Multiple CTAs
✅ One clear CTA per screen

❌ Auto-play videos with sound !
✅ Muted or manual play

❌ Heavy animations
✅ Minimal animations (performance)

Specific GHL Mobile Tips

Sticky CTA Button:

Add row → Section Settings:
☑ Sticky (fixed position)
Position: Bottom
z-index: 999

Button inside: "Book Free Call"

Stays visible while scrolling → higher conversion
(But only use on mobile, not desktop)

Click-to-Call Button:

Button → Link:
tel:+48123456789

On mobile: Taps button → Opens phone dialer
On desktop: Shows number (not clickable)

Perfect for service businesses!

WhatsApp Integration:

Button → Link:
https://wa.me/48123456789?text=Hi!%20I'm%20interested%20in...

Mobile: Opens WhatsApp chat
Desktop: Opens WhatsApp Web

Popular in many markets!

Mobile Conversion Tips

Reduce Friction:

DESKTOP FUNNEL:
Landing → Thank You → Sales Page → Checkout (4 steps)

MOBILE FUNNEL:
Landing combined with form → Instant confirmation (1 step)

Fewer steps = fewer drop-offs

Social Proof Mobile-Friendly:

❌ DESKTOP: 6 testimonials side-by-side
✅ MOBILE: Carousel (swipe through)

OR

✅ MOBILE: Show 2-3 testimonials, "Read more..." link

Testimonial format:
"Короткий цитат (2-3 sentences max)"
- Name, Title
⭐⭐⭐⭐⭐

Keep it concise for small screens

Exit-Intent Mobile:

Desktop: Mouse moves to close tab → popup
Mobile: User scrolls up fast → trigger

Popup:
"Wait! Get 20% OFF!"
[Email field]
[Claim Discount]

Recovers 5-15% of abandoning visitors

Testing Tools

CHROME DevTools:
1. Chrome → F12 (Developer Tools)
2. Click device icon (top-left)
3. Choose device: iPhone 12, Samsung Galaxy, etc.
4. See exactly how page looks

REAL DEVICE testing:
- Send page URL to your phone
- Test on WiFi AND mobile data (slower)
- Test iOS AND Android (different behaviors)

BROWSER TESTING:
- Safari (iOS default)
- Chrome (Android default)
- Both can render differently!

Mobile Analytics

Google Analytics → Audience → Mobile → Overview

METRICS TO TRACK:
- Mobile vs Desktop traffic %
- Mobile bounce rate
- Mobile conversion rate
- Average mobile page load time

GOAL:
Mobile conversion ≥ 80% of desktop conversion
(If much lower → optimization needed!)

Quick Optimization Checklist

30-MINUTE MOBILE AUDIT:

☑ Page loads in <3 sec? (test with slow 3G)
☑ Headline readable without zooming?
☑ CTA button above fold?
☑ Button > 48px tall?
☑ Form input fields > 44px tall?
☑ No horizontal scrolling?
☑ Images optimized (<200KB each)?
☑ Body text ≥ 16px?
☑ Line height ≥ 1.5?
☑ Tested on actual iPhone?
☑ Tested on actual Android?

If all ✅ → You're good to go!

---

Następny krok: 80. Formularze Lead Generation