Chris's Wiki :: blog/web/BadHeaderFooterDesignElements

Some terrible article page design elements on the modern web

July 30, 2017

Late last August, I tweeted the following rant:

I'm reading your article in Firefox's reader mode because your fancy, very pretty page layout sucks and gets in the way. Yes, yours.

You can improve your article layout immediately by removing the permanent bottom bar that wants me to share it on Twitter and Facebook.

Is your company's branding more important than your article? Your permanent top bar with your brand identity says that it is, to me.

I know, you're posting articles on the web primarily to build your brand identity. But you can be subtle about it, not rub it in my face.

(Since then, the specific article that triggered my rant (via) seems to have lost the bottom bar of sharing links but I think its top bar has gotten worse.)

I regret to say that nothing much has changed here in the past almost a year. What John Gruber has called persistent sharing dickbars are if anything more prevalent (although you can sometimes make them go away), and I haven't noticed any reduction in the number of sites with persistent branding headers either. In fact a permanent line or three at the top seems to now be a standard design element for everyone, and this remains just as terrible as it was last August.

(This is on a desktop. On my phone, sites usually have slightly less clutter but suffer more from what they have because a phone has less screen space.)

Vertical space is and always has been a precious resource (and the move to displays with a 16:9 aspect ratio hasn't helped). Stealing even a small portion of it is hostile to readers; just as with red, very little is actually that important. Well, at least to readers. Readers do not care that much about either sharing things on social media or someone's brand identity. The someone may care that much, or they may just be not thinking about it.

(Designers or people approving designs may even be so habituated to seeing these obnoxious things that brand headers and sharing footers no longer register as obnoxious; they've become something you ignore.)

These days I have become more and more trigger-happy with uBlock Origin's element zapper mode. I may not be quite willing to make people's header bars go away permanently because who knows, I may need something from them sometime. However, I'm certainly willing to make such bars go away while I'm reading an article, so I do.

(Sharing footers too, and they go away permanently if I can identify what to block and it seems worthwhile, which is mostly a function of how often I expect to visit the site. I should probably be more trigger-happy with permanent blocks too.)

Comments on this page:

By -dsr- at 2017-07-30 07:27:20:

Reader mode has other advantages:

- changes the font to a familiar one, so I can think about what I'm reading instead of marvelling at the descender on that 'g'.

- makes the font black instead of the trendy low-contrast grey

- makes the font the size that my eyes find easy on the screen that I'm using

- provides a decent width instead of 4-5 words across in a tight column

and one inconsistent disadvantage:

- usually eliminates most of the graphics that I would actually like to see, e.g. the graphs, figures, and photographs belonging to the article rather than to the website's brand.

By seano at 2017-07-30 10:37:40:

I’ve been using this bookmarklet (found via Gruber, I think) liberally, which simply kills all position:fixed elements. That takes care of headers, footers, email signup boxes, and a few other annoyances of the “Modern Web."
function(){
    (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]);}}})()})()

Written on 30 July 2017.

«	The differences between how SFTP and `scp` work in OpenSSH

Modern web page design and superstition