Non-Designers' Tips

The lastest issue of .Net magazine (#154) has an article by Andy Rutledge, in which complains that not enough is done to inspire good design in people who do not come from a design background. And I agree with him.

Ever since the advent of HTML, anyone with a bit of a techie background has been able to put together a home page of their own and let it loose on the web.

In my time, I've stumbled across some truely shocking examples of bad design. I'm sure you know the sort of thing - fonts all sizes and clashing colours, forty different typfaces in use; nothing lines up; everything screams at you, and basically you can't be bothered to see the wood (good content) for the trees (hideous design). Recently, I found the XOXO blog, and I'm afraid it's assault on my eyeballs prevented me from actually reading the blog to see if there was any useful information there. I just felt ill. [Sorry guys if you read this via trackback, but I'm afraid it's not just a matter of personal taste, there are also usability/accessibility issues which have been resolutely ignored :-( ]

My background is geeky rather than arty (my degree was Electronic Engineering; the only thing we ever "designed" was the odd circuit board layout!). So aside from my latent arty tendencies with my photography, how did I pick up the basics of good design?

When I first started web design (with lovely Notepad) back in 1996, I made all the mistakes a novice can. There are some nasty memories lurking out there in the WayBack Machine! But I later found two books by Robin Williams very useful (no, not that Robin Williams, this one is a woman!). They are:

The Non-Designers' Design Book - Robin Williams, Peachpit Press
Giving the basic principles of good design, layout, use of space, etc. Robin remembers the four major elements of design by a handy little acronym, I'm sure you'll be able to work out what it is:

• Contrast
• Repetition
• Alignment
• Proximity

Her book is anything but! It exapans on each of these elements as you go through each chapter. The second is:

The Non-Designers' Type Book - Robin Williams, Peachpit Press
Which shows you the right and wrong ways to go about using typography in your designs.

Both books are primarily aimed at design for print, and although print and web are quite different in some ways, the principles still hold true for the design of a web page.

If you're just starting out (or would like to learn about some of the formal grammar of design), you might well find these helpful.

Why Not Tag Along Too?

I've been quiet on the blogging front lately, just rather busy to keep up!

Today I was sent an invitation to the d.Construct2006 Backnetwork, which is a great site for attendees of the upcoming d.Construct event in Brighton on 8th September. If you're not already signed up, I'm afraid you will have to wait until next time, as they are full. But the Backnetwork site provides an excellent place for attendees to "meet", chat, review etc. All the better if you forget to give someone your business card at the event; if you know their name, you can go look them up on the site afterwards.

I will post more on the actual event once it happens. But as I was browsing the Backnetwork site, I stumbled across references to XFN - short for XHTML Friends Network. It's a great way of adding extra meaning to links in your blogroll, for instance, which tell others who are reading, about your relationship with the person concerned. It's dead easy to implement (read the four easy steps showing you how to go about it). In it's simplest form, you just add an extra rel="met" tag to any links for people you have actually met in person. So if I had met the ficticious Joe Bloggs and wanted to add his blog to my blogroll, I would use:

<a href="http://joebloggs.com/blog" rel="met">Joe's Blog</a>.

If he was also a friend, I would add rel="friend met". There are a few other options, (which you can read about in more detail here), but it's pretty simple to remember, and will add a human dimension to ordinary links.

So I thought I would XFN my blogroll so you can see who's who. Why not tag along and make your blogroll XFN-friendly too?

.Net Magazine Makeover

Have you read .Net magazine recently?

I've never been an avid reader, but I was browsing Andy Budd's website the other day, and a blog post about .Net mag caught my eye, which made me go and search it out at Smith's on my way home from work.

It is indeed a very good read, and I'll give you a short summary of the best bits, if you like:

Interview with Joshua Schachter, founder of del.icio.us
Articles on blogging for businesses, how the royalnavy.mod.uk website was given a makeover, including accessibility considerations and a showcase on the best in current web design.
Makeover Suggestions for gardenaction.co.uk to make it more user focussed
Tutorials, lots of tutorials, and certainly not all aimed at the "hobbyist", including:

• Simple liquid layouts using CSS
• Giving your photos the Lomo treatment with Photoshop
• Easy Google Maps programming with AJAX
• Securing your PHP eCommerce scripts
• Generating SVG graphics with Inkscape (open source app available from the CD with the mag)
• How to make great-looking pull quotes with CSS

The usual news, reviews, expert opinion and letters pages.
A fun bit at the end, the /trash section, which included a link to the ridiculous website, catsthatlooklikehitler.com

At £5.99 per issue, you might think it's a bit steep. But if you subscribe by direct debit, apparently you only pay £11.79 every three months. Now that's tempting...

Geeks Galore

Three events coming up in the near future, which readers might find interesting. I'll probably be at a couple of them.

London Geek Picnic
When: Saturday, 26th August @ 15:00 - 22:00ish
Where: Hyde Park, London
More details from: London Geek Dinner blog

London Geek Dinner with Ben Metcalf
When: Friday, 1st September @ 18:30 - 23:00 ish
Where: The Bottlescrue, 53 - 60 Holburn Viaduct, London, EC1A 2FD
More details from: London Geek Dinner blog

Blogger/Web2.0 Mixer Redux (No.2)
When: Monday, 11th September @ 19:30 - 23:00ish
Where: All Bar One, 36-38 Dean Street, London W1D 4PS
More details from: Roger Kondrat's Technological Winter blog.

A Little Light Reading

If you're thinking of dipping your toes into the standards compliance/css development pond (come on in, the water's fine!), and you aren't able to afford some of the swanky courses available out there, a good alternative is to read some books by well-respected practitioners in the field, at least to get you started.

Here's a small selection which I've read recently, and have found to be extremely useful. I'll try to add to the list on an ongoing basis, so you might like to come back and check it again later.

I no particular order (other than the order I've read them in!):

• 
  The CSS Anthology - Rachel Andrew, pub Sitepoint
  Excellent all-round introduction to using stylesheets for layout and positioning, with practical real-world examples. Good for people relatively new to CSS - I knew how to change fonts etc but was pretty green regarding CSS for layout until I'd read this and digested it thorougly.
• 
  Build Your Own Standards Compliant Website Using Dreamweaver 8 - Rachel Andrew, Sitepoint
  Invaluable for pointers on getting the most out of Dreamweaver 8 and making sure your code validates nicely, is properly semantic and doesn't suffer from coad bloat. Good chapter on layout of forms without tables.
• 
  Dreamweaver 8 Unleashed - Zak Ruvalcaba, SAMS
  A big, thick wedge of a book (I've actually read most of it but not quite all yet). Excellent advice on using Dreamweaver for dynamic projects. Gives code and method examples for ASP, ASP.NET and PHP server models, which is great as some books limit themselves to one flavour. I currently do most of my dynamic projects with ASP.NET, but in future I'll be getting to grips with some PHP too, so it's great not to have to buy another book right from the start.
• 
  The Zen of CSS Design - Dave Shea & Molly E. Holzschlag, New Riders
  The book of the website. Dave and Molly take a few of the excellent examples from the CSS Zen Garden site, and deconstruct them, with explanations about each technique explained along with copious screenshots (full colour). Yes, you can look at the site directly and try and work out what the stylesheets are doing, but that's pretty hard if you are a novice, and these succinct explanations are a great help in developing your understanding of how to apply the theory to real-world examples.
  
• 
  DOM Scripting (Web Design with JavaScript and the Document Object Model) - Jeremy Keith, Friends of ED
  A great introduction to the scary world of JavaScript for anyone who is thinking about delving into unobtrusive JavaScript which can add progressive enhancements to your site, whilst degrading gracefully if a browser does not support JavaScript (or has it turned off).
  
• 
  CSS Mastery, Advanced Web Standards Solutions - Andy Budd, Friends of ED
  Definitely not for beginners, but takes the examples and techniques to the next level for people who have some experience with coding standards-compliant (X)HTML/CSS. Two chapters at the end, written by Cameron Moll and Simon Collison, bring together lots of the techniques described earlier in the design of two case studies.

That's it for now, although I have a big fat PHP book sitting on the pile to read. I'll add more when I've had time to digest that.