7 Killer Tips to Creating a Website Specification Document to Support Your Search Engine Marketing Efforts

How To Write a Specifications Document

An experienced architect will tell you: only a foolish person would build a house without first putting some specs down on paper.

The process of building a website is no different. It takes careful planning and precise information architecture before you can hammer down that first nail, or in this case… punch up that first string of code. And because search engine marketing success is so critically dependent on having a website with a solid underlying foundation, future efforts to optimize are riding high on your ability to deliver a cohesive plan from the start.

A successful website deployment depends on creating a detailed specifications document, just as the house you live in began on paper as architectural blueprints. These “spec docs” help to design a clear understanding of what the finished product should look like, and the individual steps that need to be taken in order to achieve that goal.

Fail to Plan, Plan to Fail

Whatever we do in life, it is important to be clear about what exactly we want to achieve. Otherwise, we will never know when we’ve reached a specific goal. Same goes for your website. Before you begin scripting a spec doc, learn as much as possible about the visions and goals for the website and the business behind it.

This can include formulating thoughtful questions that provide relevant insight, creating an in-depth study of the current website, as well as those of any potential competitors, and a good old-fashioned brainstorming session with members of the design and development team is always helpful.

web design spec doc snowflake effect

The Snowflake Effect

Just like a snowflake, no two specification documents are alike. They can be long or short, filled with dazzling graphs and photos, or stuffed with plain old text. An ecommerce site planning to sell only two or three different products will probably only require 15 to 20 pages worth of your ideas. While a large ecommerce website design or news site might look like the manuscript version of “War and Peace.”
The point is each one will be different. However, stick to this basic structure and you should be fine:

  • Purpose of the document
  • Description of the project
  • Front-end functionality
    • Common features
    • Sitemap and website structure
    • Description of every website page
    • Wireframes (home page and at least 2 other important pages)
    • Miscellaneous functionality
  • Back-end functionality
  • Use cases
  • Conclusion

7 Killer Tips For A Successful Specification Document:

1. Time is of the essence..
Evaluate the amount of time that is being put into the overall project, and then determine what portion of that should be focused on the spec sheet. For a brief document, 15 to 30 hours might be enough (15 pages and 3 to 4 wireframes), but a more detailed sheet takes no less than 50 hours. The time spent on the document should be proportional to the budget. There needs to be a conversation about how much time you can realistically devote to the specifications so that the rest of project can proceed in a smooth and prompt manner. If the project has only 400 hours allocated, it doesn’t make sense to spend 100 hours writing the specs.

2. Don’t dive in head first.
Before getting too excited and diving directly into the detailed specifications, spend some time visualizing the new website as a finished product. Consider how you want the most important pages to look, then start drawing out their structures and drafting wireframes. You don’t want to make everything up as you go along, so taking the time to create a skeleton of how you imagine your site looking can make the rest of the process much more organized. Only start working on the specs when you have a clear picture and long term goal for the whole project.

3. Home is where the start is.
The homepage will be the first thing most of your audience sees upon visiting your site. So when working on wireframes, this is the logical place to start. It should include links to all important sections of the website. Once the wireframe of the home page is completed, the process of working on the other sections becomes much easier.

website design specifications document

4. Understanding is in the details.
Let’s say you are outlining a redesign for an existing website. Make sure you take the time to learn how all sections of the old website work first. In the long run, you’ll be very happy you did. If old sections are cut or left out, the corresponding or replacement sections on the new site should be addressed accordingly. This is also important when redirecting old URLs that may be linked to from outside sources.

5. Not making a decision is a decision - a bad one.
Why make a plan, if the plan is incomplete? Do not leave any empty sections that you intend to wait and make a decision on later. Make sure that the spec document covers all sections of the website. If there is anything that is unclear, come up with a list of questions for the client that is filled with topics you would like to address. The goal you set should be laid out as clearly as possible because it will make your job, and the client’s involvement, a much smoother process.

6. Make the possible, possible.
Empty promises lead to hard feelings. You won’t feel good about them, and neither will the client. During the planning process, make sure the site functionality options described on the spec document are actually feasible. Having to go back to the client with any issues later on can leave them incredibly disappointed.

7. Keep it simple.
Most clients are not going to have in-depth knowledge of HTML, JavaScript, etc., so you should make an effort to ensure this document is as clearly laid out for them as possible. A client might believe they understood what you said, but often what they heard and you meant, were two completely different things. It may feel tedious, but it can help to avoid any possible misunderstandings down the road.

Delivering the Deliverables

A well-crafted specification document allows designers and developers to move forward with a project while avoiding any surprises for the client down the line. It should give a precise estimation for a timeline of the project, and a completion deadline. You can hold you and your team accountable, while keeping the client at bay with an indication of what tasks you’re working on and when. This helps to control the scope of the work, and keep costs from increasing throughout development. It is important to keep these details in mind while building a strong foundation for your overall project. In the end, it will lead to smooth communication between you and your client, and a clear picture for the project ahead.

The Right Digital Agency Whitepaper

Share this post

Comments on this post

  1. Although it is true that few people actually go through and read spec docs, they are essential when putting together a business proposal to pitch to investors. No one is going to put money into a website that is completely based on ideas. There needs to be a clear vision for a website laid out in spec doc format.

  2. The problem with “spec documents” as well intended as they are, is that nobody reads them. Everyone always gravitates to visual elements and do very little reading.

    A developers is most likely to look at the comps and make assumptions on the other things. So all the time spend on functional requirements could end up as wasted effort.

    This is not a slam on developers, it’s just human nature to be visual. A picture does say 1000 words.

    We must find ways to mesh visual aids and “specs” to create an interactive model with all the requirements info in context. Programs like iRise and Axure have been bridging this gap we we still have a way to go.

  3. I’m certainly not saying that specs are not needed. We in the UX community need to start thinking of new ways to represent ideas in a more interactive way rather than static documents.

  4. Thanks for the post. Spec sheets ARE important, and not only to big clients with big websites. Smaller websites need focus and direction too. There’s always a client who calls halfway through the process and says “hey, let’s ditch this flash based navigation system for unicorns” Hey, it could happen.

  5. These guys really nail it in the head for me:

  6. Sadly it all depends on what the market is prepared to bear. It is one thing to build a website for a corporate – they expect to pay big bucks and to have time spent on documentation and specifications.

    Try that in the small business environment or personal website environment where each cent counts and they can always get a website for really cheap (obviously built by their neighbour’s son who ‘is so good with PCs’ in his spare time)..

  7. Great comments. I like the idea of progressive visual specs. It’s so difficult to nail down everything on a large web site before the client knows what they want, and as PO said, once they start seeing it develop, it’s “hey, what about this?” So what about a “funnel spec” (like a sales funnel) — start wide and narrow it progressively to the final product. What would “wide” be? Attitude? Top level design? Key functions? Depth? UX? What do you think?

  8. John Paul Wlaker said:

    This certifies my hypothesis of services and decisions not anymore being either B2B or B2C and rather as H2H (Human to Human)
    Thank you Blue Fountain Media – this certainly helps as you can well see me, myself entrepreneuring my way into the Website designing and Digital marketing agencies.

  9. Pingback: Takeaway: Client work, Mission Statements, & Site Specs | IWC Takeaway Blog

  10. Pingback: Week 4: Marketing Plans and Mission Statements Takeaways | loriwc2014

  11. Pingback: 9/26/14 Takeaways | My Take-aways

  12. Pingback: Takeaways 7 | liebigiwc2014

  13. Pingback: 5 Design Tips - Things You Don't Read In Books CutCorner Studio

  14. Pingback: LP12 – Project Management & Site Specifications | Yeng Yang

  15. Pingback: 10/09/15 Class Takeaways | martineziwc2015

  16. Pingback: Let’s Get Organised: The Project Specification Document – Developing Claire

  17. Pingback: 7 steps to create efficient specification – AnvilEight Blog

Comment on this post


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978