design [spugbrap’s blog]

September 25th, 2007

Ported my old geek blog’s theme to Wordpress

If you read this blog on the web, you may have noticed that the whole site looks different. I’ve never been too fond of the default Wordpress theme, and didn’t like any of the other Wordpress themes that I’ve seen, enough to use them.

I did always like the theme I had on my old Blogger geek blog, but that theme was not available for Wordpress. The theme is called “Rounders 3″, originally designed by Douglas Bowman.

So, I hacked apart a page from my old geek blog, and did some reading about Wordpress theme development (see links section below), and worked on building a Wordpress theme based my old geek blog’s theme. Today, I decided to go ahead and switch this blog to use that newly-ported theme.

Here are two screenshots, for comparison:

Useful Links:
Theme Development « WordPress Codex
How-To: Create a Wordpress Theme in 5 minutes

Feedback:
What do you think of the new look? Please feel free to leave a reply, below! Also, if you run across any broken links, unreadable fonts, missing images, alignment problems, etc., please let me know. Thanks!

July 11th, 2007

Reporting website usability flaws

I’m becoming increasingly aware of usability flaws, as time goes by. I’m a professional web application developer, and tend to work on the presentation layer most of the time, so it makes sense that I pay close attention to user interfaces. I wouldn’t call myself an expert on the subject, but it is something I’m very interested in/passionate about.

But, it’s becoming more of a curse, kind of like the way typos jump out and punch me in the nose, whenever I encounter them. Actually, it’s very much like that. When I run across confusing instructions, misleading button labels, dead ends (pages that don’t include any navigation controls to get back to where I need to be), or any other UI elements that don’t make sense to me, I want to fix them!

Unlike typos, though, I feel like I have a better chance of enacting a change by reporting usability flaws, so I’d like to start emailing companies’ customer service/tech support teams about this kind of stuff.

This requires several steps, though:

track down the correct people to contact (may or may not be trivial… depends on the site)
write up descriptions of the issues, in a way that the recipients will be able to understand (optionally may involve screenshots, URLs, steps to reproduce, etc)
suggest potential solutions/improvements (optional)

As this seems like an awful lot of unpaid time/labor, I think I’m going to start by posting some of this stuff here, on this blog, so I will have it handy if/when I’m ready to deal with the companies directly. That way, I can just post a few quick notes/screenshots immediately, and can deal with some of the details later, if I feel like dealing with it. Unless it’s something I encounter repeatedly, or something that’s really easy to explain, I’m not sure how often I’ll actually follow through. But many companies keep tabs on the blogosphere, so there’s a slight chance they’ll run across it without me having to actually tell them directly. That would be ideal!

An added benefit of posting these things here is that other people (like you!) will be able to comment on them, and perform a bit of sanity checking for me. You can tell me if I’m overreacting, or missing something obvious. Or, you can chime in and say “I’ve run into that, too, and it bugs the heck out of me!” Or maybe it’s a common gripe, and you know of a GreaseMonkey script that addresses the problem. In any case, comments are always welcome!

July 2nd, 2007

Developers embed Pro-Firefox/Anti-IE sentiments in their code

As a professional web application developer, I’m well aware of the challenges involved in coding for multiple browsers (and, even worse, older/buggier versions of those browsers). I also hate it when a website won’t behave the way I want it to, so I often end up viewing the source with FireBug, then messing around with the code.

If I just need to “fix” it on a one-time basis, I’ll just edit it with FireBug, but if I need it to behave better every time I visit the site, I’ll write a GreaseMonkey script (Incidentally, I use Platypus to generate a lot of my GM scripts. So easy!).

Sometimes, in the course of viewing/hacking up their code, I run across funny things that developers left in there. Here are a few of them that I’ve run across, which express the designers/developers’ browser preferences.

From viewing the source of a last.fm page:

<span class="iesucks" style="display: block"> </span>>

[I just liked their css class name]

A friend sent this next one to me a couple months ago. I went and tried it, at the time, and I got the error message. But they seem to have fixed it since then. Anyways, this online icon maker page, when viewed in IE, would throw a javascript error when you moved your mouse over the editor component on the page.The funny part was the error message:

'shitty_IE_needs_this' is undefined

Ooh, I just noticed that this site was featured on my favorite geek humor blog, Worse Than Failure (formerly known as The Daily WTF). They’ve got a screenshot of it, so you can still see how silly it looked.

This last one was not found in source code, so it may or may not have been written by developers, but it sounds to me like it was. From Google Reader’s FAQ (bold/italics added for emphasis):

15. What are Google Reader’s system requirements?

For the best user experience, Google Reader requires an up-to-date browser. We recommend that you use Firefox (download: Windows Mac Linux) or Safari (download: Mac), but Internet Explorer will work too (download: Windows).

August 7th, 2006

A Handy CSS Debugging Snippet

From A Handy CSS Debugging Snippet:

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

This code, if placed in your stylesheet, outlines every element on the page with colored boxes. I like this because it’s simple, and I learned something from it. I had no idea that you could use an asterisk for a css selector. Then, the idea of stringing them together to represent the elements that are most deeply nested with different colored outlines. Pretty slick!

I will probably still use the many functions in the Outline menu of the Web Developer Extension for Firefox, and the Internet Explorer Developer Toolbar, for most of my everyday outlining-for-debugging needs. There are also bookmarklets out there to do this type of thing. But, this snippet deserves a spot in my toolbox, because it seems like it could could come in handy someday.

spugbrap’s blog