How to Create a Requirement Specification Template for Your New Website

How to Create a Requirement Specification Template for Your New Website
  • The purpose of a website specification document is to ensure that everyone involved in your web design project is working towards the same outcomes.
  • Creating a comprehensive specification document can be the make or break of a project, and can save you time and money trying to resolve mistakes.
  • We guide you through what should be on your website specification checklist to help you set your project up for success and get more accurate quotes from designers.

I wrote this article to benefit both buyers and sellers of websites. However, this principle applies to every technical project: never start without a specification.

I am passionate about this topic having spent many years designing complex electronic products for commercial and military use. I have been called in as a consultant occasionally when hundreds of thousands of dollars had been spent on projects that were not properly specified. Some projects could be salvaged and with others, the companies concerned pulled out or went bust.

In the online world where I now work, projects are smaller but the losses incurred by both buyers and sellers can be unaffordable. They can also delay new businesses from getting started.

I have heard so many business owners complain that their website is 'late' or 'doesn't work' that at times it seems like an epidemic. 

What Is a Website Specification Document?

A website specification document is a detailed overview of every page on your new website. The purpose of a website specification document is to create transparency so that you (the client) and everyone else involved in the project (i.e. web designers and web developers) is clear on the desired outcomes across the project lifecycle. 

There are 6 key areas to address when writing a website specification document:

  1. Visual Elements 
  2. Business Website Pages
  3. Business Website Functions
  4. Hidden Website Functions
  5. Training, Documentation and Support
  6. Off-Site Services and Products That All Websites Need 

Visual Elements 

The visual elements of web design refer to how your website will look. Visual elements include:

  1. Colours
  2. Layout
  3. Imagery 
  4. Menus
  5. Header content 
  6. Footer content 
  7. Product images, price presentation, shipping methods and interfaces
  8. Social media links
  9. Blog options
  10. Sidebar content
  11. Galleries and sliders
  12. Mobile-specific changes (e.g. omit some large items)
  13. Additional customer requirements
  14. Special content sections
  15. Font

1. Colours

Corporate colours should complement the logo. A brand-consonant colour scheme must be consistently applied throughout the design. There is a reason complementary colour charts are used by professional designers.

There are also strong psychological reasons for the positioning and colour of 'Buy Buttons'. You can learn much from Amazon.com in this respect. It's worth learning some colour theory and basic colour psychology to help you inform your website colour palette.

2. Layout

An example website may be used as an approximate guide. This gives your designer a framework to start with and gets things off on the right track.

3. Imagery 

You will need to specify the number of images per page and who they will be supplied by, i.e. by you or the designer. Designers can buy images for you and modify them if they have an artist or graphic designer on board, but this usually costs extra.

Always make sure you have the right to use the images you supply to a designer - they will not be responsible for copyright infringement, you will. Do not expect the designer to put up 50 images for you if they haven't been contracted to do so. Most designers will specify the number of images you are paying for in your contract. 

4. Menus

A website menu can take many forms - at the top, on the side, with icons, without icons and so on. Most websites have more than one menu to accommodate things like privacy policies and other pages which exist for legal reasons. A second menu usually sits at the bottom of a website page.

5. Header content

Not specifying what you want in a website header can come back to haunt you later because. For example, if you suddenly decide you need a new, hitherto unthought-of item such as a 'Get Quote' button 'at the top', it can really screw up your mobile design (yes - been there, done that). 

6. Footer content

Footer content is similar to header content, although less sensitive. For businesses though, the footer content is important not just for SEO (e.g. links to regional pages), but also for customer convenience. This is where another copy of your address and phone number is helpful and perhaps a contact form on a small website.  A footer is also a useful place for social media links.

7. Product images, price presentation, shipping methods and interfaces

The number of products you want to feature on your ecommerce website must be specified along with the number of images for each one. Think carefully about how you want these products to display and research other websites.

If your product is shipped from your premises or a warehouse, think about how you will integrate the delivery mechanism into your website and ask your developer for advice.

Price presentation is also important - have you ever seen a restaurant menu with the price in small print and without the dollar symbol? There's a reason for this - it makes the item price less important to the buyer. There are many such factors a competent developer/designer can discuss with you.

8. Social media links

For social media links, you need to ask yourself questions such as:

  • Where are they to be placed?
  • Do you need to share website content to your social media pages (this requires special facilities)?
  • Or do you just need links to your social media pages? 

9. Blog options

A blog can make a big contribution to a website's SEO by establishing the site as an 'expert' in the eyes of Google's algorithm. If you need a blog ask for it, but make sure that you are offered a training session if you want to update it yourself, or a reasonably priced 'update service'.  Blog posts must be set up correctly to have beneficial SEO effects.

10. Sidebar content

Many blogs come equipped with sidebars on the post pages. This is a great place to have ads, search facility and even testimonials. You might not want a sidebar, it's your call. However, you need to be upfront unless you want to pay for changes later.

11. Galleries and sliders

If you want galleries with sliding images then you must specify how they look and how you want them to work, e.g. a sliding gallery of images with text overlays, etc. If you do not include this requirement upfront you will likely be charged additional fees. 

12. Mobile-specific changes (e.g. omit some large items)

Most customers don't know enough to ask this, and it's important. A competent developer will ask you if there are things you can leave out of the mobile version of your website to make it load faster and look simpler. For instance, some customers are prepared to leave out a slider with a lot of large images to improve loading speed (P.S. most people only ever look at the first slide anyway).

13. Additional customer requirements

The customer really needs to ensure they have covered everything needed before the scope of work is signed off. Is the online payment specified? Do you need to bundle products together? Do you need to offer bulk discounts? You need to think of this not technically but as a business owner. Your website is just a tool and it must do what the business needs.

14. Special content sections

Special content sections refer to concertinas, sliders, delayed content or whatever options the developer may offer or the customer requests. Many of the low-cost providers sell cookie-cutter designs, which is fine if that's what you need, but not at all fine if your business needs sophisticated, tailored facilities. 

15. Font

First and foremost, make sure that the fonts for your website are shown to you as a sample before you build. Poorly chosen fonts can have a devastatingly negative effect on user experience (UX) and make your website look like a carelessly constructed relic.  

In general, modern websites tend to use 'sans serif' fonts. Fonts are psychologically important - tall and thin suggests elegance, short and thick suggests tradition, etc. Most website buyers can benefit from spending a little time investigating font options. 

Business Website Pages

For each website page you need to think about:

  1. Topic-specific pages
  2. Page content (user content or commissioned content)
  3. Page imagery 
  4. Internal links to other pages and on-site SEO
  5. External links for SEO purposes
  6. Blog requirement (categories and display)

1. Topic-specific pages

These can be blog pages or pages, depending on how long they will remain relevant. As stated above, these pages can make a powerful contribution to SEO. 

2. Page content (user content or commissioned content)

Are you going to include unique, high-quality content on your website? Do you need your designer to provide this for you? This generally forms part of an SEO contract, but it's also possible to include it in your website development project.

3. Page imagery 

Identify if you have images ready to upload to the site or if you will need to source new imagery.

4. Internal links to other pages and on-site SEO

On-site SEO requires you to link to other relevant content on your website. If your developer is providing content, the contract must include keyword research, internal linking and metadata setup.

5. External links for SEO purposes

Competently written blog and page content will contain links to external websites with relevant domain authority sites for on-board SEO. You can check the domain authority of websites using tools such as Ahref's Website Authority Checker and Moz's Link Explorer.

6. Blog requirement (categories and display)

Your content should be organised into relevant categories. For instance, if you sell makeup then you'll want categories for each type that you are writing about.

Business Website Functions 

As well as all of the items discussed above, there are some additional functions you may need depending on the purpose of your site such as:

  1. Contact forms and contact methods
  2. Popups for email capture
  3. Voice search options
  4. Document download functions
  5. Event calendars
  6. Appointment systems 
  7. Document uploads
  8. Competitions

1. Contact forms and contact methods

Do you need a contact form? If so, what fields must it have? You may also prefer a link that opens the email client when clicked. Do you want your phone links to be clickable?

2. Popups for email capture

If you need to accumulate customer emails for a mailing list, popups are useful. Usually you will need to offer a customer something in exchange such as a brochure download - which is another feature.

3. Voice search options

Voice search can place you a significant distance ahead of your competitors - especially for restaurant businesses. 

4. Document download functions

Many businesses need document download functions to enable their website visitors to download product brochures, technical sheets, etc. 

5. Event calendars

Announcing events, allowing bookings, allowing calendar entries. For many organisations an event calendar is a vital website feature. 

6. Appointments systems

If you are a doctor or a hairdresser, then an online appointment system can be very convenient. It reduces manual tasks and can integrate with other systems you use to improve efficiency. 

7. Document uploads

Art organisations love a document upload feature as it allows them to run art competitions online. This usually requires custom forms. 

8. Competitions

Competitions can keep people on your website for a long time and embed your brand in their memories. Are your competitors using competitions? It's worth investigating. 

Hidden Website Functions

There are a number of technical website specifications you need to be aware of to ensure your site has optimal user functionality:

  1. Fast caching options
  2. Image optimisation
  3. Security Options including SSL certificate
  4. Google pixel
  5. Facebook pixel
  6. Other pixels
  7. On-site SEO

1. Fast caching options

Fast caching options are a critical part of the back-end of your website - they are essential for a fast site.

2. Image optimisation

Image optimisation is important for web page loading speed, SEO rankings, user experience and user engagement.

3. Security options including SSL certificate

Always, always, always make sure that your developer installs security software. Ask them which software they will instal and then look it up online to make sure it has a good reputation. SSL is not an option for websites selling goods online as you cannot accept payment without it.

4. Google pixel

Google Pixel allows you to gain information about your website visitors, where they come from and which pages they visit in your Google account. It's very important to gain key metrics that can help you improve your site.

5. Facebook pixel

If you intend to run Facebook ads, this piece of code interfaces with Facebook and gives you critical information.

6. Other pixels

Pixels are available for other platforms such as Pinterest, LinkedIn and Instagram.

7. On-site SEO

We have covered some on-site SEO features above, but additional items include metadata, keywords and local SEO:

  • Metadata options for posts and pages  (snippets) and products: Correct setup of headings, snippets and SEO title so that Google can quickly understand your website.
  • Keyword optimisation for content: Make sure that your content is based on competently researched keywords that can bring you relevant traffic.
  • Local or national business structure: A local business has its own needs such as Google Maps and prominent address and phone number. People looking for local companies need to see the contact details prominently on your site. We also suggest creating a 'Google My Business' page.

Training, Documentation and Support

Assess the level of support you will receive throughout and after the project. Things to consider include:

  • User manual contents: What will you get in the manual?
  • Training hours: How much time will your developer give you for training?
  • Warranties: After delivery, what is the technical warranty and what does it cover? Be careful here because a website is dependent on the hosting it uses. If your developer is providing hosting make sure the warranty covers that. If you are providing the hosting, then you will need a technically competent person to speak to the host if things go wrong at any time.
  • Support contract: Make sure that you are covered for support after the warranty expires - a competent developer will offer you a support contract at a reasonable price.

Off-Site Services and Products That All Websites Need 

No matter the size or type of business you run, all websites need the following off-site services and products in some measure:

  • Hosting: The host is where your website exists
  • Domain: Your website domain is where it all begins
  • SEO: If you need your business website to rank on Google - you need SEO - links, guest posts, press releases and much more. Caveat Emptor! This is a field replete with scams so be really careful
  • High-quality Images: Important for all websites, but critical for online shops
  • Social media: You will need to set up and manage your social media accounts and consider social media marketing and advertising options
  • Google My Business page: Most people can set this up for themselves except for site verification, but it's simpler and quicker to ask your developer.

The above list is by no means exhaustive, but it is adequate and both designer and customer must sign off on it.

Having a comprehensive website specification document will prevent the costs and inconvenience of paying for changes when the designer has not understood what you need. It also prevents the designer from going crazy with frustration.

Thanks for reading!

Have you written a website specification document? Share your thoughts in the comments below.


Keith Rowley

Joint Owner and Customer Strategist at

I have enjoyed careers as a Radio Officer in the Merchant Navy, a Design Engineer in R&D for commercial and military companies, a Business Manager in two countries and now as an Internet entrepreneur. Prior to all that, I've cleaned cowsheds, served in restaurants and cleaned hotel kitchens. I've done some parachuting, lots of cycling and hiking and also love computer strategy games such as Sid Meyer's Civilization series. The love of my life is Hettie from South Africa (where I lived for 20 years). I believe in practicing engineering excellence in combination with unimpeachable ethics. Whatever I do at work, I never forget, on jobs big and small, that I'm using my customers' dollar and that each and every one of you deserves the best I can deliver. I apply engineering principles to our online work and coined the phrase 'Online Business Engineering' to describe what we try to achieve for our customers - a healthy return form their online investment with us.


Comments
User