A responsive site for everything to do with computing and computer science
14 MINUTE READ BY ANDY CRESTODINA
Here’s an internet story that happens a million times a day.
Vivian visits a website…but she doesn’t see what she’s looking for… she scrolls down a bit… but she still doesn’t find it… scrolls a bit more… still not there… then she goes all the way down to the bottom of the page… and there it is, in the website footer. The link she was looking for!
All over the internet, website footers are saving the day, catching visitors like a safety net, before they hit the bottom of the page hard.
The purpose of a website footer is to help visitors by adding information and navigation options at the bottom of web pages.
Website footer design is about choosing what to include, with the intention of helping visitors and meeting business goals.
How Important Are Footers, Really?
These are important choices because footers are highly visible. A lot of visitors see them. A study by Chartbeat looked at 25 million website visits and found that visitors scroll down thousands of pixels. No page is too tall, no footer too far.
If you’re curious about how far down visitors scroll on your website, there are paid tools that will show you the “scroll depth” on your site.
27 Things That Can Go In Footers
How should you design your website footer? Here are 27 ideas and examples, starting with the most common content and features. Scroll down past this list to see our own guidelines and best practices for what to include in a footer design.
If your footer had just one element, this might be it. The year and the copyright symbol. It’s a weak but easy protection against website plagiarism.
Pro Tip: A tiny bit of code will keep the year updated automatically.
This is the most common link found in footers which links to the HTML version of the sitemap. These links are rarely clicked by visitors, but like the XML sitemap, they may help search engines find things.
This is the second most common element in footer design. It typically links to a page explaining what information the website collects, how it’s stored and how it might be used. For most websites, it’s about tracking (Analytics and remarketing), form submissions and email signups.
Disclaimer: This blog post isn’t legal advice. If you want to spend money on legal language that almost no one will ever read, contact an attorney.
For websites in highly regulated industries, you may want to put the text right in the footer.
If legal text is critical, adding it to your footer will make sure that you have maximum coverage. You’ve got the fine print on every page.
Visitors expect to find contact information in the top right of the header. It’s a web design standard. It’s also standard to find a “contact” link in the bottom right (or center) of the footer.
This should be a link to the contact page with a contact form, not an email link. There are lots of reasons to use a contact form, rather than an email link.
- The form submission is easy to track as a goal completion in Analytics.
- The visitor may not be on a computer that they use for email.
- Forms send visitors to thank you pages, which can provide more messaging and calls to action.
- Forms send visitors auto-response emails, again, more messaging and CTAs.
- Forms can save submissions into a database in case email doesn’t get through.
- Forms can connect to marketing automation and other systems.
- Forms can ask specific questions and route submissions to specific people, depending on the answers.
- Email links are spam magnets.
So leave that email link out of your footer! In fact, I don’t recommend putting an email link anywhere on your website.
This website has great copywriting, but a contact would have been better than the email link.
6. Address and Link to Map / Directions
Place information is something that visitors expect to find in footers. It’s also a way to tell Google where you are, which is important for businesses with local customers. Linking to the map is a handy way to help visitors find you.
When programmed properly, this map link turns into a big fingertip-size button for mobile visitors, bringing up the map app on their phone or tablet.
7. Phone and Fax numbers
Like the address, a phone number with a local area code is evidence to Google that you’re a local business. And like the map button, a phone number should automatically transform into a clickable button when viewed on a mobile device. Tap to dial!
Here’s where your footer can rescue falling visitors. If they’ve made it down this far, they must not have found what they were looking for. Time to offer some more options.
The last few years have seen a usability trend called the “fat footer,” which means adding more than just the standard items listed above, starting with navigation.
Footers now often contain the same links you’d find in a “mega-menu” dropdown in the header navigation. But this doesn’t necessarily save a visitor falling down your page. Remember, these are visitors who didn’t find what they were looking for above.
Here are a few sources of ideas for footer navigation:
- Check your “Site Search > Queries” report in Analytics. What are visitors searching for? What aren’t they finding?
- Check your “Behavior Flow” report in Analytics. Where do visitors seem to want to go?
- Which interior pages need a search ranking boost?
You don’t have to just repeat your main navigation. You also shouldn’t just add your entire sitemap. This forces visitors to dig through a pile of links. How’s that helpful?
9. Social Icons
We love visitors from social networks. But we don’t love it when our visitors leave and go to Facebook, Twitter or YouTube. If they do… they ain’t coming back. That’s why our designers almost never put social media icons in website headers.
The footer is the best place to add icons that scoop visitors over to social networks. When we analyzed the top 50 marketing websites, we found that 72% included social media icons in the footer.
Here’s a good example from Rafal Tomal.
10. Social Media Widgets
Some footers go beyond the icon and use an actual social media widget. These show the latest post from a social media network, embedded right in the footer.
This makes sense only if you are active within that network and have solid editorial standards about what you’re sharing.
Caution: If you use such a widget in your footer, social media posts will appear on every page on your websites. Especially risky if you’ve got an intern running your social channels. Applebee’s famously learned this lesson the hard way.
11. Email Signup
The website footer has become a very common place to let visitors subscribe. Our website standards study found that 24% of top marketing sites have a signup box in the footer.
True, email sign ups are more likely to occur on a page where the visitor got value, such as a helpful blog post, it’s still not a bad idea to let visitors subscribe from the footer.
Footer signup boxes should still follow email signup best practices, offering social proof (how many have signed up before?) and setting expectations (what with the subscriber receive? how often?).
A lonely little email address box with a submit button isn’t likely to convert very well, like this guy…
Not all visitors are prospects. Some visitors may be employees, partners, affiliate or resellers. If there’s a login area for these people, the footer is the best place for it.
These people come back often and know where to find things. No need to use valuable marketing real estate in the header for them. A little login link in the footer is fine, like ATI does here.
Another type of non-prospect is the press. Realistically, only a fraction of 1% of your visitors are journalists and editors. So don’t waste precious space in your main navigation with a press link.
If someone from the media does happen to visit, they’ll scroll down and find it.
14. Site Search Tool
If they didn’t find it in the header, in the content area or in any of the footer links, a site search tool is the ultimate safety net.
Search tools are not as common in website footers as email signup forms, so if you use one, make sure it is clearly labeled.
The Smalley Steel Ring website features a quick search tool for products, helping visitors jump right into the catalog from any page.
If you really want to dress up your footer, add an image to it. Here’s a chance to add personality to the site.
The Mason-Dixon Knitting footer features a picture of Kay and Ann, the two founders.
16. Mini Gallery
Why not go for the full pedicure? Rather than one image, add an entire gallery.
Experimental Sound Studio has a gallery of photos in the footer. Clicking a photo brings up the image within a lightbox.
Images are another chance to reinforce the brand. This is a good place to use an alternate version of your mark or use your logo in a different way.
The Center for Humans and Nature website uses the original version of their logo in the footer, where the header contains a simple, legible text treatment of their name.
18. Your Mission. Your Values
Logos are good. But why not tell visitors why you’re in business? The footer is an excellent place to plant your flag and tell ‘em what you stand for.
The Better Government Association website footer not only restates their mission but shows the impact they’ve made using numbers down the right side. It’s impossible to miss why or how they do what they do.
19. Keywords for Search Engine Optimization
Text in the footer is text on every page. So it’s an excellent place to indicate your relevance to Google. If you do include your mission, your value statement or an “about us” blurb, use this as an opportunity to include your primary keyphrase.
Caution: Footer text for SEO has been abused by search optimizers for years. This is probably why Google doesn’t put a lot of weight behind SEO keywords in footers. So don’t overdo it. Just use the phrase once as text, not a link, and move on.
The footer of the Commission on Rehabilitation Counselor Certification website includes their code of ethics, which happens to include two of their most important keyphrases.
20. Awards and Certifications
These little logos instill confidence in visitors. They are a form of social proof and a powerful way to leverage the “Halo Effect.” If you’ve ever won an award, adding the logo for that award to your footer is a quick way to add credibility to every page of your site.
ProTip: Combine all of your awards, certifications and membership logos into a “trust box.”
Nitel has won many awards over the years. Gathering up those logos and putting them together in the footer of the website, helps build trust in a very competitive industry.
Certifications also come with logos. Here are a few that often appear in footer designs.
- Security certificates for ecommerce websites
- BBB certificate for businesses with local audiences
- Adwords certifications for digital marketing firms.
- GSA certificates for companies that work with the government
- MWBE certification for minority and women-owned enterprises
- B-Corp certification for socially and environmentally conscious businesses
21. Association Memberships
Membership has privileges. One of those might be a logo that can be used in a footer. Chambers of commerce, industry associations and even online directories can provide logos that look good in a footer.
Cookies By Design shows their associations in the lower right corner of their footer.
It’s never a bad time to let your happy customers say a few words. Including testimonials in footers is a good way to add social proof throughout the site. Here are a few guidelines for using testimonials:
- The best testimonials support the specific marketing claims of the page they’re on, so they’re not added generically to the footer on every page.
- The worst place to put testimonials is on a testimonials page. Check your Analytics, visitors just aren’t visiting that page.
The Jody Michael Coaching website includes a testimonial at the bottom of every single page. It’s right above the footer, allowing for a different testimonial on each page.
23. Latest Articles
If you’re active in content marketing, you can give your site a “pulse” but having your latest content pushed directly in your footer.
Solar Fuels Institute does this on their website, along with the social widget.
Or you may want to control which articles are featured in the footer. Then you can select those that answer common questions for visitors, or those that convert visitors into newsletter subscribers at the highest rates.
24. Upcoming Events
If you run a lot of events, the footer is a good place to promote them, since anything in the footer is likely to be seen. But don’t add this unless you always have an upcoming event, or you’ll have a hole in your safety net.
25. Video: Your Welcome Message
Text is overpowered by images. Images are overpowered by video. As a general rule, video is the most compelling format for content. So if you really want to go all out in your footer, add a video.
The Marie Forleo website takes full advantage of video, include a video enhanced footer.
26. Audio: Your Jingle
It’s rare but possible to add an audio file to a footer. If anything it would likely be a clip that you’re repurposing from somewhere else, such as a radio spot.
The Food For Life website embeds a little audio player with their jingle into their footer. Charming!
27. One… Final… Call-to-Action
Every marketing page should have a call to action. So adding one to your footer is a way to make sure it appears everywhere. You should never leave visitors wondering how to take that desired action.
The Writers Theater website follows best practices for nonprofits by adding a prominent “Donate” button to the footer.
More Footer Design Ideas
Here’s a bit more inspiration for designing your next website footer.
Footer Color Schemes
Notice how many of the examples above show light text on a dark background. Reversing the colors is a good way to let visitors know that they’re at the bottom, and it’s the beginning of the end of the page.
ProTip: Caution reversing the color scheme (from dark text on a light background to light text on dark) in the content area of a page. Doing so may create a “false bottom,” causing visitors to believe they’ve hit the footer, and possibly missing the rest of the page.
In the same way that navigation can “stick” to the top of the page, regardless of how far down the visitor scrolls, footers can stick on the bottom. It’s always there, no matter the scroll depth.
Our friends at Conversion Sciences use a sticky footer that is always visible on every page.
The Infinite Page… No Footer At All!
Every website has a footer, right? Actually, some news and media sites don’t have footers, because there is no bottom to the page! The pages just go on forever.
The “infinite page” approach to web design just loads the next piece of content as the visitor scrolls down. Look at the Quartz website or ESPN for examples. These sites never end.
What Should You Include In Your Footer Design? Our Guidelines For What To Include In Your Footer
It all depends on the goals of your site and the needs of your visitors. Are you a big ecommerce site? Lots of links may be useful. Is customer service busy? Add that info down there.
Ask yourself: Do visitors have an important question that isn’t answered in the header? If so, add it to the footer.
EXPERT INSIGHT: KURT CRUSE
“This pretty much all boils down to using this valuable real estate to serve your sites goals. Be purposeful. Be helpful. Be mindful. Put yourself in the user’s shoes and then make sure it’s well organized. Give ‘em what they need but don’t overwhelm them.”
So there are your 27 footer design ideas. But please don’t use them all or you’ll have the fattest fat footer of all time. Think about your visitor and what might catch them before they hit the bottom of the page!
6 MINUTE READ BY ANDY CRESTODINA
Even for marketers, design standards aren’t something you think about a lot. But for web designers, they’re critical.
“Standard web conventions” are web design standards and best practices. They’re a set of rules that web designers follow, knowing that they align with visitors’ expectations. They are guidelines for clarity and usability.
But what is standard, really?
To answer this question, we created a checklist of 10 web design standards, then looked at the top 50 marketing websites to see how standard these standards really are. Using guidelines from an earlier NN Group article, we use the following thresholds:
- Standard: 80% or more of websites use the same design approach
- Convention: 50 – 79% of websites use the same design approach
- Confusion: 49% or fewer websites conform, no single design approach dominates
Note: The sites included in this research are the top marketing websites in the “business > marketing & advertising” category on Alexa. After excluding news, media and publication sites, which do not have conventional lead generation or ecommerce goals, we ended up with the top 50 marketing websites.
1. Logo in the top left
100% of the websites researched had a clickable logo in the upper left corner of every page on the site. That’s a standard!
2. Contact in top right
44% have the contact button or link in the top right corner of every page. Although this placement is very common and considered best practices, it cannot be considered standard.
3. Main navigation across the top
88% of the websites had the main navigation located in the header at the top of every page, making horizontal top-level navigation a web design standard.
4. Home page slideshow
32% of the websites have a home page slideshow (also known as a carousel) with a rotating series of images and messages.
This is one that Orbit designers are watching carefully, as more sites seem to be favoring a static featured image, rather than a rotating series of images.
Research is mixed on the effectiveness of each option. Results vary! Choose the best option for your site, your message and your visitors.
5. Value proposition high up on the home page
80% of marketing websites have an explicit value proposition located high on the home page. So the majority of websites explain their value to visitors “above the fold.” The remaining didn’t have an clear value proposition at all.
Any web designer will tell you that there is no standard pixel height for browsers. Therefore, there is no fold. But of course, some design elements appear high on pages and are generally visible to the majority of visitors without scrolling.
6. Call to Action high up on the home page
78% of the websites had visually prominent calls to action. The percentage fell below our threshold for standard, it’s certainly a convention.
7. Search feature in the header
54% of websites have a search feature in the header. About half of all marketing sites do not have a search feature that appears “globally” on every page either as a link, icon or search box.
This isn’t surprising to us. Search tools aren’t necessary unless the website contains a large amount of content. A search tool is often a “crutch” for a poorly organized website.
8. Signup box in the footer
24% of websites allow visitors to sign up and subscribe to email updates in the footer. So this is a common place to gather email addresses, but not a convention or a standard.
The most common content for footers is copyright, privacy, legal, sitemap and contact links. Visitors expect to find contact information in the bottom right or bottom center of websites.
Want to a better footer? Here are our Footer Design Best Practices, and 27 things you can add to the bottom of your pages.
9. Social media icons in the footer
72% of the websites include icons for social media websites in the footer. This almost makes these a standard design element.
26% of the websites included social media icons prominently in the header.
As in the footer, clicking any of these icons takes the visitor to the social media site. For this reason, this is a design element that can cost you traffic, increasing bounce rates and hurt results.
We recommend adding social media icons in the footer. To further reduce visual prominence, the full-color version can appear only after the visitor moves the mouse cursor over the icon.
10. Responsive design
68% of websites are mobile-friendly using responsive web design. This gives visitors a great experience regardless of the device – phone, tablet or desktop.
It’s a combination of design and programming that is difficult to add after a site is built. More often, it’s part of a redesign, which may explain why it’s a convention, but not a standard.
Responsive design has been best practices for years. We’re glad to see this become more common and we expect this feature to be standard eventually.
Note about the data: The sites included in this research were big, famous brands. They have lots of pages and diverse businesses. Some design aspects of large sites (search tools, generic navigation labels) may not be relevant to smaller marketing websites.
Custom Design is Dominant
Obviously, not all design standards are standard after all. Except for the placement of the logo, the main navigation and the value proposition, there aren’t standards for web design.
The nice thing about standards is that you have so many to choose from. – Andy S. Tanenbaum, Computer Scientist
Web design conventions include a prominent call to action, search tool in the header, social media icons in the footer and responsive web design.
Other common design features may still be considered best practices, but may not be used by the majority of websites. Custom web design, specific to the business and its audience, rules the day.
Practical Insights for Web Designers
Conforming to standards are an easy way to meet the expectations of your audience. Your visitors are not blank slates. Your website is the millionth website they’ve visited, so they come with strong ideas about what they’ll find and where they’ll find it. And the website is key to your digital marketing basics.
Why make your site different?
If a design element is expected in a certain place, then that’s where it should go.
Beyond design elements, there are types of web design standards that all good designers understand:
- Brand Standards
Colors, type and tone are specific to every business. You should have a style guide for your website and stick to it.
- Coding Standards
Websites should be built using the programming standards agreed upon by the W3C. This makes them more likely to display and behave properly in browsers.
- Accessibility Standards
Access to information is a basic human right. This has been recognized by the UN Convention on the Rights of Persons with Disabilities. Follow these standards to make your site accessible to everyone.
Standard web conventions are shorthand for good design. If you break any of these rules, you should do so intentionally and with a very good reason. And you should plan on measuring the impact of being unexpected.
Does your site follow best practices? Or do you break the rules?
13 Design rules that every Web site designer should know about
If you regard yourself as a professional Web site designer, then you need to be aware of, and then follow, these 13 design rules for building effective Web sites.
By Tony Stevenson
If you regard yourself as a professional Web site designer, then you need to be aware of, and then follow, these 13 design rules for building effective Web sites.
If you ignore these rules, your clients will be looking elsewhere when it's time to update the features and contents of their sites.
Rule 1 Eliminate annoying features
The quickest way of aggravating visitors to a site is to "pop" up a new window each time that they enter and/or leave the site. If the message that your client is trying to convey is that important, incorporate it instead into the site's home page in an attractive and less annoying fashion.
A second way of upsetting a lot of people is to have a piece of music start playing when the site's home page appears. You (or the client that you're supposed to be advising professionally) might like the music, but a large percentage of visitors won't.
Even if visitors do like the musical selection that has been chosen, it's most likely that it won't be appropriate for them to listen to it anyway. Listening to music in a busy office, even if headphones are used, is generally not a practice that's acceptable to many employers.
Rule 2 Ban poor navigation
It should be easy for visitors to find their way around a Web site. Before you unleash any new site on an unsuspecting public, conduct some usability tests to determine just how long, and what effort it takes, for people to browse the contents of the site.
Once a site starts to grow in complexity, consider adding a site map, which lists the major features of the site, along with a Frequently Answered Questions section where visitors can turn to for immediate help.
And under no circumstances should you disable the browser's "Back" button in Microsoft Internet Explorer (or the equivalent button in other browsers) in such a way that it prevents people returning to a site that they've previously visited.
Rule 3 Choose the right colours
Picking bright colours for both the background of a Web page and for the text to be displayed on it simply won't work. Neither will the overuse of colours on pages. Remember too that a not-insignificant proportion of the general public suffer from a variety of sight-related problems.
If you don't know how to select the right colour combinations for a Web site, get professional help, or at least read one of the many Web site design books that explain colour selection. An excellent book is "Creating Killer Web Sites" and you'll find its companion Web site at http://www.killersites.com On the home page, click the "design tips" link to read about the "Color Cube" as well as other colour tips.
Rule 4 Avoid the cluttered look
Most people don't like working at a messy, cluttered desk in an office or at home. So don't assemble Web pages that look like pieces of information have been hastily thrown together higgledy-piggledy.
Don't overpower visitors to a site by cramming too much information onto Web pages. Instead, use progressive disclosure to reveal information as visitors either need it or request it. But don't bury vital information so deep into a Web site that they have to follow half a dozen or more links before they can access it.
Rule 5 Make contact a click away
Unfortunately, visitors to many sites can now only provide feedback or ask questions by filling in an online form. A lot of people don't like forms. It could be that a form doesn't answer the specific need that they have. More often though, forms are usually time-consuming and boring to fill in, and sometimes ask for information that visitors don't want to reveal.
If your client insists on using a form on a site, also provide an e-mail address link that people can simply click to provide a quick, unstructured message.
Rule 6 Be consistent
Don't make the common mistake of having one part of the site's interface behave differently to another part.
For example, when displaying lists of information, such as titles of articles to read or names of staff members to contact, always include a "Top" link at the bottom of the list that, when clicked, positions the visitor back to the top of the list. It's infuriating to visit a site that sometimes uses such a function but only in an arbitrary fashion, that is, it is not consistently used at the bottom of all lists.
Rule 7 Give visitors a reason to return
A lot of Web designers get so caught up in designing the most striking Web site, using the latest technology, that they forget one of the most important rules. That is, unless a site can be easily maintained, and have new, fresh content regularly appear there, visitors won't return to it. While appearance is obviously important, nothing guarantees a site's success more than high quality, up-to-date content.
Rule 8 It should be obvious
Like me, you've probably visited Web sites that you've had no idea what their purpose was! It should only take a matter of seconds for visitors to understand what a particular site does, and whether or not it can be of use to them.
Rule 9 Don't write a novel
The content of Web pages needs to be written in a specific way - short, jargon-free and to the point. Visitors to a Web site don't read online content the same way that they read the pages of a book.
If the information on the Web page doesn't grab them immediately, and doesn't continue to hold their attention, they'll click their mouse and move to a different site (usually a competitor site of your client). Where it's impossible to avoid jargon, provide an online glossary on the site in a highly visible location.
Rule 10 Short download times
While it's true that a picture may indeed be "worth a thousand words", too many pictures and graphics included on a Web page will result in excessive download times. People who browse the Web are not renowned for their patience, and they will just not tolerate sites that take too long to appear on their computer's monitor.
Rule 11 Drive the site with a database
Unless your client has requested a simple site, in terms of content, you should seriously consider designing and building a database driven site.
You can then write routines that allow your client (or staff) to update the database's tables with a minimum of effort. Subsequently, if the site is properly structured and configured, the updated information in the tables should then automatically appear in the appropriate locations on the site's pages.
Rule 12 Don't use technology just because it's there
A self- explanatory rule - if the technology being deployed doesn't enhance the appearance or functionality of the site, don't use it.
Rule 13 Test, test, and then test some more
No-one likes testing the functionality of a Web site.
Testing takes a long time, it's boring and it takes a lot of effort and thought to get it right. But if a site doesn't work as it's expected to, it won't make matter if it looks great or it's got the latest and hottest information. Visitors will lose confidence in it and go elsewhere on the Web.