VOTE FOR ME HERE! »

Yup it has now gone to public vote, so if you like my site and think it deserves a prize, please spend a couple of seconds and throw me a vote! Thats if you think its the nicest blog in the list!

Voting Closes on December 1st 2008 and there is a lot of very popular blogs in the list. So all votes will count!

Thank you all for your support and wish me luck!

The rules are simple:

I must enter a blog post on my website with a link to the WordPress Freedom Blog
I must receive over 5 comments on this post wishing me luck!
I must then submit the link to WordPress Freedom Blog

Prizes

1st Prize Winner: $500 Cash (via PayPal) + The Unlimited Video Theme Pack from Press75.com worth $295 + 6 Months WooThemes Club Single User Subscription for from WooThemes worth $250 + WP Freedom Plan Life Time Hosting Sponsorship worth $100/year.

So… Is my site up for the challenge?

Well if you have been following my feed, like my work or just want to be kind, throw me a comment below and lets see how I do!

So many sites these days have beautiful headers, amazing graphics and top notch artwork, but some completely neglect the quality, visuality and more importantly, the functionality of there site footer. So in this item I am going to hit on certain points I feel everyone should include on a web site footer.

Design

Unless it really compliments your website to have a minimalistic footer, put some thought and design into it, remember when a visitor comes to your site and scrolls down, your footer maybe the last thing they see before leaving your site, make it something to remember. Now I am not for one second suggesting that people should compromise the integrity of their website just to throw in some funky graphics on a footer, if it is going to look bad, don’t do it!

Logo or Branding

I feel it is always a good idea to have some form of logo or branding incorporated on your footer. This like on this site can be used as a ‘home button’ or perhaps a ‘back to top’ or it could simply add some simple visual impact to your footer if you are keeping it low key on the design front.

Important Links

It is a very good idea to have important links on your footer, say your home button, contact etc. This is not only to improve traffic, but also to stop people laboriously having to scroll right to the top of your site to click on the home button, especially after scrolling right the way down a 7ft long rant about quality web design footers!

Back to Top Buttons

Back to the top buttons don’t always have to be simple text links. They can be incorporated into your design and sometimes improve it if done correctly. Another nice link to have is ‘Back to Start’ or ‘Back to Content’ where it wont take you back to the header of the page but back to the start of the article you have been reading, maybe if it spanned over 4 or 5 pages, it would save finding the base link, messing with the URL or having to return home to link up again.

You may also like to include page links if you are scrolling through archives of blogs. I have the opposite issue on this point with Google who have decided to add their page navigation to the footer of the search but not the header.

Now don’t get me wrong, I love Google and am very impressed at how they are developing the SE, but it is rather annoying that on my monitor you have to scroll have an inch down on an image search to reach the page navigation!

Summary’s & Important Info

Your footer can also include a summary of your page, a few lists of latest news and events or even recent comments on blogs you have written. People do tend to hang around a page footer longer than you think! Even if it is just to stop and register what they have just been reading, they always pause and scan, even just for a few seconds. Within this few seconds the brain can take in a lot of information, if its there! It could be the difference between a visitor to your site clicking on something new or leaving your site for good.

Conclusion:

Well it may of seemed like a small rant, but I hope I have expressed some useful information in this topic. I conclude that it is all well and good having a beautiful header as a ‘welcome to my site, look what I can do’ statement, but show the user that once they have spent there good time reading what you have to say, you didn’t just forget about them with a cold hard 1px horizontal hr tag and some copyright bumf! Give something back to your readers with a lovely warm page footer.

Well, this number is probably much higher than you think. If you are truly looking to create a web accessible site, then you need to take color impaired visitors into consideration. For colorblind individuals, the wrong color combinations on a website can make navigation and interaction impossible.

‘‘A shocking 1 out of 12 visitors to any website are Colourblind to some degree.’’

I know what some of you might be thinking. Why should I create a website for a small group of people? You might be surprised to find out that colorblindness isn’t as rare as you think it is. This means that one in twelve of your visitors might be coming to your site with some sort of color disability. Just think how many visitors and customer conversions that you might lose if your website is not accessible and usable by the colorblind.

Heres a few benefits:

1. An accessible website is more likely to be ranked well with the search engines than an inaccessible website.
2. By designing a colorblind accessible website, you are also targeting PDAs, 3G phones, and similar technological devices that are used for web access.
3. It is seen as more professional to have a website that doesn’t exclude the impaired or disabled.
4. Equal access to everyone regardless of their abilities is always a nice things to do.

Unfortunately there isn’t only one kind of colorblindness to take into consideration when designing.

Trichromat Vision is the “normal” color vision, uses red/green/blue color receptors which is the kind of vision that most visitors have.

Now there are three different color vision impairments, and they are:

1. Anomalous Trichromat Vision
   Anomalous Trichromat vision, uses three color receptors but one pigment is misaligned
   • Protanomaly Vision: reduced color red sensitivity
   • Deuteranomaly Vision(most common): reduced color green sensitivity
   • Tritanomaly Vision: reduced color blue sensitivity
2. Dichromat Vision
   Dichromat vision, uses only 2 of the 3 visual pigments – red, green or blue is missing
   • Protanopia Vision: unable to receive color red.
   • Deuteranopia Vision: unable to receive color green.
   • Tritanopia Vision: unable to receive color blue.
3. Monochromat Vision (can see only one color)

As web designers, we are all used to having the entire palette of colors to choose from. Designing a website for the colorblind won’t limit your color palette at all, however, you will need to watch out for the color combinations that you do use. Learning what color combinations do not work, is a great place to start, because without this you will get nowhere. Basically, you need to remember to not use Red and Green Combinations, either to decipher link text, or images. Although most people see Red and Green as contrasting, those with Anomalous Trichromat Vision Colorblindness (the most common type) will not be able to tell these colors apart. This also applies to combinations with variations of green and red, including colors such as purple and orange.

‘‘Design contrast is important when designing for the colourblind.’’

It is necessary that you prioritize your website’s content to find the most important content. The more important the content, the more necessary that it will be to make these items colorblind-safe. The most important aspects of a website are usually navigational text (includes image and button text), menus, headers, and subheaders.

Make sure that these items are very high in contrast…this means that you should either make these items black and white or opposite ends of the color saturation pole to their particular over lying background colour. Black and white is the best possible contrasting scheme, but they do not offer much in the way of design, so a balance must be found

If you aren’t sure if a page is contrasted enough, one good tip is to desaturate your website (save first) in Fireworks or Adobe Photoshop and see if the images still have an impact. Desaturating the image will remove all the color from the image and this way you will be able to tell if the image has enough contrast without color to be seen.

Conclusion

Make sure when designing websites that you keep the visually impaired in mind, they have every bit a right to view the information on your site as anyone. If it means compromsing on that funky fade or sleak shade, then do it. Design can be found anywhere, and if lost in one place, can be made up in another.

Now everyone has their own techniques on implementing images into a design of a web site, whether it be a background image, logo, or portfolio piece, all of which need to contribute a degree of information.

Let us first of all tackle the static image.

Everyone in the web design/development community knows that when implementing images to a site you need to have a piece of descriptive text attached to that image, aka the ‘alt’ tag, this is very useful incase the viewer browsing your site has their images turned off, or if they are visually impaired and using a screen reader.

So quite simply your image code would be something like this:

<img src="branded07_img.jpg" alt="Branded 07 Image" />

And then of course you would add your style alignement, etc etc.

Now how about Images that portray important information about your site…

This was of course my very embarrassing and amateur mistake, which im not afraid to admit as I learned a lot from it.

In a particular site which I had designed, I had been implementing images used in logos and even site navigation using background images applied by css.

Now this is a great technique for making your site visually lovely, but it wrecks your site when images are turned off as there is no alt tag to display!

Example:

My technique for showing images used to be by using css, with a block element and a background-image. If I wanted the image to react on hover then I would duplicate the image with a different look, either colour or shade etc, then change the background-position property on hover. This works really well as you get no delay when hovering as the image is already loaded up.

<style>
a, a:visited{
background: url('images/b07_test_link.jpg') no-repeat top left;
display: block;
width: 440px;
height: 50px;
}
a:hover{
background-position: bottom left;
}
</style>


The problem arises when you turn your images off, there is nothing there! And for an image which portrays important site info like site navigation or logos, this is a real bummer.

The Answer:

Well I messed around with a few solutions and came up with what I think is a pretty good fix!

Instead of using a background image, we instead, have our div or a tag displayed as a block, as before, but this time with a little thing called overflow:hidden; applied.

Now what this does is it means we can still have our rollover image with hover reaction, but instead of pulling the image in from a background image, we actually insert the image into the html as an img tag. we then position the img using css and with our wrapper set to overflow hidden, the result is pretty much the same! Although this time, the img description is there for all to see if images are switched off.
<html>
<head>
<style>
a, a:visited, a:hover{
display: block;
overflow: hidden
width: 440px;
height: 50px;
}
a img{
margin: 0;
}
a img:hover{
margin: -50px 0 0 0;
}
</style>
<head />
<body>
<img src="branded07_img.jpg" alt="Branded 07 Image" />
<body />
<html />


Slght issue with this in < IE6 but nothing to serious, the hover state does not seem to react for some reason, still working on that one!

The Conclusion:

Images are a great way to portray information, but make sure that imortant site information always has an alt backup, try to keep navigation to only background images with text to display the wording, and your logo is your brand, if someone has images switched off and you dont have your logo description on, they may aswell be on ebay!

GAWDS Here I come!