Basic Page (Long)

The long-form basic page layout is designed for comprehensive content that requires extensive information presentation while maintaining readability and user engagement. Use this pattern for detailed policy documents, comprehensive service guides, research reports, and in-depth informational content that spans multiple sections. The layout emphasizes content organization, navigation aids, and progressive disclosure to help users navigate lengthy documents effectively.

Do

  • Implement a table of contents - provide jump links to major sections for easy navigation within long pages.
  • Use progressive disclosure - break content into logical sections with clear headings and subheadings for scannable structure.
  • Include section anchors - add linkable anchors to major headings so users can share specific sections.
  • Provide reading time estimates - help users understand the time commitment for lengthy content.
  • Add "back to top" functionality - include smooth scroll navigation to help users return to the beginning.
  • Use consistent section formatting - maintain uniform styling and spacing throughout the document.
  • Include summary sections - provide key takeaways or executive summaries for quick reference.
  • Optimize for printing - ensure long content formats properly when printed, with page breaks and headers.

Don't

  • Don't create endless scrolling - break extremely long content into multiple pages when it exceeds reasonable length.
  • Don't neglect mobile experience - ensure long-form content remains navigable and readable on small screens.
  • Don't forget loading indicators - provide feedback when sections or content are loading dynamically.
  • Don't ignore content hierarchy - maintain clear visual distinction between different levels of information.
  • Don't skip accessibility landmarks - use proper ARIA landmarks to help screen readers navigate long documents.
  • Don't overlook performance - optimize images and content loading for documents with heavy media content.
  • Don't create orphaned sections - ensure all content sections connect logically to the overall page flow.
  • Don't assume linear reading - design for users who may jump between sections rather than reading sequentially.

Layout

The example below demonstrates a comprehensive long-form page layout with advanced navigation features, content organization tools, and accessibility enhancements. Shows how to structure extensive government content with table of contents, section anchors, and progressive disclosure while maintaining user engagement and readability throughout lengthy documents.

Loading preview...
Open example in a new tab

Content Guidelines

  • Structured document hierarchy: Organize content with clear main sections, subsections, and supporting details using consistent heading levels.
  • Scannable formatting: Use bullet points, numbered lists, callout boxes, and visual breaks to make long content digestible.
  • Strategic content chunking: Group related information together and use white space effectively to prevent cognitive overload.
  • Cross-referencing: Include internal links between related sections and external links to supporting resources.
  • Key information highlighting: Use callout boxes, summaries, or emphasis styling for critical information users shouldn't miss.
  • Contextual navigation: Provide section-specific navigation aids and progress indicators for multi-part content.

Implementation Considerations

  • Content loading strategy: Consider lazy loading for images and media in long documents to improve initial page load times.
  • Search functionality: Implement in-page search capabilities for documents that exceed typical reading length.
  • Bookmark support: Enable users to bookmark specific sections and return to their reading position.
  • Content versioning: Establish clear version control and update notifications for policy documents and regulations.
  • Export options: Provide PDF download options for users who prefer offline reading or need to share documents.
  • Analytics integration: Track user engagement patterns to identify where readers typically exit or spend most time.
  • Content maintenance: Create workflows for regular content audits and updates to keep lengthy documents current.

Accessibility Features

  • Document structure: Uses proper heading hierarchy (H1-H6) and semantic HTML to create a logical document outline.
  • Skip navigation: Provides skip links to main content sections and table of contents for keyboard users.
  • Reading flow: Maintains logical tab order and focus management throughout long-form content.
  • Content landmarks: Uses ARIA landmarks to identify major document sections for assistive technology.
  • Alternative formats: Supports screen readers with proper heading structure and descriptive link text.
  • Zoom compatibility: Ensures content remains functional and readable at 200% zoom and higher magnifications.
  • Reduced motion: Respects user preferences for reduced motion in scroll animations and transitions.
Updated: Dec 02, 2025