Using the website footer effectively
The footer of the web page is usually the last thing on my mind when I'm designing a site. It's where I put the copyright info and repeat the major page links for the site.However, more and more people have realized that the footer provides a lot of additional space to provide more info. For example, you could have your Twitter feed there, maybe a contact form, business updates, most recent blog entries, polls, social media linking, etc. It's also a great place to keep the design going. Some really great designs out there make the footer visually interesting. This helps draw the eye to whatever info you have there. So rather than being an after thought, it's an extension of the rest of the page. Let's look at some better ways to use the footer. We'll first discuss the content, then the design.
Content
Profile Info
This is great if you're a freelance designer, writer, photographer, musician... whatever. The idea here is that you provide a picture of yourself and a quick write up. It's important that both the picture and write up mirror the image you're trying to convey with your site. So, if your site is really sleek and professional-looking, you don't want to have a picture of you in a clown outfit and stories about the last time you blacked out after drinking too many Irish Car Bombs. Conversly, you don't want to have a site that's relatively lighthearted and have a bio that would put the Pope to sleep.
Contact Form
The contact form doesn't have to be anything extravagant. For example, on our site, we have a form that we use for a potential client to fill out that describes the scope of their project so we can provide a quote. That is not what you want to have in the footer. There's just too much stuff there. Rather, you might want to just gather an email address, name, and comments. You can use this truncated contact form for sales or general customer service inquiries. You could also provide a form for someone to sign up for your newsletter. The idea by putting the contact form in the footer is that it shows your prospective clients that you are easily reachable.
Twitter Feed
Twitter has really taken off in the last couple years. It's surprising, actually; that people are interested in 160-character updates. They've improved over the last few years from talking about your bowel movements to actually being useful and informative (BBC News, TIME, Oxfam, One.org). Twitter is a great way to get quick news updates and status updates of friends and others. So it's no surprise that it would be almost expected today to have a Twitter feed. If you're using a blogging platform such as WordPress, there are plugins available that pulls in your Twitter feed. I'm using one called "Tweetable" for this blog. It allows me to post to Twitter from the control panel and displays my tweets in the sidebar. If you want to pull in a feed and display it on your custom website, you'll need to fnd a good service for that or be kick ass at PHP.
Blog Feed
The blog feed follows much of the same line of thought as the Twitter feed. As a matter of fact, it can implimented in some of the same ways. It's important to have a blog for a number of reasons (SEO not being the least). Depending on what you're blogging about, it can give your visitors an insight into your personality, likes, or dislikes. For me, I use this blog to illuminate various topics that have to do with web design and small business. I try to use this site to aggregate information and spit it back out in a way that's easy to understand.
Social Networking Info
Simply put; this would be fleshed out by putting links (or icons linking) to your social media pages (Twitter, Facebook, MySpace [that's still used?], StumbleUpon, LinkedIN, Reddit, Digg, etc).
Contact Info
It's simple. Your prospective clients/visitors want a way to contact you. More importantly, they want an easy way to find that information. One way to do it is to have a "contact us" page. However, I find that it's also a good idea to at least put your phone number/email address on each page. The footer is a great place for this. You'll notice on the current design of our site, we have a "contact us" page. However, in our upcoming redesign, it will be in the footer. I will be including our mailing address as well as our direct phone number and necessary email addresses. However, one thing to bear in mind; if you make your email address an image, it can't be scanned and picked up by spambots. So, while I'm all for using text to improve your SEO, I'd rather not get spammed.
So, those are just a few examples of the type of content you can put in the footer. Now, let's talk a minute about design.
Design
The design of the footer should obviously blend in with the rest of the site. It should look like it's an extension of the site rather than an afterthought. However that doesn't mean that you want it to be a prominent part of the page. You want the design to be a visual wrap up to the site. Kind of like a bookend.
For example, Ten Thousand Things and Blog Amuki:
I like how the footer is an extension of the entire page on both sites. On the first one, the footer makes sense with the design - it's the upper atmosphere. The second one, the footer is literally the closing bookend companion of the header image.
These are just two great examples of how you can maximize that space on your next site. The footer is often overlooked and is often stuffed with minimal info only because it was an afterthought. I hope this brief look at it gives you some inspiration to go out and design your next site with a useful, informative footer and with a great design.
5 great Error 404 pages
The 'ol 404 error page. It's a real bummer when you run across one. The typical one looks like this:
I'm embarrassed to say that my own site has a boring old page. However, we're working on redesigning that and it will change. Anyway, here's five great Error 404 pages I found:
These pages just go to show that the design work doesn't stop at the main website pages. It's important to consider the whole web experience. So, if you're a designer, go fix your Error 404 page and make it more interesting (slaps own hand).
Next time, we'll look at how to better use the footer on your web page - that's some prime real estate that's often not being maximized.
Stop the ride. I wanna get off.
Change. I change my clothes, my son's diaper, my mind - often multiple times a day. Heck, change is so intertwined in our lives that we make changes on the way to work; radio stations, lanes, MPH, etc. Our lives and the world around us is in a constant state of flux.
So then, how do you stay on top (never mind the cutting edge) of an industry that is constantly changing?
The web design industry is built on change. On one hand, it's great. Yesterday, we had to use Flash in order to have a dynamic website. Today, we can use better JavaScript like JQuery to do it. Tomorrow, we will use HTML5. Truly without change, our art, our passion would grow stale. However, it can be seriously dizzying!
I just read a retrospective article a few weeks ago about design trends for 2009. Then today, I read one about design trends of 2010 so far. Wait. I just got the hang of the "look" for 2009. Crap. I won't "get" 2010 for at least another 6 months. I know I said it just a moment ago, but I feel like the room is spinning.
Since I am spinning in circles, that takes us back to the beginning: "How do you stay on top of an industry that's constantly changing?"
Well I think that it will be different for each person. However, for me that involves a lot of research and reading. I have a short list of sites that I visit when I'm in need of some inspiration. Probably the one site I visit most often is Smashing Magazine, though. I also have been studying up on not only the more obscure features of CSS2, but am starting to dive in to CSS3. It won't be long before it will be the new standard and all browsers will support it en masse.
More importantly for me though, is that I start doing. I will look at a design that I admire and try to reverse engineer it. I figure out how the interactive elements work and what it takes to make them work well. I look at the design and try to replicate it with my own touch. I dissect the CSS so I can get an even better grasp of how it is affecting the layout and styling of the site.
Unfortunately, I haven't found a way to stay on top of the wave or even get ahead of it. I don't know if I ever will. I don't know if that's really important, though, either. For me, it's constantly a process of self improvement and discovery. That's why I love this industry so much. That is why I love my job so much. I get a chance to learn something new every day. Moreover, I get to do something that's challenging and in the end, very rewarding.
So, ya - this changing industry can be dizzying. But, it's also a small picture of the world around us. I suppose if you have a hard time accepting change in your daily life, then you probably don't want to consider web design. However, if you can embrace the change for what it is; a daily challenge to improve yourself and give back to others, then you'll do just fine.
Now if you'll excuse me, I have to go change another diaper.
SEO part Deux
My last blog about SEO was kind of a high level overview. This time I want to touch on one very important aspect of it.
One major key to SEO is the text. It's not enough to rely on keywords and other [meta] tags. Granted, they still help to a degree. However, over the last few years, the search engine companies have been moving more towards organic* searches.
*An organic search result is one that offers up a list of sites based on the overall relevance to the search word or phrase.
So, since the search engine ranks sites based off of keyword relevance, it's vital to pepper your site with the keywords that you want to target. However, you have to be careful that it's done in such a way that you don't look like an idiot because you've used your keyword(s) too many times. You also don't want to do some of those "black hat" tactics that we mentioned in the previous post (i.e. hiding keywords out of the main field of the site and using the background color as the font color to mask them).
You also want those keywords show up on the other pages of your site and not just the home page. By way of a side tangent; you want to put a unique description (meta name="Description" content="lobster bisque...yada, yada, yada") on each of the pages of your site. That way, they come up as separate listings or at least as sublistings to your site. It's also beneficial since each page has the target keywords and with different descriptions, it will help your page ranking.
Another good thing to do is use the ALT image tag. Firstly, it's just plain kind. The blind rely on web browsers that read the text of the code back to them. So, if you have an image without a description, the screen reader skips over it. It's vital that you provide as positive an experience as you can to all your visitors. Secondly, those descriptions must be appropriate to the photo. For example, if you have a photo of a Hawaiian sunset, you're not going to put your copyright as the ALT text. You'd label it something like "A relaxing day on the beach". Now, let's take it a step further and say that your keyword is "Corona" - as in that beautifully golden summertime beverage (BRB... excuses self to grab a cold beer)............................. Okay. So we're going to take this a step further; maybe you want to make this your description: "A relaxing day on the beach enjoying the Hawaiian sunset with a Corona and a lime." See in that example, not only is there a great description of the picture, but you've also used your target keyword in a unique way. Yes. That will help with your rankings, too.
However you have to remember that it all takes time. I mentioned that in the last SEO post and I'll mention it in subsequent ones. There's no "magic bullet" to getting SEO "right". However, there are a number of factors that when done properly will yield results.
In our next SEO post, we'll look at backlinking and social networking and how it affects your page rankings in organic searches.
