I will soon, hopefully, be undergoing a new project for a relative of a very close friend of mine.  In doing so - since the potential clients are not well versed on the Internet, web 2.0 and the cutting edge - I decided to find a series of templates that would outline several different ideas and concepts.  It also gave me the idea for this post.  Basically the following list outlines 10 well done templates(or in the case of Zen Garden entries, simply designs) that you, potentially even as an experienced designer, should look to for inspiration, ideas and thievery.  Enjoy.

10.    Nautica01 - a simple, clean design.  Smaller width but one of the things I like most about this is the left navigation and the rollovers they do using CSS.

9.    The Holy Grail - basically just a wire-frame but a design I’ve stolen heavily from.  Not only clean and compliant - but SEO friendly as well since your content comes first in the markup.

8.    Deep Thought - a Zen Garden design.  A good example of disjointed design in that the containers don’t line up.  A good concept not utilized enough in web design.

7.   Pret-a-porter - another Zen Garden design.  The only example of a horizontal design.  This looks and works awesome in complaint browsers and degrades well in IE.  Horizontal design is not used much in web design - but when done right it can be very powerful.

6.     Ballade - a final Zen Garden design.  The way they make the graphics - the steps, bridge, etc - flow from container to container - simply brilliant.  A side mention for Zunflower since we’re talking about graphics - the shading gives the containers depth, making it a very powerful visual design.

5.    Plain 1.0 - a Six Shooter Media design.  I actually modified this for one of my first home page designs and learned a lot from the skills of this designer.  Very talented.

4.    Andreas01 - an Andreas Viklund design.  Now hosts his templates on OpenDesigns.org, but since I didn’t see this one on there it’s from OSWD.  Simple, clean, elegant - great dropdowns and rollovers, excellent use of a header graphic, nice use of background graphic to give depth and could easily be adapted with the holy grail techniques to shoot the SEO up.  So, by combining concepts from the two, you’d have an standards compliant, search engine optimized and graphically beautiful site.

3.    Andreas09 - another Andreas Viklund.  If you’ve looked through the Wordpress themes, you might recognize this one.  Not only does it change from a 2 column to 3 but it’s also preloaded with 6 color schemes - my personal favorite being black.

2.     Plain 2.0 - another Six Shooter Media design.  An update/revision on 1.0.  Bolder graphics, excellent graphics use on the containers, excellent rollovers on the side navigation, and good font and font color choices.  Some web 2.0 flavor and methods as well as a bonus in a skip to content accessibility link.

1.    Thin Green Line - a final Six Shooter design.   This and Plain 2.0 could switch everyday depending on what mood I’m in with this currently being my favorite of his templates.  Overall, it’s not as nice a design as 2.0 but the top navigation with the animated gifs has just got me hooked right now.  As with the other 2 Six Shooter designs this could use some holy grail combination to push the content first and improve the SEO.  I would love to see what he could come up with just stealing the navigation from this and replacing only that part of the design on 2.0.  I just might have to try that in the future.

For more free templates, check out my del.icio.us.

Random Tidbit: Found this awhile back.  Apparently web2.0 is catching on since even some religious sites have used methods from it.  Very interesting.

So I’m designing the other day in Firefox and everything is going fine.  My code is clean, simple and rendered correctly.  It looks good and matches the mock I had.  Life is good.  So I fire up Internet Explorer (IE) because, unfortunately, the majority of users still view the web through it.  And not only does it not render anything like Firefox - my beautiful design now looks ugly and out of whack - but it is also broken.  So I now have to take time to utilize hacks to make it render similar - not even alike, just functional - to compliant browsers.  For those of you that don’t know hacks are (typically incorrect) snippets of CSS that are read by less than all of the browsers - I have been using the Holly hack as of late.

As a fan of web standards and accessibility this grates on me.  Not only because IE makes it so difficult to make things accessible unless you use em’s instead of px’s, for one, but also because I spend 25% of my time or more just fixing things that shouldn’t be there in the first place.  That’s time wasted that could be spent making my designs more clean or adding new features.

IE6 has gone from the top browser (many years ago) to now being that uncle that you’re embarrassed to have people meet.  I have heard how many people have adopted IE7 - which I haven’t used much but is much closer to being compliant - but when will it finally be the staple?  When will I stop having to code for IE6?

Unfortunately, professionally, I can’t stop yet.  Depending on which statistics you look at - compare the earlier ones to these for example - IE6 is still used by 42-61% of the users out there.  That kind of majority you can’t ignore as a business.  As an independent designer though, I can.  I’m drawing a line in the sand.  I will be soon upgrading my designing computer(s) to IE7.  After that, none of my templates will be tested in anything lower than 7.  So if you want it to work in 6 and it doesn’t - you’re on your own.  I realize that this may hurt me for sites I list my templates on - like OSWD which just recently got around to uploading the (very bad looking, since I was much more inexperienced then) templates I sent them over 8 months ago - but I simply have stopped caring.  Designing for IE6 is like Microsoft designing a new 360 game and testing it on the original Xbox to make sure it still works - they wouldn’t.

So that’s my line in the sand.  Hopefully more designers will join me and more users will become aware of the fact that there really is better out there.  Firefox and Opera(which I personally prefer) are both excellent browsers and if the user is really sold on IE then 7 is a free update.

I will also be sending OSWD 2-3 more templates (hopefully) in the next week.  No telling when they’ll go up though.  Don’t judge me for the work currently there - you’ve seen that I can do much better now.

Random Tidbit:  Since I’m harping on Microsoft, I wanted to share an interesting article about how the world would be if Microsoft was no longer around.  Don’t think I’ve shared that one yet.  Also, an excellent article on 456 Berea St. citing 10 reasons to learn and use web standards.  As someone who has had to explain why standards are important to both clients and employers, I kind of wish I had this article 7 months ago.

So after finishing the mock over 2 weeks ago I finally got the chance to slice and code the new version of my site. Because of the look and feel, I’ve - at least temporarily - named it version 2.0. My old version, 1.5, is still linked - it’s just been moved to another folder.

As it mentions on the site, it is an open source design - so feel free to steal the template for your own site. Please give me credit in a simple link back to my site somewhere in your right navigation or down the bottom - it’s the right thing to do.

I chose to go again with an XHTML 1.1 strict format. It is nearly all CSS and XHTML with some simple javascript to pull links from my del.icio.us onto it. I had seen in the past a way to do the same with posts from wordpress but I have been unable to find that again. If you know where to find the instructions or how to do this - from the free ones hosted here, not if you’re using the code to host it somewhere else - please let me know.

I have left hooks in the code for future print and handheld style sheets, though I do not currently have them up. I’m also thinking of adding a larger font style sheet in the future. It works fine up to 2 font size bigger I believe, but not all people know how to do that. Including a link with some javascript to switch it is typically better.

Random Tidbit: 3 interesting web design links for you today:

1. Smashing Magazine’s look at the importance of white space in web design. This contains several good articles on designing for accessibility.
2. A fairly good article on Helium talking about things a web designer should have in their toolbox - including templates, images, icons and where to get them.
3. Finally, Smashing Magazine’s 50 most beautiful CSS based web designs of 2006. Excellent inspiration material in here.

I saw this article awhile back and meant to blog about it, but haven’t had the time.  In working on my site redesign though it struck my eye as I was perusing my links and felt the urge to share it.

Recently, Target was sued in a class action suit because their site was inaccessible to the vision impaired.  It has been a law for awhile now that web sites, like other facilities open to the public, must be accessible to all.  When doing a redesign you must keep in mind not only the various browsers and screen resolutions it’s users might have - but also other mitigating factors that might cause them to be unable to use your work as intended.

I am not well versed on the subject, but I would check out Molly’s blog - she has done a lot for the web standards and accessibility community.

Random Tidbit: In further perusing my links I found another link from Juicy Studio talking about Validity and Accessibility - well worth a look and a bookmark on del.icio.us.

I have been very busy with my new job and an update for my website - so I have not thought of anything interesting to say.  I have however, found some interesting links that I felt like sharing:

• Be careful with spending any $2 bills, I found two stories about problems in doing so - one from Woz, who actually has an interesting site, and one involving someone unhappy with Best Buy.
• An interesting post about what code doesn’t do in real life that it does in the movies.
• Some of the top secrets of pizza delivery drivers.
• Why not to pump gas at noon.
• How the gaming generation has a different approach to problem solving and learning.

I have more that I’ll share in future blogs, but I had a backlog of them available.  Enjoy.