Today, a Footer is essential to a website. It shows the user that they’ve reach the end of the page and provides them with some additional information/links. Without a Footer, many users may wonder if the page has fully loaded within their browser.
Recent trends in Web Design have expanded on the traditional Footer, which contain a handful of links and perhaps a Copyright notice. These new Footer designs stand out from the norm and can provide a dramatic ending to a user’s scrolling experience.
Although I’m a Web Developer by day, I do have a keen eye for good design on the Web. So the following is a selection of my favourite website Footers.
Firstly, starting with what I consider a bad footer:
In general, Wiggle’s site comes across as cluttered and takes a while for the user to digest and find what they’re looking for. It’s also full-width, so on a larger resolution monitor can appear to have too much whitespace. Admittedly, the Footer does have some valid information, but could be laid out better.
So what makes a good footer?
Apple’s site is clean and crisp throughout, though their Footer is very simple and allows the main content to take centre stage. However, interestingly it contains a breadcrumb of the user’s path to the current page.
The BBC’s recent redesign impressed me, especially the Footer – which provides useful links for the user and uses a neutral colour palette, so that it doesn’t clash with the various pages throughout the site.
PelFusion’s Footer is split into 3 columns with links to Comments; Categories and Archives – distinct Blog features. I’m interested to see how this will look in a year or two – whether or not the extra Archives will spoil the look, or if the owner decides to only display the most recent ones.
Perishable Press has an almost sepia tone to the page, with the Footer echoing this. What inspired me most about this was the 3 sets of images that fit together well and the rollover states display more colourful versions, yet the 3 sets differ in dimensions and location.
Waterstones’ Footer is perhaps the only one here containing an actual photo, rather than the more common illustrated picture. It fits well with the nature of the site, displaying a selection of books on a Web 2.0 style glossy shelf. Below are 2 columns of links, each divided into 2 (totalling 4).
Yodaa’s Footer fits well with the rest of the site, which changes as you scroll down the page – from a blue sky in the header through to the dark earthy feel of the Footer. It contains a contact form that has been designed to fit the illustrated feel of the page very well.
I had to include my own site for reference, purely because at the time of designing it, I believed it reflected the current trend of Footers on the web. I spent a few days researching Footers that I liked the look and feel of – and opted to attempt a cartoony style, with all of the links as pictures rather than text. It’s starting to show its age and in some respects looks fairly plain compared to others on this list in a similar style.
That’s my list of 30 great website footers. Please be aware that these are my personal favourites and have made such an impact that I’ve bookmarked them whilst browsing the Web over the past few months. I can’t pick a favourite of the bunch, but looking through the list there does appear to be a trend in website Footers that I prefer:
- Multiple-columns – 3 and 4 are the more popular choice
- Jammed full of useful links
- Fit well with the rest of the theme
- Big and almost overpowering
And overall, they all provide that important factor – letting the user know they’ve reached the end of the page and providing them with a few more options in the hope of keeping them on the site.
When designing my next version of slickhouse and indeed, any future sites – I’ll be taking these into account, allowing them to influence my design decisions. If you’d like to read more on website Footers, the following Articles are worth a look:
- Themeflash – 50 excellent footer design inspiration
- Smashing Magazine – footers in modern web design
- Six Revisions – 25 stylish website footer designs
- Vandelay Design – blog footers
Let me know if you’ve come across any additional Footers that have inspired you and if you agree with the above choices, or not.
For the past 5+ weeks since I last posted, I've been contemplating what to write about next. There have been a few minor news stories that I could have reflected on and the weather itself has been extraordinary this month for the UK.
However, today's big story had to be echoed - Michael Schumacher is to return to Formula 1 next year! The story goes on - he's to drive for Mercedes (Brawn GP of 2009) alongside a fellow German, Nico Rosberg and with Ross Brawn heading the team who helped him achieve many of his previous F1 wins.
What with McLaren and their 2 British Drivers, Hamilton and Button and now Mercedes with their 2 aforementioned German Drivers it'll be a cracking season next year. The interesting part will be seeing if Michael still has what it takes to be a championship winner. The Brawn/Red Bull match throughout the 2009 season may unfold in the form of Britain/Germany (McLaren/Mercedes) for 2010. Or, he could find that his determination and previous wins aren't enough as he struggles to qualify and race at the same level as before - the field is mostly young drivers these days, most of which has shown promise over the past 3 years since his retirement.
So, the 2010 Formula 1 season is shaping up to be another one worth watching. There are new teams, new transfers, the previous 2 champions racing with each other and now Schumacher's return. Roll on Bahrain!
Inspired by a few articles I came across recently, namely:
- http://css-tricks.com/images-on-a-subdomain/ (Chris' move to a separate domain)
- http://developer.yahoo.com/performance/rules.html#cookie_free (rules for improving performance)
- http://sstatic.net/ (Stackoverflow's static site)
- Increasing the number of simultaneous requests
- Reducing the size of the requests/responses to and from the server(s)
2) is achieved in the same way, by switching off cookies on slickhouse.co.uk - which in turn, can help reduce the request/response sizes and thus the page load times.
My initial testing has shown a noticeable improvement, though I don't have any metrics to share. I used Microsoft's Fiddler tool to profile the load times and was surprised how much external content the site uses, from 3rd parties. The twitter feed on the right is 2 requests alone and the Google Map that was tucked away in the site's footer added a further 20 or so. This gave a sluggish feel to the site as each page loaded.
So I updated the theme files and removed some of the excess requests, to bring it down to ~14 for the homepage. It's still high and could be improved further using CSS sprites. But I'll save that for the next version.
To summarise, splitting your static content from the dynamic pages helps increase page load times. It also allows for future expandability, as the static content could be hosted on a separate server, or even on a cloud/CDN solution.
Last night I realised some of the DNS servers I use for my domains weren't responding to requests. I initially thought it was my webserver, but Google Chrome kept saying "resolving host" and a quick nslookup revealed that the nameservers weren't replying.
My DNS is hosted with ZoneEdit, who hand out different nameservers per account. DNS should be the most reliable service in your chain - but for me it was failing. So I decided to switch providers for the domains that were affected to EveryDNS.
They're a free service, allowing you to setup your DNS for up to 20 domains per account. This is 4 times as many as ZoneEdit allow! The site itself is also a lot more responsive and fairly easy to use. The only thing which put me off is that you have to use their client to update your Dynamic DNS entries. They do provide the full source code for the Windows client though, which I downloaded and promptly started trawling through.
Their client is efficient, small and worked on my Server 2008 webserver - so I didn't have a reason to rewrite it. However, it requires use of command-line parameters to update. This is fine for those who have their webserver connected directly to the internet - i.e. the webserver has the external dynamic IP address, as assigned by the ISP. But in most cases, the webserver is behind a firewall and uses an internal IP (such as 192.168.1.x).
So, I needed a way of retrieving the current external IP, as it changes periodically - hence being known as Dynamic. An ipconfig results in the internal IP, but visiting WhatIsMyIP.com yields the external IP. Screen-scraping the page would allow you to get your IP - or you can use the specific page which just displays your IP.
Then once the external IP is retrieved, you can call the official EveryDNS client - passing in the IP as a parameter. Lastly, this whole process needs automating and executing at regular intervals, to ensure your DNS records are updated to reflect your Dynamic IP address.
I decided to write a small application in VB.NET to accomplish this:
- Retrieve the External IP address from What Is My IP
- Build up the parameters for the official client
- Call the official client passing in the parameters
- Log a success/failure
- URL - the URL to WhatIsMyIP to retrieve the IP Address
- LogFile - the path to the log file
- LogToFile - true/false depending on if you want a log file to be produced
- username - your EveryDNS account username
- password - your EveryDNS account password
- domains - a comma-separated list of each domain you want to update
- Executable - the path to the Official EveryDNS client
example.com,example.co.ukThen it would call the client for example.com, wait for a response and then call it again for example.co.uk - allowing you to update all of your DNS records at EveryDNS in one go.
This application can then be scheduled to run at regular intervals. I chose once an hour, every hour to ensure I'm not hitting the sites too hard - but that IP changes would be dealt with fairly quickly.
Hopefully there are others in the same situation as me, that want to use the EveryDNS client with their external IP address. Let me know if you end up using the client and what you think - perhaps you have improvements you'd make?
A few years back, I started looking for some additional domains to sit alongside slickhouse.com on the world wide web. I purchased alternative tld's such as .info, .net and .co.uk - later cancelling the former.
I also came across lazlow.net - ideal for me as I use the name Lazlow in many forms, including online gaming. The name Lazlow comes from the Radio DJ famous for his sound production and voice roles in the Grand Theft Auto series of games.
The site situated at lazlow.net has been fairly static since day one, with very few changes. In the near future, I'm planning on updating it as a central hub for my online presence, linking to all the sites I've either created or feature on.
The domain lazlow.co.uk at the time, was taken by a UK band and was due for renewal in March 2009. Due to Nominet's rules, .co.uk domains only become available after 60 days of expiry. So, earlier this month I registered it with GoDaddy and have forwarded it to the .net domain. Behold, lazlow.co.uk