Web Design Services


The following article, by Kevin Partne published in PCPro Magazine. It considers some of the most important issues for good website design and implementation.

I am very grateful to Kevin Partner for granting me his permission to publish this article on this website. You can find out more about Kevin at Scribbleit (www.scribbleit.co.uk).

Guided Miss-Aisle

Kevin Partner is on a mission to find a good guide to website development, and suggests some useful tools for online businesses. When I looked around, the aisle was empty, which was hardly surprising as anyone looking for a computer book in my local Borders had to circumnavigate this raincoat-clad weirdo kneeling on the floor, pulling out books, groaning, tutting, swearing and slamming them back. It would have scared me, had I not been the aforementioned weirdo.

My mission had seemed simple enough - to recommend a good-quality guide for an acquaintance who's learning how to build websites (using "algebra" according to his wife). It should ideally be aimed at someone who uses computers regularly, but has no grounding in web design or programming. I went into Borders and then looked at the various popular series of books, including "For Dummies", "Quickpro", "24 Hours" and "Bibles", confident that I'd find something suitable. And it seemed that fate was smiling when the tannoy announced a 25% discount on all computer books. My excitement increased on discovering an entire shelf called "getting started with web design", but then I'm rather easily excited - and 15 minutes later I was livid as the result of my search was a big fat zero.

I found only one book I even considered recommending, and I found it online: Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd, published by Sitepoint, and the only reason I couldn't recommend it is that it doesn't cover everything I deem essential. As for the rest, I haven't been so cross since I wandered into the Religion aisle by accident. I feel strongly that an author who offers training to people with no prior knowledge has a responsibility to set them on the right track. One problem they all share is an incomplete syllabus, but most of them actually commit the unpardonable by actively telling learners to do things the wrong way. I don't preach standards for their own sake, but the ones relating to web development provide tangible benefits to website creators, especially beginners. When geeks talk about web standards they generally mean the recommendations of W3C, combined with acknowledged best practice, but what I mean are three very basic principles:

(1) Separate content from presentation
(2) Write semantic XHTML markup
(3) Adhere to current XHTML guidelines

I covered point one in my September column, and suffice to say here that separating content from presentation means using XHTML for words and pictures (except those that are part of the design template) and for nothing else - Cascading Style Sheets (CSS) are to be used to specify all formatting and layout. It's therefore no longer acceptable to teach the use of embedded tags to specify how the text should look: the tag is strongly deprecated and supported only for backward compatibility with older sites. Using it is very bad practice because it bloats your mark-ups by making each page a bigger download than need be, and it makes changing font size, style or colour a matter of trawling through every page in your site rather than making a single change to a CSS file. I don't know a single leading web designer who would countenance the tag on one of their sites, so why is it taught in almost all these beginners' books?

Then there's that old favourite - the table-based layout. One of my clients recently elected to shop elsewhere for a simple website, having been convinced by a company that handles some other work for him that they could also build him a site. My clients are of course free to engage who they will for a particular job, and once I'd walked the dog several times round the block to calm down, I decided to take a positive and constructive interest in the result he received. With amazement, larded with grim satisfaction, I visited his site for the first time after its launch - leaving aside a colour scheme that looks as though an unwell dog had wiped its backside on the screen (bitter, me?) I was surprised to see this brand-new site displaying a Doctype declaration that proclaimed it compliant with HTML 4 Transitional. That standard was introduced in 1997 and has now been superseded twice. To be fair, though, the most recent widely implemented standard (XHTML 1) was introduced only in January 2000, so the designer of this site has had only nine years to get to grips with it.

The layout was created using tables, of course - tables within tables within tables, to be more precise. As a last straw, the designer had used the tag to separate paragraphs rather than the blindingly obvious tag. If ever anyone needed a basic book on web development, it was this designer - ten years ago this might have been an acceptable design and layout solution, but it's little short of criminal for a practising web designer to serve up outdated practice like this to a paying client. Exactly why it was done this way remains a mystery, although I strongly suspect ignorance and a lack of interest.

A few years ago, the quarrel over whether to use tables or CSS for layout was settled conclusively in favour of CSS, whose theoretical advantages had been crystal clear for a long time: more compact XHTML pages are easier to index and more accessible, plus you can completely change a site's appearance merely by editing one CSS file and leaving the XHTML untouched. The problem arose from the tardiness of the browser vendors in properly supporting CSS. No-one wanted to duplicate every site, once for users of modern browsers and again for the sizable minority of Netscape and IE5 users, so tabular layouts retained the practical advantage of working for everyone. This excuse, however, has ceased to be valid for some time.

In fact, the last browser you could make this excuse for was IE5.5, and looking at January's server logs for www.passyourtheory.co.uk, I see that accounted for 0.03% of all visitors and Netscape 0.01%, while IE6, 7 and 8 dominate and account for 79%, with Firefox on 17%, Safari 3% and Chrome less than 1%. IE6 may implement CSS less than perfectly, but it does it well enough to negate any argument in favour of tables. So why then do the current editions of almost all books aimed at beginners include a chapter on table-based layouts? Some of them even attempt to justify themselves by outlining the "advantages" of this approach, including the quite breathtaking assertion that tables are "much easier to learn and manipulate than CSS rules". Have you ever looked at the Source View of a complex table-based website? Could you make any sense of it? No, me neither.

As someone who's been developing training materials for 20 years now, it offends me when newcomers to our profession who've paid good money for a foundation in web design and development are immediately led off in the wrong direction. Not only do they have to learn all this nonsense about tags, tables and the rest of that old junk we used to use to make our web pages more interesting, but they're going to have to unlearn all of it again once they realise (if they ever do) that it isn't the way good designers and developers do things nowadays. Tables are designed for containing tabular data and that's it. There's very occasionally part of a layout that can only be practically realised using a table, but such instances are rare and should be a last resort.

So what's going on here? Why do all these books peddle such dross? There are only two reasons I can see: either ignorance or sheer laziness, and my money would be on the latter. Most of these books are now into their umpteenth editions and were originally written back when tables and font tags were the only way to achieve most design tricks. You can imagine the thought process that goes through the minds of editors and authors as they consider a new edition - to produce a book that teaches beginners the correct way to do things they'll need to dump huge sections of the existing text, as opposed to the far more appealing option of simply adding some extra chapters, like for example, CSS layouts. One of these major books, now in its eighth edition, has left all of the outdated techniques in place with a note saying "this is now deprecated" at the foot of each page, while another details the old approaches at the beginning and the new approaches at the end, giving no indication that one is better than the other.

When learning a new skill I want concise, relevant instruction in best practice techniques, and I absolutely don't want to learn in great detail how not to do it! Especially when I discover I wasn't supposed to do it that way once I've become expert and applied for a job in the field. This fiasco has left me heartily fed up. There are some good web-based resources, but there's nothing quite like a book for learning a new skill.

I want web design and development to become more and more mainstream, and attracting creative, intelligent people into the industry is the way to do this. I'm sure there are many people who'd like to learn how to create websites from scratch, rather than picking up a template-based website editor CD-ROM for £9.99 from PC World and suffering the consequences. There's so little around to help them, and what is available is of poor quality, outdated and often requires the beginner to invest in hundreds of pounds worth of software. This is little use to someone who simply wants to create a website for their small business or charity, or to record their family tree. These people will often turn to template-based software either online or on CD-ROM with almost universally disappointing results. I feel so strongly about this, that I'm going to do something about it - watch this space.

Getting an edge

I'm not going to use the "r" word, but in such a challenging economic climate it's especially important to get an edge on your competitors. This means working on various aspects of your product or service, including its features, customer service and, perhaps most crucially, the effectiveness of its marketing and its conversion rate. There are a number of fundamentals that most successful web businesses have in place, including:

(1) An effective Pay Per Click group for each set of keywords,
(2) An efficient process for converting visitors to sales, or whatever other action you require, through having an effective landing page for each ad group and an efficient buying process

I've covered AdWords in previous columns and heartily recommend the book Ultimate Guide to Google AdWords by Perry Marshall as an excellent first step. There's no question that Pay Per Click advertising is a vast and complicated subject, but bear in mind that like so many other aspects of business, most of your competitors won't even make the effort to grasp the basics.

At the heart of all good marketing is the principle of split testing, which at its most basic might mean running two adverts (print or online) and comparing the results. The beauty of AdWords is that you can get such results very quickly. It's essential to only change one variable per experiment so, for example, split test a headline but leave the body copy the same - otherwise, you can't be sure which change had which effect. Run the experiment for as long as it takes to get at least 100 clicks, then check the results. You're looking for improvements in both click-through rate and, most crucially, in conversion rate. A higher click-through means more traffic has been driven to your site, which costs you more, but if your conversion rate drops you're actually going backwards. For example, adding the word "free" to any AdWords ad will almost certainly increase your click-through rate while simultaneously slugging your conversion rate (if you're selling something). This is the road to ruin. What you're looking for is an increase in conversion without sacrificing click-through.

To take an example of a split test I'm running right now, my first ad has a click-through of 7.32% and conversion rate of 3.0%, whereas my second ad has 6.48% and 3.4% respectively. That's a bit of a tricky one to interpret, since the click-through of the second ad was 11% lower while the conversion rate was 13% higher - the result is fewer sales but at a slightly higher margin. In this case, I'll base a new experiment on that second ad to see whether I can increase the click-through without sacrificing conversion.

That's how to work with the ads themselves, but the next link in the chain is the landing page that visitors are directed to. Google's Website Optimiser is one of several services that allows you to split-test various aspects of your landing page (or indeed any page on your site). For example, Website Optimiser allows you to set up an experiment in which you specify parts of your page that you want to vary. It's best to stick to one or two to begin with, otherwise you'll struggle to make sense of the results and they'll take longer to come in. You need to insert some JavaScript around those parts of your page that will change, and then use a web interface to specify their alternate contents, which could be text or pictures. In my case, I'm currently testing two headlines and two bits of content, giving a total of four combinations, one of which is the original.

Finally, you need to tell Google precisely what action represents a "conversion". When a user arrives at the page, they're served up one of the four variants randomly and Google keeps track of what action they took, and can tell you which variant is the most successful and if it's better than the original. The only downside is that you need to achieve around 200 conversions per variation (in my case, 800 in total), which even for successful businesses can take some time. This is another reason to limit the variables in any experiment. If there's a single "high confidence" winner then you should implement that variation and then create a new experiment to test against it. Just as with AdWords this is a process that's pretty well never-ending, but is essential to marketing success.

Watching your visitors

One ability that I've often wished for is to see exactly what my visitors are doing on a site, which would help me to understand what parts of a page they focus on and why some people don't complete a purchase. Now an excellent new service called ClickTale (www.clicktale.com) allows me to do just that. ClickTale's most eye-catching feature is that it tracks user activity so closely it can generate what is literally a video of their on-site activity. You can see where they paused, what they clicked and which bits of the site they bypassed. ClickTale's summary report will also tell you exactly what each visitor typed into their search engine to find the page in the first place, which is useful in fine-tuning your AdWords.

ClickTale also offers a "heatmap" of user activity, which is a screenshot of the page with false colours superimposed over it, to represent how long users, on average, spend on each part of the page. This service has already provided crucial information for me when it comes to my landing page: not surprisingly, the top of the page received the most attention but I wasn't expecting to find that the bottom of the page got almost exactly as much - I'll remember that for my next Website Optimiser experiment. ClickTale includes a usable free membership, and while it's relatively expensive at around £75 per month, it's such a powerful tool that it should pay for itself.

Top of Page