The last few weeks I’ve been doing a lot of CSS writing. While this doesn’t necessarily fall under my job role, on many projects I end up doing it because I’m the “designer”…therefore I am put in charge of implementing style. Whatever. Turns out I kind of like it, so I let it pass, but we need more developers who understand CSS like the back of their hand. We can also use more designers who understand and write CSS as well. If you’re either, send me an email (jevnin at thoughtworks.com)…we’re hiring.

Anyway, what I really came here to say is that the world absolutely, positively needs a tool that is dedicated to CSS testing. I do enough switching between browsers, browser versions, and operating systems to make one sick. In my opinion, this is a giant gaping hole in the process. If our users can’t see our content as we intend, the web-based tools we build will not be useful, if at all usable.

Of course, the browser companies could do their part to follow the standards. Some, for the most part, already do. Others blatantly defy the rules. Nonetheless, since these fellows don’t play well together, we (the builders of the web sites and web apps) are in need of a good testing tool in this area. I’ve Googled for some solutions, but really they all either look crappy or they charge up the wazoo.

There’s obviously a huge need for this tool. Where’s the open source solution?

If you’re not looking at this entry on my site, it’s not gonna look quite right. For the best view, look here.
Just wanted to let y’all know that I’ve fixed my blockquotes so that they’re hanging. You’ll notice that I not only hang my blockquotes, but list items as well. Check it out:

This is what it looks like when I have a blockquote. Notice how the quote mark does not get in the way, and there this block of text has perfect left-alignment with the rest of the text on the page.

And what about lists?

1. Here
2. is
3. an
4. ordered
5. list

and

• Here
• is
• an
• unordered
• list

Why do I do this hanging business?

Notice how all the text on the page aligns perfectly on the left? That makes it easier for you to read the text on this page, and after all, this blog isn’t just about me…it’s about you too! Typography is fun!

All sorts of automated tests happen on projects at ThoughtWorks. There are Unit Tests, Functional tests, GUI tests, and others that make sure the software we’re building runs well from the most back-end function all the way to the user’s interface.

One thing we don’t test, however, is where particular elements land on a screen. We make sure that the drop-down box you were expecting to be on a given page is there, and that it holds the values that should be there, but we don’t make sure it lines up right next to the label that explains what it is for.

I’ve brought this up a few times while on projects, and developers have told me that we don’t test for screen position because we just can’t. I wonder how true this is.

When it comes to visual design, the placement of elements on an interface does matter. When doing a visual assessment, it’s important to me that all the pixels on the left-hand side of the screen are aligned to a grid line. It’s important that that drop-down is placed right next to its label. It’s vital that the company’s logo is always on the top left. And even on a low resolution monitor, this input box needs to align with the others. On and on…there are plenty examples.

I understand that testing for screen position is a hard problem, and is impossible with our current automated testing tools. But is it really impossible altogether?

Hey all you developers out there, weigh in with your opinions. And for anybody else out there…how important would a tool that does this be to you?

From the burrows of my brain flows a fresh design idea. Hey Canon, feel free to implement:

So, you know how when you’re taking a picture with a group of people and the person who was elected to take the photo has to take it 12 times with 12 different cameras? Why don’t they make it possible to simply beam the photos between cameras. That way, only one photo needs to be taken, and it can be beamed to all the others.

Or! What if you could simply send a photo to someone directly from the camera. On board email? Should be easy enough…photos need not be sent in the moment, it could happen as soon as you dock the camera to your computer. This would simply help with the whole “Now, who did I say I’d send pictures to? And which ones were they” problem.

Anyway, just some ideas.