Building a Website is Like Building a House

6 Steps to building a website

House under construction

Before starting any development project, an evaluation of the feasibility is essential.

Feasibility can include soil and geophysical properties, land surveying, and permit investigations. Will the ground support the type, size, and orientation of the home you want to build? Will the council bylaws permit the size and placement of your structure?

I should state as a caveat here that I am focussing on substantive websites that are a 24/7 marketing tool for businesses, non-profits, or for social presence purposes such as events. Smaller sites like a blog take significantly less effort and can be more easily achieved. There are still a lot of hours that go into developing a blog!

For a website development, the pre-testing includes:

  • Business name and domain name identification: does another business already have your name online?
  • Keyword identification: what words are your customers, patrons, consumers searching with when looking for services like yours? You might be surprised to find the words they use are more general that the industry-based lingo that your office uses on a daily basis.
  • Identifying Competitors: This is particularly important for new businesses to the market. If their field is hotly contested, eg Real Estate Agents, becoming visible, and differentiated from the competition is important.

Step 1: Logical architecture Architecture drawing of a house

"Who would build a house with no doors?” You wouldn’t expect this to happen with a new home development, but a poorly architected website can leave the site visitor wondering where the entrance is, or once inside, not knowing where to go next.

Some sites make such a splash of how great they are on the homepage, then expect the person browsing to click to start the process of what they were already trying to find.

Planning the internal layout includes pathing of how users will move between sections.  Planning your hallway to connect rooms, not just run to a dead end, and plan your stairway so that it runs logically from an internal point in the house, not from right inside the front door when you have the main level to offer. 

The process of looking at Blueprints, or CAD drawings, gives the architect and the client a chance to walk through the place in a virtual way, looking for obstacles, and to confirm the vision before proceeding to the physical building. 

A website wireframe achieves the same thing and provides valuable insight into the projected delivery, the ease of navigation and the expected outcome of the development. Architecture questions look at:

  • What is your business goal, and how will the website support this?
  • What are your principle service offerings?
  • What are your highest volume searched terms?
  • If you have an existing site, what are your strongest performing landing pages?
  • What will be the essential calls-to-action that will drive more business or connections?

Step 2: Visual Design

Next, after the logical structure is agreed comes the visual design – interior design – the planning of the aesthetics and internal functional structures.  What will the paint, finishings, flooring, and fixtures be?

In the web world, the design questions are:

  • What is your business, business type, and context? Is it formal and institutional, family oriented, social?
  • What is your business colour palette? Is it earthy, bright, cool, soft, edgy, warm?
  • Do you have a recent logo that will support the design direction?
  • What font(s) are part of your brand identity, are they websafe? what will work best?
  • What style of imagery will engage the user?

Sometimes during this phase, an obstacle with the architecture and blueprint can be identified and corrected.

Step 3: Construction

At last, we get to the Foundation & Framing phase. Oh the excitement of seeing the physical development take shape as the foundations are poured, electrical and plumbing connections are brought right to the structure. In a new home development you can get closer to this driving by, or sometimes getting a tour of the site. In the web development process, the structure needs to get to the point of completeness before it can live on the web for personal review.

Once the foundation and framing are up, the progress can seem much quicker. The internal and external cladding is added, roofing, eaves trough, external fixtures, windows, doors, locks, garden water taps, and garage. 

Your web developer at this point is applying the HTML and CSS code that connects the graphic vision for fonts, colours, decorations, icons, and favicons to the back end database and web-serving structures.

Step 4: Content and Finishing

Readying your building for prime time includes filling it with furniture, furnishings, and essentials of everyday living.

The furnishing stage of a website involves adding the content, both text, images, videos, forms, links, and calls-to-action that give the viewer the fastest route to what they want to see.

This phase is often underestimated as not only does the text need to be loaded, but it needs to have the heading and subheading styles applied as well.  Alt tags are unique to websites and are hidden text describing the images, titles, and links.

Finally, the META data is added that feeds the critical descriptions, and titles to search engines so they can rank your site for relevance as compared to others using the same words.

Step 5: Quality Assurance (QA) Inspection

Before the master keys are handed over there is a process to walk through and inspect the finishing:

  • Do the doors and windows open as expected?
  • Is there a pathway to the front door?
  • Does the back door work?
  • Is the painting completed with sufficient coats and attention to detail?
  • Is the pantry door hung the right way?
  • Is the fridge door hung the right way?
  • Can you open the oven and the dishwasher at the same time?

On a website, the Quality Assurance (QA) process involves inspecting:

  • Layout and alignment of pages visual elements,
  • Checking the links, and buttons
  • Testing mobile responsive break-points and element wrapping,
  • Forms,
  • Navigation, 
  • Visible and invisible keywords.

Step 6: Live it, love it, share it

The celebration of the finish line is the housewarming. You invite friends, neighbours, colleagues and relatives. If the building is a commercial space, a Grand Opening gives you a chance to invite local dignitaries, clients, and business associates to share the celebration of this new asset.

For your website, inviting dignitaries is done virtually by:

  • Submitting a sitemap to search engines so they will index your information,
  • Sharing your site on social media, and
  • Email communications to your existing contacts.

Think of your search engine optimization (SEO) as like hanging a street sign, adding a letterbox, or placing an advertisement pointing to your location. SEO helps people who haven’t yet found you to learn where to find you, and what you offer.