Skip to main content
Business LibreTexts

6.5: The web development process

  • Page ID
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    This section discusses the process of building a website from the client’s perspective.

    Figure \(\PageIndex{1}\): The web development process

    Step 1: Discovery and planning

    Planning a website starts with research of 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.


    Read more about this in the Market research chapter.

    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, to collate travel information in one place, such as with [Accessed 30 October 2017]


    Read more on users in the User experience design chapter.

    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.

    Before any web design project starts, decide what browsers, operating system and devices you will develop for. Usually for browsers you use the latest, plus one before. For devices, iOS and Android are quite different so if you are optimising for both this can be quite expensive. Technology moves so fast, you cannot keep up with all the latest OS and devices.

    Choosing a domain name

    Domain names are important. They are part of the URL of a website. A domain name looks something like this:

    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 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,, – 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, could be a better choice than as it contains the important keyword ‘restaurant’.

    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 the navigation (how users make their way through a website).


    Read more about this in the User experience design chapter.

    Figure \(\PageIndex{2}\): A sketched wireframe of what the webpages will look like and how they will link to one another Adapted From Onextrapixel, 2010

    See this link (designmodo. com/wireframingprototypingmockuping/) for a good explanation about the differences between wireframing, prototyping and mocking up.

    Figure \(\PageIndex{3}\): An example of a wireframe against what the final website looks like Adapted From Wirify, 2017

    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?


    Have a look at the discussion on choosing a static versus a CMS website earlier in this chapter

    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 should detail 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.

    Search engine visibility

    Search engine traffic is vital to a website; without it, the 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 its relevance for its chosen keywords.

    Search engine optimisation (SEO) has its own chapter in this textbook, but here are the key considerations for web development and design.


    Read more about this in the Digital copywriting and Search engine optimisation chapters.

    In 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.

    If the search engine cannot see the text on the page, it means that it cannot crawl and index that page.

    Step 2: Design

    Design usually happens before development. According to the steps explained earlier in this chapter, 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 3: Development

    The development phase usually kicks in once the design is finished. 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 4: Testing and launch

    Once you have 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 and devices 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 of the copy before it goes live.

    Tools such as W3C’s HTML validator, should be used to validate your HTML. See more about testing in Section 6.7 Quality assurance.

    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.

    This page titled 6.5: The web development process is shared under a CC BY-NC-SA 3.0 license and was authored, remixed, and/or curated by Rob Stokes via source content that was edited to the style and standards of the LibreTexts platform; a detailed edit history is available upon request.