Back and Forth

Stop Laughing at Me!

Do you ever picture Bill Gates laughing when you have to go back and “fix” and otherwise perfectly semantically built layout to make it work in Internet Explorer?

I realized tonight that I do, and that it’s one specific scene that comes to mind, this one:

I’m not entirely sure what Steve has to do with anything, but certainly there’s some evil he’s perpetrated recently that was worth a chuckle.

Man That Was Dumb – Vol. I

This was one of those times where I don’t know whether to be annoyed with myself or annoyed with FireFox; for the moment, however, I choose the latter.

My contact form on jwindesign.com was getting a lot of spam recently. The only validation I had included was checking the format of the e-mail but not much else. So in an effort to curtail some (hopefully all) of the useless e-mails I added an easy math problem to validate something of at least mild intelligence was at the computer. Much to my chagrin the spam kept coming.

What was going on? Did they actually have a team of slaves typing these e-mails one at a time? Couldn’t be. So I started poking around my code to find out what I did wrong, only, everything looked correct. Then I realized the form submitted itself any time you pressed the submit button regardless of my Javascript. The part that confused me was the fact that my submit button wasn’t really a submit button, so why the hell is it submitting?!

The solution: FireFox interprets any button within a form that hasn’t been explicitly declared a “button” with the “type” attribute as a submit button.

I suppose statistically it makes sense, more people will forget to make a button a proper submit even though they intend for it to do just that than folks who don’t want it to submit.

He Had What in His Desk?!

I had my last day at my previous job last week and instead of making my way to my desk to collect my belongings they were apparently inventoried and deposited in a box by my former manager with this list taped to the top of the box. This box was waiting for me in the lobby of the building and upon seeing the list of contents my friends and I couldn’t help but crack up laughing.

Some of my favorites include: 1 toilet seat, 1 traffic citation, 70 pennies and 1 How to Take Over “TEH WORLD” book.

Lessons in Subtlety ep. 1 – Pixel Precise Accents

Given that we work in a finite resolution media (screen design) there are not infinite levels of granularity with which to get crisp accents. The key is to use the unit of measurement we do have (the pixel) as effectively as possible. For examples of this let’s take a look at itsartist.net.

The active page treatment on the main navigation is a good place to start. The highlight has a definite color, dark grey, but instead of making it a solid color the designer opted to give it some depth. The top 1px row is the main color and the subsequent 1px row is a much lighter color. This highlights the “button” and gives it an edge. There is also a very subtle gradient from dark grey to dark greyier.

Next is the line break, while you can find more examples of this style of highlighting, this was the most obvious use. Again the use of 1 line being darker than the background and 1 line being lighter gives it the appearance of being recessed into the layout with the lower edge catching a slight hint of light.

Finally, little accents and flourishes can add a “finished” look but they don’t have to be complicated. At the bottom you can see how adding more than just a line to break up content items can add visual appeal. The actual accent is nothing more than 3×3 pixel plus signs.

See how it all works together at: www.itsartist.net