📱 Tablet Layout Design (768px - 1024px)

1. Understanding the Tablet Context

Tablets represent roughly 5–10% of web traffic but punch above their weight for educational content. Psilobase's longer articles — species identification guides, research summaries, cultivation manuals — are frequently read on tablets, where users are more comfortable reading extended text than on phones. Getting the tablet layout right significantly improves time-on-page for this engaged segment.

The defining challenge: tablets can be used in two very different modes.

• Casual touch mode: iPad held in two hands, portrait orientation, no keyboard. Behaves like a large phone — touch targets, thumb reach, no hover.
• Productivity mode: iPad Pro with Magic Keyboard or similar. Has a trackpad (hover states exist!) and keyboard shortcuts. Behaves like a small desktop.

Your CSS media queries cannot detect which mode the user is in. The safe approach: assume touch input for any display width between 768px and 1024px, and layer on desktop enhancements only at 1024px+ using @media (hover: hover).

2. The 2-Column Layout Shift

At 768px (iPad in portrait orientation), there is enough horizontal space to introduce a sidebar or a 2-column content grid. This is the first "desktop-like" layout most users encounter as they grow their screen.

What Shifts at 768px on Psilobase

• Navigation: The hamburger menu can transition to a visible top navigation bar. At 768px there is enough room for 5–6 nav items before crowding.
• Species cards: Shift from a single-column stack to a 2-column grid. Each card now shows more horizontal information (species name, potency rating, habitat).
• Article layout: On wide enough tablets (landscape, 1024px), introduce a right-sidebar table of contents. In portrait (768px) the TOC may be better placed above the article or in an expandable drawer.
• Dosage tables: Can now display without horizontal scroll on most tablets. Test at exactly 768px to confirm the tables fit.
• Image galleries: Switch from a single large image to a 2-column thumbnail grid with a lightbox overlay on tap.

3. Handling Orientation Changes

Tablets are rotated far more frequently than phones. A user might start reading an article in portrait, then rotate to landscape to view a wide diagram. The layout must transition smoothly.

• Portrait (768px, iPad standard): Treat as "large mobile." Single content column with optional visible top nav. Hamburger is acceptable if nav has many items.
• Landscape (1024px, iPad standard): Treat as "small desktop." Show the sidebar navigation and a right-column table of contents.
• Portrait (820px, iPad Air): The wider iPad models create an intermediate state. A narrow 2-column layout works here.
• Landscape (1366px, iPad Pro 12.9"): Behaves like a full desktop. Apply all desktop styles.

Use CSS orientation media queries for orientation-specific tweaks, but prefer width-based breakpoints for the primary layout shifts:

/* Orientation-specific refinements */
@media (orientation: portrait) and (min-width: 768px) {
  /* iPad portrait: single wide column, no sidebar */
  .sidebar { display: none; }
  .main-content { max-width: 100%; }
}

@media (orientation: landscape) and (min-width: 1024px) {
  /* iPad landscape: show sidebar */
  .sidebar { display: block; }
  .page-layout { grid-template-columns: 220px 1fr; }
}

4. Touch Input — Never Assume a Mouse

Even on an iPad with a keyboard attached, the user may switch between keyboard/trackpad and touch at any moment. Design for touch input as the default at tablet widths.

Touch-Safe Navigation Patterns for Tablets

• Tap to expand: On a top nav, tapping a parent item with sub-pages should open a dropdown, not navigate away. A second tap navigates to the parent page. This is the "double-tap" pattern used by many large sites.
• Slide-in drawer: At 768px portrait, an off-canvas sidebar that slides in from the left is a familiar, comfortable pattern for deep site navigation.
• Tabs above content: For sections with 4–8 sub-pages (Species, Microdosing schedules, Growing methods), horizontal scrollable tab bars work well on tablets. Each tab fits comfortably and is large enough to tap.

5. Typography at Tablet Width

Tablets are typically held further from the face than phones but closer than desktop monitors. An intermediate font size is appropriate.

• Body text: 16–17px. Slightly larger than the 16px mobile minimum, smaller than the 18px desktop preference.
• Line length: At 768px with no sidebar, the full width is usable for text. Apply max-width: 680px; margin: 0 auto on the article column to prevent overly long lines.
• Touch targets: Maintain 44px minimum for all interactive elements. On a tablet, fingers are not more precise than on a phone.

6. CSS Implementation

/* ===== TABLET LAYOUT (768px – 1023px) ===== */
@media (min-width: 768px) {

  /* 2-column content grid */
  .card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  /* Show top navigation bar (hide hamburger) */
  .nav-toggle { display: none; }
  .nav-menu   { display: flex; }

  /* Constrain article width */
  .article-content {
    max-width: 680px;
    margin: 0 auto;
    font-size: 16px;
  }

  /* Show section sidebar on tablet landscape */
  .sidebar { display: block; }
}

/* ===== Tablet landscape / small desktop (1024px) ===== */
@media (min-width: 1024px) {
  .page-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
  }

  /* Enable hover effects only when a mouse is present */
  @media (hover: hover) {
    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
  }
}