Darren Alawi Web & brand designer

Web design 10 commandments

Not being religious or anything just wanted a title without the slightly overused ‘Top 10′ phrase I see everywhere at the moment. Of course this means I now have to start each commandment with ‘Thou shall’. I’ve been designing for a good 7 years and I think it is time to share what I think are the 10 most important guidelines when designing modern websites. These opinions are from a ‘web designers’ point of view, someone who designs the graphic elements, writes the XHTML and maybe a little PHP, ASP and Javascript.

1. Thou shall not steal someone elses design.

A very sensitive area for me at the moment, although copying is supposed to be the best form of flattery, blatant copying of someones design is shameful. In this day and age you will be named and shamed on a blog or forum somewhere. There is a fine line between ‘inspiration’ and ‘copying’ so be careful if you struggle with being completely original. Of course everyone is influenced by what they see around them and current design trends but my advice to anyone prowling the CSS showcase websites for inspiration would be to get away from your desk and chill, look for inspiration in places you would least expect to find it. 

2. Thou shall adhere to web standards.

A bit of a generalisation but let me explain. Why do standards exist? Standards exist to make people who don’t care, have to care. Take ISO manufacturing standards for example, every product manufactured has to adhere to certain standards, imagine if they didn’t, how would you feel if you TV blew up after one week? You take it back right? Not if manufacturing warranties weren’t standard, you get my point?

Web standards are just the same, they make web designers think and produce amazing work for the benefit of everyone, users, designers, IT folks, silver surfers and any other demographic you can think of. Don’t just discuss web standards, use them!

3. Thou shall not use Tables for layout.

There is only one reason for using tables in web design, for tabular data. Using tables to organise a page layout is a poor practice and something everyone should move away from. I don’t care who is still doing it or if you have always done it that way, it is wrong, sort it out. Builders used to use asbestos for insulation, but they realised the error of their ways, a bit of an extreme example but hopefully it emphasises my point.

4. Thou shall never prioritise ad placement over content.

One of my (many) pet hates. Did you create a website to generate money from Ads? Or, do you have a passion for what you do and enjoy sharing, writing, designing, filming, reviewing or what ever your website does? Make the choice and stick to it, yes I understand ads are a good way to pay for hosting but don’t try and trick your visitors into clicking the ads by camouflaging them (Camoutising) or placing them in really annoying spots like just under the title of the article, before any content.

5. Thou shall allow for non-Flash/Javascript browsing.

Some people don’t care but those people are crazy fools. Don’t discriminate, segregate or eliminate your potential visitors. It’s just logical really, why would you create a website, at it’s fundamental core a vehicle for sharing information with the world (hence the www, not just ww), only to present information that isn’t accessible to a certain audience? You can still use Flash and Javascript but just provide alternatives which are unobtrusive and don’t effect your site if the user turns them off. For example, if your navigation is Flash how the hell is a user, not using flash, supposed to get anywhere? It may sound stupid to some of us, but believe me, it does happen.

6. Thou shall check, check and recheck links, images and copy.

Nothing is worse than a link that leads to nowhere or the completely wrong place, it immediately tells the user it is amateur night.  Unfortunately with web design and large dynamic sites, it can sometimes be hard to get it perfect first time which is why I recommend triple checking. It is difficult and we are all human but the more you slowly check through every link and proof read your copy, the less mistakes will be made.

7. Thou shall validate all XHTML code.

If you are a web designer and you don’t know about validating XHTML, stop designing and get learning. the W3C offer a great resource where you can validate XHTML, Dreamweaver has built in validation tools, so there really is no excuse. Validating your code isn’t just about being a perfectionist, it points out small errors in your code which might not show in some browsers. Valid XHTML is another no brainer, if you are going to do something, do it properly. Think of it as a spell checker for the XHTML language.

8. Thou shall always test cross browser & cross platform compatibility.

As a general rule I test all my websites in IE7, Firefox 3 and Chrome in Vista, IE7 and Firefox 2 in XP and Safari and Firefox in OS X. Seems like a lot but it doesn’t take that long and you would be surprised at some of the differences in the way they render pages. This is a great cross section and loosely based on the W3C monthly browser usage stats. I refuse to test in IE6 because it is over 7 years old and anyone still using it to browse the web doesn’t deserve to have access to it. Designers who still test in IE6 are keeping it alive by doing so, don’t do it.

9. Thou shall avoid using too many DIV’s

One of the things about learning CSS is using DIV’s. At first it seems like an endless amount of DIV’s are required to contain, wrap and assign classes but it’s not the case. Look harder at your code, ask yourself, do I really need a DIV there or can I assign a class to another element? For example, your footer, does it need to be in a DIV or could you not simply assign the footer ID or class to the <p> or <a> and use CSS to do the rest? Many designers suffer from ‘divitus’ when experiencing the CSS learning curve, but hopefully you can use your skill to rid yourself of this infliction and start designing more elegantly with less DIV’s. Think of it as a challenge, avoid using DIV’s unless you absolutely have no other choice to get the desired design.

10. Thou shall not open links in a new window.

Back in the day web designers used to open all links from the homepage in a new window. The theory was the more pages open with their content in the better! What they didn’t think about is how annoyed the user would be and therefore would never, ever return to their annoying website, great job! There are almost no situations where you would want to yank control to open content in new windows from the user. It is so easy for a user to open content in a new window or in a new tab that if they really want to they will, don’t force the issue because you will only drive traffic away from your annoying site. The W3C have gone as far as taking the tag “target=” out of the XHTML 1 Strict specification, it doesn’t even exist anymore, get the hint?

  1. PHP Designer 13/11/2008 1:52 pm

    Excellent list. I think #1 is tops – “Thou shall not steal someone elses design”. I’ve had my content and design stolen.

    Thanks for the article.

  2. Darren 13/11/2008 1:55 pm

    Hey PHP, thanks, it actually took me a while to write, but #1 was one of the main reasons I wrote the article.

  3. Justin 25/11/2008 3:30 am

    Curious about #9. Is there a benefit wrt page load having fewer DIVs or is it just more of a challenge to clean up code?

  4. Darren 25/11/2008 8:39 am

    Hey Justin, yes definitely, less code means pages load quicker, take less space on the server and will get indexed better, all positive things.

  5. Ritchie 13/1/2009 9:28 am

    WTH!! Heheheheh… That’s a funny web design 10 commandments.

    COOL!!

  6. WP Cult 14/1/2009 2:04 am

    That is a very good list of commandments.

  7. Marc 2/2/2009 8:13 am

    Thanks for the list!

  8. KLS 26/2/2009 5:31 pm

    The list is not only a good resource for anyone starting web design but also a useful reminder for us who have been at it for a bit. I couldn’t agree more with all your points except 10, hehe,

    I admit I still use the rel tag + javascript instead to open some links in new tab / window. Cos personally, sometimes, I really don’t want to leave a site to check out the links, I find it annoying to click back and open up a link on my own. Plus not everyone knows the Ctrl / Shift + click shortcut – even if they do, implementing the rel tag still doesn’t hurt anyone. But applying a simple graphic / icon to show ‘opening in new window’ (like some sites do since awhile ago) might work to balance things out.

    Anyways, thanks for coming up with the list. Will definitely share with peers and juniors.

    Cheers mate!

  9. Frog 27/12/2009 9:23 pm

    Thou shall not break any of these commandments

  10. SEO Southport 11/3/2010 6:39 pm

    Hey Darren, just came across your site in the Bloggers Handbook (not literally) but anyways, love your site man, and your posts are top class, i agree totally! Steve O Southport

Leave a comment