Building a Better Website: Which Comes First — Content or Coding?

Thoughtfully and skillfully planning your website is as critical to its success as high quality coding and creative visual design. Here’s how to plan your website like a pro.

Trick question. Neither comes first. What comes first in creating a truly great website is a great planning process.

marketing strategy
“Digital Agency Sketching Planning Business,” Creative Commons license. | Credit: Flickr by perzonseo.com

The key elements of the planning process are

  • Strategy Brief
  • Site Map
  • Wireframes
  • Functional Specification
  • Design Brief

Here’s a brief look at each of them.

Strategy Brief

The strategy brief is typically a one-page document that guides the rest of your planning process. It lays out your goals for the website – what it needs to do to be considered a success – and the tactics you’ll use to achieve those goals.

As with every stage of planning, it’s critical here to get the input from your key stakeholders. This is for two reasons:

  1. Your stakeholders are most likely to have the insights you need to build a successful marketing tool
  2. Getting their buy-in early is critical to getting them to believe in and use that tool when it has launched.

Site Map

For all but the most complex of sites, “site map” sounds to most people like something that can quickly be scrawled on the back of a napkin. It can, but that’s rarely going to work out very well. Taking the time to map out how to organize and present the content needed to make your marketing case will yield much better results – a smoother development process with fewer costly “do-overs” and a finished product that addresses all major audience segments and their interests.

Wireframes

The wireframes are the bridge between the site map and the functional spec. It creates a page-by-page guide to the site, what elements need to be present on each page, and how your audience can interact with those elements. Wireframes frequently even dip their toes into features and functionality.

One thing wireframes shouldn’t be is a design document. To be effective, the wireframes should be as neutral and non-visual as possible. The focus has to be on what will be on the page, not where on the page it will be.

Functional Specifications

The functional spec takes your wireframes one step further, fleshing out not only how your audience can interact with the website, but how your administrative team can edit and update the site, and what  the site coding will do for you automatically.

These can be quite simple, expanding only slightly on the contents of the wireframes, to incredibly complex in cases like ecommerce sites with heavy transactional loads.

Design Brief

The more you can define in detail here, the fewer questions and corrections you’ll face during production. And those corrections are always faster and less expensive to fix during planning than production.

One last thought on the planning process: content. Not included above is a Content Map, though perhaps it should be. We talk a lot about content in the discovery process. Leaving it for the end, as a lot of clients want to do, is a mistake as a well-crafted site map and wireframe can fall apart quickly if there is not enough content to populate some areas of the site and too much to fit in others. This is again an area that is cheaper to address in advance.

(If you’d like to learn more about the planning process we use at Andigo and how to adapt it to your own needs, join me later this month at Wordcamp in NYC where I’ll be presenting on this topic. And if you won’t be in NYC on September 15th, contact me and I’ll send you a link to a recording of the presentation.)