Mobile Experience Upgrade Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Upgrade mobile experience for all 30 articles + 4 sales pages with consistent, optimized responsive design.

Architecture: Create a shared mobile CSS file (mobile.css) that all articles import, providing consistent mobile optimizations across the entire site.

Tech Stack: Pure CSS with media queries, no JavaScript changes required.

Current State Analysis

Issue	Current State	Impact
No shared CSS	Each article has inline styles	Inconsistent mobile experience
Minimal breakpoints	Only 768px or 640px	Poor adaptation to various screen sizes
Tables	No horizontal scroll	Tables overflow on mobile
Hero sections	Basic padding adjustments	Stats/badges not optimized
Cards/Grids	Simple 1-column fallback	Not optimized for thumb navigation
Screenshots	No responsive handling	May overflow or become too small
TOC navigation	Horizontal scroll	Hard to tap on mobile
Font sizes	No mobile-specific sizing	Text may be too small
Touch targets	Not optimized	Links/buttons too small for fingers

Task 1: Create Shared Mobile CSS

Files:

Create: /app/cfc/web/css/mobile.css

Mobile CSS Content:

/* ===== Mobile Experience Upgrade ===== */
/* Import this file in all articles: <link rel="stylesheet" href="../css/mobile.css"> */

/* === Base Mobile Reset === */
@media (max-width: 768px) {
  :root {
    --mobile-padding: 1rem;
    --mobile-radius: 12px;
    --touch-target: 44px; /* Apple HIG minimum */
  }
  
  /* Improve text readability */
  body {
    font-size: 16px; /* Prevent iOS zoom */
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  
  /* Hero optimizations */
  .hero {
    padding: 5rem var(--mobile-padding) 2.5rem !important;
    min-height: auto !important;
  }
  
  .hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  .hero p {
    font-size: 0.95rem !important;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .hero-stat {
    min-width: 100% !important;
    padding: 0.75rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.5rem !important;
  }
  
  /* Section padding */
  section {
    padding: 2rem var(--mobile-padding) !important;
  }
  
  /* Card optimizations */
  .info-card,
  .card {
    padding: 1.25rem !important;
    border-radius: var(--mobile-radius) !important;
    margin-bottom: 1rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.25rem !important;
  }
  
  /* Grid → Single column */
  .grid-2,
  .grid-3,
  .infographic,
  .pathway-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Table horizontal scroll */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    padding: 0 var(--mobile-padding);
  }
  
  .data-table {
    min-width: 600px; /* Force scroll on narrow screens */
    font-size: 0.85rem !important;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.6rem 0.75rem !important;
    white-space: nowrap;
  }
  
  /* Screenshot responsive */
  .screenshot-block {
    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
    border-radius: 0 !important;
  }
  
  .screenshot-block img {
    max-width: 100%;
    height: auto;
  }
  
  /* Evidence links */
  .evidence-link {
    padding: 1rem !important;
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .evidence-link .link-icon {
    font-size: 1.25rem !important;
  }
  
  /* Highlight boxes */
  .highlight-box {
    padding: 1rem 1.25rem !important;
    margin: 1rem 0 !important;
  }
  
  /* TOC navigation */
  .toc-inner {
    padding: 0.5rem var(--mobile-padding) !important;
    gap: 0.5rem !important;
  }
  
  .toc-inner a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
  }
  
  /* Reference list */
  .ref-list {
    padding-left: 1.25rem !important;
  }
  
  .ref-list li {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }
  
  /* Section nav */
  .section-nav {
    gap: 0.5rem !important;
  }
  
  .section-nav a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Footer */
  .footer-inner {
    flex-direction: column;
    gap: 2rem !important;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 1.5rem !important;
  }
  
  /* Pathway cards */
  .pathway-card {
    border-top-width: 3px !important;
    padding: 1.25rem !important;
  }
  
  .pathway-card h4 {
    font-size: 0.95rem !important;
  }
  
  /* Warning boxes */
  .warning {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Infographic items */
  .info-item {
    padding: 1.25rem !important;
  }
  
  .info-item .icon {
    font-size: 1.75rem !important;
  }
  
  .info-item h4 {
    font-size: 0.9rem !important;
  }
  
  .info-item p {
    font-size: 0.82rem !important;
  }
}

/* === Small phones (≤480px) === */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem !important;
  }
  
  .hero-stat .num {
    font-size: 1.25rem !important;
  }
  
  .info-card h2,
  .card h3 {
    font-size: 1.15rem !important;
  }
  
  .data-table {
    min-width: 500px;
  }
}

/* === Touch target sizing === */
@media (hover: none) and (pointer: coarse) {
  a, button, .toc-inner a, .section-nav a {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
  }
  
  /* Increase tap area for links in text */
  p a {
    padding: 0.125rem 0;
    border-bottom: 1px solid currentColor;
  }
}

/* === Safe area for notched phones === */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* === Dark mode support (optional) === */
@media (prefers-color-scheme: dark) {
  /* Can be enabled later if needed */
}

Step 1: Create mobile.css file

Create the file at /app/cfc/web/css/mobile.css with the content above.

Step 2: Verify file exists

Run: ls -la /app/cfc/web/css/mobile.css Expected: File exists with ~200 lines

Task 2: Add Mobile CSS to All Articles

Files to modify (30 articles):

All files in /app/cfc/web/articles/*.html

Pattern to add in each file's <head>:

<link rel="stylesheet" href="../css/mobile.css">

Add this line AFTER the existing <style> block (before </head>).

Files list:

alzheimer.html
cardio-cerebro.html
cancer.html
diabetes.html
enagic-turmeric.html
geo-faq-1-allergy.html
geo-faq-2-attention.html
geo-faq-3-immunity.html
gut-microbiome-immune.html
gut-microbiota-testing.html
indicator-disease-risk.html
indicator-gut-barrier.html
indicator-microbiome-diversity.html
indicator-neurotransmitters.html
indicator-nutrition.html
indicator-pathogens.html
indicator-scfas.html
indicator-vitamins.html
metabolic-syndrome.html
osteoporosis.html
plastic-health.html
prebiotics-guide.html
prebiotics-science.html
probiotics-guide.html
probiotics-science.html
puerarin.html
tap-water-pollution.html
turmeric.html
uric-acid.html
water-purifier-guide.html

Step 1: Add mobile.css link to first 10 articles

For each file, add <link rel="stylesheet" href="../css/mobile.css"> before </head>.

[ ] Step 2: Add mobile.css link to next 10 articles
[ ] Step 3: Add mobile.css link to remaining 10 articles
[ ] Step 4: Verify all files updated

Run: grep -l "mobile.css" /app/cfc/web/articles/*.html | wc -l Expected: 30

Task 3: Add Mobile CSS to Sales Pages

Files to modify:

/app/cfc/web/sales/sales.html
/app/cfc/web/sales/tap-water-sale.html
/app/cfc/web/sales/microplastic-sale.html
/app/cfc/web/sales/index.html

Pattern to add:

<link rel="stylesheet" href="../css/mobile.css">

[ ] Step 1: Add mobile.css link to sales.html
[ ] Step 2: Add mobile.css link to tap-water-sale.html
[ ] Step 3: Add mobile.css link to microplastic-sale.html
[ ] Step 4: Add mobile.css link to index.html
[ ] Step 5: Verify all sales files updated

Run: grep -l "mobile.css" /app/cfc/web/sales/*.html | wc -l Expected: 4

Task 4: Remove Conflicting Inline Media Queries

Many articles have their own @media rules that may conflict with the shared mobile.css. We need to remove redundant inline rules that are now handled by mobile.css.

Common redundant patterns to remove:

/* These are now handled by mobile.css - safe to remove */
@media (max-width: 768px) {
  .hero { padding: 4rem 1.5rem 3rem; min-height: 50vh; }
  .hero-stats { gap: 1rem; }
  .hero-stat { min-width: 110px; padding: 0.75rem 1rem; }
  .hero-stat .num { font-size: 1.5rem; }
  section { padding: 3rem 0; }
  .info-card { padding: 1.5rem; }
  .pathway-grid { grid-template-columns: 1fr; }
}

Note: Keep article-specific rules that mobile.css doesn't cover (e.g., custom component styles).

Step 1: Identify articles with redundant media queries

Run: grep -l "@media.*768px" /app/cfc/web/articles/*.html

[ ] Step 2: Remove redundant rules from turmeric.html
[ ] Step 3: Remove redundant rules from cancer.html
[ ] Step 4: Remove redundant rules from puerarin.html
[ ] Step 5: Remove redundant rules from other articles (batch)
[ ] Step 6: Verify no broken styles

Visually inspect 3-4 articles on mobile viewport.

Task 5: Test Mobile Experience

Test checklist:

[ ] Step 1: Test hero section on mobile
- Stats stack vertically
- Text is readable
- No horizontal overflow
[ ] Step 2: Test tables on mobile
- Horizontal scroll works
- Headers visible while scrolling
[ ] Step 3: Test cards/grids on mobile
- Single column layout
- Adequate spacing
[ ] Step 4: Test TOC navigation on mobile
- Horizontal scroll
- Touch targets adequate
[ ] Step 5: Test screenshots on mobile
- Responsive sizing
- Captions readable
[ ] Step 6: Test footer on mobile
- Columns stack
- Links accessible

Global Constraints

Must work on iOS Safari and Chrome (Android)
No JavaScript changes required
Must not break existing desktop styles
Must maintain accessibility
Touch targets minimum 44x44px (Apple HIG)
Font size minimum 16px on mobile (prevents iOS zoom)

Expected Outcomes

Metric	Before	After
Mobile breakpoints	768px only	768px + 480px + touch
Table usability	Overflow	Horizontal scroll
Touch targets	Varies	44px minimum
Consistency	Per-article	Shared mobile.css
Hero readability	Basic	Optimized
Card layouts	Simple stack	Thumb-friendly

2026-07-27-mobile-experience-upgrade.md 11 KB Verlauf Originalformat