Designing a website in the wrong order

The clue is in the word 'design':  most people think of a website design as totally taken up in appearance and images.  The look of the potential new website is what they want to see first.  That is completely reasonable:  how a website looks at first glance is extremely important, especially if it is supporting a business.

Once the 'design' is taken care of, the next step in the process is to add all the necessary information - all the content.  Many of our customers use the 'design' phase (the phase where we create the appearance) to gather up the information that they will eventually add to that design.

This two-step process is so ubiquitous in website design that most designers use placeholder text and images in the first step, creating beautiful eye-catching arrangements. 

The problem comes when the 'real' content replaces the placeholder content, and the customer discovers that the real information doesn't fit quite so well, and the real images are all the wrong size, and then needs to go back and request some changes.  This causes delays in the launch of the new website, and sometimes increases the original cost.

Every website developer secretly hates this artificial separation of content and appearance, and would prefer to work the 'wrong' way around.  

So, when we had the opportunity to create a new COST Action website with all the initial content supplied up front, we were curious to find out exactly how successful the 'wrong' way would be.  This is how we worked:

  • Our COST Action customer just send us a variety of Word documents, PDFs, brochures and images, none of which was 'web-ready'.  This turned out to work very well, as we were able to better understand the raw material with which our customer would be updating the site.
  • From this raw material we determined exactly what fields each editing form needed in order to easily add new information.  This in turn helped us optimise how all that information should be displayed.  By working with real information, we were able to work out how best to display information that could be variable in length, and accomodate the design to look good even when some pieces of information were missing.
  • Finally, we made it look pretty, and showed it to our client.

This project was worked on a tight deadline, and we were able to turn around a first draft quite quickly.  In fact, it took nearly the same amount of time to develop a first draft as using placeholder text. 

But now we were ahead of the game, because the website already contained real information, which just needed a bit of tweaking, instead of carefully going through and replacing all the placeholder text.

The real time savings came during the feedback cycle, which was very short and contained no major changes.  No serious re-working of any part - because the design fit with the content.