Building Websites. Pre-Production: Functional and Technical Specifications

Paweł Durczok on the

After the brief and research giving us the knowledge and understanding what the client’s website goals and requirements are, it’s time to create functional and technical specification documents. Both of those specifications serve a similar objective – to determine a base of functionality and technology for the project, but the purpose is slightly different for each one.

Building Websites - Functional & Technical Specifications

Source: Unsplash, Author: José Alejandro Cuffia

The functional specification is a document created very much in tandem with the client. It will be based on the findings from the previous phase the most and will determine what the functionality of the site will be. This is a very important document to have for projects of all sizes and scopes even for small brochure sites or landing pages; it’s vital to involve the client in its creation.

As the name implies, in the functional specification all the necessary components of the website will be listed and described. Therefore if the website needs a contact form, a newsletter subscription or a booking system, it should all be included and detailed in the specification.

Why such a document is needed even for small projects? There are two major reasons.
Reason number one: proper understanding of the site’s functionality will determine the technology used to build it.
Reason number two is communication – it’s very important that both sides – the client and the developers know exactly what they are building and why, because this will eliminate any surprises in that regard. And remember, surprises in web development cost money.
The functional specification should be the base on which the project is quoted and it should be included as part of the contract.

See the Pen Website scroll animation (SCSS + HTML only) by Paweł Durczok (@north-of-rapture) on CodePen.

With the functional specification out of the way, it’s time to move to the technical one. Arguably, this document is, in most cases, for internal usage of the developers, since it tackles the technological aspects of the project which wouldn’t be very useful for most clients (and often completely out of their level of expertise). There are exceptions to that of course. If the client is providing their own or third party solutions that will need to be implemented, it might be useful or even necessary to include them in writing the specification, but in most cases it isn’t required.

The technical specification will include information on things like the content management system used for the project, front-end solutions, third party applications, optimisation avenues and hosting parameters. If youre still struggling, Salesforce has a great tutorial on web app building. It’s width and breadth will be determined by the functional specification for the most part, but also by the experience and judgement of the development team

Table of Contents:

  1. Introduction
  2. Pre-production:
    1. Brief and research
    2. Technical and functional specifications
    3. Sitemap and content architecture
  3. Production:
    1. UX Design and Wireframing
    2. Design Concept
    3. Design Proper
    4. Front End Development
    5. Back End Development and Content Modelling
    6. Optimisation and Testing
    7. Hosting and DNS Propagation
  4. Post-production:
    1. Launching the Website and Training
    2. Post-Launch Support


Did you like this post? If so, follow me on Twitter, Instagram and like my Facebook page for updates about my latest posts and projects.