1

I want to add a mega footer to my page. I like it if the user has the possibility to scroll down and to find same valuable links. However if the page has almost no content, like for instance a login page, then the mega footer takes most space of the webpage and distracts from the actual page.

Would it improve the UX if I had two different types of footes, one mega-footer for large pages and a simple-one-line-footer witha copyright for small pages? Or should I give each page a min-height, to avoid that the footer does not take more space then the actual content of the page.

Improve this question

4 Answers 4

Reset to default
8

Stay with the same footer on each page to not confuse your users...

... and use a min-height for the content area. See the following example from the tag search, which has almost no content for no search results. It is exactly as you described, the footer gets more attention than the content area.

A) With min-height of 450px

tag search with min-height for content area

B) Without the min-height

enter image description here

Improve this answer
2

I would advise you not to use two different types of footer. Because design should be consistent. Have you considered to improve your small pages, add them some graphic elements to make them more visible than footer. You mentioned login page, maybe use popup for that particular part.

Improve this answer
0

I think there is an option to try and get the best of a design that caters for a lot or very little content. You can implement a fixed height footer for consistency that shows a small number of items, but include a trigger or action that exposes more content (if there's more content) when the user wants to look there (e.g. more or expand link/icon).

This allows you to keep the design simple at a fixed height, but can expand to accommodate more content when required.

Improve this answer
0

I think you should always keep the center of your page wide open, just like the other answers here. I would just like to add that you could also (and in my opinion should) use flexbox for this, not min-height.

Example (see here for the original source by Philip Walton):

html:

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

css:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

This will keep the center of your page flexible, it will expand if there is content in it, or else it will be as big to have your footer at the bottom of the page.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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