IFA Websites is a new side project that is Helping IFAs and financial advisers to get the most from their websites. Basically I’ve got over ten years experience in the financial services sector, working predominantly with or for IFAs and financial advisers on software and internet related offerings and more latterly for a product provider. It is this experience that I will draw upon to support financial advisers with developing their websites and online presence. There’s also a Twitter account to follow. Currently using the free, hosted version of Wordpress, but will in time move to it’s own domain and theme.

HTML5 Showcase is a very simple and straightforward Tumblr blog to demonstrate what’s possible with the forthcoming HTML5 web standard. It showcases websites currently using the HTML5 elements, which at the time of writing is still a working draft from the W3C.

The rant

This sounds like a strange thing to do, but the intention is to illustrate that the web can be progressive and use experimental features without everything collapsing in on itself and returning us to the Dark Ages. Much of the time comments are left on certain leading websites that show general ignorance of what is possible by using progressive enhancement techniques. These comments generally sound like:

• Well it’s not a standard so we can’t use it – bzzt. Wrong. You can use it today and it will work in modern browsers.
• I don’t understand, so won’t bother – bzzt. Ignorance is no defence.
• It’s all Microsoft’s fault – bzzt. Christ man let it go! We can’t keep harking back to old browsers and the bad old days of design.

Experimentation is right

HTML5 is coming, and yes it’s experimental, but that should not stop us playing with it. If the grandfathers of the steam age hadn’t pushed the boundaries and experimented with things, we’d certainly not have the technological advances we have today.

From web to print

The website Design Meltdown made by designer Patrick McNeil sparked off this book, which is a frankly astounding repository for Design Elements, Trends & Problems in Web Design – in other words a massive collection of website designs that have captured to author’s imagination or taken an interesting approach to a design problem. The book leads on from the website in that it takes the best of the best and renders them in print form, essentially as a quick reference "inspiration guide" for web designers.

A class in design school had a project which followed the "Genius Moves" book by Steven Heller. We had to collect samples of work fitting the categories of the book. The categories were odd and far from your typical classifications.

I couldn’t help but consider similarly odd classifications of web sites. I slowly began collecting screenshots of sites I found particularly interesting. Shortly there after I developed numerous categories to group sites into. Design Melt Down is what evolved out of this practice.

Sectioned off

Sections are categories by several top-level items, such as colour, layout, design elements, etc, which in turn are further sub categorised as you would expect. So within the "Colour" you’re presented with options for all the colours of the rainbow and then some. But it’s the other categories that become really helpful and interesting. So for example in "Design styles" you have collections dedicated to "Collage" or "Super Clean". In "Design Elements" you are offered "3 buckets", "Price tags" or "Stripes".

Each section comes with an introduction explaining the style used or problem faced, then guides the user through a journey of how that may have been tackled or some of the obstacles faced. Several quality examples are listed along with a web address to see it in it’s glory.

The one downside of this book is it’s printed nature. Clearly the web is a constantly evolving medium, whereas print is a snapshot in time once printed, in spite of revisions and new editions. The copy you have now is the copy you will always have and therefore can date quickly if the subject matter rapidly changes.

Conclusion

However by the same token, having a physical item to pick up a leaf through is a satisfying process and is a quicker process than leafing through gallery or showcase websites. Would I have bought this book if I hadn’t have got the voucher? Probably not. But having it there on the desk and getting instant gratification to a design itch or problem is very satisfying. You can buy The Web Designer’s Idea Book from Amazon.

So I bought some quality reading material, namely “The Zen of CSS design” and “The web designer’s idea book”. In addition I also splashed out on Mark Boulton’s “Designing for the Web” – let no-one say I’m a cheapskate anymore! Here follows a series of mini-reviews outlining my thoughts and take-ways from each book in turn, starting with:

“The Zen of CSS design”

The Zen of CSS Design: Visual Enlightenment for the Web (Voices That Matter) to give it it’s full title is authored by Dave Shea and Molly Holzschlag – two stalwarts of modern web design.

Zen of CSS Deisgn – Front cover

The legendary CSS Zen Garden website is what first piqued my interest in what I’d call “proper” web design and truly opened my eyes to what CSS is capable of – it was quite an epiphany. Almost overnight I went from marketing/business only type, to a semi-technical content editor within the team I worked in at the time. It was exciting. CSS allowed me to play with my own business ideas and give them some shape before getting the more detailed techies involved and building a business case off the back of it. Since that time I started playing more with building websites, so much so that I’m now building them for other people and being paid for the privilege.

For those not in the know, CSS Zen Garden offers a simple and relatively raw HTML document, which designers can then overlay a CSS design onto. Every design uses the very same HTML document to keep a consistent set of content for each design. As the site says:

[It's] A demonstration of what can be accomplished visually through CSS-based design.

The Zenith of design

“The Zen of CSS Design” picks up from the website and takes a sample of the most visually engaging or technically adept designs. The book is broken into distinct sections looking at common trends or themes shared by each design and then outlines how the designer in question tackled the issues presented. Intelligent and thought-provoking commentary is posted alongside the actual code used to make-up the designs.

Zen of CSS Deisgn – Entomology by Jon Hicks

This is the most valuable part of the book in my opinion. The website doesn’t outline why the designer took certain decisions to place content where they did or why they chose that colour or that image. The book does this however and so is a useful accompaniment to the website and suffers only from the fact that the website is constantly being updated with the brightest and best. That should not put you off buying it however, as the fundamentals of design and design decisions are common across all the showcased designs – it’s about communicating something. Perhaps that’s something light and breezy or something dark and mysterious.

Back to the floor

Before your thrown into the deep end however, a summary section introduces you to the background of the Zen Garden website and CSS design in general. A history lesson is included in case you weren’t around during the “dark days” of the web when tables were the norm, that charts the rise of standards based design as the best way of building websites.

Zen of CSS Deisgn – View source

Not for the faint hearted

A CSS primer this isn’t. It’s an engaging romp looking at detailed design decisions and some advanced CSS techniques used to provide solutions to design problems. Personally I feel it’s aimed at the more adept/intermediate web designer, who is comfortable with CSS design as a concept and has a good grasp of the fundamentals such as the box model, semantic markup, specificity and browser vagaries.

Zen of CSS Deisgn – contents

Conclusion

A fantastic read and well worth buying if you’re keen to explore how powerful CSS design in particular and standards based deigns in general can be. You can buy it from Amazon: The ZEN of CSS Design: Visual Enlightenment for the Web.

For those starting out in web design, the W3Schools is offering certifications in HTML (inc. xHTML and CSS), XML, JavaScript, ASP and PHP. Sit this alongside Opera’s curriculum, then you’ve got a cheap way of learning how to build a websites the right way.

The criticism levelled at many college courses is that they are teaching outdated practises, such as using tables for overall page layout instead of semantic HTML and CSS. Frequent requests over at Web Design Forum from people starting out in the industry indicate that people think college is the place to learn web design and development skills. That said, college courses do offer a more structured and supervised approach to learning which suits some people, however if they teach outdated approaches then the learning is irrelevant.

Whilst I agree that college is the best place to go for a more “classical” design education, personally I think most other design or development skills can be learnt through a combination of:

• Trial and error – do it yourself and really understand how a page is put together
• Online courses – such as the ones listed above
• Forum participation – WDF is a great place for those starting out to get professional advice and support
• Books – there are many excellent books available which teach the fundamentals of web design. One to get you started is Jason Beard’s “Principles of Beautiful Web Design“
• Workshops and conferences – not free, but some excellent offerings available
• Intern – unpaid work at a quality design agency might not seem like everyone’s cup of tea, but if you get the right agency this experience will stand to in very good stead

Additionally there are a number of blogs and podcasts that can help hone your skills. Check out my previous article on “Learning web design links” for more details.

These combined courses/learning methods feel to me like a great alternative to attending a college course. Plus if you can get a recognised certification at the end of that process which is as good if not better than any college course, then why the hell not?