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.
Wrestling with JQuery
I'll admit it. I'm good at programming as long as it's HTML and CSS. I'm pretty weak with JavaScript and PHP. Okay, I hate PHP and MySQL, but maybe someday I'll come around. However, I've really been turned on to JQuery and have been really impressed with it.
I've been working on a new design for our primary site: http://www.flyingtomatodesign.com. I wanted to do something that would be a little more interactive than my previous designs.
As a quick aside: I generally approach website construction with a designer's eye. The programming and considering thereof generally come after that. In other words, I end up spending a ton of time either figuring out how to make the programing work OR end up changing my design to accommodate what I can accomplish with the programming
So, on this new design, I decided to approach it from a different angle. I decided to base the site design around the programming. So, I found a couple great JQuery scripts and got them worked out. I was pretty stoked at how quickly these things worked. Take a look at the concept: http://www.flyingtomatodesign.com/FTDWeb2_0Concept/index.html. First I got the slider working. That one was rough. I had to really wrestle with the CSS and the JavaScript to make it work right. More appropriately, I had a certain spot that I wanted that to fit in and wrestled with shoe-horning that sucker in. As I mentioned above, JS isn't my strong suit, so it took me the better part of my Saturday to get it figured out.
Next came the navigation. After I got that sussed out (which this time went much smoother), that damn slider wouldn't work. I moved some of the code around and SHAZAAM! everything fell into place and worked together. Well at least in Opera 10, Safari 4, Firefox 3.6, and Chrome. Of course since Internet Explorer doesn't play well with web standards, it wouldn't work for that. However, I got a nice little fix for that, too. First, you have to create a separate style sheet. I named it "IE7.css" and it contains the following code:
div.container {
overflow:hidden;
word-wrap: break-word;
}
Then you have to add the following code. I built this demo with a wrapper, then a container inside that, etc. So, I placed the code at the top of the wrapper:
<!--[if IE 7]> <link href="_css/IE7.css" rel="stylesheet" type="text/css"> <![endif]-->
By putting that bit of script at the top of the main DIV tag, everything under it is affected by that code. Before affecting those changes, the navigation worked fine but the scrolling window did not. Now they both work just fine in IE8.
In addition to that, I had to put the JavaScript coding above the code required for the slider. So, I called the JS files for the navigation (jquery.min.js) and proprietary code for the script first. Then called the slider scripts (jquery.js and easySlider1.5.js) and it's proprietary code for the slider. So the end result is that the site loads the code required to make the navigation to work first, then the code for the slider, then as it turns out, all the CSS. Take a look at the source code and you'll see what I mean.
If you want to copy the navigation, go here: Sohtanaka.com. If you're interested in the slider, you can find it here: Easy Slider 1.5.
Does size really matter?
I was reading through a post on www.youthedesigner.com tonight. The essence of the article is that there are some good intangibles that you can ask your client for and the return could yield positive results. I won't go into the details of the article here. If you're interested, take a look when you're done here. ; )
Anyway, what got me thinking though is some of the comments on that post. On the subject of asking your client to put your "designed by" logo on their site, one commenter said,
... take a look at how many sites you see with designed by links on them. I can't think of any that are even worth mentioning; most are local restaurants or car repair shops. ... How many future clients will hire you because they saw your link at the bottom of 'Northern Mountain 4x4s' site, and more importantly do you think you would want those clients?
Wow. What a ass. Looking through some of the other comments, it seems that I'm not alone in my assessment of this guy. But, I digress. The point of this post is not to rip on this guy. It's to point out an important fact; everyone deserves to have a great website regardless of their budget. That's why I have positioned my web design company to market specifically to small businesses ranging from startups to "middle market". They need a website and I want to make sure they have something that they can be proud of within the constraints of their budget. Sure, I may not be raking in the dough because I'm not doing a multi-thousand dollar website (one local firm averages $15k/site). However, I feel that I'm meeting a specific group of people right where they need it; where they are at.
That's the key. To meet people where they are at. So, if I have a client that can only afford to spend $500 on a site, I'm going to make sure that they have the best that I can give them for that $500. Granted, I can do much cooler things with more money as it necessitates more time. But that doesn't mean that I'm going to turn down work because I don't want to make a "lesser" site.
The guy that I quoted above could be coming from any number of perspectives. However, his opinion is clear; he won't build a website that's beneath him. That's too bad. I've built some websites where I definitely haven't been paid what my time is realistically worth. However, I've had the pleasure of meeting some great people and have developed some good relationships from them. Besides, at the end of the day, when people know that you're helping them out, they help you out.
So, for me, while it's definitely important to make money, all I really have is my reputation.
Using White Space in Web Design
White space for design is whole different animal than white space for print. When you're laying out something for print, "crowded" is king. However, when designing for the web, it's important to have this tool in your arsenal.
1. What is white space?
Well, first off, white space doesn't literally refer to the color white and it's usage on your web page. Duh. White space is negative space. The key here is to utilize negative space to set your elements apart. This is particularly useful for me because I rarely design a site using tables and therefore have areas defined by a lot of lines. I'm not saying that's bad, I'm just saying that from a visual standpoint, it looks gross to me to use lines to define your elements. For example:
This is a website that my company inherited. We're in the process of redesigning the site. Actually we're in process of building the client a while portal of sorts. He's in the media and has a lot of irons in the fire, so we have multiple sites for him. So, we're building a central site and this one will be redesigned as an arm of that site. Anyway, even from this small screen print, you can see what I'm talking about. The previous designer used a lot of lines to separate areas of text and other elements. Frankly, it makes me sick.
Now here's an example of a site that beautifully executes the use of white space to define their elements:
I really like the simplicity of the layout. The categories are well laid out and the sparse text has been thought through so as to give a concise description to the visitor of the main areas of interest on the site. If you look at the rest of the site, you'll see that they continue to do a great job of using negative space to set their content and images apart.
2. How to use it effectively.
A. Line Spacing:
First, consider line spacing. If it's too narrow or too wide, it affects readability. However, you also need to consider the overall look and feel of the site. Take this blog for example. The template I've chosen has more of a scrunched feel. It kinda mimics a print layout, and that's what I wanted. However, I did change the line height from 1.2em to 1.25em. That little bit made quite a difference. Before making the change, I felt like the text was just a bit too close together. Now, I feel that it's just about right. Again, though, that line spacing will be dictated to some degree by the overall look and feel that you're trying to achieve. I definitely suggest playing with the "line-height:" property to get the setting that will work best for your layout.
B. Margins:
First, you absolutely must keep your margins consistent throughout the site. I do mine on a basis of 5's. I really work hard at making sure that my layouts keep a good ratio. So, for example, if my side margins are 25px, my spacing between my content might be 10px. Or, when I have an image inserted into text, I use a 5px horizontal and vertical padding. Obviously you can use any ratio you want, but the math in using increments of 5 keeps it pretty easy for me.
As with line spacing, finding the right amount of spacing is important. If you go too narrow or too wide, it could really throw off the balance of the site.
For me, I lay out the design first using my rule of 5's, then use that to define the spacing for my text. The end result is a site that is evenly spaced and the ratios of spacing ends up being pleasing to the eye; well, at least my eye 
.
3. What White Space is Not
White space is not necessarily minimalistic. Now, my design preferences lean towards that, however, you can still cram a lot of images and text into a site and still use white space to your advantage. Take Smashing Magazine for example. They have a crap load of stuff on their site, but everything is laid out well. All their ads on the sidebar are the same size and are spaced evenly. There's also a good amount of space between the main body of text and the sidebar.
4. Putting It All Together
In conclusion, white space is a great tool to utilize to help "clean up" the look of a site. It's a little thing that can really set your site apart, particularly at a subconscious level. Think about it for a minute. When you see a site that doesn't "look right" or just "feels off", you're left with an uncomfortable feeling. It just kinda bugs you, but you're not sure why. Ultimately, it's because the layout isn't very pleasing to the eye. We're rational beings and we want to see order in things. Some of us more than others (I'm extremely Type A, for example), but the need for order is still there.
From a consumer standpoint, it can affect how you shop, too. For example, I was in the market about a year or so ago for a telescope (I'm an armchair astronomer and wanted to share that with my kids). Well I was shopping around online and found a great 'scope at a great price. However, the site literally hadn't been redesigned for something like 8 years, and it looked it. The layout was bad. The colors! Oh, man, the colors were teal and hot pink! They even tried using the the old .25" x .25" grid layout pattern in the background to mimic graph paper. It was bad. Unfortunately, the telescope I was looking at was probably $15 cheaper than on another, more well known site. I ended up spending more money to buy it off a site that looked better. I remember thinking to myself, "If these people (the first site) can't trouble themselves to update their website and make it look professional, what kind of sale/after sale support am I going to get? What condition will that telescope be in?" My whole point here is that if the site doesn't at least look professional, you will lose visitors. If you're in business, that means you're losing sales - all because you didn't think through the overall look and feel of your site.
So, in conclusion, if you're not using white space effectively, pull your head out. You're really missing a key component of your design.
If you are using it well, please post up some good examples in the comments. As a designer, I'm always looking to improve my craft and would love to hear from you and learn from your work, too.
