📱 Mobile Layout Design (< 768px)

1. The "Thumb Zone" and Reachability

Research by Steven Hoober and others shows that roughly 75% of phone interactions are single-handed. The thumb's comfortable reach covers only the lower half of the screen; the upper corners are "stretch zones" where taps are slow and error-prone.

Implications for Psilobase's mobile layout:

• Primary actions go at the bottom: The "Start Reading" button on a species page, the "Continue" link on a multi-step dosage guide, and the site search bar should all be within easy thumb reach.
• The header is for orientation, not action: The sticky top bar should show the logo and a hamburger menu. Important actions (like sharing an article or bookmarking a species) belong in a bottom action bar, not the top right corner.
• Content cards have large tap targets: The entire card surface should be tappable, not just the "Read more" link. Use position: relative on the card and an ::after pseudo-element on the link to expand the tap area across the whole card.

2. Content Stacking Strategy

Multi-column desktop layouts must collapse gracefully into a single column on mobile. The order in which elements stack matters as much as the stacking itself.

Stacking Order for Psilobase Articles

1. Article title and category badge
2. Hero image (full width)
3. Key facts summary box (replaces desktop sidebar position)
4. Article body content
5. Related species / related articles (replaces desktop right sidebar)
6. Comments or community links

The sidebar content (table of contents, related articles, quick reference) should be moved above the article on mobile if it provides essential context (like a species summary card), or moved below the article if it is supplementary (related reading, ads).

/* CSS Grid — single column by default (mobile first) */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "summary"    /* Key facts — above article on mobile */
    "article"
    "related"    /* Related content — below article */
    "footer";
  gap: 20px;
}

/* At 768px — shift to 2-column with sidebar */
@media (min-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr 280px;
    grid-template-areas:
      "header  header"
      "article summary"
      "article related"
      "footer  footer";
  }
}

3. Navigation Patterns for Mobile

Mobile navigation is one of the most-tested UI components on the web because it directly impacts whether users can find content.

Hamburger Menu (Current Psilobase Pattern)

The classic ☰ icon in the top-right opens a full-screen or slide-in overlay menu. Rules for doing it well:

• The hamburger icon must be at least 44×44px touch target.
• When the menu opens, focus must be moved to the first menu item for keyboard/screen reader users.
• Pressing Escape or tapping outside the menu must close it.
• The page behind must be scroll-locked while the menu is open (overflow: hidden on body).
• Deep sub-navigation (Species → Psilocybe → cubensis) should use a drill-down pattern, not a massive nested list.

Bottom Tab Bar (App-Like Alternative)

For the 5–6 most frequently visited sections, a persistent bottom navigation bar provides faster switching than re-opening the hamburger menu every time. Appropriate for Psilobase if analytics confirm high cross-section navigation.

• Maximum 5 tabs — more than 5 items in a bottom bar is unreadable on small phones.
• Label each tab with text below the icon. Icon-only tabs are ambiguous for new users.
• Highlight the active tab clearly. Use the brand green (#2c5f2d) for the active indicator.

Horizontal Scroll for Categories / Filters

When there are 8–15 filter chips or category tabs (e.g., Species categories: Psilocybe, Panaeolus, Gymnopilus), a horizontally scrollable row works well. Indicate scrollability with a visible overflow of the last item on the right edge.

/* Horizontally scrollable chip row */
.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Hide scrollbar on Firefox */
}
.filter-row::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.filter-chip {
  flex-shrink: 0;                 /* Prevent chips from collapsing */
  scroll-snap-align: start;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  white-space: nowrap;
}

4. Touch Targets and Interaction

Fingers are far less precise than mouse cursors. All interactive elements must be at least 44×44px. This applies to links, buttons, form controls, icons, and any other tappable element.

/* Universal touch target enforcement */
button,
a,
input,
select,
label[for],
[role="button"],
[tabindex] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;    /* Expands the visual element to meet the minimum */
}

/* For icon buttons where padding changes appearance */
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
}

Expandable Card Tap Area

The most natural mobile pattern for article cards is for the entire card to be tappable, not just a "Read more" link:

/* Full-card tap area using pseudo-element */
.article-card {
  position: relative;
}
.article-card a.card-link::after {
  content: '';
  position: absolute;
  inset: 0;         /* Covers the entire card */
  z-index: 1;
}

5. Images on Mobile

Images are the largest performance bottleneck on most mobile pages. Psilobase uses high-resolution mushroom photographs that require careful mobile optimisation.

• Use the srcset attribute: Serve a 400px-wide image on a 390px iPhone screen. There is no point sending a 1200px image that must be scaled down.
• Lazy load below-the-fold images: Use loading="lazy" on all images not visible on initial page load. This dramatically reduces data transfer on mobile connections.
• Aspect ratio boxes: Reserve image space before the image loads to prevent layout shift. Use the CSS aspect-ratio property or a padding-top percentage trick.
• WebP format: All modern mobile browsers support WebP. A species photograph in WebP is typically 30–50% smaller than the equivalent JPEG.

<img
  src="/images/cubensis-400.webp"
  srcset="
    /images/cubensis-400.webp  400w,
    /images/cubensis-800.webp  800w,
    /images/cubensis-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Psilocybe cubensis fruiting body on substrate"
  width="800" height="600"
  loading="lazy"
>

6. Performance on Mobile Networks

Mobile users on slow connections are a significant portion of Psilobase's audience, especially from regions where desktop connectivity is limited. Optimise for Slow 3G (750kbps, 300ms RTT) as a baseline.

• Keep total page weight under 500KB on the critical rendering path. Defer everything else.
• Avoid render-blocking resources: Scripts should use defer or async. Non-critical CSS should be loaded asynchronously.
• Preconnect to font hosts: If using Google Fonts, add <link rel="preconnect" href="https://fonts.googleapis.com"> early in the <head>.
• Use a service worker for offline access: The most critical content — dosage information, safety checklist, emergency contacts for a difficult trip — should be cached and available offline.