Building and launching the website
This is the fourth and final part of my 4-part series taking your behind the scenes of my web design process. To checkout the first instalment where I take you through my branding process click here, the second instalment where I show you how I sketch out the website layout click here and the third instalment where I walk you through the visual design process click here.
After finalizing the visual design with my client I get stuck in to building their website on the website builder of our choosing, which is what we’ll cover in this blog.
Preparing the images
This isn’t the sexiest part of designing a website, but preparing the images for the web makes a huge difference to your SEO and overall workflow.
I’ll save all of the images we’ll be using on the site in the correct size and file type, and then compress the images to make sure they don’t weigh down the site’s loading speed.
Next, I’ll take a moment to rename all of the files with descriptive titles which is great for SEO.
It’s not hugely time-consuming to prepare the images properly and I always thank myself down the line if I’ve invested the time upfront to get everything set up properly before I start building the site.
Want to learn more about optimizing your website for search engines? Check out my SEO Quickstart course perfect for non-techy business owners who want to nail the foundations of their website without having to get a PhD in computer science in the process.
Picking the right platform
I use, adore and highly recommend Squarespace* because I truly think it is the best website builder for small service-based businesses and solopreneurs who need something easy-to-use and effective for their marketing efforts.
So for Jessica Knight’s project, I obviously picked Squarespace to build the site. Now besides my personal preference for that platform I also chose Squarespace for a few reasons:
It is super easy for clients to update
It looks great out of the box
And it allows lots of space to expand the business using Squarespace’s member’s area, online scheduling using their scheduling software and even adding an e-commerce shop to sell physical and digital products.
Setting up the style guide
The first thing I tackle when setting up a website is creating a style guide that shows all of the text styles, button stlyes, colors and patterns I’ll be using throughout the site. This is a huge time saver and is a big help if anything needs to change down the line.
Building the homepage
Once the style guide is set up, I get stuck in to creating the homepage. I like to work down the page, so I’ll usually start with creating the navigation bar (though I come back to link this up with all of the corresponding pages later), then work my way down from there.
An interesting challenge for this design is the custom header image and footer image which have a cloud-like edge to them. Some tricky layering in Squarespace and everything shows up as it should! I could even add in some fun parallax effects in this page, but I chose to preserve the clean, easy-to-read style rather than add too much movement.
Building the other larger pages
With the homepage looking good I’ll to move on to the other larger pages, such as any services or about me pages, next.
Since Jessica has a few distinct offerings,I’ve created a separate page for her workbooks and her 1:1 consultations. She also has a 2 week intensive offer, but since it is part of her 1:1 consultations we decided to include it in the same page.
Jessica also has a blog which she posts helpful articles to on a regular basis. In Squarespace, it’s super easy to add a blog and when she’s ready to add a new post, she can access the editor and easily add in her blog text and images. Pretty slick if I do say so myself!
She also has an e-commerce element to her site since clients can purchase her workbooks or consultations through the website. I set all of this up in Squarespace with payments through Stripe. Jessica can fully manage her orders through Squarespace which makes it super easy to run this side of her business.
Lastly, I build out her About page which is a fairly simple page with text and images and links back to her offers.
Mobile design review
After designing the whole site on the desktop view, I take some time to review the site for mobile. Since Squarespace allows me a lot of freedom across different screen sizes, I like to make sure that the site looks good on tables and extra-large screens as well.
SEO
I tackle SEO mostly as I go throughout the development process, though if I’m doing SEO research as well I’ll do that during the copywriting process. When uploading the images to Squarespace I add in their Alt Tags and I write up the Meta Titles and Meta Descriptions of each page as I go. During the client training, I encourage clients to edit these to suit their needs, but I like to make sure there is something filled in for every page.
I’ll also add an Open Graph image for each page so an image will be displayed when sharing a link on social media. This is an easy step for clients to forget, so I often just pull an image of their homepage to make sure there is something polished to show off.
Integrations
As I wrap up the development phase in Squarespace, I like to add in any 3rd party integrations so I can tweak any design elements to make sure it all works together. Common integrations are things like email marketing systems, GDPR solutions and social media pixels.
For Jessica Knight’s site, we didn’t need any 3rd party integration as she decided to stick with all of Squarespace’s native systems so this was super simple to set up and maintain.
Quality Assurance and testing integrations
When the whole site is done, I run through some Quality Assurance tests to make sure the site displays properly on the major browsers and across devices. I’ll also do a full systems test to make sure all of the integrations are working and any forms and e-commerce submissions are functioning correctly.
Training and launch call
Once everything is all built out and working correctly, I schedule a call to review the site with my client and train them to make updates, add blog posts and manage their e-commerce systems. I like to record this training if my clients aren’t too shy so they can keep it as a reference in case they forget how to do something down the line.
After they feel 100% confident about using their new site, we’ll set it live together! I’ve often done some preliminary work to transfer their domain before this but I always save hitting the “publish” button for our call together since it’s such a big moment!
Then we’re done! Time to pop the bubbly and celebrate!!
