Shipping Your Website: The Final Checklist

The beauty of working on websites is that they are never “done”.  Unlike print, a website is something that you make continuous quality improvements throughout the life of the website. 

Even so, before you announce the completion of your website, there are some steps you should take:

• Examine every page of your website for its appearance on mobile and tweak as necessary.
• Check all website links to make sure they work
• If it is an e-commerce website, make a test order. 
• Check with your client on the accuracy of the copyright text in the footer.
• Add your client as Admins or Editors and train them on how to use the website
• Check Website Performance and Image Sizes
• Publish your website to its final location
• Install Google Analytics to track website traffic. 

We’ll cover each of these in detail.

1. Tweaking Your Website for Mobile

Check all pages on the website for mobile. Look for any unnecessary images that can be removed for mobile. When you find problems (and you will), there are three primary options:

Option 1: Add media queries as necessary for a great mobile experience. You can add media queries to in Customize -> Additional CSS.  

Option 2: If you are using a page builder, like Beaver Builder, you can create two rows, one for mobile and one for desktop. You can turn the rows on an off in the Advanced tab for the row for Beaver Builder. The screenshot below shows you how to do it in Beaver Builder, but any page builder will have a similar option

Option 3: Most page builders give you the option to customize CSS for each module. Look for the little computer screen. You can toggle that to look for tablet and smartphone sizes. The screenshot below is for Beaver Builder, but all page builders will have something similar to toggle among screen sizes.

2. Checking All Links

Click all of the links on all pages to make sure they go to the expected page. Double check external links to make sure that they open in a new window. 

If you are working on a staging website, it can be good to use relative links instead of the default internal links. Set up the links with the / in front of them, like this:

<a href="/products/acme-widget">The Acme Widget</a>

When you add the / in front of the link, it automatically inserts the domain name only in front of it. That way if you move the website to a new domain, the links will work. 

WordPress by default uses absolute links instead of relative links. 

Updating Links when Moving a Website

If you move your website to a new location, you may find that images are missing or links aren’t working. For example, if you create the website locally or on in a staging location, when you move it to your final location you may need to repair all of the links. 

The good news is that if you set up a staging website on premium hosting, the website host handles all of this for you. 

More good news: If you run into this problem, all you do is install a plugin to repair it for you. Just search for a plugin with the search terms “updating urls”.

3. Run Test Orders on E-commerce sites

If you are running an e-commerce website, testing the ordering process and user experience is critical. If you are working for a larger e-commerce website, you will need to do more testing than what is described below. My clients are small businesses, so this it the process that I use.

1. Create a product named “Test” for $1.00

2. Purchase that product with your credit card. As you do so:

• Check the cart and checkout pages. 
• If you have added checkout fields, make sure they go through to the order so that the store manager can see them. 

3. Check the email message that go out with the order. If you want to make changes or customizations, go to WooCommerce -> Settings -> Emails. 

4. Make sure you client receives payments with a test order. Your client should sign into their payment processor, eg. Stripe or Square, and make sure they see the payment. 

I generally save the Test product as a “private” product, so that it doesn’t display in any product listings. If the client hasn’t received orders for a few days and is anxious about whether the website is working, I make a $1 test order to test the website and give some peace of mind to my client.

4. Copyright and Footer

Ask your client to check your copyright and footer text for accuracy. Keep in mind that the domain name or store name may not be the same as the company’s legal name. If that is the case, you want to make that clear in the footer. 

For example, here is my footer on White Buffalo Websites:

White Buffalo Websites is a product of White Buffalo LLC and is based in Hopkins, Minnesota.

© 2021 White Buffalo LLC. All rights reserved.

 As you can see, the LLC name, White Buffalo LLC, is not the same of the website name, White Buffalo Websites. 

5. Create User Accounts and Train

Create a user account for your client. You may want to make them an Editor instead of an Admin, in order to prevent them from damaging the website. 

Train your client on how to edit the website. To make this easier, I sometimes make all of the pages in Beaver Builder, so that the client can edit all of the pages the same way. After all, the point of using WordPress is so that your client can make wording changes to the website, so you don’t have to. You want to focus your talents on Web Design and Web Development. 

6. Website Performance

Before you launch your websites, make sure right size images have been selected. Using full-size images throughout your website instead of the smallest size necessary will slow down your website. 

In addition, you could run the Google Performance Check on your website. If speed is important to your client, it may be good to consider the hosting quality or add a tool like WP Rocket to the website.

Go to the Inspector, and click on Lighthouse to find the speed tools. Don’t be surprised is the website is slow on mobile. (Most are.)

The Lighthouse screen looks like this:

7. Publishing Challenges

How you publish your client’s website depends on the situation. Here are some scenarios I have run into:

Scenario 1. The client has never had a website. You will create the first website directly on the website domain. 

• This is the easiest scenario. Simply set up a website at the domain. Use a plugin to say, “Coming Soon”.

Scenario 2. The client has a non-WordPress website so the content must be moved. 

• Since the client has a live website, you need to leave the old website up while the new one is created. With this scenario, you probably want to move the website to WordPress optimized hosting. Build the website on the new hosting, and change the DNS when it is completed. 

Scenario 3. The client has a WordPress website, but never makes changes to it. 

• In this scenario, you create a staging website and when you complete work on it, then publish the staging website. 

Scenario 4. The client has a WordPress website, and regularly makes changes to it or has sales on it. 

• In this scenario, make the changes on a staging website. Once all of the changes are made, then install the changes on the live WordPress website. 

Staging Websites

High quality hosting plans allow you to create a duplicate of the current website that you can use for the staging website. You will do the work on the staging website, and publish it at the end. When you publish the staging website, you entirely replace the old website. 

If the hosting plan doesn’t allow for staging websites, find new hosting. The alternative is to build the website on other hosting, and then move it. It is possible to move WordPress websites, but you need to move the files, the database, and then reconnect them in the wp-config.txt file

Unfortunately, in the real world, it is rarely an option to simply publish the staging website, because the old website may have been updated in the meantime. 

Dual Maintenance

When you make a staging copy of the website, the copy is for that Point In Time. If the client continues to make changes to the old website while you are designing on the staging website, those changes won’t be on your version of the website. 

One option is to make any changes on both websites, the live and the staging website. 

If you are working on an e-commerce website, then dual maintenance isn’t an option, because each order changes the old website. 

Reinstalling Changes

If dual maintenance isn’t an option for the website, then you may need to “Install” all of your changes to the live website. This involves moving your theme, plugins, CSS, and any new posts or pages to the new website. 

Important: Make a website backup before starting. That way, if your work doesn’t go well, you can restore to a backup. Make sure your hosting has One-Touch-Restore. 

There are plugins that make it easy to move settings, CSS, posts and pages. 

I schedule this work for late evening, so that there is less traffic on the website.

It may take a few hours to move all of the pieces.  It can be a little spooky as you deconstruct the old website and add all of the pieces to the new website. But it is also a lot of fun to see the new website come to life. 

8. Install Google Analytics

The best way to monitor website traffic is to set up Google Analytics on your website. There are alternatives, but the best practice is to use Google Analytics.

Right after you go live, the first thing you do is install Google Analytics on the website. Do it the same day so you don’t lose any tracking on the website. It’s a two-step process:

Step 1. Create the account at analytics.google.com

Step 2. Install the tracker on your website. You will need to set up a free account at Google. 

There are several steps involved:

https://support.google.com/analytics/answer/10269537?hl=en

Here two ways to install Google Analytics on WordPress:

Option 1: Install a plugin and link it to Google Analytics

I’ve been using the free Monster Insights lately: https://wordpress.org/plugins/google-analytics-for-wordpress/

The key benefit is that you and your client can see analytics right in the WordPress dashboard without logging in the analytics.google.com. However, the plugin can be a little annoying in asking you to upgrade to the paid version. 

Option 2: Install the tracking code into the website <head>. For some themes, there is a field to do that in Customize. The free version of Astra doesn’t have that option. All you do is install a plugin that give you a field to add code to the <head>, like this one.

https://wordpress.org/plugins/head-footer-code/

I strongly prefer Option 1, because I like to see the traffic right in the dashboard.

Soft Launch

One more thing: In some cases, you may want to do a “soft launch” of the new website. Before you announce the new website to the world, announce it to a smaller group for review. For example, you may want to share the new website with employees, but not with customers. Or with management, but not with all employees. 

Including a soft launch is a way to find any bugs or errors before you do an announcement to a larger audience. It also can lead to a lot of requests for changes that may or may not be critical. (You can put those requests on a list for potential ongoing work. $$)

When you announce to the smaller group, you can specifically ask them to let you know of any problems. 

---

Interested in learning more about WordPress? Check out our WordPress education.