Thursday, June 16, 2011

Delivering a website

From my years of consulting, software development and start-up businesses I have noticed common pitfalls that organizations have in designing, developing and delivering websites. Here are some common pitfalls and my suggestions for how to avoid them.

1. Web is fashion

One of the great advantages of the web, aside from dynamic content, is the ability to easily change layout and branding. This, however also creates some challenges. Organizations should realize that a web presence is an ever evolving thing, and websites themselves will come in and go out of fashion. Each industry has it's own fashion and it's own fashion cycle. Some industry web fashion cycles are faster than others.

2. Change can be managed, if you keep the pieces

Since website will change over time, it is very important to understand the process by which a website should be designed and understand the key artifacts that should be delivered. If the process is not understood, delivering a website can be extremely time consuming and costly, if the artifacts are not understood each iteration of the website will effectively be a new delivery.

The basic process for the delivery of a website is : design, develop, deploy

However, the design phase has some development, and the development phase might have some design. The deploy phase may have design and development. So let's break this down further.

3. Design Process

The design of the site is the phase where stakeholders decide and agree on the elements that the site should contain, how they are presented to the reader and the functionality provided. A design brief should be created which specifies the intended use, the industry and a verbal description of the general look and feel of the site. A functional specification should be created if the site has any functional complexity - this details exactly the way in which the site operates, the data stored the pages and navigation etc.

The design brief would be passed to a designer, who creates a mock-up of what he/she thinks the site should look like. It is usually a good idea to give the designer a mock-up of what you think the site should roughly look like - there are a number of tools on the market to create mock-ups like the following:

This mock-up was created by Balsamiq

This is only the start of an iterative process and most of the time the designer will need to revisit the mock-up a number of time before finally arriving at a mock-up that is liked and accepted by all the stakeholders. So, when negotiating with a designer make sure that the agreement has ample provision for this iterative phase of the process. There is simply no way around this !

Any designer should only be employed, if they are also responsible for the design implementation of the website. Most websites designs are implemented using CSS. One common error is to get a designer to produce a mock-up of the site and then get someone else to do the design implementation. The danger is that the designer creates something that is difficult or nearly impossible to implement. Remember, that
unlike paper, there are limitations to how things can be laid out on a website. The layout is defined by some code that informs the browser how things should be drawn (which is why there is an element of development in the design). When a designer delivers the final mock-up and then proceeds to do the implementation, they in general will create all the imagery using image design and manipulation software which works with graphics in a format called Scalable Vector Graphics (SVG). This is a file format that is not normally displayed on a website, however, serves as the master for the graphic elements. Once the graphic is created, the image can easily be scaled and saved to a common web format (Jpeg, gif, png etc). It is critical that in any design contract you specify that all imagery not only be delivered in their final web format but also in SVG (master copies). This enables you to later make small changes to the imagery on the original master, instead of trying to manipulate the lower resolution web artifacts. For example, say you wanted to place your logo on a 5m banner if you had the SVG you could do so without loss of resolution, if not you would have to scale say a 100x100 pixel graphic and each pixel would land up being 50cm wide (very ugly indeed) !

a rough mock-up of the design/delivery process and deliverables would look like the following :



4 Development

In general most organizations do not concern themselves with the particular technology that is used for the website development. This is often seen as "too technical". Bear in mind, that the technology used is
important for later maintenance. For one thing, if the technology is obscure, you will find it difficult to find people who are able to edit and manipulate the website code. Some technologies exhibit better performance (in terms of speed) than others. I don't want to go into an in-depth discussion of the merits of each technology, but some care should be taken to understand the advantages and disadvantages. Also note, that it is always better if the website code is hosted on a server under your control. If you leave the code on a server administered by the developer, they can hold you to ransom for any changes. As part of the development contract you want them to deliver copies of all the code, the database schema (the tables and fields in the database), configuration files and deployment instructions (how to set up the website if you had to hire another development teams etc). Ideally you should make sure that you could recreate a working version of the website on a new server if your developers are hit by a bus !

5 Deployment

Many of the issues where covered under development, but to be clear, ideally you should know how to deploy or redeploy your website and less reliant you are on 3rd parties the better. Also you should
always monitor performance, not all servers are equal and usually cheap is cheap for a reason. Your users are not going to want to hang around while your website loads.

6 Marketing & SEO, Social Media

While online marketing, search engine optimization (SEO) etc are vital to getting your website ranked in search engines and attracting web traffic, there are many agencies out there who will fill you with
buzz words and fear. None of this is rocket science, do not succumb to buzz words and hype. Make sure you clearly understand what you are getting, what the value is to you. If you decide to hire an agency
try negotiate a performance related pay scheme. Buzz words are great, but we all really want results !

There are a variety of online marketing strategies, the basics are:

  • create some compelling content that keep user interested
  • use your network to drive people to your website (by constantly encouraging people to visit your website to see new content etc)
  • If you have a budget, purchase keywords that will be associated with searches that are relevant to your website - be careful to not overspend !
  • try ensure that when users arrive at your website there is a call to action - i.e signing up, giving an email address etc.
  • find any way you can to spread the word, without becoming annoying
  • get other sites, blogs, forums etc to have links to your website - either negotiate with them or search for relevant places where you can place a link to your site (again without being annoying)

2 comments:

  1. With HTML5 and CSS3 there are very few limitations as to what can be layed out on a website... I am not sure that designers and implementors are really the same skill set.

    Talk about it in London sometime!

    (enjoy following your activities)

    John H.

    ReplyDelete
  2. Hi, I did not mean to imply they were the same skill-set. Design and technology implementation are very different skill-sets in my mind.

    ReplyDelete

Please post your comments, I am interested in your views