Does your website check these 27 boxes? This website design checklist will ensure your site has everything in place to be successful whether you are launching a new website or checking your existing small business website.

Website Design Checklist

When creating a website for your small business, it can be difficult to remember everything you need to do to build, design, optimize, launch and maintain your website. Starting with the basics and covering everything from security to SEO to accessibility, then looking at web design, this website design checklist can help ensure your website has all the necessary features to be successful.

Website Checklist

Before we start on checking web design, it’s important to ensure that your website has the most important basic features in place.

1. Security

  • You have a top-notch security plugin installed.
  • Your email and password that is used to access your website is different from other emails and passwords.
  • Your website is hosted separately from your emails and domain name registration.

2. Responsiveness

  • You’ve checked how your website looks on all device sizes. This can be done using Google Chrome’s Development Tools.
  • You’ve looked at your website from as many actual devices as possible (you’ve even borrowed your neighbours Android and your Grandma’s PC and whatever other device you can get your hands on).
  • You’ve looked at your website through different browsers (Chrome, Safari, etc.) and in incognito mode.
Responsive web design

3. Speed and Performance

4. Google Analytics

(There are other tracking systems as well if you don’t want to use Google Analytics)

  • You are set up with a Google Analytics account
  • You have Google Analytics installed on your website
  • You have a Privacy Policy and Cookie Notice and updated them to let visitors know what information they are tracking.

Want more Web Design TIPS?

Get Free Web Design Articles Delivered To Your Inbox

No spam ever. Unsubscribe at any time. 

5. Data Studio Report

  • You’ve set up a Data Studio Report capturing the information from Google Analytics
  • You’ve set Data Studio to email you the report on an ongoing basis (you can choose daily, weekly, monthly, etc.)
Website Analytics

6. Email

  • You have integrated email with your website and have tested to make sure emails can be sent through your website.
  • You’ve set up your contact forms so that responses are sent to the appropriate email addresses.
  • If you are asking visitors to subscribe, you have an automation set up.

7. Staging

  • You’ve set up a staging site where you can pull your live content to your staging site, make edits and updates, test them out and push them back to your live site.
Jo to the Web Solutions Ad - Helping You Build Your Dream Website - jototheweb.com - Two People Looking at Computer

8. Back-Ups

  • You’ve set up regular, automatic back-ups of your website that are saved outside of your hosting company and outside of your computer (i.e. on Google Drive). If your site is built on WordPress, I highly recommend Updraft.
  • You are able to take manual back-ups as well before making any changes to your website, especially plugin and platform updates.

9. Updates

  • On your staging site first and only after a full back-up has been taken, you can now safely make updates and once everything is tested, push them to your live site.

Search Engine Optimization Checklist

There’s no point in a beautiful website if no one can find it. While Search Engine Optimization (SEO) is a massive topic, here are some essential items to check off your list.

Search Engine Optimization

10. Sitemap Submission

  • You are set up with Google Search Console.
  • Your sitemap has been submitted.
  • You’ve checked to make sure your site is indexed.

11. Links

  • You’ve set up your permalink structure.
  • Your links are SEO friendly.
  • You’ve checked to make sure there are no broken links. Don’t forget about all social media icons!

12. HTTPS

  • You’ve installed an SSL certificate (your site’s address begins with https:// not http://).
  • You’ve set up a redirect for any visitors going to http://yourdomain.com.
  • You’ve also set up redirects for including or not including the “www” before your domain.
https image with cursor arrow and browser world

13. SEO Meta Titles and Descriptions

  • You’ve set up meta titles for each page (the title that appears on the browser tab).
  • You’ve set up meta descriptions for each page (the snippet of information that may appear in search results).
  • You’ve set up featured images and social share images (optional).

14. Headings

  • Each page has one H1 title.
  • You’ve used headings (H2, H3, H4 etc) strategically to best organize each page’s content and to help search engines understand your website.

15. Image Optimization

  • Images are named appropriately (using keywords not IMG_002.jpeg).
  • Images are compressed and re-sized to fit in the space they take up on the webpage.
  • Images are served in next generation formats (such as WebP).

Accessibility Checklist

And lastly before getting into the web design part of this checklist, you need to make sure your website is accessible for every visitor. Improving accessibility will ensure that anyone using a screen reader or for example, someone who is colourblind can still access all of your content. This is a massive topic and more information about accessibility can be found on w3.org.

16. Accessibility

  • All images and tables have alternative text (also called alt text) describing what the image and table is depicting.
  • Colours pass the minimum contrast ratio test. You can test your colours with this free contrast ratio test.
  • Your font sizes are large enough to be read clearly, especially on mobile.
  • Your website can be browsed by a keyboard, not a mouse or touch pad.
  • Your content is available without a stylesheet.
  • Images and videos do not have content that could cause seizures.

Website Design Checklist

With all the basic set up checked off, we can now focus on web design.

Web Design

17. First Impression

Websites only have 0.05 seconds to make a good first impression. From the moment the page loads, the visitor should be able to immediately see what exactly your site is offering. You want your visitor to say “oh good, this is exactly what I was looking for.”

  • Your page loads quickly and there isn’t a large shift in content as the content loads.
  • The visitor can immediately see what your website is offering, even if they land on a page that is not your home page.
  • There are no immediate full-screen popups. “I love when pop-ups appear just as I enter a website” said no one ever. Exceptions to this rule are cookie notices, age limits and smaller popups that don’t cover the main content.

18. Who, What, Why and How (& sometimes Where)

If I know nothing about your business and I land on any page of your website will I know who you are, what you do/offer and why I should buy it? You don’t want make the mistake of only putting information about you on your about page or about your services on your services page.

The “why” is the most important. What makes your offerings better than the hundreds of other companies offering something similar. Why should I contact you/buy from you/request a quote? Your website is not really about you, it’s about the visitor and how you can help them.

  • Every page should clearly and immediately demonstrate who you are, what you do/offer and why it should matter to the visitor (your potential customer).
  • Your web design helps convey the benefit to the visitor of why they should contact/buy/etc. from your company.
  • If you have a physical location, make it very clear how a visitor can find your business.

19. Visualization

A proven sales and advertising technique is to demonstrate a person using a product or benefiting from a service. For example, if you see an image of a pen on it’s own, it might be a great pen but if you see a person using that pen looking incredibly happy and you can see the benefit to that person, you can start to visualize yourself using that pen and may be more inclined to purchase it.

As humans, we like to relate to other humans and are more likely to be influenced by visualization than seeing a product only on its own. With that being said, it’s smart to have both – product photos and lifestyle photos. On that note, it really is true that a picture tells a 1,000 words so your images should be clear, bright, focused and professional.

  • Your web design helps visitors visualize themselves using your product or purchasing your services.
  • You have both product photos and lifestyle photos.
  • All photos should be clear, bright, focused and professional.

20. Trust & Relatability

People do business with people they know, like and trust. Your website needs to help your visitors to get to know you and to develop a level of trust in your company. This can be accomplished through specific design elements, the tone of the content and the overall feeling of the website.

  • Your website creates a level of trust and likability.
  • Your website reflects your personality and brand.

21. Call to Action

Websites are designed to help increase sales, conversions, and leads. When a visitor comes to your website, what exactly would you like them to do? Having a crystal clear call to action is essential to your website’s success. And that call to action should be consistent throughout your site.

For example, if you have a call to action as the first thing a visitors sees when they land on your home page, they may scroll right past it but keep it in the back of their heads. Then if that exact same call to action is in the footer, once they’ve absorbed the content of your webpage they are going to be much more inclined to click on that same CTA because they remember that is what they are supposed to do.

Call to Action

The more clear the call to action is, the better. For example, instead of saying “contact”, what do you want your visitors to do when they contact you – request a quote? book a consultation? Make your call to action as specific as possible.

  • Your website has a clear and consistent call to action in multiple key places (such as in the header, on the main section, in the footer).
  • Your call to action stands out from the rest of the page.
  • Your call to action has specific instructions on what to do.

22. Referrals

Putting web design and websites aside for a second, think about how you found some of the people you do business with (real estate agent, lawyer, accountant, etc.). For a lot of us, we find out about businesses through referrals – a family member or friend recommending someone. With websites and web design we don’t have that luxury.

Websites need to demonstrate that other people have used your business and highly recommend it. This social proof can be accomplished through powerful testimonials, raving reviews or showcasing the number of followers/subscribers.

The key is making these testimonials and reviews relate to the person evaluating them so it feels like your business is being recommended by a friend or family member.

  • Your website has social proof through testimonials, reviews or followers/subscribers.
  • The social proof is relatable and generates trust.
Jo to the Web Solutions - Helping you build your dream website. Two people looking happily at a computer.

23. Footer

Just as important as making a great first impression, you want to make a great lasting impression and the last thing that visitors see is your footer. A footer is such a key part of a website and should be utilized to the fullest!

  • Your footer has a clear call to action.
  • Your footer has information about your business and all of your contact information.
  • Your footer has links to all your other main pages.
Website Footer

25. Fonts

Font’s are so important to your brand and your website. I truly believe fonts can make or break a design. It’s one of the most important aspects in my opinion. No pressure right! No matter what font you choose, the number one rule is to be consistent. It’s okay to have a font for headings and paragraphs and potentially some accent text but that’s really it.

In addition to being consistent with fonts, you’ll want to be consistent with font weights and letter spacing. As an example, all your buttons should have the exact same font, font weight and spacing and the same consistency should be applied to every element.

  • Your font selection accurately portrays your brand
  • You’ve used the same font for all headings and the same font for all paragraphs
  • You’ve used the same font, font weight and letter spacing for specific elements (all buttons are the same, all links are the same, etc.)

24. Colours

An essential part of web design is your choice of colours. As a psychology major myself, I studied the psychology of colours and how each colour can convey a different feeling. Oberlo has a great article on Colour Psychology. Colours can help your call to action stand out and direct the visitor to whatever your website’s goals are.

  • You’ve selected colours to help you attract and connect with your ideal customer.
  • You’ve used colours consistently throughout your website and limited the number of colours used.
  • The colours on your website make key elements stand out and direct visitors to taking action.

26. Spacing

Websites need to breathe. Your site should have plenty of space in between design elements. You don’t want everything all crunched up together. Space allows your most important content to be absorbed more easily.

Just like being consistent with fonts, you also want to be consistent with padding and margins.

  • Your website has plenty of breathing room and space between elements
  • Your padding and margins are consistent throughout the page
  • All elements are virtually and horizontally aligned (when appropriate)

27. Animations

Over the years, websites have become more animated. I’m okay with a small, subtle amount of automation but too much animation can make a site look amateurish and harm the user experience.

  • If you’re using animation, you’ve used it sparingly and only when it makes sense.
  • If animating images, your delay can’t be interpreted as a photo not loading – you don’t want your visitors to see a large blank space until the image appears.
  • I personally prefer interactive elements over animated which gives the user more control over their website experience (having an image zoom on hover vs zoom automatically).

I hope this has helped ensure your website has all the essential elements needed to be successful.

If you’d like help with anything on this list, let’s connect!