Sponge Project Blog ~ Web design in Tewkesbury

Yes a fridge! Sounds weird I know, but with GUI Magnets you can use any magnetic surface to build and iterate user interfaces. From experience I know that paper gets really messy and white board are great, but sometimes is also too restrictive. But with these babies you get full flexibility to stick them on a fridge or a white board and iterate until your heart’s content. Not only that you save ink and paper by using the pre-set patterns.

Hat tip to Boagworld for the link.

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.

Apparently word is out about the design my this site, meaning I’ve been listed on all the following sites:

• ifoh designs
• CSS Based
• CSS Lounge
• dezinspiration

Thanks to anyone who voted or sugested me!

Updated: Also now featured on CSS Leak!

Hat tip to Rob and John for this ridiculous waste of time:

This is not a new debate and there are so many people commenting on it I can’t be bothered to link to any of them, they’re so prolific. Ranting aside I wanted to take the opportunity to dispel myths about table based layouts and say why semantic markup or web standards is the way to go.

Use the right tool for the job

This age old maxim rings true even in web circles, but is so often ignored. Semantic markup may sound complex and a bit techy, but is reality is very simple. The premise is to use the right HTML element for the right job. You wouldn’t use a saw to knock in a nail would you? For example if I want to display a paragraph of text, I’ll use the Paragraph element (p). This tells my web browser that the piece of text I’m adding into the page is a paragraph and should be treated as such. So my code will look something like this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Less is more

The big benefit is leaner code. Using the example above again, I’ve written one line of code with one element for my text. If I’d done this in a table based layout I’d have to wrap it in a cell, within a row and maybe even add it as a table on it’s own. Quite quickly you end up with code bloat and a slow website, which is completely unnecessary.

Tables for tabular data

The table element and its children were created with one purpose in mind: the display of tabular data, or as the W3C state:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.

So the lesson for today is thus: “use tables for tabular data and the right element for everything else”.