Site Updates: Fixed Footer and Smarter Page Titles

August 29, 2025 Foreman Learning Team
Site Updates

We've rolled out two important site-wide improvements that enhance navigation, user experience, and search engine visibility across Foreman Learning.

Fixed Footer: Always Within Reach

You may have noticed that our footer now stays fixed at the bottom of your viewport as you scroll through pages. This seemingly simple change brings several important benefits:

Technical Implementation

After evaluating several approaches, we implemented a solution that balances simplicity and performance:

  • Fixed positioning using position: fixed; bottom: 0; left: 0; right: 0; width: 100%;
  • Dynamic spacer that automatically adjusts its height to match the footer
  • JavaScript measurement that recalculates on resize and content changes
  • High z-index to ensure the footer remains above other content

We specifically avoided the flexbox-based "sticky footer" pattern that would have required adding min-vh-100 and d-flex flex-column to the <body> element, as this approach would have affected spacing throughout the site.

User Benefits

  • Consistent access to important links and site navigation
  • No content jumping as you navigate between pages of different lengths
  • Clear visual boundary at the bottom of the viewport
  • Mobile-friendly with appropriate sizing on smaller screens

The footer contains links to our privacy policy, terms of service, and contact information—all now permanently accessible regardless of where you are on a page.

Standardized Page Titles: Clarity and SEO

We've implemented a site-wide standardization of document titles following the format: {page title} | Foreman Learning

Technical Implementation

This change was implemented through our central header.php template:

  • Smart detection to avoid duplicating "Foreman Learning" if already present
  • Consistent variable handling via the $page_title variable
  • Fallback mechanism for pages without an explicit title
  • HTML escaping to prevent potential XSS vulnerabilities

This approach ensures that all pages—whether they're tools, blog posts, or static content—follow the same title pattern without requiring individual page updates.

User and SEO Benefits

  • Clearer browser tabs that show both the specific page and site identity
  • Improved bookmarking with more descriptive saved entries
  • Better search engine results with consistent title formatting
  • Enhanced browser history making it easier to find previously visited pages
  • Stronger brand consistency across all site pages

This standardization follows SEO best practices by keeping titles concise while including both specific content identifiers and our brand name.

The Technical Side: Behind the Scenes

Footer Implementation

For the technically curious, here's how we implemented the fixed footer:

/* CSS in footer.php */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
}

/* Dynamic spacer script */
const footerSpacer = document.createElement('div');
document.body.appendChild(footerSpacer);

function updateFooterSpacer() {
  const footerHeight = document.querySelector('footer').offsetHeight;
  footerSpacer.style.height = footerHeight + 'px';
}

// Update on load, resize, and mutation
updateFooterSpacer();
window.addEventListener('resize', updateFooterSpacer);

Page Title Standardization

And here's how we standardized page titles:

/* In header.php */
// If page_title is set but doesn't already contain the site name
if (isset($page_title) && strpos($page_title, 'Foreman Learning') === false) {
  $page_title .= ' | Foreman Learning';
}
// Fallback if no title is set
else if (!isset($page_title)) {
  $page_title = 'Foreman Learning';
}

Accessibility Improvements

Both changes also bring accessibility benefits:

  • Fixed footer provides consistent navigation landmarks for screen readers
  • Standardized titles improve screen reader announcement of page changes
  • Better context for users navigating via keyboard or assistive technology

Browser Compatibility

We've thoroughly tested these changes across:

  • Chrome, Firefox, Safari, and Edge on desktop
  • iOS and Android mobile browsers
  • Various screen sizes from small phones to large monitors

The implementation uses standard CSS properties and vanilla JavaScript for maximum compatibility.

What's Next: Continuous Improvement

These changes are part of our ongoing commitment to refining the Foreman Learning experience. Coming up on our roadmap:

  • Enhanced keyboard navigation throughout the site
  • Improved color contrast for better readability
  • Reduced motion options for users with vestibular disorders
  • Further performance optimizations for faster page loads
  • Expanded meta descriptions for better search engine snippets

Your Feedback Matters

We're always looking to improve. If you have thoughts on these changes or suggestions for future improvements, please let us know through our contact form.

Thank you for being part of the Foreman Learning community!