The website checklist for when you are about to launch a new site - updated 2018

Have you ever been about to publish a website and feel that you are missing something? me too! That is why I created my own checklist for newly created sites. I use it everytime I feel that I am done with a website. I always miss something. Let it be the meta description tag or the favicon. You might also find inspiration for your current projects and sites.

The checkList

Here is my checklist that I use while and before deploying a new website. I do not always get around to do all of them. All are not applicable for all sites.

Mark up

  • Title tag: The title tag is often referenced as one of the most important tags. As the name states it is the title of the page. It has a couple of uses. Besides being the name on the browser tab. The name is also used by search engines. Make sure all your pages have page titles.
  • Headings: also known as h1, h2, h3 tags. These are hard to forget but also hard to get right. Before I deploy a new site I usually check if I am consistent in my use of headings. Remember to have the above level headings covered. Meaning that if you have a h3 heading. Then you should also have a h2 and h1 above it.
  • Image alt texts: These are easy to forget. Especially for sites not using any Content Management System. Alt texts are a way to tell search engines what you are showing the user. They are also great in terms of accessibility. People using screen readers will not be able to see your image, so they will be presented with the alt text instead.
  • Validate mark up: It is considered a good idea to take a look at your website without styling. Either browse the site and look through it in the development tools (f12). Or view the source code of your site. Just remember that viewing the source code will not run your javascript. This will also give you an idea of how crawlers and people with disablities "see" your website.
  • Anchor tag title attributes: This is last on my Mark Up list. As I value it as having low priority. It's not needed for every anchor tag as most anchor tags are selv explainatory. But in some cases they are not. Sometimes you would like to give the user a little more information about what they are about to click on. Remember that mobile users do not get this experience - as they cannot hover elements.

Meta Tags

  • Description: The description tag is.. well the description of your page! The tag is also meant to give people a sneak peak of your website. People will see this text when searching for your site. You could say that it adds to the page title. Most search engines also use this to index your site. The description should be about 160 characters long.
  • Open graph tags: Open graph tags makes your site easier to share. Easier in a sense tat what you are sharing is more well-formed. If you have no open graph tags - then it is most likely the first text on your site that is shared. With open grah you can tell the media your site is shared on what title, image and canonical url to use. Giving you more control over how your content is shared.
  • Favicon: It just looks silly when the favicon is missing on a website. Remember to generate icons for every size, you can for example use realfavicongenerator for this.

Assets

  • Bundling and Minification: Bundling and minification is most likely a part of your development workflow. You might be using grunt, gulp or web essentials to handle this task. However this is not always the case. I would advise to go through your css and javascript and verify that they are bundled and minified.
  • Console errors: Remember to check the development console in your browser for issues. This could be errors in your javascript. Sometimes javascript errors do not cause any trouble. However I would still recommend fixing them as they only stack up. It can also cause some unwanted behavior if they are let unfixed You might also want to remove any console logs and warnings.
  • Image sizes and optimization: This might also be a part of your development workflow. But I would advise to check your static images and see if they are optimized for web. Especially for mobile device users - it's a pleasure to visit a site with well optimized images. You could also check if your images are too big in size (pixels). Maybe you should use smaller ones.

Monitoring

  • Tracking: Having a website is not to much use if you do not know how it performs. Tracking can be done on many levels. Most use google analytics. Except from setting it up, remember to test that it works! Even though it can take some time before data shows up in your tracking tool.
  • Ads: You may not have ads on your website. But if you have, remember to check that they are showing valid ads for your website. You do not want ads that have no relevance for your target audience.
  • Web Master tools: Both Microsoft and Google have their own webmaster tools. These tools help you optimize your website. Web master tools are used to give search engines more information about your website. Which help them to better understand your site. This can be done through submitting sitemaps, creating robots.txt etc. They will report if you have any errors regarding SEO. Google will actually email you if you have any dead links.
  • Uptime monitoring: If you do not know when your site breaks down, how do you know when to fix it? There are several services you can use check if your site is up and running. I myself have used uptime robot and have previously used pingdom.

Browsers and Devices

  • Browser support: Have you taken a look at your site through the eyes of your users? Remember to consider which browsers you are supporting. If you are not supporting a specific browser, a message should be written - warning the user that their experience might be less. These warnings are easily made using conditional html comments. You can read my guide on how to set this up
  • Screen sizes: ah yes. Responsive web design. Very few websites today are created without thinking about responsiveness. However most sites are still developed on large screens. Sometimes we forget to check how our site looks in different sizes. As we continue to improve our site, we might forget to check for impacts on other screen sizes.
  • Test on real devices: Even though the difference in devices are much less today than 3 years ago. Testing on actual devices should be done. This can be expensive. I would suggest using what you have or can afford - and use emulators for the rest.
  • Clear you cache!: Sometimes when we develop websites we tend to launch our sites before they receive traffic. This is a great strategy for testing that everything works. Just remember to clear your cache when you are actually about to go live. You may have something cached locally and see things differently than everyone else.

Network

  • Page Speed: Always check your network tab in your browser's development tools (f12). You might find assets that are too big or external resources that are responding slowly. You might also see that files are loaded in the wrong order. Some resources can even block the page until it is fully loaded. You can use google's page speed insights to check for issues on your site. Your response time should also be low. It should not take more than 2 seconds to load your website. I would always try to aim at 200ms in response time. But I would consider anything below 500ms to be fine.
  • SSL: Also known as Secure Socket Layer. Besides adding extra security to your site. It is said that some search engines rank you higher if you are using https.

Misc

  • Social Media: Remember to get your site out there! Remember to tell the world that you have created this new site, or it will not be found. This can easily be done through the social media channels that you normally use. Twitter, facebook or pinterest are great places to start.
  • Dead links: Google will punish you for bad links. Even if you are not thinking too highly of SEO your users will also dislike broken or dead links on your page.
  • Spelling: Even though you likely can find incorrect grammar on this page I will pass on this advice. Look through the text on your website and check for obvious errors.

That was my list! Hope you enjoyed it. Let me know in the comments if something is missing!