Comments on: Kill the sticky nav http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/ A slice of lime in the soda Sun, 26 Oct 2014 19:05:02 +0000 hourly 1 http://wordpress.org/?v=4.2.5 By: Jess_27 http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48898 Fri, 27 Dec 2013 03:53:37 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48898 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?

]]>
By: Ike193 http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48747 Wed, 04 Dec 2013 06:23:01 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48747 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

]]>
By: TheEpicDictator http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48372 Wed, 16 Oct 2013 17:14:49 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48372 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.

]]>
By: Moopheus http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48326 Tue, 15 Oct 2013 11:49:28 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48326 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?

]]>
By: steamboatbill http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48301 Sun, 13 Oct 2013 02:56:10 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48301 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.

]]>
By: PhilH http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48299 Sat, 12 Oct 2013 18:46:46 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48299 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.

]]>
By: Auros http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48298 Sat, 12 Oct 2013 18:42:26 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48298 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.

]]>
By: Auros http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48297 Sat, 12 Oct 2013 18:38:19 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48297 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.

]]>
By: Auros http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48296 Sat, 12 Oct 2013 18:34:52 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48296 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…

]]>
By: BarryKelly http://blogs.reuters.com/felix-salmon/2013/10/11/kill-the-sticky-nav/comment-page-1/#comment-48292 Sat, 12 Oct 2013 12:42:46 +0000 https://blogs.reuters.com/felix-salmon/?p=22600#comment-48292 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.

]]>