Website development can often be a lengthy and arduous process, especially if you’re creating it for someone who doesn’t have a clear vision of what they want. That’s why the urge to rush a site launch can be so tempting.
While some developers might think, “If I push it live, we can just work out the last remaining kinks afterwards,” that sort of logic can get you into trouble.
If you’ve done your homework, you know that a scope-of-work (SOW) is key before beginning any new project. Why? Because defining the work and checkpoints ahead of time ensures that all parties involved are aware of what the final deliverable will be and that you, as the developer, have a starting checklist (of sorts) before you even consider a launch.
While you may feel relieved that work on your website is complete, remember that there is one more phase –the testing and QA phase. And while this isn’t a quick or particularly headache-free phase, it’s absolutely necessary.
Quality Assurance: It’s Not Just for You
You cannot afford to ignore the importance of quality assurance (or QA, for short) checks during the development process – before, during, or after. Regardless of whether you have another team member or person in place to manage the QA or not, as a consummate professional, you should have a QA step built into your own process before handing your website over to anyone else (i.e. your boss, a client, or to live website visitors).
Here are just a few reasons why:
- Prevent Surprises: Depending on how your website is built and tested, there may be some glitches, broken links, or compatibility issues you might not be aware of. Taking time to test the website in full will reveal them before the site launches.
- Protect Your Reputation: Think of any website you build as a testament to the quality of work and level of professionalism that others can expect of you. If you push a website live that is not yet ready, it could potentially harm your reputation. Ensuring that your website has passed a full QA inspection will help maintain and even enhance your reputation.
- Save on Rework Expenses: Any developer (designer, writer, strategist, and anyone else involved in the building of a website) can attest to the fact that unnecessary reworks—especially if they’re a rush—can kill your margins. That’s why a solid QA process and checklist provides you with a tangible set of goals that will force you to complete the site build in full before you officially wrap up work and launch the website.
- Future-Proof the Website: One of the great things about developing a website with WordPress is knowing that the CMS enables developers to easily future-proof their work. Plugin, theme, and version update reminders help ensure that users keep their websites in tip-top shape, not just for the website owner but for the end user’s experience.
Think of your website like a child on her first day of school. You wouldn’t want your kid going to meet her teachers, classmates, and future friends with her clothes on backwards, an empty backpack on her shoulders, or an unpleasant demeanor. You’d want your child to give off the best first impression and be prepared for any and everything. That’s exactly how you should treat your website and that’s why the QA stage is so important.
Preparing for Your Website’s QA
There is a lot that goes into the QA of a website. That’s why it’s important to have a rigorous and detailed plan so you can produce consistent and high-quality websites every single time.
Step #1: Save Your Work
The first thing you need to do is back up your site. You should do this before you conduct the QA as well as before you launch the website. While you might not need it, it’s always best to have a copy of the latest version of your site just in case something should happen to it that cannot easily be reversed.
It’ll also be important to have an automated backup system in place so that the website owner and admin won’t have to worry about doing this manually in the future. My recommendation is Snapshot Pro, which can backup and restore your site at any time and also allows you to schedule automated backups.
Step #2: Set up a Staging Environment
If you’re not familiar with this term, all it basically means is that a duplicate of your website’s production environment exists that will allow you to conduct your testing in a safe location. Because it is identical to the website you’ve built and exists on the same hosting platform (ideally), you can test your website pre-launch exactly as it will appear and function post-launch.
If you’re unsure of how to set this up, check with your hosting provider as they should have included a staging environment in your hosting purchase. If not, you can always use a plugin like Cloner to set up your testing platform.
Step #3: Dot Your i’s and Cross Your t’s.
No matter how diligent you may be in reviewing your work, consistency in QA (or any process) cannot be guaranteed unless you have a formalized list of steps to follow or items to check off. That is why a checklist is so important to the QA process – and even throughout the rest of the process of developing a website. There are too many little reminders, tools, and nooks and crannies to remember to look into, so a checklist is going to be really helpful in reducing the headaches potentially caused by doing the QA on your own.
Luckily for you, we’ve got a great checklist right here to get you started.
WPMU DEV Hub – Your ultimate WordPress control panel
No more wasted hours performing regular maintenance on your client sites. One Hub. One overview. Update plugins and themes, and activate and deactivate all WPMU DEV services. Nice!.
The Ultimate WordPress Website Pre-Launch Checklist
Here are the 24 things you need to test before your WordPress website goes live.
Test #1: Check the SOW
You understand how much work goes into developing a website, so don’t leave anything up to chance. If the owner of the website was expecting certain functionalities, a certain number of pages, or anything else outside the standard scope of a website build, that needs to be identified upfront in the SOW.
Once your website has been built, the absolute first thing you must do is go through the SOW piece-by-piece and verify that everything on that list has been included.
Test #2: Complete Remaining Open Tasks or Change Requests
While you worked on developing your website, there were sure to be open tasks, notes, or change requests that popped up along the way. It’s easy to miss some of those if you’ve got your head down as you plug along in your work. So before you get too far into the QA of the website, make sure you’ve reviewed your open item queue and verify that everything has been completed. You don’t want to have to re-do any of the tests below if you don’t have to.
Test #3: Review Every Single Page
Before you get too far into the QA process, give yourself a break. Go for a walk, watch some videos on YouTube, hit the gym—whatever will help you take your mind off of the website you’ve been working on for days/weeks/months–go do it. Then come back to the staging environment and sit down before it as a visitor; not as a developer.
You’re going to need to do a full sweep of every single page of the website. Every piece of it will need to be checked for visual appearance, readability, and functionality:
- Navigation bar
- Header/footer strips
- Contact info
- Social media
- And more
This may be one of the more tedious of the tests you’ll need to do, but it’s absolutely essential. You don’t want anyone’s experience to be disrupted by something as silly as a broken link if you can prevent it.
Test #4: Read Through the Content
Website content may arguably be the most important piece of the website. If one of the site’s visitors happens to stumble across a random typo or dummy text accidentally left in, that could turn into another negative UX and potentially lost conversion over something that might otherwise seem trivial. So you’ll literally need to make sure that you’ve dotted all your i’s and crossed your t’s.
There are two steps you’ll need for this test:
- Check each Page in WordPress and make sure there are no misspellings or grammar issues caught by the spellcheck tool. (JetPack has this feature, if you don’t already have it.)
- Visit the website on the staging environment and read through all of the copy on each page. (You may have already completed this in test #3.) This step will make sure that the text that exists outside of each page’s text editor—in the sidebars, widgets, testimonial sliders, forms, and more—is correct and no longer contains any placeholder text (if any).
Test #5: Purchase Photos
Before you moved into the website development phase, you probably reviewed the site’s designs and images with the website owner. Much like the purpose of this testing phase, getting a client’s sign-off on all the moving pieces of the site before development will help you save time in revisions later on. So if you received the go-ahead on all the site’s imagery, verify that all images have been purchased and/or that you have the proper rights to use them on your website.
Test #7: Verify the Favicon Works
The favicon—the little bug that sits up next to your site’s name in the browser tab—is an important piece of any website’s identity. Many theme providers will include the Favicon selection, sizing, and implementation inside of their theme settings. However, if that doesn’t happen to be the case and you find that your website is missing one, you can use a plugin like this one to make sure it’s there and it works on all browser types.
Test #8: Set Up a Privacy Statement
Test #9: Prepare for 404s
If you’ve reached this point, you’ve already reviewed every link on your website to make sure it’s in working order. But what happens if a visitor types in a page name incorrectly or somehow otherwise gets redirected to a “Page Not Found” error message? Have you accounted for this possibility and what the visitor will see as a result? Make sure you’ve taken the following steps to improve the UX if/when this does happen:
- Create a custom 404 page message and page design. The 404page plugin will help you do that.
- Set up a plugin—like the 404 to 301 plugin—that will log all 404 errors and enable you to redirect any error to another working page on the website.
Test #10: Test Social Media Sync-Ups in Real Time
Social media is a huge part of everyone’s online identity these days, personally and professionally. That’s why there should be a continual loop between one’s social media identities and one’s website. This could be in the form of live feeds, links, or even automatic blog post promotions.
While you may have already tested to make sure the social media links work properly and go to the correct pages, you may not have checked for the other functionalities. The process of testing for this will need to be manual. If social media is set to promote new blog posts, you’ll need to publish a test post on the site to see if the message goes up. If there are any social feeds, you’ll also need to see if new tweets or messages show up as they publish to social media.
Test #11: Ensure the Website Is Ready to Be Found With SEO
If you want your website to get found, you need to make sure it’s optimized—and that means pages, images, and content—for search and sharing. WordPress does have a default SEO tool, but it’s not quite as “smart” or comprehensive as many WordPress users would like it to be.
In order to get your website found, it needs to correctly speak to the search engines, so make sure you’ve got everything set up the right way. A plugin like SmartCrawl will help take the guesswork out of your website’s SEO and ensure you’ve got page titles, meta descriptions, focus keywords, and alt tags applied to every single page and image that you want found. (As a bonus, it’ll also create a site map for you and send updates to search engines when it changes.)
In order to get your website noticed on social and help users find relevant content, each page and blog post will need a featured image, keywords, and categories assigned to it for an improved UX. You’ll need to check each of these within WordPress to ensure you’ve covered all your bases.
Test #12: Check Your Robots.txt File
Having an HTML site map (as mentioned above) isn’t enough for the search engines to find your website. Make sure you have a robots.txt file in place so the search engines will know how to crawl your website (i.e. which pages to rank and which ones to ignore). If you have any questions on this, Google has put together a pretty comprehensive guide here.
Test #13: Confirm All Site Processes Work Properly
If you have a form or purchasing portal on your website, then you have a certain process you expect visitors to follow in order to sign up for something, make a purchase, or get additional info. Since these are the conversion pathways on your site, you’re going to have to do a test run of every single one of these to make sure there are no glitches or confusion points along the way. You’ll also need to make sure that success page redirects are in place and look as you want them to.
Here is what you should check for:
- If you’re promising a download, does a file actually download when clicked?
- If there is a sign-up or contact form and the form is linked to a CRM, does the information import into the system?
- If there is a shopping cart, does the ordering process collect all the proper customer and payment info and does it launch the purchasing process on your end?
- If a payment is required, can you confirm that the payment was processed correctly? If you use PayPal, they have a Sandbox testing tool that will help you verify this.
- Do all of the form’s required fields work?
- Do you, as a website owner or admin, receive an email notification after each transaction is completed?
- Do any and all buttons/links in these processes work?
- Once the action has been completed, are visitors directed to a custom Thank You page?
The collection of and ability to process website conversions are an essential part of any online business, so this is a crucial test for every developer to have in their arsenal. If you’re unsure of how to equip your website with any of these, there are a number of plugins that can help with setting up your conversion checkpoints correctly.
Test #14: Confirm Customization Functionality
When you were developing your website, you probably used a number of plugins and made customizations of your own in order to get the website to look and work the way you wanted it to. Once you’ve reached the testing phase, you’ll have to verify that all that work was done properly (or double-check if you previously tested it).
Special plugins or features that have a direct effect on the UX can be tested as you make your way through the site during test #3—features like a site search or infinite content loading (like our own blog currently has). However, for anything that has more of a focus on the backend—like measuring site analytics, adding layers of security, etc.—you’ll need to make sure those are all set up in full and working properly, too.
Test #15: Check for Mobile-Friendliness
Did you know that over half of all search traffic comes from mobile devices? Unsurprisingly, this means that search engines heavily weigh a website’s mobile-friendliness in their algorithms. Regardless of how many visitors you expect to find your website via mobile device, you’re going to need to account for their ease in UX just as you would for desktop users.
Google makes this easy with their Mobile-Friendly Test Tool, so plan on running the test and accounting for any errors that are thrown before you launch.
Test #16: Review Cross-Browser Compatibility
On a related note, cross-browser compatibility is another must in your website development and QA processes. Cross-browser compatibility checks will account for all browser types across all devices (including mobile).
As a web developer, perhaps you already have the most popular browsers installed on your computer for this purpose. However, it’s more likely that you don’t and that you need a way to confirm that your website will function properly across all of them. There are tools online available to help test your website’s responsive nature and cross-browser compatibility.
Test #17: Review Accessibility
It can often be difficult for visually or physically impaired visitors to navigate and interact with websites. In order to have a universally accepted website, you should test it to see if it can be accessed regardless of disability type. WordPress has prepared some notes on that here. In order to properly test your website for accessibility, start by finding a free screen reader testing tool like NVDA to help you identify problem areas and go from there.
Test #18: Test Your Coding’s W3C Compliance
Code quality is important for overall site health and there are certain standards in place (namely, the World Wide Web Consortium, or W3C) that dictate which requirements need to be met in order for a website to be compliant. For a quick test of your coding quality, you can use W3C’s HTML checker to see if your site is up to snuff.
Test #19: Upgrade WordPress and Verify Plugin Compatibility
Before launch, check that you’re using the latest WordPress installation. The same will need to be true of any plugins or themes you use with the website. This is important not only for security reasons, but also to ensure that all tools remain compatible with WordPress.
There are two ways you can automate these updates. You can either do so via the wp.config.php file or you can find a plugin (like this one) that will do it for you. That way, if you’re handing your website off to a client, you can at least do your part upfront to keep everything up-to-date and secure.
Test #20: Confirm Your SSL
If your website has an SSL certificate (and your website should have one, especially if you have an eCommerce site), test it before the site goes live. Free online SSL checkers will let you know if there is anything wrong or missing with your certificate. Check out our post Adding Free SSL Certificate and HTTPS to WordPress with Let’s Encrypt and Certbot.
Test #21: Double-Check Your Website’s Security
While your hosting provider will help you maintain certain levels of security for your website, hackers are becoming more and more savvy in getting around any firewalls that may have been set up. That’s why it’s important to have your own security standards in place, especially as they pertain to making e-commerce sites PCI compliant.
Test #22: Test Your Speed
Site load time is an important factor in the user experience—and, not only that, it’s also an important deciding factor in whether they stay on your website or not. A three-second wait time is often too long for many people, so you’ll need a way to test your site’s speed pre- and post-launch. Google’s PageSpeed Insights will review and provide you with insights and recommendations regarding your website’s load time.
Test #23: Stress-Test Your Website
Many developers don’t consider this, especially when starting with a brand new website, but it’s important to know how much traffic your website can handle. What if suddenly a huge spike of traffic hits your site? Is it okay to let the site crash (even temporarily) and lose those potential sales if it’s just a one-time occurrence? No, of course it’s not.
That’s why you need to test your website’s limits upfront. Check that your PHP memory limit and max_file_size match the size of your website. And use something like the Multi-DB plugin to optimize your website when you have a lot of plugins or files across multiple networks and sites. Then you can follow these steps and conduct the stress-test on your website to make sure it can withstand an overload of data or traffic.
Test #24: Revamp Logins
This may seem insignificant on the surface, but you’ll want to: 1) update all usernames and passwords that have access to your website to stronger formats, and 2) test them before handing them off to anyone else. Once the website goes live, you’ll then be ready to hand off workable and safe login credentials to users.
The QA and testing process is going to be fairly lengthy, so make sure you have enough time allotted in post-development to conduct the tests, fix any potential issues, and re-review before the site is due to the website owner or admin for their review. And if you can’t handle it on your own or you’re not comfortable reviewing your own work (since you’ve spent more than enough time looking at it already), bring on additional team members to assist with the testing phases.
I have just a few more things for you to take note of:
- Your reputation isn’t just going to be judged by people who visit the website once it’s live – it’s going to be judged by the people who work with you and see the quality of the product you deliver. If they are the ones spotting errors and having to tell you how to do your job, your reputation as a trustworthy expert and professional may seriously diminish.
- Always, always, always make sure you have the client, your boss, or whoever the website owner and admin will be review the website before launch. You’ll want their signed approval to safeguard against any backtracking or additional (and unpaid) work requests once the site has gone live.
- Remember that pre-launch checks are only half the battle. You’ll also need to do another round of QA post-launch to ensure everything carried over properly to the live site. You’ll also need to take this time to set up any necessary tracking or advertising tools.