Even though nothing would make you happier than to get your site out there, you owe it to yourself (and your site) to check (and maybe double check) this 4-part pre-launch checklist.
It’s all too easy to miss (or break) something during the many back-and-forths, client feedback sessions, and other design iterations you go through. So going back to check for any design mistakes is vital.
This first checklist is completely visual—focused on whether the site looks good. We’ll go into functionality testing in the next step.
Different browsers may render your website in different ways, so it’s important to test your site in different browsers. Take a look at W3’s browser stats to see where you should focus your testing. (Though if you’re working on a redesign, browser-usage stats will be more useful.)
During this process (and the next, in multi-device testing) you’ll want to make sure your layouts, typography, navigation, and other design elements are displaying properly.
I always check:
There have never been more web-capable devices around, and with that comes a staggering array of screen sizes. Done right, your site should perform well on any screen size, but be sure to double check. (You are a perfectionist after all, right?)
This is also where mobile navigation is crucial. Be sure to test out the user’s ability to navigate around the website on a touchscreen device, and make sure nothing gets lost in device transition.
In Webflow, we make it easy for you to test the most popular devices and preview your website on almost any size, streamlining the process of cross-device testing all in one place.
Images and graphics are an important element of many websites, so you’ll want to make sure they display properly, especially on all those ultra-high-definition devices (like Apple’s Retina screens) out there.
The rule of thumb is to upload your image at twice the size it’ll display on your site. In some cases, you can upload two images: an actual-size version for lower-res devices, and another that’s twice the size for high-res devices.
Why? Because the heavier the image, the slower your page will load, and the worse your user experience will be (which also negatively affects SEO, which we’ll cover later on).
Design and functionality go hand in hand, but I like to isolate the two to make sure the website both looks the way it was designed to and that it performs as intended.
This one is super important, and can range from a quick task to a giant one, depending on how many integrations you have. Typically, I’ll create a list of integrations as I add them so I don’t forget later on.
Some common integrations to test might be:
This one can be a doozy, simply because most sites have dozens (if not hundreds) of links. More often than not, there’s a link or two that goes nowhere, and it’s important to find them before your end-users do.
Some of the most important links to check are:
Rather than doing all this manually, I’d suggest trying a link crawler like the W3C Link Checker, the Chrome plugin Check My Links, or Screaming Frog (which is excellent for SEO audits, too).
Content is king, and the testing process should be fit for one. Typically this involves making sure that all content has been updated and approved. I can’t tell you how many websites I’ve found that still have a ‘Lorem Ipsum’ paragraph somewhere.
Now, if you practice content-first design, you should have final content already in place, so you can focus on more fine-toothed-comb review, like proofing for spelling and grammatical errors.
It’s also important to note here that it’s okay for content to be changed later on. Clients, team members, or you can always adjust text through a CMS. The main goal here is to ensure that your website content isn’t complete gibberish.
Analyzing and optimizing your website after publishing is a never-ending process. And you need to consider semantic site structure from the get-go. But that doesn’t mean you won't benefit from an SEO review before you hit publish.
There are multiple things that can be done to optimize your website for search engines.
Web crawlers (like Google’s bots) read through your website to get an understanding of your content, so that search engines know to display your website when people search for it. To help them crawl your site, you need to use language they’ll understand.
Historically, this has meant using the following semantic tags:
You can also go above and beyond with some new HTML5 semantic tags:
These tags are important because they let you identify the content that’s most relevant to users. In short: making it easy for search engines makes it easier for users to find you.
Aside from on-page structure, you can also help web crawlers understand your site by titling and describing your pages as a whole.
Your page’s meta title translates to the linked text people will see on search engine result pages (SERPs). It also displays on the browser tab when people click through to your page. Some best practices include:
The meta description is a short sentence (or two) that describes what your website has to offer. It will (sometimes) show up below your meta title in search results.
Some best practices include:
Social media has become a key element of SEO, so it’s crucial that you amplify this process by providing effective Open Graph information. Open Graph settings include three pieces of content: title, description, and an image.
The title and description follow the same rules as their SEO counterparts, but instead of showing up in search results, they appear as the default title and description on social media platforms when shared.
This is hugely beneficial because it lets you determine what the messaging (and image) will be when others share your website, helping you keep control of your brand.
Website analytics are another crucial piece to set up before you launch. It’s free to set up a Google Analytics account, and incredibly easy to integrate Google Analytics with Webflow.
Once set up, you’ll be able to track visitors and user engagement on your website almost instantly!
Oops! Something went wrong while submitting the form
It’s a web design tool, CMS, and hosting platform in one.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Oops! Something went wrong while submitting the form
