sticky vs fixed footers

[dogbrain]

this might be a silly question, but i notice some sites have their footer positions set to sticky while others are fixed at the bottom of the screen. my site falls into the former category, but I realize this may come off as obtrusive (since my footer holds some licensing & contact information in an otherwise completely nonprofessional and silly page)... i do tend to overthink these sorts of things but I'd love to know what you guys think about this 

do you think it matters in indie sites? what position do you have you footer set to, and why? am i just giving this too much thought?? xD

[mortaki]

I don't think it particularly matters; do what you like the look of best.

My site has a bunch of mushrooms that stick to the bottom of the page and the actual footer is all the way at the bottom and you need to scroll to see it. It just has some info about when the site was established, I believe. So I've kind of done both lol.

[larvapuppy]

Personally I find sticky elements obtrusive if they cover more than, say, 10% of the screen height. Whenever I'm on a site where I'm trying to read something and half of the screen is taking up by the header and navigation it pisses me off. But that usually happens on more modern sites. I rarely see it on web revival sites.

Maybe you can ask yourself if the footer being sticky has a purpose? Like, does the user really need to be able to see and access that info at all times, or can they easily just scroll to the bottom like normal to see that stuff? People are generally used to seeing copyright info/credits at a bottom of a page so users will likely head down there if they need to find it anyway. But if you think having the footer be sticky adds something to your design/utility, or if there is some decorative element to it, then maybe it's nice to have it sticky. At the end of the day it's your site and different people get annoyed by different things, so you shouldn't make all your decisions based on what others think is annoying - for example I'm sure my site's pastel, decorative look annoys some people, but I like the way it looks so I won't change it. Just weigh the pros and cons and make your decision based on that.

[Adam]

Another consideration might be how you want the page displayed at other screen sizes.
A small sticky footer/header/sidebar might look fine on a large screen, but cover an excessive portion of the page or jitter around and make it difficult to read on a small screen. If it's a fixed element on the page, this isn't an issue.

The code to make it "sticky" might not play nice on some browsers, too. I think it's worthwhile to keep things simple because that makes it predictable and accessible.

[nipchip]

+1 on considering how the sticky footer would look on smaller resolutions.

Alternative less intrusive implementations off the top of my head:

• A sticky sidebar on desktop resolutions! Have it float next to the main content. On mobile screens you'd probably still want the information in the footer.
• A regular footer at the bottom. It's where people expect to find licensing and contact information, if people want to find how to reach you they'll scroll down anyway.
• A dedicated /contact page.
• Put the info in a sticky header. Somewhat less intrusive than a sticky footer.

[xwindows]

I normally run my screen at 768p, 720p, and lower; so I have a lot of disdain for sites which plastered its own (usually very thick) header or footer as a fixture on my browser's viewport via `position: fixed` CSS rule-- which I figured this was the "sticky footer" that OP was referring to.

Doing so makes my view of the site a short window and hamper readability as well as my ability to skim. Sometimes, the view would be so short to the point that I couldn't see a single paragraph/image in full, despite that my screen resolution was supposed to be enough to handle them. When encountering such thing, I would flick the trigger of CSS-killer cannon, tearing off that content-obstructing peepwalls into pieces, to continue reading in peace.

I would never inflict such thing on my own websites.

Note that unlike some other comment here, I see sticky header (1) and footer equally as nuisances. My keyboard has perfectly-functional Home and End key, and I know where the navigation header and info footers are on the page; I can get to that by a single flick of finger if I wanted to. Dangling them in front of my face all the time while I was trying to read the actual substance between, wears out my patience fast.

For regular footers (which I figured that's what the OP referred to as "fixed" footer?) which would stay at the end of content even they weren't filling to the bottom of the screen: I don't mind them at all, that's a just how HTML works; and it's the way I normally do whenever I add footer to whatever pages I crafted.


However, for sake of adding something useful other than just stating my own opinion here: it might be slightly off-topic, but I would like to note that there is "the third way" too:

Once upon a ye olde time of 2007, some dude came up with a magic CSS sticky footer hack that keeps it staying at the end of scrolling content when the browser's viewport was too short to display them all-- like a regular footer; but once the browser viewport became tall enough to have space below the content, this footer would now magically stick to very bottom of the window-- like a "sticky footer", instead of dangling at the end of content.

It was done with no JavaS'creep, in CSS2-compatible (2), browsers-portable, and *gasp* IE6-ready way. The only catch is you must know (or prepare to allocate surplus of) the height --in EM, pixel or whatever-- that your footer is going to have in advance. (3)

Following link is the original demonstration and the code... but note that because Internet Archive's banner interferes with it, you MUST disable JavaS'creep here for the thing to display correctly:

https://web.archive.org/web/20160206003022/http://ryanfait.com/sticky-footer/

Rest in peace Mr. Fait-- the dude who came up with this great piece of style.


(1) Header plastered with `position: fixed` also bears another sin: it interferes with links to subsection or paragraph. When such header was in place, it covered up few (or several) topmost lines of the current viewport; which when such link was clicked, the browser would position the link's target as the top line of the viewport-- right behind that pesky obstruction, which caused mental double-take about what exactly that link had led me to; and required me to scroll back for several lines to actually see where the darn thing actually was. Nightmare for long and cross-reference heavy pages, and basically all pages with table of contents.

It requires another horde of workarounds to fix such links/anchors to work sufficiently again; so a number webmasters who inflicted such careless obstructions in the first place would sometimes just left them wonky like that, and I'll fire CSS-killing cannon whenever I realized such wonkiness were there.

(2) No media query, or CSS/MovingGoalpost was involved.

(3) When you use this code, no usability would be harmed even when your actual footer content overflown the allotted height. The only "imperfection" you would see in that scenario was when the browser's viewport height was high enough for both content + actual footer height to supposedly be entirely on-screen, the scrollbar would not disappear.

In practice, it would be unusual to actually see such imperfection in practice: because the most common reason of such overflow was low horizontal resolution causing text to break into more than expected number of lines. But screen with low horizontal resolution usually come with low vertical resolution to, which caused the content to scroll-- hiding away the imperfection in such case anyway.