About a month ago I took an honest look at my website and realized how much I did not like it. It was a two year old weekend project. I had wanted to update my old site (a very basic site with a Wordpress blog) to ExpressionEngine. I made it during Christmas break over the course of a few days, here and there as I had time.

Well, I got it done in a few days. My test project was over, and I didn’t do anything to improve it as my skills improved. Two years later I cringe when I look at it. The good news I suppose is that I’ve learned a good deal in those two years. It is humbling to look at something you did and see so many flaws, but thats what education will do to you.

When I resolved to make a new site…a site I can be proud of…I set out a few goals:

• learn typography
• pay attention to the little things
• make it usable
• learn…a lot
• have fun

Typography

Once upon a time web designers had a handful of fonts to chose from. Why? Browsers only supported a few and there was no way to make sure the user had the same font on their system. If they didn’t, they saw the standard font, not the one you spent hours picking to match the look and feel of your site.

Now designers can chose from hundreds…thousands…of fonts. Modern browsers are able to see that a custom font is used, download it and use it to render the text. This makes a HUGE difference in viewing a site. I spent several hours looking at the basic rules, some popular combinations, and the options that were available to me. My choice? Chunk Five for all headings and PT Sans for content. A nice combination of a heavy serif font and a wide round sans-serif font. I’m feeling pretty good about this selection, but how knows. A year (or a few months) I may look and see flaws to this choice or just not like it as much.

The Little Things

There are all kinds of ‘fun’ effects that you can do in Photoshop and even CSS. However the age of visual overload ended nearly 10 years ago when people realized that “cool” websites were not good websites. All kinds of moving Flash objects and sound effects do NOT make a good web experience. The new rule of thumb is if you use an effect, use it minimally. It should be something that you notice when it isn’t there, but not something that screams for attention when it is there. Things like text shadows, gradients, drop shadows, and the like. On this version of the site I do use these at times, but in more moderation than the past.

Another new trend is using texture. Solid colors are not natural. When was the last time anything natural was one solid even tone? Subtle gradients help, but so too do textures. I added some texture elements to the site to give it a more natural look, and break up the monotony of even color. There certainly is a time and place for solid colors, but I prefer the way a subtle texture looks.

Make It Usable

OK, I’m sorry for the black background and light text. Looks nice, but not really user friendly. This one puts users a bit more up front. Keep it simple, make it easy on the eyes, make sure mobile users can use it (ie no Flash or extensive use of hover effects), and all around something that really has the user in mind.

Learn…a Lot

This one was a blessing and a curse. I am not much more proficient at using jQuery to enhance the site UI (user interface), but at the expense of many late nights. I can’t tell you how many times I would find myself staring at the screen for far too long before finally getting things working right. I also learned about typography, how to make seamless repeating background images that aren’t huge files, how to make an entire website mock up in Fireworks (yup, no Photoshop used on this site), how NOT to upgrade ExpressionEngine to v2 (why you won’t find my old blog posts…but thats another entry).... Yup, I learned a great deal, and still have more to learn. This site will evolve over time as I take on new challenges.

Have Fun

Some of the effects are for usability (the navigation rollovers) others are more for fun (the theater inspired dimming of the photo gallery page). I tried to keep it under control and not work against the other guiding principles (keep it usable and mind the little things), I think I managed to do that.

Making this site was a challenge at times, but I enjoyed the process. There are few things as satisfying as developing a concept and then seeing that come to life. It isn’t done, it will evolve, more content will be added, but at least now I have a website I’m not embarassed to direct my peers to. I welcome feedback, people peaking at my code and letting me know where I can improved. I can take it. Just don’t tell me it doesn’t work on IE 6, I know and I don’t care