Ramblings, meanderings, rants and discoveries.

Wednesday, May 25, 2011

Learning CSS

I was asked to assist in redoing a website and ensuring it was completely accessible. This meant learning CSS, something I have avoided for a while.  Friends who started doing CSS complained constantly. Then there is the fact that every time I went to look at the simplest technique, there was always an exception for I.E. (WHY does Microsoft do that?)

Well first let me say CSS is not difficult nor is it the bear that many lead me to believe. HOWEVER, many sites that purport to be pure CSS are not. They have .js or worse flash. They run  server side applications and even loud music and sound that cannot be turned off. Some have only 1 page and no variations on it for mobile or other media. Yes they are using a CSS but why bother?

However as usual there are some roses in the weeds for learning CSS and finding templates and examples in the wild as it were.  First is the obvious one W3 Schools the tutorial covers all of the basic concepts and commands and explains very well why CSS is a good idea.  Standards for accessibility are covered as well as techniques to make the site look better. But honestly, what you build in the tutorial, looks like a middle school or grade school site. Once you understand the techniques and commands, it is time to move on to see what you can do DO with it.

I learn by doing and observing so off I went to find blogs, templates and sites I could view to see how they did something. There are a LOT out there, so let me list the ones I found the most useful.

Veerle's Blog  This is the designer's old site, by all means check out the new one, too. But this has invaluable techniques for using Photoshop (or any graphic editor really) and basic information on CSS.

Free Website Templates - this site has a lot of templates of varying types, complexity and price.  Most techniques can be gleaned from studying the CSS of many of the templates. Not all are accessible, pure CSS or even free - but it well worth a look to see what people can do.

CSS Zen Garden  - This site is a perfect example of why to use CSS. All it is is the same page in several designs. The only difference is the CSS.

So, that should be enough to get anyone started. And my own design I hope you will see soon, I am down to tweaking and will post the links here when they are done.  From what I learned I managed to come up with 5 very different looking designs for the site. So if the vote is tied among the owners I can just change them in a few months and swap out the design without changing the content pages. And THAT is the beauty of it.

No comments: