Difference between revisions of "Fixed Page Headings"

Revision as of 07:21, 30 May 2019

Fixed Header / Sticky Header / Fixed Heading / Sticky Navigation

This is a design technique that has become popular to a fault from around 2016 - 2018. Using a fixed heading panel is a way web developers have targeted audiences using mobile devices and hold them in the vertical orientation when visiting a web site. Fixed headers will not scroll down the page and continue along with the user. Rather the background image and contents inside the header appear to stay fixed as the user scrolls. This makes the entire header behave as its own independent “panel” offset by the rest of the layout.

Top #7 on 10 Things a Website Should Never, Ever Do (in web design) by Kyle Schaeffer states the following:

7. Never use fixed position without a fallback

A "fixed" element in the browser window is one that stays on the screen, even as you scroll down the page. It’s a simple CSS technique, but it’s been amazingly popular in recent months. One thing I’ve noticed in all these fixed designs is the failure to provide a fallback for users who are on smaller screens. The truth of the matter is that the web isn’t just for desktops any more. Internet connectivity is coming in all sorts of shapes and sizes: desktops, laptops, mobiles, tablets, e-readers, gaming consoles, and even refrigerators (yes, even refrigerators). The future promises only more diversity in internet-connected devices, and that means you can’t assume users will have a large viewing area on which to see your website.

Although Schaeffer argues that it is the small screen devices a developer using a fixed position header is neglecting, it is ironically the mobile device users that are being targeted. The fixed header isn't an issue on a "tall" screen, like a mobile phone held in the vertical position. Unfortunately, for the wide screen PC user, the fixed header is an ugly obstacle interfering with the site visitor's access to information. Now the visitor has to do more scrolling while trying to peep though a wide but short slit that is the only part of the page that scrolls.

Listed as Common Mistake #1: Large, Fixed Headers on freelance web designer Bojan Janjani's helpful article he opines:

We’re seeing more and more of tall, sticky headers — branding blocks and menus that have a fixed position and take up a significant amount of the viewport. They stay glued to the top and often block the content underneath them. I’ve seen headers on high-production websites that are over 150 pixels in height, but is there real value behind them? I might be pushing it a little bit, but large, fixed headers remind me of the dreaded and now ancient HTML frames. Yikes!

Ironically this is what I think off too, the old "Frames" of HTML past. We were all told not to use frames to create a static header and now the trend is going back to disabling part of the site visitors viewing area once again.

Developer Alisdair McDiarmid offers a "bookmarklet" to address the problem of sticky headers:

(function () { 
  var i, elements = document.querySelectorAll('body *');

  for (i = 0; i < elements.length; i++) {
    if (getComputedStyle(elements[i]).position === 'fixed') {
      elements[i].parentNode.removeChild(elements[i]);
    }
  }
})();

Bookmarklet for Any Browser

javascript:(function () {
var i, elements = document.querySelectorAll('body *');

for (i = 0; i < elements.length; i++) {
if (["sticky", "fixed"].includes(getComputedStyle(elements[i]).position)) {
elements[i].parentNode.removeChild(elements[i]);
}
}
})();

Resources

• Fix the sticky top navigation bars on websites