It’s based on jQuery because using a Javascript library that allows you to traverse the DOM using selectors similar to CSS seemed like a good idea to me. I was surprised at how much actual Javascript I had to write even tough I was using a library as robust as jQuery. I figured I’d put this up as a work in progress, I’m pretty proud of it since until now all I’ve ever done is straight, static CSS & XHTML.

Check it out and leave a comment if you like it because I like comments.

Play jQuery Tic Tac Toe

To install them just visit this page with your iPhone or iPod Touch and hold your finger on the image you want. It will ask if you’d like to save the image. Open settings and change your wallpaper.

For some awesome iPhone wallpaper check out Adam Finley’s iPhone wallpaper.

The old theme was excellent and I still really like it but I felt the need to do some of the more creative things I’ve had in mind that I don’t get to use while working for other people. The new design is all about experimenting and pushing the boundaries of CSS and XHTML. Don’t get me wrong, none of this is ground breaking, but it’s my playground where I can use some more advanced code and not have to worry about selling ads.

The old theme was created when I was a Web Designer so it was very graphic heavy. I am now a Front-End Developer so I’ve focused on code more than graphics.

Some Highlights

100% fluid layout

I was determined to finally create a 100% fluid layout and I did, but I don’t really see the point. It’s never practical when doing client work and as soon as you add graphics or even images to your posts you have to start adding fixed width or min-widths otherwise things get messy. It turned out to be more work than it was worth and it broke my heart to have to add a min-width when I started adding photos to posts.

Dynamic Background Images

At An Event Apart in Boston earlier this year Jason Santa Maria spoke about how design helps to reinforce the story. He explained that his site allows for “art direction on the fly” to bring the web experience closer to the rich visual experience of print. His presentation got me thinking and, since I’m not anywhere near as amazing as Jason, the best I could do was dynamic background images. I add the background parameters to a custom field and use JavaScript to extract those parameters and change the body background. Each post will eventually have it’s own custom background, here’s an example.

So Here It Is

Have a look around, there are still a few things I’m not 100% with (I struggle with type-setting) so like any other personal site, treat it as a work in progress. I’ve added my entire portfolio to WordPress (it was static HTML before) so there are a few kinks to be worked out there. I’m really excited to blog about snowboarding with high resolution snowboarding pictures as the background! I also plan on getting heavy into JavaScript this winter so that should lead to some cool (progressive) enhancements. I already have plans for some way to allow you to make the content semi-transparent to allow you to view the sweet background images.

Thanks for checking out my new theme, enjoy.

Also, let me know if you need any designs cut into perfect XHTML and CSS….

Here is it in 3 sizes:

• 1440 x 900 (My MacBook Pro)
• 1280 x 1024 (The size of my work monitors)
• 1024 x 768 (The old Standard)

The new Love You To Death website is a custom WordPress theme (made by me) with 2 plugins, Gigpress for tour dates and the Flickr Photo Album plugin for photos. I did all of the HTML and CSS and I did a little bit of design (background images) based on the logo, I did not do the logo.

I’m pretty proud of how it has turned out so far. Looks like they need a new store now since they’re still using a static one I built years ago but that will have to wait until after we snowboard in Vermont next week.

Go see the new Love You To Death website!

Even with all of these amazing usability features, 90% of people still manage to screw it up when getting off of the elevator. I live on the third floor, almost at the bottom but still 2 floors away. Whenever I want to go down, the elevator stops and people start getting off on my floor, even though they don’t intend to, they intend to get off on the ground floor.

There are 4 indications that you’ve arrived on your floor:

1. The display inside the elevator shows the number of the floor you’re on.
2. The light on the button you used to select your floor turns off.
3. The floor number is on the wall when the doors open.
4. And if you’re going to the main lobby it looks totally different than any other floor

The elevator designers have given people these 4 very obvious indications of what floor they are on and they still ignore them almost every time I hail the elevator.

This just goes to show that no matter how hard you try to make something easy to use, people can still ignore your hard work, get off on the wrong floor, walk too far out on the wrong floor, and have to keep walking and hail another elevator because they’re afraid of looking stupid.

Web Designers

A web designer designs with the web in mind. They understand how text flows on the web, they understand that the web is dynamic and that their designs should not depend on there being a specific amount of content in one particular area. A web designer understands that there are very few fonts that can be used as live text on the web and they know to only use web safe fonts for the body copy in their Photoshop mocks. Web designers also understand when it’s necessary to use images containing non web safe fonts (for titles for example) and when it makes more sense to use web safe fonts.

Web designers understand how their Photoshop mock will be cut. They know not to design an effect that relies on transparent PNGs if most visitors to the website browse using IE6. They know how big their typical user’s monitor is and they design accordingly. Web designers know that I have to wade through their mess of a Photoshop file and they label and group their layers properly, “Layer 79″ means nothing to me!

Designers

Designers don’t understand any of the above. They design for the moment as though nothing will ever change. They don’t understand dynamic content, they don’t understand that the user has ultimate control over the font and the font size. They don’t take browser dimensions or variable font sizes into consideration. Designers use whatever font they like whenever they like. They make nice long flowing gradients that only work if there are exactly 500 characters in that column.

A designer without an understanding of the process involved in making their Photoshop mock into a website is like a print designer that has no idea how a printing press works.

There’s Hope

Don’t give up designers, you can change. Take a couple of evenings a week and start learning HTML and CSS. They’re not as hard as they may seem and once you know them (you don’t have to be an expert) you’ll be that much more employable, 2 more things to add to your resume.

You can find tutorials that I’ve written in my tutorials section or you can turn to the tutorials at W3Schools. You can read one of the many books I recommend in my library section or ask a web designer friend for some help. Once you understand some HTML and CSS you’ll have much more control over how your designs turn out on the web and you’ll be able to better communicate with your front-end developer.

Life will be better when you know HTML and CSS.