Building a Website Page - Footer
What is a Footer
As I'm sure you've guessed the webpage <footer> can be found at the foot / bottom of the page. You might see it as just a visual indicator that tells you when you've reached the bottom of the page, but it's where you'll find some important information too.
If you look around at a variety of websites you'll see that the footer can be the place to find all sorts of different information.
But lets narrow it down and briefly look at the main ones you should consider having there. Such as ‐
- Copyright - you should always have a copyright statement in your websites footer which includes all of these ‐ the word copyright, © symbol, current year and your company or your name. To add the copyright symbol in your html you write ©
- Sitemap - If your website has multiple pages you should include a sitemap page to better assist the users ability to navigate your whole site, this is most commonly linked to from the footer, though you may also include it in the main navigation if you wish to.
- Privacy Policy - If you intend to collect a users personal information in any way you will need to include a privacy statement on your website that shows you are using that information inline with the Data Protection Laws applicable to where you are and host your website.
- Cookie Policy - If you intend your website to use cookies you will need a statement telling the user what cookies are, that you are actively using them, what cookies you are using, also why and how they are being used. You should also allow the user the ability to opt out of using cookies.
- Terms & Conditions - (also known as "Terms of Use" or "Terms of Service") this is a agreement that outlines the rules, guidelines, and requirements that your user agrees to abide by when using your website.
- Registered Ltd Companies & VAT Number - if your business is a registered Ltd business then you are required to display the address it is registered at. Also if you are VAT registered business then you are required display your VAT number clearly on your site so many add it in the footer.
- Contact details - this is an excellent place to put your full contact details (especially if your website doesn't include a contact page) which can include email address, postal address and phone number.
Tom's Website
I've kept Tom's website footer quite simple. Splitting it into three main areas
Secondary Navigation - First footer area contains a second navigation menu, which includes links to the sitemap, policies and contact pages. Because the website won't be collecting any user information or be using cookies we won't have to include much on our policies page. So I've grouped these and the terms & conditions together on one page.
Social media links - Second footer area contains a row of icons that grow in size when a user either hovers or actively touches it. These icons link through to Fiddle and Fettles social media and GitHub accounts, a little confusing? Maybe but if Tom's Cupcake Cat Bakery was a real business then of course these icons would link through to his accounts.
Copyright - Third footer area contains the websites copyright statement which of course would say "Copyright © 2020 The Cupcake Cat Bakery etc..." if this had been a real business instead of a Fiddle and Fettle example website.
The picture above shows the footer as it will look on a laptop or desktop computer screen. Using CSS grid I have then styled the navigation and social areas to equally take 50% of the screen, then each set of links within these areas to be equally distributed in a row. The copyright is the centred along the very bottom of the page.
This layout will be fine on larger screens but in mobile we run the problem of the two link areas being crushed up and overlapping. Which won't look pretty or be usable as the clickable areas may overlap. So to make sure this doesn't happen I've made the mobile and tablet layout view like this picture below.
Here all three areas now span across the whole screen. Each areas contents are centred and the link items are equally spaced apart. Now our footer has a responsive layout with clear clickable areas for the links.
We've now reached the bottom of the webpage and unfortunately the end of this Webpage Guide.
If you have a question about anything in this guide why not send me a message and I'll do my best to answer you.
Want to make your own first website?
Then why not try with Jasmine Web Starter (JasmineWS) an opensource project I work on along with fellow York dev company JasmineDesign.
Learn to build your very own first basic website with JasmineWS templates on GitHub.
Each JasmineWS template contains a set of HTML and CSS files which with our step by step tutorial you will learn to transform into your first website, using nothing more than a web browser and a Free GitHub account.
GitHub allows you to store and work with your website and then publish it to the web all from your browser.
Fancy discussing your website or creative graphic needs?
Then I'd love to hear from you.
So hop on my contact page now and
lets get the ball rolling today!