cre8d design

As a follow-up to my blog design trends post, I’m feeling a need to change “big footer” to:

The content-rich footer

Instead of cluttering up the sidebar, why not remove it completely, or keep the main items on there but move everything else to the footer region, organised nicely in multiple columns?

This way, you’ll still have any important links up the top in a sidebar (or, in a top menu) and if a person has scrolled/read down to the bottom of your blog entries, they’re presented with a set of options right there to earlier content, related links etc. They’re at the bottom most likely because they’re interested in reading more. Otherwise, they’ll get to the bottom of the page, and all those sidebar links you were hoping they’d click on are most likely out of sight. They’ll have to scroll back up to see them.

Examples include:

Viatrax, If Else, Business Logs, Dennis Bullock, Andry Huzain, Juque, Ordered List, Shaun Andrews, Subtraction.

Last week my power supply died on my laptop so I had few unexpected days of spare time up my sleeve. I pulled out a couple of books I’ve been meaning to read but haven’t got around to: Web Standards Solutions: The Markup and Style Handbook and Bulletproof Web Design, both by Dan Cederholm of SimpleBits. I’d recommend both books. They’re easy to read, reasonably concise (although I found the chapter summaries a bit repetitive/redundant) and very practical.

If you’ve read about web standards and you’re delving around in HTML/CSS and wondering if your coding could do with some improvement, Dan is a great teacher. I’ve been using CSS for many years now…in fact, I still remember printing off a very long series of Web Monkey articles about CSS when its use was still fairly new and reading them on the bus on the way home from University. I remember thinking, oh wow, this will save a lot of time and code will go back to structured content and all the styles will be managed by CSS.

The great thing about CSS is that’s there’s always something new to learn with new challenges… thanks to browser differences (although this is less and less of a saga than it was. What Dan reminded me of is that I should focus really hard on thinking about the best tags to describe the data on my page – whenever there’s a list of items (e.g. on a menu), always use a list tag… For experienced CSS users, these books aren’t a waste of time. There’s always new approaches, tips and tricks that can be picked up when seeing coding through someone else’s eyes.

A handy tip I picked up from his book:

If you want to have a background image for a navigational tab, and a different background image for when you mouse-over the tab…and you don’t want to use messy Javascript to pre-load the mouse-over image so that it doesn’t pause before showing the mouse-over image… there’s a nice way using CSS!

Create one image for your tabs with the different tab images sitting one underneath each other. You’ll need to think about how high your tabs will (possibly) be. e.g.:

In your stylesheet, add in some code like this:

#mainmenu li a { background-image: url(images/tabs.png) no-repeat top left; }
#mainmenu li a:hover { background-image: url(images/tabs.png) no-repeat bottom left; }

What happens now is that you’ll normally see the top part of the tabs image but when you mouseover the link in the main menu, you’ll be seeing the bottom part of the tabs image!

If you’ve been running your blog for a while and done a tonne of modifications to your template (e.g. third-party ad code is often dodgy) or even if you’ve just redesigned (as I will often do with my personal blog) it’s worthwhile to do a bit of a spring clean every so often.

This list is also a reminder for me, as I haven’t completed all these things yet. I haven’t included a list of all the reasons why these things are important but in short: you’re making your blog more accessible, flexible and user-friendly.

1. Validate your home page template, your blog post templates and your CSS files -
   http://validator.w3.org/
   Type in your blog’s URL and click check. Reduce those errors down to 0.
2. Once validated, check your blog in multiple browsers, especially:
   IE 6, Firefox and Safari. IE 5 is good too. If you’re on a PC, you can still see what your blog will look like in Safari thanks to SafariTest
   Iron out any bugs.
3. Increase the font size in your browser settings for both IE and Firefox. Does your blog still work OK when you increase it up a couple of notches? Do you allow people to resize in IE? Does your blog work OK when you decrease the font size (not as important as the increasing though).
4. Turn off stylesheets in your browser. Does the blog’s structure still make sense?
5. Turn off images in your browser. Is everything still understandable? Is the text still readable?
6. Try resizing your screen to 800 x 600 pixels and 1024 x 768 pixels. How does it look?
7. Check the download time using this handy tool
8. Check the quality report for your blog
9. Read Blog design and usability advice and Blog Interface Design 2.0 for ideas as to how you can improve your blog’s interface
10. Oh, and most importantly, talk to the people reading your blog – find out what they like and don’t like!

I find the Web Developer’s Toolbar invaluable for many of these checks.