Category Archives: css

css, templates, web design, webstandards

10 Best Templates to Borrow (i.e. Steal) Ideas From

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.

accessibility, css, web design

IE 6 == bad

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.

accessibility, css, web design

Keeping Accessibility In Mind

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.

css, web design

A Tale of two Posts

I was perusing through my RSS feeds the other day and came upon two posts that caused polar opposite feelings for the future of web design in relation to web standards, CSS and what I hope to do with my life.

The first was Smashing Magazine’s 50 Most Beautiful CSS-Based Web Designs in 2006.   Seeing some of the beautiful, cutting edge and still standards compliant sites that people can design is uplifting.  I can learn a great deal and draw lots of inspiration from more then a few on the list.  I thought it might be a sign that the days of the past – nested table designs, tag soup and such – might finally be starting to move into the past.

Unfortunately I came upon a separate post that leans 180 degrees the other way – Are Web Standards Bad for Business.  I had hoped this was a post written by someone new to the field or ignorant of the benefits.  This was not to be.  The writer is well versed on what standards compliance means and, in fact, someone who practices designing compliant sites.

Coming from a site that had a lot of “legacy” code that I spent a lot of time upgrading – as well as my as yet limited skills could – to more compliant CSS/XHTML form, a lot of the points he made hit home.  Sometimes you have no control.  Sometimes what the customer buys before you’re even involved handcuffs you with regard to design and no matter how hard you fight you can’t always win.

It’s hard enough setting yourself apart from the pack when (quote from same blog) “print based designers with no desire or experience in web standards design can churn out “pretty” cookie cutter web sites via using various automated software product.”  To have to teach about why standards compliance are worth it as well just makes it that much more difficult.

If Molly and Meyer can’t come up with a better solution, I don’t think I can.  I just hope that I see more of the former in the future, rather then the latter.

Random Tidbit: Since this post is already talking about explaining programming/design to the non-programmer/designer I wanted to list an interesting post along the same line.  Check out The Iceberg Secret, Revealed on Joel on Software.

css, web design

CSS: Avoiding Div-itis

As a new web designer one of the things I was guilty of at first was a condition called “div-itis.”  This is a common affliction of even some of the more advanced designers out there – usually in their case because of a lack of time to make the code elegant – but most typically of people who used HTML in the past and now try to bring those skills to bear using XHTML and CSS.

Div-itis’ symptoms include code overrun with unnecessary divs – usually 3 or more levels thick – that simulate – in essence – the old table based code we used to write.  This causes – as with tables – higher page weight, lower SEO and a difficulty in updating this code later on down the road – since it is overly and unnecessarily complicated.

Fortunately, this affliction can be cured rather easily.  The way I cured it was reading books on CSS – and not just any books will do.  I personally recommend books by Eric Meyers and the Zen of CSS Design book.  Meyers has several good books but I would start with Eric Meyer on CSS and More Eric Meyer on CSS.  One those are complete the book Cascading Style Sheets: The Definitive Guide should become your best friend.

One of the most simple methods these two books relate – and forgive me for not recalling the technical term off the top of my head, feel free to comment with it – is using 2 or more selectors in your CSS to narrow in on the specific XHTML you want to style – rather then wrapping it in a containing div.

For example, say you have a linked list on your page that you want to style different from other linked lists – say because it’s a list of your recent work and you want it to stand out.  Instead of wrapping an unnecessary div around the list you want to style and using that as the anchor, you could simply add an id or class – if you’re going to use this more then once – to the ul and then style off of that.  Example:

Old (div-itis) rule:    div#recent li { some styles }

New rule:                   ul#recent li {some styles}

Both have the same effect, but one saves you a div.  This seems like a small thing, but what if you could save 10 divs on each page.  And your website is 100 pages, receives 1,000 visitors a month and the average visitor views 8 pages.  Say those 10 divs cost you 1KB.  1KB * 8 pages * 1,000 visitors = 8,000 KB of saved bandwidth.  7-8MB of bandwidth might not seem like much, but on a commercial site where each page it might save 2-3KB and receive 100,000 visitors – it can add up quickly.

On a recent site I did you can see some more examples of this.  I used a total of 4 divs, if I’m not mistaken, to layout the template.  Then styled off of those.  It’s a simple site, so you’ll be able to see how it works rather quickly.  The site can be found here and this is the style sheet that goes with it.

Random Tidbit: Don’t think you need to make your site accessible?  Check out this article about a recent lawsuit against Target.