Sponge Project Blog ~ Web design in Tewkesbury

A bit of a back to basics post, but worthy of posting nonetheless. I spend a lot of time over at Web Designer Forum and we are regularly asked for support with getting started in web design, particularly making the move from tables to semantic HTML and CSS. So with this in mind I’ve decided to create a big list ‘o links offering my take on useful resources for anyone looking to learn web design. It is aimed at the novice, but even veterans may find something interesting.

Getting started

• Understanding Web Design - words of wisdom from the god-like Jeffrey Zeldman: Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.
• 9 Essential Principles for Good Web Design - another cracker from PSD Tuts
• Web Style Guide by Patrick Lynch and Sarah Horton is a great reference for anyone doing web design. Weighty, but comprehensive

Design theory and process

• The Elements of Design Applied to the Web - the five primary principles of design and how they relate to the web
• Dao of Design - applying Zen and Tao Te Ching to wen design
• Principles of Beautiful Web Design - if you can buy the book
• Elements of Great Design: The Polish - once you’ve got past the initial stages the best use of time is spent polishing and finalising the details of the design

Best practice

• Web Standards - the only way to code
• Consitution of a Website - useful article outlining overall best practice for building and then running a website
• Preparing for a Site Launch - crammed with useful hints and tips for when the design is finished and you’re good to go live
• Entry Level Accessibility - great introductory article on accessibility showing that it’s very easy to get a basic level of accessibility into a website
• Actual Browser Sizes - excellent article outlining some real stats on what window size people use when browsing. You’ll find some interesting reading in there.

Markup (HTML and CSS)

• 12 Lessons for Those Afraid of CSS and Standards - a must read for novices
• Sitepoint HTML Reference - the all-you-need-to-know guide to HTML
• Sitepoint CSS Reference - the all-you-need-to-know guide to CSS
• Builda CSS Website - introductory tutorial on the steps to building a CSS based site
• Guidelines for Creating Better Markup
• What Beautiful HTML Code Looks Like
• HTML Character Entity Guide

Testing

• Browsershots - enables you to get a screenshot of your website in a vast array of different browser and O/S combinations. Sadly it lacks interaction, but gives you a great idea of how your site renders in other browsers
• W3C HTML Validator - valid HTML is the hallmark of a quality product
• CSS Zen Garden - a lesson in CSS flexibility and also a great repository for good design
• Smashing Magazine - always serving up design goodness
• DivVoted - design voting site using twitter
• Konigi - gives you patterns and elements of a design to pix and mix
• Deisgn Patterns Flickr set - another design pattern repository

Podcasts

• Boagworld - been going for a while now but still maintains it’s quality. Highly recommended
• The Rissington Podcast - hugely entertaining and sometimes quite informative! Run by the legends that are John Oxton and Jon Hicks

You want more?

There’s a load of other stuff in my Delicious links if you’re interested. Image from Foundphotoslj.

I think Firefox is the best website browser ever and I’m not alone. Firefox is now so popular they are able to attempt an entry into the Guinness Book of Records for the most downloads of a piece of software in 24 hours. This is pretty good stuff for a free, open source bit of kit!

Really neat idea by Chris Coyier and Richard Felix, that crashes together a weather API (Yahoo’s I think) with Flickr, to give you a weather check for your location and a nice photo!

Try your location. Link via That Standards Guy.

The Man in Blue experiments yet again, by this time with cubes!

Cubescape is a strangely addictive isometric pixel picture game/toy/art tool/application. I say strangely addictive, because you feel compelled to complete yet another image with cube-perfect positioning. I can see this becoming a problem.

Anyway this is an excellent piece of work that yet again shows how the web can be harnessed for almost anything these days.

Stumbled across an interesting concept the other day called net-guide, which is basically an accessible search engine that in turn lists and promotes accessible websites in its results.

The idea is good, but I’m not sure it’s implemented right. For example doing a search on sponge project, returns this site at the top result as you would expect. However searching for “sponge project” returns a completely random website that’s got nothing to do with sponges or projects, let alone Sponge Project, which in turn gives a 404 error!

Still, let’s hope they can iron out these glitches and produce a really top-notch product, because this could be great.