our thoughts

Someone stole a design I did for Problogger and thinks there’s nothing wrong with it. I work bloody hard on blog designs and to have my work stolen is enfuriating. He’s removed the header menu now to make it look a little different, but the theme is still the same. I’m. Not. Impressed. Right. Now.

Update: The stampede of bloggers trying to rid the world of wrong-doing succeeded today. Thanks for all the support guys.

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.

2006 will be the 5th year that I’ve been designing blogs and I’ve been reflecting on some surrounding issues. Here’s three of them for now.

  • The sidebar(s) - Standard blog software’s templates are all 2 or 3 columns. Almost all blogs are 2 or 3 columns. As a result, most people want blogs designed with 2 or 3 columns. That’s ok… but what ends up happening often is that the sidebars are just filled up with stuff, just because there’s columns there. Have a good long hard look at many sidebars and ask yourself if it’s necessary to have all that extra complexity and text on the page.
    Could pages be created specifically for people wanting that information? e.g. Archives – apart from a page footer to navigate to previous posts. e.g. Blogroll – could this be on its own page along with informative descriptions as to why you like/read those blogs?
    Consider creating a fun “About me” page with update information on what you’re listening to, reading, doing… and create a teaser which randomly pulls out an item from this page on the home page.
    Don’t clutter your page with too many things other than your main message – your content.
  • The individual post archive template – So much thought and effort goes into creating a nice design for the home page and usually the individual post archive template is a clone, an afterthought. Remember that for most blogs, a large chunk of traffic is via search engines or link ups where people arrive on an individual post archive, rather than on your home page. Imagine being a visitor to your blog, who’s arrived to an individual post. Is it clear they’ve arrived on a blog? Is it clear who the author is and when it was written?
  • Blogspeak – So almost everyone knows what a blog is, but there’s a tonne of other in-crowd-jargon that bloggers are using constantly and, in many cases, probably unnecessarily. Remember what it was like when you first heard all of these terms… it’s a little overwhelming.
    “Syndicate”? That word didn’t mean much to me as a Kiwi. I only knew of it being something to do with TV shows in the US.
    “RSS Feed”? “XML”? What about using “Subscribe” or “Be notified of updates”? (And of course, adding the funky new standard Feed icon for those who recognise it.)
    “Permalink”? Hardly necessary – just link the title of your post to the permalink. No weird word, same functionality.
    “Blogroll”? Try “Blogs I recommend” or just plain old “Links”.
    You get the idea. Step back from your blog every so often and try and reduce the jargon for the uninitiated.

Let me know what you think of these.

CSS… and rollover tabs

January 21 2006
by Rachel

Tagged

Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

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.:

mytabs1.png
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!

How to install WordPress 2.0

January 19 2006
by Rachel

Tagged

If you’ve never installed WordPress before and you’d like to but maybe you’re a little scared of installing it (ssh! I won’t tell!) I’ve created a visual tutorial in Flash which explains the steps involved. If you find it useful, please let me know here.

To view the tutorial, go here and click on wordpress.swf

If you’re having trouble, you can also view it here.

Blog cleanup checklist

January 18 2006
by Rachel

Tagged

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.

As an add-on to my last post (you’ll need to read that for this to make sense), I’ve been wondering why the parking system was changed. It’s not obvious to me, the client.

So, on further reflection:

  • Explain the reason for changes to your users if possible – it may help them want to adapt to the new system, or at least reduce the confusion

Oh, and if you have any ideas as to why, I might sleep better tonight!

Elsewhere: Skype MSN Messenger Twitter Facebook