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 every time I feel that I am done with a website as I always miss something. Let it be the meta description tag or the favicon. When reading the list you may want to revisit one of your previously created 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 at first but then I use it as a TODO list. All items on the list are not applicable for all websites.
HTML and tags
- Title tag: The title tag is often seen as the most important tag on your page, as the name states, it is the title of the page. It is what appears in search results as the title and also what is shown on the browser tab next to the favicon. The title is used by search engines to understand what the page is about. Make sure all your pages have page good 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 when the page is read aloud.
- Validate markup: It is considered good practice to take a look at your website without styling. This can be done either by browsing the site and looking 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. Search engines and people with disabilities will have an easier time understanding your site if the markup is correct.
- Anchor tag title attributes: This is last on my Mark Up list. As I value it as having low priority. It is not needed for every anchor tag as most anchor tags are self explanatory. 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 just below the title when seeing your site in search results. You could say that it adds further explanation to the page title. Most search engines also use this to index your site. The description should be 156 characters long.
- Open graph tags: Open graph tags makes your site easier to share. Easier in a sense that 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 graph 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 as 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 the web. Especially for mobile device users as it is a pleasure to visit a site with well optimized images and it is horrible to visit sites with slow loading images or other resources. You could also check if your images are too big in size (pixels) and perhaps use smaller ones.
Monitoring
- Tracking: Having a website is not too much use if you do not know how it performs. Tracking can be done on many levels and I believe 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.
- Webmaster tools: Both Microsoft and Google have their own webmaster tools. These tools help you optimize your website. Webmaster 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, they can even email you if you have any dead links or other issues.
- 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 to check if your site is up and running. I myself have used uptime robot and have previously used pingdom. Uptime robot is free and it works great!
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 is much less today than 5 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 will.
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 (HTTPS): 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.
- Data and privacy: If you use cookies on your page you must have a cookie policy and let your users know. I live in Europe and in terms of compliance GDPR has added a lot of extra requirements when creating websites. The rules may be different in other places in the world, but you need to look into what you need to do in terms of data and privacy.
That is it!
That was my list! Hope you enjoyed it. Let me know in the comments if something is missing!