Knocking up a website is so simple it should be cheap…right?

Ever wondered what processes are involved in the creation of a unique website? Ever wondered what you actually get for your money and where the money goes?

I’m not talking about using a template you see on thousands of other websites but a truly unique build. Recently I’ve been thinking about how much effort I put into each project compared to when I first started back in 1997. Over the years I have built up a considerable amount of knowledge with regards to accessibility, usability, search engine optimisation and social media. Whenever I build a new website all those years of knowledge go into each design. If you’ve ever wondered what goes into a well-rounded (unique) website then read on…

These are the different parts I use to make a website:

Emails – More often than not I will be spending at least an hour or two every couple of days communicating with the client.
Average hours:10

Sketching – Creating block wireframes in any programme still takes a lot longer than fast and furious sketches so I always start here.
Average hours: 1

Block wireframes – I need to show something to the client but I have learnt the hard way that going straight to build often means lots of re-designs or re-working so getting the client to agree with the position of the content and basic feel of the website beforehand is vital.
Average hours: 3

Visual Wireframes – This is where you start to put the effort into the visual elements of the build.
Average Hours: 6

HTML & CSS – This is when you finally start coding the site
Average hours: Varies on complexity of design requirements

Browser Testing – No point having a site if only 70% of the visitors can use it. I test on IE6,7,8, Opera, Firefox, Chrome, Safari and iPhone.
Average hours: Varies on complexity of design requirements

Search engine optimising – This is where you make sure you add in all the necessary SEO work
Average hours: 15 minutes per page

Usability testing – I make sure that the site is looked over by at least 3 people who are within the targeted audience.
Average hours: 2

Social Media – It is more important than ever that the client gets involved with social media as a way of creating targeted content.
Average hours: 3 (mostly emails and phone calls)

Final testing – Into a test server and running accessibility checks and SEO checks for anything I’ve missed.
Average hours: 1

The full process

By the very nature of the work I have to explain via email or phone the whys and where’s for each section. Certainly at the initial blue sky stage my emails can often be more than a half a dozen paragraphs long as I run ideas past the client. This is still MUCH quicker than building multiple sites and seeing what they like. No-one expects to pay for the communication but the majority of clients will take up far more time in emails and phone calls than the actual build.

More often than not the client has an idea but has no logo, no text and no clue as to the target audience so step one is to find out as much as possible about the client, the target audience and what they really need from the site. For this stage I refer them to my list of questions to ask clients.

From this I start to sketch out ideas on paper or a whiteboard. This is an important step for me because usability plays a key role in defining where the bits of the page should go and the priority of each part. Menus are often the element which causes the most thought because the client could have dozens of links separated by various departments. You not only have to know where to place them but know the importance of each link and where the visitor would expect to see them.

For very large projects I cut out squares of paper (or use sticky notes) to place a navigational journey through the site. This is an excellent way of seeing problems or finding shorter journeys.

From there once I have the go-ahead it is on to the block wireframe. This is an important part of the process because I start to define the widths and margins of the content and containers so the client can easily see how much importance each block has and how it sits with other blocks.

Now we move onto the visual build where the graphical elements are added in to give the site its looks. Thanks to the block wireframe we’ve already agreed on the placement so it is only the graphics to worry about.

The visual wireframe before final sign off

Now we finally start the HTML and CSS build. This is my main bread butter and any changes once I’ve coded this and tested on all the browsers would require hours of extra work which the client would often not want to pay for. With the process above they have already approved 3 phases of mock-ups so they are more likely to accept the changes really are above and beyond what they’ve already agreed on.

If you’re very clever you would have noticed that at each stage the design changes. This is why it is so important to use wireframes to begin with because moving layers in a PSD is a lot easier than having to re-build the HTML and CSS.

Because I have already worked out the spacing and I’ve layered the visual wireframe correctly the build is a lot easier than normal because I have already all the in-depth rules set.

But we are still a fair way from finishing. I test each page for search engine optimisation. All relevant images have alt tags, headings are used correctly, title tags are added to the links which need them.

After that is testing that the HTML and CSS is W3C valid and finally asking friends or family to test the usability of the pages. This is vital to making sure my original ideas work as intended.

Finally I upload the site to a test server and run further accessibility checks and SEO scores to catch anything I’ve missed.

Now I finally upload the site to live.

There are a lot of web designers out there that take the time to build a site they know will work and will reach the maximum audience and obtain the maximum sales. There are also plenty who just pump out the same template over and over again with no thought behind it.

There is a lot to factor in when giving a quote and I think most clients often overlook exactly just how much time and effort goes into creating a unique site. I hope this helps give you some perspective of all the extra parts you may not have realised were there for a number of web designers.

Useful links:

• Increasing online sales simple usability problems to avoid
• How to get your ideas across to clients
• Web designs prices charging with confidence
• Communication with clients

++++++++++++++++++++

Network with Simon on LinkedIn ~ Twitter ~ freelancer homepage.