Skip to content

🌸 M365 Licensing Reading Rooms

Status: Planning — not yet implemented
Pattern: 3-column Stripe Docs layout (same as blog + study guides)
Scope: 50 individual licensing pages + new /licensing-docs/ landing page

Vision

Microsoft 365 licensing is one of the most-searched topics on the site. We have 50 detailed licensing pages covering every plan from Business Basic to E7, Dynamics 365, Power Platform, Copilot, Security add-ons, and more. They're grouped into 13 categories.

Currently these pages are: - Single-column, dark-only (glassmorphism, old tool-hero.html) - Isolated — to browse other plans you must go "← All Plans" back to the index - No cross-pollination with blogs, study guides, or tools

The goal: transform these into Licensing Reading Rooms using the same 3-column Stripe Docs pattern as blogs and study guides.

Architecture

3-Column Grid

┌──────────────┬────────────────────────────┬──────────────┐
│  LEFT (250px)│     CENTER (1fr)           │ RIGHT (280px)│
│              │                            │              │
│  Licence Nav │  Plan Page Content         │ Related      │
│  by Category │  (price, features, FAQ)    │ Tools &      │
│              │                            │ Blogs        │
│  13 categories│                           │              │
│  50 plans    │                            │ Purchase     │
│              │                            │ CTAs         │
│  Current plan│                            │              │
│  highlighted │                            │              │
└──────────────┴────────────────────────────┴──────────────┘
  • All 50 plans grouped by 13 categories
  • Collapsible category sections (like cert-nav.html pattern)
  • Current plan highlighted with indigo accent
  • Category badges with count
  • Sticky, scrollable

Categories (from content front matter plan_category):

Category Count
Enterprise 6
Business (≤300 users) 4
Security Add-ons 6
Power Platform 6
Dynamics 365 CRM 5
Dynamics 365 ERP 5
Copilot & AI 4
Teams Add-ons 3
Microsoft Viva 3
Project & Visio 3
Windows & Dev 3
Frontline 1
Education 1

Center — Plan Page Content

The existing content stays (price block, badges, quick links, markdown guide, related blogs, disclaimer). But needs: - Replace tool-hero.html → tool-header.html (Zen header) - Add zen-migrated class to body - Migrate licensing.css from glassmorphism → Zen tokens (same 5-trap process as tools) - Breadcrumb updated to fit reading room pattern

  • Related tools: Licence Picker, Licensing Simplifier, ROI Calculator
  • Related blog posts (auto-matched by plan name — template already does this)
  • Compare with: Links to other plans in same category
  • Study guides: If plan relates to a cert (e.g., Security add-ons → SC-300)
  • Official links: Microsoft pricing page, M365 Maps
  • Keep minimal — "everything earns its place"

New Landing Page: /licensing-docs/

Similar to /study-guides/ — a standalone entry point with: - Hero with search - Category pills for filtering - Card grid showing all 50 plans with price + tagline - Grouped by category - Independent from the Licensing Simplifier tool (which stays at /licensing/)

URL structure: - /licensing-docs/ — Landing page (new) - /licensing/{plan-id}/ — Individual plan pages (existing, enhanced)

Current State (What Needs Changing)

Template: layouts/licensing/single.html

  • ✅ Rebuilt with 3-column zt-reading zt-reading--lic grid
  • Breadcrumb → h1 → price/badges → meta (verified + read time) → inline TOC → quick links → content → related blogs → disclaimer
  • No tool-hero.html — direct header in template (like cert-tracker pattern)
  • Product JSON-LD + FAQPage JSON-LD preserved

CSS: static/css/licensing.css

  • ✅ Was already 80% Zen-migrated from Z4/Z5 (0 rgba, 0 backdrop-filter, 0 :root)
  • 28 remaining hardcodes replaced: #334155→var(--border-emphasis), #475569→var(--text-muted), #1e293b→var(--border), color-mix→var(--accent-subtle)
  • 5,742 chars of dead .lic-single-* CSS removed (22% reduction)

Body class in baseof.html

  • ✅ Already had zen-migrated from Z4. Added licensing-docs section too.

New files created:

  • licence-nav.html — Left sidebar (50 plans, 13 hardcoded categories, collapsible, prices)
  • licence-companion.html — Right sidebar (tools, compare links, official links, blogs, CTAs)
  • layouts/licensing-docs/list.html — Landing page (hero, search, category pills, card grid)
  • content/licensing-docs/_index.md — Landing page content

Implementation Progress

Completed 27 Apr 2026 — Deployed commit 7b67d8e

Step Status Notes
Read all Zen Design System docs ✅ All 10 docs read (philosophy → licensing-reading-rooms)
Study blog + study guide 3-column pattern ✅ blog/single.html, cert-tracker/single.html, zt-reading.css, sg-companion.html
Migrate licensing.css to Zen tokens ✅ 28 replacements + 5.7KB dead CSS removed
Replace tool-hero.html → direct header ✅ Breadcrumb + h1 + price block + badges (no hero partial needed)
Add zen-migrated to baseof.html ✅ Already present from Z4. Added licensing-docs section too.
Create licence-nav.html partial ✅ 13 categories, hardcoded order, collapsible details, current highlighted, price shown
Create licence-companion.html partial ✅ Related tools, compare links (same category), official links, blog posts, CTAs
Rebuild single.html with 3-column grid ✅ zt-reading grid + mobile details fallback + inline TOC + reading time
Add zt-reading.css to licensing singles ✅ baseof.html condition: (and (eq .Section "licensing") .IsPage)
Create /licensing-docs/ landing page ✅ Card grid, search, category pills, CollectionPage JSON-LD
QA: Playwright light+dark, desktop+mobile ✅ 18 screenshots, all verified
Fix QA issues ✅ FAQ dedup, nav link fix, prose width verified, badge overflow
Polish round ✅ Reading time, inline TOC, category pills, dead CSS cleanup, verified date
Hugo build: 0 errors ✅ 1878 pages
Deploy ✅ Commit 7b67d8e pushed

Lessons Learned (for future 3-column migrations)

1. The Reusable Pattern

Every 3-column reading room follows the same recipe: 1. Add section to baseof.html CSS condition (line 59) for zt-reading.css 2. Add section to baseof.html body class (line 78) for zen-migrated 3. Create left nav partial (model on cert-nav.html or licence-nav.html) 4. Create companion partial (model on sg-companion.html or licence-companion.html) 5. Build single.html with <div class="zt-reading zt-reading--{modifier}"> 6. Add CSS to zt-reading.css for section-specific styles (nav, badges, etc.) 7. Mobile fallback: <details class="zt-toc-mobile"> inside the article

2. FAQ Duplication Trap

If plan/content pages have FAQ in BOTH markdown body AND front matter faq:, the template will render two FAQ sections. Check for this pattern: grep "## Frequently" content/{section}/*.md. If all pages have inline FAQ, skip the template-rendered FAQ and use front matter only for JSON-LD SEO.

3. CSS Was Already 80% Migrated

The Z4/Z5 batch migration passes had already fixed the heavy glassmorphism patterns (rgba white text, backdrop-filter, :root blocks). The remaining work was mostly Tailwind slate hexcodes (#334155, #475569, #1e293b) and color-mix() — about 30 replacements total. Check with trap detection commands before assuming a full migration is needed.

4. Dead CSS Cleanup Saves Significant Space

After rebuilding templates with new class names (zt-lic-*), the old class definitions (.lic-single-*) became dead weight. 5.7KB removed (22% of file). Always grep for orphaned classes after template rewrites.

The left sidebar nav header should link to the DOCS HUB (e.g., /licensing-docs/), not the complementary TOOL (e.g., /licensing/). The tool gets a secondary link: "Open Licensing Simplifier →". This keeps the information architecture clean — docs hub is the home, tool is a utility.

6. Prose Width Is Already Handled

zt-reading.css constrains prose elements (p, ul, ol, h2, h3, h4, h5) to max-width: 720px via .zt-reading-body. Tables, code blocks, images, and diagrams stay full-width. No extra work needed — just wrap .Content in <div class="zt-reading-body">.

7. Landing Page Quick-Jump Pills

Category-heavy landing pages (13 categories, 50+ items) benefit from quick-jump anchor pills below the search box. On mobile, make them horizontally scrollable with overflow-x: auto; flex-wrap: nowrap.

Key Reference Files

File Purpose
layouts/blog/single.html Blog 3-column template (gold standard)
layouts/cert-tracker/single.html Study guide 3-column template
layouts/licensing/single.html ✅ Licensing 3-column template (new)
layouts/licensing-docs/list.html ✅ Licensing landing page (new)
layouts/partials/licence-nav.html ✅ Left sidebar nav (new)
layouts/partials/licence-companion.html ✅ Right companion (new)
layouts/partials/cert-nav.html Left sidebar nav (reference pattern)
static/css/zt-reading.css All 3-column CSS (sidebar, companion, responsive)
static/css/licensing.css Licensing CSS (cleaned)
content/licensing/*.md 50 plan pages with front matter
content/licensing-docs/_index.md Landing page content