Kill the sticky nav

By Felix Salmon
October 11, 2013
Reuters Next. But at this point I will seriously donate a substantial amount of money to anybody who can build a browser plugin which automatically kills all persistent navbars, or "sticky navs", as they're also known.

" data-share-img="" data-share="twitter,facebook,linkedin,reddit,google" data-share-count="true">

It might have been the Slate redesign which pushed me over the edge, I’m not sure. Maybe it’s just PTSD from Reuters Next. But at this point I will seriously donate a substantial amount of money to anybody who can build a browser plugin which automatically kills all persistent navbars, or “sticky navs”, as they’re also known.

It’s impossible to identify who started this trend, but it has become the single most annoying thing on the news web, recently overtaking even the much-loathed pagination for that title. If you’re reading a story on Pando Daily, then no matter what page you’re on, no matter where you are in the story, the top of your browser window always looks like this:

Screen Shot 2013-10-11 at 9.16.09 AM.png

The Businessweek.com version is even fatter, and adds lots of color:

Screen Shot 2013-10-11 at 9.25.11 AM.png

Meanwhile, if you’re reading a story on Slate, then it all looks perfectly normal until you start scrolling down, at which point the persistent nav magically appears, looking something like this:

Screen Shot 2013-10-11 at 9.22.40 AM.png

These navbars have their differences, but they invariably include a suite of sharing tools, the name of the website you’re reading, and usually some kind of drop-down menu (or, in the case of Businessweek, ten of the things). They take over the most important part of your precious browser real estate, and the only way to make them disappear is to leave the website entirely.

Readers hate these things, for good reasons. Many of them are so badly designed that when you hit the spacebar to scroll down one page, the next couple of lines that you want to read get hidden behind the navbar, and you need to scroll back up to see them. All of them confound intuition: the page/scroll metaphor has become so ubiquitous online that we don’t even think of it as a metaphor any more. The text sits on the page, and when you scroll, the page that you’re looking at moves up towards the top of the window. If something at the top of the page doesn’t move, then that’s just as distracting as looking at an otherwise static page and seeing a single element which does move. It drags your attention away from the thing which you want to be concentrating on — the story — and towards something with no real informational content at all.

A quick thought experiment should suffice to prove just how evil sticky navs are. Suppose that instead of featuring navigational aids, these things instead featured some kind of banner ad. In order to read any story on a site, you’d need to be constantly staring at a page with a sticky unit saying “Drink Coca-Cola” at the top. No editor would countenance such a thing: annoying ads are one thing, but they all at least feature a little “x” which you can click on to make them go away. And yet there’s one kind of branding which seems to be the exception to this rule — and that’s when the brand in question happens to be the very publication you’re reading.

None of this should come as any surprise: we went through all of this back in the 1990s, when some bright spark invented frames. Remember frames? Maybe Google can help you out:

Screen Shot 2013-10-11 at 9.40.43 AM.png

Sticky navs are just a whiz-bang version of frames, only without the one tiny justification that frames had, which was that they stopped people having to reload navigational elements many times over when they were trying to make their way around a website on their dial-up modems.

So what is the justification for these horrible, intrusive things? The first, and most important, is that they serve a branding function. You know what a brand is, right? It’s a piece of hot metal which is seared into your flesh so that it leaves an indelible mark. Historically, sites used their home page to define themselves in the minds of readers, and would even complain quite vociferously if people dared link directly to articles. Today, however, in a world where site designers like to say that “every page is the home page”, publishers have decided not only that every page must serve the same branding function that the home page used to have, but even that the branding must persist even once you’ve started scrolling down. This does nothing for advertisers, and does nothing for readers, but it tends to make proprietors happy, and that, it seems, is all that matters.

The other reason, which is more insidious, is the way that everybody wants to be an app these days. Some services, like webmail and Twitter and Facebook, really are apps, at heart, and their websites are full of persistent elements which nobody minds. They’re a frame within which outside information is presented, and in that case persistent elements are fine, even desirable. And as traffic becomes increasingly mobile, publishers try very hard to create an immersive environment for their tablet-based content. Which is fine. People use tablets in a very different way to how they use the web on a desktop or laptop, and page design for tablets should be different than page design for the web. The problem is that designers are creating things which work very well on tablets, and then just porting that app-like experience over to the desktop web, even though no one actually wants an app-like experience when reading a story on their computer. The worst offender here is Quartz, which desperately wants desktop web browsers to behave as though they’re tablets, and which as a result has not one but two sticky navs taking up a huge amount of screen real estate.

So please, publishers, lose your vanity, and kill the sticky navs. If I’m reading a story on Slate, have no need whatsoever to be reminded of the headline at all times — in extra-bold all-caps, to boot. (Stop shouting at me!) If I’m being trolled by Sarah Lacy on Pando Daily, she should want my attention, rather than trying to inform me that there’s a section of her site with video on it. And when I start reading a long story in Businessweek’s beautifully-designed print magazine, and then want to finish it when I’m at my computer, there is no reason at all to hit me over the head while I’m doing so with an incoherent series of colored blocks. If you give me my browser window back, I’ll be much more avid, and much less resentful, when it comes to consuming your content. Which is what both of us really want, right?

19 comments

We welcome comments that advance the story through relevant opinion, anecdotes, links and data. If you see a comment that you believe is irrelevant or inappropriate, you can flag it to our editors by using the report abuse links. Views expressed in the comments do not represent those of Reuters. For more information on our comment policy, see http://blogs.reuters.com/fulldisclosure/2010/09/27/toward-a-more-thoughtful-conversation-on-stories/

I remember using Mosaic in the ’90′s, and then switching to Netscape, and then frames came out. Netscape supported frames; Mosaic never did. I switched back to Mosaic.

Posted by dWj | Report as abusive

It depends on how the feature is used.

For example, if you have a menu to the right, you can use the feature to make sure that it is always available to the user.

Posted by Matthew_Saroff | Report as abusive

I’ve been using the Reader feature of Safari more and more to get away from this junk.

Posted by aforkosh | Report as abusive

Are the sticky nav bars really worse than pop up box when you select text?

Posted by Nathan_M | Report as abusive

If you use the Adblock extension it is pretty easy to eliminate the nav bar. Just right-click on the nav bar and select “Block this ad”, you may have to fiddle with a slider a bit to make the bar go away, but once accomplished you never see the bar again.

Posted by dannmer | Report as abusive

The problem isn’t the sticky nav bar, it’s what they put in it. It could be a convenience, but is usually more of an internal ad. Complain about that.

Posted by KenG_CA | Report as abusive

The nav bar can be removed with Adblock. Right-click on the nav bar and select “Block this ad”. Move a slider back and forth and the nav bar is gone.

Posted by dannmer | Report as abusive

Right along with this is the evil practise by many sites to no longer allow a “read on single page” option. The worst culprit of this is New York Magazine. You used to be able to get a print story option but that’s gone now too.

Posted by GregHao | Report as abusive

Personally I don’t find the small persistent navbars quite so intrusive, although the Slate one does jar on my nerves. However, there already is a cure for this – browse using Apple’s Safari browser. This has a “Reader” function whereby a little button appears in the address bar. You click on it, and the page changes to a very readable nav- and ad-free version of the article with options to email or print the story.

As I’m using a Mac when the print option appears I also have the possibility to click on Save as pdf, Mail pdf and so on…

So, just buy a Mac! They just make things easy for users.

Posted by FifthDecade | Report as abusive

I either view the web page with a Reader bookmarklet (there’s lots of them out there, Mac completely unnecessary),

… or I blow the individual sticky navs with AdBlock Element Hiding Helper for Firefox, which lets you select any element on the page, then iterate upwards (outwards) through the DOM tree, until you have a selector that can kill that specific element.

If you know how CSS selectors work, and don’t mind playing with something like jQuery in the developer console and find the right element with $(‘div#id’) etc, you can use that CSS selector with AdBlock too.

Posted by BarryKelly | Report as abusive

Install AdBlock plus, and use these filters:

slate.com###article_rollup
slate.com###article_footer_tiles
slate.com##.footer-base
slate.com##.footer-base-toc
slate.com##.parsys.iparsys.contentSideba r

Of course, I also apply some similar Element Hiding Rules to Facebook (to nuke the chat tool, and the ad sidebar), and other sites…

Posted by Auros | Report as abusive

GregHao — another plugin I use is Redirector
https://addons.mozilla.org/en-us/firefox  /addon/redirector/

which lets you establish a pattern for URLs, and then automatically jump to another URL that’s a modified version of the pattern. So, for instance, for Slate I do:

Include: http://(\w+\.)?slate.com/articles/(\w+/. *)\.html
Exclude: http://(\w+\.)?slate.com/articles/(.*)\.  (single|\d+)\.html
Change to: http://$1slate.com/articles/$2.single.ht ml

Which basically identifies all Slate articles, checks to see if I’m already at the single-page version, and if not, takes me there. Without ever even starting to load the paginated version.

You can build similar patterns for NYTimes, and most other news sites.

Posted by Auros | Report as abusive

Also, you really shouldn’t need to get as fancy as using something like jQuery or the dev console, to hide elements using ABP — there’s a “select an element to hide” tool that’s really intuitive — you point at the thing you want to kill, and then you can use W and N to Widen and Narrow the segment of the document, and once you have it, you hit S to select, and it creates the appropriate rule.

https://adblockplus.org/

I believe it’s available for Chrome, too.

Posted by Auros | Report as abusive

Felix, go give your money to Mozilla for Firefox, and Kim Brandt of the YARIP (Yet Another Remove It Permanently) add-on.

I just installed it and spent a minute nuking the businessweek headers and on reload they are forever gone. It’s not quite perfect – they’re gone even on page load, but you don’t need them anyway.

Posted by PhilH | Report as abusive

I agree totally. There should be no needd for adblocks or other workarounds. If I want to post something to the twit or farcebook, I will. Slate (and the Times) also had these creepy sliding sort-of pop-up that prompted a reader to go to some other story. It seems as though Slate has gotten rid of that particular problem.

A more pernicious(?) issus is that we are discussing “respecable” sites that are becoming trivial, bite-sized, and, eventually irrelevant. The Slate redesign (and, oddly, the NY Post) only make sense if you read them on a phone. The only word I can think of, is “bogus.” But then, my brain may have already been shrunken by NPR.

Posted by steamboatbill | Report as abusive

Though of course, print media has always put “branding” and a limited nav bar a the top of every page–the running head that told you what you were reading and where you were in the document. What magazine or newspaper did not put their name on every page?

Posted by Moopheus | Report as abusive

I realize this is an opinion article and yes, all the examples you gave do have really annoying sticky navs… but your reasoning was completely baseless and nonsensical.

Firstly, how did you make a direct comparison between frames and sticky navs? Had you actually clicked the first, second or even third link that appears after searching for ‘why frames are bad’ you’d notice that the main reasons why frames are discouraged is rarely screen real estate or even the fact that they can be an eye sore. Frames are primarily discouraged for technical reasons like bad SEO, problems with UX (bookmarking, using links, etc.).

To prove that stick navs are evil your thought experiment was to suppose that they contained third-party ads? By that same token, anything that can theoretically be exploited is evil? The publication’s brand being on display is (at least in most cases) a side effect born out of a web convention and not an intentional marketing gimmick. What convention is this exactly? Click any logo on any site… What happens? You get taken to the site’s homepage. Most people don’t even think about it. You just ‘know’ that the most likely outcome of clicking a logo is that you will be taken back to the homepage.

When it comes to designing a webpage it would make sense to stick your logo at the top wouldn’t it(usually in or above the navbar)? Now if I want to turn that navbar into a sticky nav I have two choices: a) Keep the logo as the home button or b) When a user scrolls down change the logo into a little house icon or the word ‘home’. But how do you justify the extra CSS/JS effort that is required to implement this functionality if it adds little to no value? You can’t really.

When used correctly sticky navs can be very useful for quickly navigating a website. The problem is that in all of your examples their execution of the sticky nav is awful! In all cases they failed to optimize the aesthetics of the navbar in order to make it feel as seamlessly and unobtrusive as possible.

Slate: Personally I find the navbar is wider (in height) than I would have liked. However it makes sense since it is proportional to the large font-sizes they have opted for. The whole site has a ‘for mobile’ feel, but that would make sense if the majority of their visitors are in fact on mobile devices. Maybe they do not have enough traffic from large screen devices (desktop) to warrant the effort required to make their site truly responsive. They have also made some bad design decisions – the thick black border really is distracting and they could have just gone with a more subtle dropshadow.

BusinessWeekly: Way to wide and colorful for reading articles.

PandoDaily: Easier to get used to than the other two, but still fairly chunky and with the default fonts all being quite large, it really feels like I should be reading it on a tablet for the best user experience.

Here are some examples of sticky navs I like (definitely not the best examples out there, but they are not bad).

http://getbootstrap.com/css/ – The purple is quite bold and prominent, similar to PandoDaily’s. The difference is their default font is a lot smaller, and they ahve used a single flat colour which is a lot less distracting than PD’s stripy nav bar.

http://www.google.com/nexus/7/index.html – this sticky nav really works well with their content type and is hardly distracting.

With all due respect, in regards to this post, it appears you have stumbled upon a problem/annoyance of this ‘mobile-first’ web trend but I don’t think you quite grasped the actual reason that is causing it.

Posted by TheEpicDictator | Report as abusive

Stickynavs are not meant to be a nuisance. If used correctly its suppose to aid navigation. not to add clutter.

if you’re browsing though an ipad, it may take up screen real estate, especially if its on a mobile phone.

but it would do wonders for desktop browsing, where jumping off to other parts of the site is just easy. it eases of content clutter at the footer to help users jump off as well as empty white space on either side of the article that can be used to help users.

checkout right bar stick nav from daily bests.
http://www.thedailybeast.com/articles/20 13/12/03/vin-diesel-pays-tribute-to-paul -walker-the-kardashians-christmas-card-c ost-250k.html

Posted by Ike193 | Report as abusive

I absolutely disagree! sticky navs are a blessing. There’s not that irritates me more than reading a long article and HAVE TO SCROLL BACK to the very beginning to jump to another part of the site. ads are bad everywhere. Sticky navs are not. Also in regards to frames, the metaphor that a web page needs to be like a print page is outdate and extremely restraining. The whole point of a webpage is that can display dynamic content, therefore frames and static areas on a page are more than welcome when used properly. Don’t you remember how annoying is going back and forth in a book to the index to find other sections of the book? why you want that in a webpage?

Posted by Jess_27 | Report as abusive