Website Build Process

Contents

Our Build Process

  • We have a standardised build process for physical therapy websites which we have evolved over time and which ensures:
    • Efficient build process – we want to do everything as fast as possible
    • Standardised methods so that everyone who works on our sites is working in the same way
    • Global changes can be made to the site easily without having to edit the same thing in many places
    • Building block creation which makes it easy for us or anyone else to add further content in the future, in keeping with the overall style.

Signoff Points

  • At various points it is marked that the client has to sign off on something
  • This means they agree they are happy with it. If they want to make significant changes later to something already signed off on they will be billed extra
  • At certain points we cannot move forward until we get signoff from the client. These signoffs are marked [wait]. At other signoff points we can continue with the next stage of the project while we wait for the client to come back or make changes
  • We technically reserve the right to sign off on the client’s behalf if they take more than 2 weeks to come back to us or if we feel they’re being too difficult / going round in circles. In reality we’d try not to ever have to do this.

Stage 1 : Onboarding & Timeline

  • We have a call with the client to go through a standard form which contains a range of information, from simple business details like NAP information and their main SEO terms through to their marketing angle, the way they want to be perceived and what design styles they like.
  • The onboarding report contains all the information anyone needs to work for that client whether design, copywriting, SEO, PPC or anything else.
  • One of the most important things we do at this initial stage is to ensure we have DNS access as this may be with a previous developer or the client may not have any of their account details. There may be a significant lead time in getting DNS access, so this gets that ball rolling immediately
  • We will set their project up in Monday.com with:
    • PM board containing:
      • Individual tasks that need to be completed with timeline
      • Small fixes and tweaks that need to be done
      • Gantt chart of timeline
    • FM/RM (financial & resource management) board
      • This measures how much time and money has gone into the project and where it has gone
    • Website structure
    • Ongoing notes including:
      • Anything to be discussed in the weekly standup call
      • List of anything we have asked the client for, particularly dates we asked for signoffs
      • Any extras we will need to bill for
  • We will share the gantt chart with the client to give them an idea of timeline

Stage 2 : Project Setup

  • We create a development site on our dev server with the address clinicname.myco-development.com
  • We install an SSL certificate via Dreamhost
  • We set up a blank WordPress website via Dreamhost which we can log into direct from the control panel. Be careful to choose the options that ensure Dreamhost doesn’t install a bunch of other plugins. All we want is the plugin that allows us to log in direct from the Dreamhost control panel
  • Install and activate Elementor Hello theme and delete the other themes that come with WP
  • Install:
    • Elementor
    • Elementor Pro
    • Imagify
    • Duplicate Page
    • Yoast
    • Wordfence
  • Delete any other plugins (i.e. Hello Dolly, Askimet)
  • Enable auto-updates on all plugins
  • Connect to:
    • Elementor Pro licence
    • Imagify API key 280665089e163a0eff047efe5739e1488d803bfe
    • Wordfence account
  • Activate containers in Elementor experiments
  • Create all pages with SEO optimised URLs so that they can be linked to from the beginning of the development process without having to update links later
  • Create the main menu in the back end according to the website structure agreed with client in the brief

Stage 3 : Initial Design

  • Based on the information about design and marketing garnered during the onboarding call, a designer will create a header, hero section and 2 x example sections. We may do this either in Elementor or in Photoshop / Figma / Etc.
  • The reason for this stage is to get the hero and header fixed, and to set colour scheme, typography and general feel. Everything else will be created using templated blocks which we then tweak to suit the overall design theme.
  • Client gets 2 rounds of revisions then signs off on the initial design.

Client Signs Off Initial Design [Wait]

Stage 4 : Desktop Homepage

  • We create the header and hero in Elementor if not already done, and build the rest of the homepage.
  • Homepage blocks will generally contain:
    • An introduction to the clinic (image and text, or video and text if they have a video)
    • Alternatively, featureboxes with 3 or 4 main messages
    • Information about the practitioners at the clinic
    • Testimonial Carousel
    • Therapy(ies) the client offers
    • Conditions they treat
    • Clinic location(s) – maybe just a full width map if they have only one location
    • Insurances they accept
    • Online booking embed if they have one, or alternatively a book now section with a button to go to booking system.
    • About us or what makes us different section
  • We have or are building templates for all these sections. The idea with the templates is to use them as a starting point to get a page put together quickly, which we can then tweak in terms of design, colour scheme or any custom requirements.

Stage 5 : Global Colours and Fonts

  • As you put the homepage together, consolidate the fonts and colours by using Elementor’s global colours and fonts.
  • Colours:
    • Colours from the initial design chosen by the client
    • Text colour
    • White (#FFF)
    • Light background colour (normally white)
    • Alternative light background colour (#eee or something similar)
    • Common section background colour (which will have white text over the top) – typically one of the client’s existing colours
  • Fonts – set up these global fonts:
    • MYCO-h2 : For the section subheadings
    • MYCO-h3 : For sub-subheadings if they exist
    • MYCO-button : For button text
    • MYCO-p : For text
    • Note – this is probably better done using primary / secondary / text, etc.
  • Even if the homepage needs further tweaks from the client, we still want to be able to edit all these font styles from one place while doing the tweaks and edits, hence doing this now.

Client Signs Off Desktop Homepage [Wait]

Stage 6 : Mobile Homepage

  • We now do any responsivity work on the homepage. Generally everything will be template blocks, including the mobile hero section, so not too much work to do, but you will also get the mobile fonts right at this stage and save them globally.
  • Note we do not ask for client signoff for the mobile homepage.

Stage 7 : Common Sections

  • Now that the homepage is done, you use it to create ‘common’ templates which will be used on the rest of the site.
  • These will typically be:
    • Practitioners Section
    • Testimonial Carousel
    • Therapy(ies) offered
    • Conditions treated
    • Clinic section or map
    • Insurances section
    • Book now CTA section
    • About us / what makes us different (maybe)
    • Medical Review Section
    • ‘From our blog’ section if required
  • Each template must use the alternative background colour, with white text over the top.
  • Save the template with the name ‘SHORTCODE – name of template’
  • We will include these templates using shortcodes in the content pages of the website.
  • Make sure all are mobile responsive and correctly linked
  • Now we create templates for each common section which are an empty container containing the shortcode for that section. That allows us to drop these easily into pages but still edit them all from one place.
    • Save these templates as ‘COMMON – name of template’
    • There is a bug in elementor which means that sometimes certain parts of the CSS do not work on mobiles when using shortcodes, breaking the layout. We fix these with custom CSS in the original template as we encounter them.

Stage 8 : Page Title

  • Create a simple page title template in keeping with the client’s overall theme. See the page title templates.
  • Give the text unique global fonts called MYCO-pageheader and MYCO-sub-pageheader
  • Make sure it looks good on mobiles
  • Optionally at this point you can add the header to all the other pages with a coming soon section, depending if the client is in a hurry to go live.

Stage 9 : Content Sections

  • Content sections are used on content pages, which contain 1000 words or so of text. These are generally therapy pages (osteopathy, physiotherapy, shockwave, etc.) or condition pages (back pain, neck pain, etc.)
  • Create 2 styles of content section for the client in keeping with the overall design. See the content section templates.
  • Each section needs an image with caption, subtitle and text. 
  • Each type of content section has to have one version with image on the left and one with image on the right.
  • When we create content pages we will alternate content image right, then content image left, then common section, then start again.
  • Make sure content sections are responsive and save the template as ‘CONTENT – name of template’

Stage 10 : Example Page

  • Now create an example content page for the client. Page header, content image right content image left, common section and then repeat.
  • Use Lorem and dummy images or we might create a page for real if we have the content ready.
  • This allows the client to see the layout of the content pages

Client Signs Off Example Page

Stage 11 : Non-Content Pages

  • Now create any pages which aren’t pure content pages created from common & content sections. These include:
  • We have templated pages or templated building blocks for these pages. Just as with the homepage sections, use the templates to quickly put something together and then tweak them to suit the particular client’s website style.
  • Stick to the overall theme, use the global colours and fonts, and use the common sections to fill out the pages with other useful information.
  • Make sure everything is fully responsive and looks great on mobiles.

Client Signs Off Non-Content Pages

Stage 12 : Content Pages

  • We now create content pages – long copy pages of around 1000 words that are either:
    • Treatment pages (osteopathy, sports massage, shockwave, etc.)
    • Condition page (back pain, knee pain, headaches, etc.)
  • The process starts with copywriting, and the copywriter will supply 800-1000 words for that particular page and clinic
  • Images also need to be chosen for each block of text, and a caption added. This might be a job for the copywriter or the developer depending on the job allocation.
  • These pages are created by using a page title section, then repeating the following structure:
    • Content section image right
    • Content section image left
    • Common section
  • This goes on until there is no more content, we then put a medical review section at the end, and normally a map above that.
  • If the client has a blog that they use properly, then put a ‘from our blog’ section above the map that pulls in any blog posts with the appropriate tag

Client Signs Off Content Pages

Stage 13 : Policies

  • We need to add a privacy policy, including cookie policy. Some companies may also need a GDPR policy.
  • We have or are creating templates for these policies, which should be adapted for the particular client and placed in the footer menu.

Client Signs Off Policies

Stage 14 : SEO

  • The majority of on-page SEO will already have been done during the rest of the design process:
    • URLs will have been done in the initial stages of design
    • h1-h6 tags, text and captions will have been done by the copywriter for that particular page
    • Internal linking will have been done when entering the information into any given page
  • What we now do at this final stage is:
    • Title tags
    • Meta tags
    • Share (featured) images
    • Image alt tags and titles (by going through the WP media library)
    • Schema

Stage 14 : Testing and Go-live

  • We now do final tests on the site ensuring everything looks right, responsivity, broken links and core web vitals
  • Assuming / once all these are fine, we migrate the site to the live server and repoint the DNS.
  • If the client is using 3rd party hosting there is an additional fee to set up the site on their servers
  • It is possible the site will already be live if the client has asked us to go live with the site as soon as we have an MVP. In this case we will have gone through adding ‘ coming soon’ sections to all unfinished pages earlier on in the project.

This site is password-protected and hidden from Google
By using this site you agree to keep all information contained on it confidential
Please let us know immediately if you think your login has been compromised and we will shut it down and create you a new one