There are different approaches to building a website. The one described here is the waterfall process, where one step follows the other. This is in contrast with other methods such as the Agile methodology, which involves faster iteration and greater collaboration, but doesn’t afford clients as much control and upfront clarity on the deliverables and timelines.
Step 1: Planning and research
Planning a website starts with research: your market, your users, your competitors and your business. If you already have a website, you can use existing web analytics data to understand how well you are meeting your users’ needs. It’s also worth running some user labs to watch how users interact with your existing site. Have a look at the Market Research chapter for a detailed discussion of this.
Key questions you need to ask:
• Business: What are your business objectives? How should this digital property help you to achieve those objectives? (For example, should it generate leads for you to follow up on? Is it an e-commerce store?)
• Users: Who are your users, your potential customers? What problem does your website need to help them solve? (For example, collate travel information in one place, such as with www.tripit.com.)
This research helps you to plan your website strategically, ensuring that it is aligned with both user needs and business objectives.
In research and planning, you should also reach an understanding of what tasks (or actions) users need to do on your website. These are usually in line with your business objectives. Some tasks a user may need to do include checking the availability of a hotel, signing up for a newsletter, or printing information.
Step 2: Choosing a domain name
Domain names are important. They are part of the URL of a website.
A domain name looks something like this: www.mycompany.com
But a lot more information can be included in this. Domain names can carry the following information:
subdomain.domain.tld/directory
• Domain – the registered domain name of the website
• Subdomain – a domain that is part of a larger domain
• TLD – the top level domain, uppermost in the hierarchy of domain names
• directory – a folder to organize content
The TLD can indicate the country in which a domain is registered, and can also give information about the nature of the domain.
• .com – the most common TLD
• .co.za, .co.uk, .com.au – these TLDs give country information
• .org – used by non-profit organizations
• .gov – used by governments
• .ac – used by academic institutions
Domain names must be registered and in most cases, there is a fee for doing so. Many hosting providers will register domain names on your behalf, but you can also do it yourself.
Domain names should be easy to remember, and if possible, include important search keywords for your business. For example, if you were building a website for your restaurant named Omega, www.omegarestaurant.com could be a better choice than www.omega.com as it contains the important keyword ‘restaurant’.
Step 3: UX and content strategy
You also need to gather, analyze and map out what content is needed on the website. This content is then structured in a process called information architecture. A sitemap should reflect the hierarchy of content on the website, and navigation (how users make their way through a website).
Before a website is designed and developed, it should be sketched out using wireframes. These should then be reviewed by everyone involved in the web design and development project to make sure that they are feasible, as well as to identify new ideas or approaches for design and development. It’s much easier to change track in the planning and research phase than down the line when design and development have started.
At the same time, consider what content you want to include on your site – will it be a relatively static site that doesn’t change often, or will you need an editable CMS to regularly add and update content, such as blog posts, images and products?
Should the website be large enough to require it, a functional specification document should be created, using all the information compiled so far. This document details the development requirements for the website and can be used to communicate any specific design constraints. It’s now time to move on from planning to building.
Step 4: Search engine visibility
Search engine traffic is vital to a website; without it, chances are that the site will never fulfil its marketing functions. It is essential that the search engines can see the entire publicly visible website, index it fully, and consider it relevant for its chosen keywords.
Here are the key considerations of Search engine optimization (SEO) when it comes to web development and design.
The following text styles cannot be indexed fully by search engines:
• Text embedded in a Java Applet or a Macromedia Flash File
• Text in an image file (that’s why you need descriptive alt tags and title attributes)
• Text accessible only after submitting a form, logging in, etc.
• Text accessible only after JavaScript on the page has executed
Step 5: Design
Design happens before development. The designer will transform the wireframes and basic planning materials into beautifully designed layouts – these are static images that show how the website will look once it’s coded.
Step 6: Development
The development phase usually kicks in once the design is finished, although developers will sometimes start their involvement as early as the wireframe stage by creating low-fidelity prototypes to support the user-testing process. Normally, the developer uses the design templates to code the actual website, using the front-end language that you have chosen. Server-side development and CMS considerations may also be part of this phase.
Step 7: Testing and launch
Having planned an amazing site, designed it beautifully, built it skilfully and filled it with fantastic copy, it’s time to test it fully and then take it live!
Testing is an important part of website development and design, and it should take place throughout the process of planning, designing and building, leaving just final quality assurance (QA) testing before the site goes live. Test subjects should be real potential users of the website, not just members of the development team!
The site needs to be tested in all common browsers to make sure that it looks and works as it should across all of them. All links should be tested to make sure that they work correctly, and it’s always a good idea to get a final check of all the copies before it goes live.
Tools such as W3C’s HTML validator (validator.w3.org) should be used to validate your HTML. Make sure your web analytics tracking tags are in place, after which it will be time to take your site live. Now, you need to move on to driving traffic to your newly launched site.
