This section discusses the process of building a website from the client’s perspective. 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 deliverable 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.
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 eCommerce 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 to 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 organise content
The TLDcan 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 organisations
• .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, analyse 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.
Search engine optimisation (SEO) has its own chapter in this textbook, but here are the key considerations when it comes to web development and design.
The Writing for Digital and Search Engine Optimisation provide details on writing copy for online use and for SEO benefit. When it comes to web development, the copy that is shown on the web page needs to be kept separate from the code that tells the browser how to display the web page. This means that the search engine spider will be able to discern easily what content is to be read (and therefore scanned by the spider) and what text is an instruction to the browser. Cascading style sheets (CSS) can take care of that.
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
If the search engine cannot see the text on the page, it means that it cannot crawl and index that page.
Step 5: Design
Design happens before development. According to the steps explained earlier in this , 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 copy 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 – that’s where all the Engage tactics in this textbook come in handy.
