THINKING

How We Build Websites

Who It’s For

Every company is unique and for every company, there’s a unique website solution. The range varies. Organizations could build a site right out of the box using Squarespace or Wix or can hire a web design firm to create a custom website.

We usually create websites for smaller organizations. Beks Marketing serves start-ups or existing businesses that need to modernize [or update/freshen] their web presence to better reflect their brand. These clients typically want a website that they can update and manage themselves, and that offers flexibility within a modest budget.

The Framework We Use

We’ve been using WordPress as the framework for every site we build for the last ten years. We are huge fans because WordPress is affordable, easy to use, and has 80% of website CMS market share. For our clients, this means if they ever need help with a customization, new functionality, or an update, they can always find someone who knows WordPress. There is a monster community behind WordPress.

The Process We Follow

We follow steps similar to any freelancer or web design firm that uses WordPress [?] to build a custom website. Here it is in a nutshell.

Design and Planning

Sitemap

We outline every page in a spreadsheet. By doing so, we know how many pages we’re working with and how they all fit together. Our client signs off on the sitemap before we go to the next step.

Visual System

The client provides their brand guidelines, and we review them for image treatments, visual elements, colour usage, and typography. It’s here that we  get a sense of how the website should look and feel. Or: In some cases there’s no brand guideline available. Then we need to develop a visual system before moving to the next step.

Template Selection

When we design and build sites, we use a toolkit called Elementor to create attractive sites on top of the WordPress CMS.

We use Elementor template kits to customize the look and feel of the site according to the visual system that we established earlier. At this stage, we look for a kit that we can “bootstrap” so we don’t have to build from scratch. That’s how we keep things affordable.

Wireframing

You’ll notice that we’re still planning. At this stage, we use a tool from Adobe called Adobe XD to wireframe the entire site. The wireframe organizes each page’s content into building blocks. There is no design here and no content, just placeholders to show how everything is organized. Our client signs off on the wireframes before we go to the next step.

Content Map / Outline

Next, we develop a content map or content outline. The content outline matches the wireframe and lays out what website copy (text) we’ll need. A good content outline identifies the text required for every element (e.g. button text) and the number of words necessary for each block.

Building Content and Building the Site

In our process, we split up the work into two sections: writing the content and designing the site. We can do so confidently because of the time we’ve spent planning. The content developer knows exactly how much to write and where the text will appear. The designer knows exactly where to place the text and how much of it to expect.

Designing the Blocks and Elements

First, we set up all of our tools online in our client’s hosting environment. Once all the tools are installed, we design every block and element outlined in the wireframe on one live webpage. We test the blocks and elements on different screen sizes and evaluate each for functionality. This page gives us a sense of how each element will look and behave. Our client signs off on this one page of blocks and elements before we go to the next step.

Designing the Rest of the Site

Once our content map is finished and signed off by the client, and the building blocks and elements are approved, we can build the rest of the site. At this stage, all of the text is the proper length, we have sourced out images and visual elements, and all our building blocks are refined and approved.

We build out the entire site according to the sitemap and wireframes. In some cases, we will hire a third-party UX (user experience) designer to audit the site and make recommendations.

Proofing and Testing

One of our editors will proof the entire site, and another member of our team will test it for usability, consistency, and functioning links. Everything should read well and be working at this stage. At the very end of this stage, the client reviews and signs off on the site, or we make final revisions.

Publishing

We back up the site then move it from the staging site to a production site (the client’s actual URL). We test links again and do another usability review. We tie in Google Analytics and install a set of stable plugins for SEO and security.

Speed Optimization

At this stage, we optimize the site for speed. We do the basics that get our clients to 90% of where they need to be.

What is not included?

Email: Email and the website are two different things but are connected by web hosting. We can make recommendations on hosting that will optimize a website’s performance but will not be able to configure or make concessions for email. An IT expert helps with this part.

SEO: It is best practice to hire an SEO firm or expert to work alongside our team as we build the site. Unfortunately, in most cases, this nearly doubles the website’s cost. We set up our clients for SEO at a later stage, but we don’t do any SEO work. We clarify this with our clients before we start.

What Shows Up on a Typical Proposal?

Below is an itemized list of what we do as part of a typical website (re)design.

Stage Tasks
PlanningKick off meeting
Web questionnaire (client fills this out)
Sitemap development
Wireframe design
DesignInstall WordPress on client’s hosting
Purchase license and install Elementor page builder
Design typography and interaction elements page
Design content blocks
ContentSet up content map based on wireframe
Write copy as per content map
Edit and proof web copy
Edit images as provided by the client
BuildBuild out all web pages according to site map and wireframe
Set up forms
LaunchInstall Google Analytics and other relevant plug-ins for security and speed
Move site to production
Submit sitemap to Google Search Console
TrainingProvide video tutorial(s) on how to update content
Jason Bekdashe

Jason Bekdashe

Jason has consulting and agency experience in marketing research, strategy, and planning. Reach out to Jason to discuss your marketing challenge.