18

I am currently completing an online design course, and while watching one of the set course videos, the instructor advised:

The [website] footer must always span the entire width of the screen.

However, no explanation was given as to why this might be. Does anyone know where this idea comes from and what the reasoning for it is?

  • 13
    Artistic rules are there as guidelines. The more you know your medium the more you can break the rules. – Mayo May 30 '16 at 12:17
  • Did they specify what the reader will expect to be in the footer? – Michael Schumacher May 30 '16 at 15:24
  • @MichaelSchumacher not that I recall, and certainly not in the same part of the video. – Peter David Carter May 30 '16 at 16:44
  • 5
    +1 for questioning rules. Many people just blindly follow them. – kevin May 30 '16 at 18:45
  • 1
    It doesn't because not every website is designed to span the width of the screen; some have fixed maximum width to ensure that things to get spread out too much, and in this case both the header and footer will be centred on the page. There are also examples of floating headers and footers that don't span the width of the page, so I think it just depends on the type of site/design. – Michael Lai May 30 '16 at 21:46
10

That's kind of oldschool. We like to say "Never touch a running system" but violations against this doctrine are the fuel of progress.

Personally, I have also used a 2 column website where the footer was only displayed at the left (ca. 40% width) site and no one had a problem with it.

The reason why this is done seem to be the familiarity.

But I also have seen a lot of pages with footers of 80-60% width or no footers at all.

Examples:

http://www.cantilever-chippy.co.uk/

http://www.mecannical.com/

Sadly, the original site is down: enter image description here

  • The course also mentioned anchoring the site. This was in a colour design section, where it suggested using slowly darkening colours to give the site a feeling of being grounded, but I wonder if perhaps a full-width footer might achieve a similar effect. I note in the first example that the footer division itself and its background colour do span the entirety of the page, while the images and text within are the parts which only span a percentage of the page width. The second footer spans the full width of the main page, while the containing section seems more background than content. – Peter David Carter May 30 '16 at 12:09
  • Third one... I very much like how you've created a subtle anchoring effect using... I want to say sympathetic geometry, but I'm not entirely sure if that's an actual term... – Peter David Carter May 30 '16 at 12:18
7

It doesn't.

They probably should have stated that it's the most usual design pattern. Design patterns help people navigate unknown content, so when most sites use footers that span the page to anchor the content, users get used to the idea of when they see the horizontal divider with a bunch of links, they have probably hit the end of the page.

Familiarity breeds feelings of satisfaction.

Feel free to break the convention, unless you need a footer.

7

First, I'm assuming that they meant that the styling of the block around all the footer content (in particular, its background colour, borders, etc) should span the width of the screen - not that the text containers within the footer should be 1-column full-width and therefore insanely wide on wide devices. That'd be bad design because the measure of the text would be bad for readability:

For a single-column design measure should ideally lie between 40 and 80 characters... if [lines] are too long the content loses rhythm as the reader searches for the start of each line


As people have said, there aren't really any absolute design rules, but there are useful conventions, patterns and user expectations.

What I suspect this teacher was getting at, is that:

  • ...if your footer, like most footers, contains standard information common to all pages and not specific to the content of this page, then it should have something that visually separates it from the 'page content', so that someone reading the whole content knows the page-specific content is finished and isn't left wondering "what does the fact this company is registered in Quebec have to do with a recipe for bacon cheesecake? Oh, right, I'm reading the footer now". A full-width change of colour is a common, easy, reliable way to achieve this.
  • ...if your footer follows standard conventions and contains content like contact / about us info or links, social buttons, legal information etc, then it should stand out clearly against all the other possible page content so that someone fast-scrolling looking for this sort of thing ("Yeah, yeah, enough about bacon cheesecakes, which Canadian province is this company registered in, dammit? There's usually some bar across the bottom of the page...") knows when they've hit what they're looking for. A full-width change of colour stands out from any breaks you might have within your content and is an easy, common, reliable way to achieve this.

If you do have different needs, or another design that you have reason to think won't confuse users in these two cases, by all means do your own thing. Always think through how it applies to your case, though. For example:

  • If content in your footer isn't like a standard footer, and is related to the page content (for example, maybe it contains links to related content that readers of this page are particularly likely to be interested in), you might be better off making it un-footer-like so that people who've read all your content and still want more do continue reading.
  • Do you have any breaks within content, e.g. for adverts, or mid-content cross links or social tools? If they can be confused with footers, readers might stop mid-article thinking they'd reached the end. It can be good to keep the full width change in background colour holy so people know it and only it means they've reached the end.
  • Be aware of never-ending scrolling patterns, like articles that auto-load a related article, and search pages that auto-load new results. If your footer does mark the end of the page's content but isn't sufficiently footer-like, people might mistake it for a break before new content loads.
  • 1
    Mmm... bacon cheesecake. Canadian, to boot! – user69458 May 31 '16 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.