You’ve done it! You’ve finally finished that website you’ve been working on for days/weeks/months and you’re ready to share it with the world. But don’t hit that publish button yet.
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 new website checklist.
Website design 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. That's why we created the design checklist below will help you go back and check for any design mistakes.
To start, be sure to check your:
- Spacing: Is spacing consistent across the site (i.e., did you stick to that 8px grid, or let a rogue 18px in there)? Do all elements have enough breathing room?
- Colors: Have you stuck to a consistent, harmonious color palette? Are all instances of the brand blue actually the brand blue? Did you use global swatches?
- Shadows: If you used drop shadows, is the light source consistent for each and every one? Did you use the same blur, opacity, and spread values?
- Typography: Is your font stack logical and consistent (i.e., is there a reason that element is set in a sans)? Are your heading sizes consistent? Have you used proper (not faux) italics and bolding? Do all text links look right? Is all text both legible and readable?
- Imagery: Do any images look blurry, pixelated, or otherwise funky? Are any images broken or crazily heavy in terms of file size? Do all non-decorative images have alt tags?
- Logo: It’s (usually) just another image, but it’s so important it warrants its own step. Is it the latest version? Is it crisp (not blurry or pixelated)?
Once you’ve made these initial visual checks, you’ll want to ensure that your site’s appearance is consistent and functional on any screen.
Cross-browser appearance
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.
The elements that tend to vary most across browsers, and therefore are most important to check, are:
- Fonts
- Colors/gradients
- Images
- Logo
Cross-device appearance
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. Of course, nothing replaces real-world testing on a variety of devices as small details may differ on the real device.
Image optimization
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).
In Webflow, we automatically scale, compress, and optimize images for every device. Learn more about our responsive images feature or check out our more detailed article on image optimization.
Website functionality testing
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.
Integration testing
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:
- Web forms (check that the forms work and that submitted information goes to the right place)
- Autoresponders
- Marketing emails (MailChimp, Constant Contact, HubSpot, drip campaigns, etc.)
- RSS feeds
- Ecommerce
- CRM
- CMS
Link testing
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:
- Top navigation links
- Footer links
- Social media links (Facebook, Twitter, etc.)
- Logo (typically links to the home page)
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 editing
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.
Search engine optimization (SEO)
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.
1. Use proper semantic structure
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:
- h1–h6 (heading tags)
- p (paragraph tags)
- ul/ol (unordered and ordered Lists)
You can also go above and beyond with some new HTML5 semantic tags:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
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.
2. Meta SEO tags
Aside from on-page structure, you can also help web crawlers understand your site by titling and describing your pages as a whole. We outline a few tips on website SEO on our blog, narrowed down to three main considerations below.
Meta title
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:
- Define the page’s central topic
- Keep it under 70 characters in length (including spaces)
- Use relevant keywords
- Put important keywords in the front of the title
Meta description
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:
- Include keywords that describe the page
- Don’t go over 160 characters
- Write your description for people, not robots. (Google doesn’t use descriptions in web rankings).
3. Open Graph settings
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.
Analytics
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!
There are tons of web hosting options out there — but how do you know what features to look for? See how Webflow Hosting could be the perfect fit.
There can be many reasons for a website to exist
I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.
I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.
That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.
Personality disconnect
Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex.
Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be.
Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.
If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience.
For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation.
Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list.
The ones who will make it to the other side are the ones who dared to be different
Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.
The truth is, brands willing to take risks will always come out on top.
So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”
But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple:
Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.
As you were.
