How do you make a website as good as it can be? Well, there are a bunch of helpful tools available to help you do that and this will guide will point you towards a few of them.

1. W3C Code Validator

What does it do?

Tells you if the HTML on a website page is valid.

Why use it?

If a page has invalid HTML your page may get rendered incorrectly on less intelligent browsers or older devices. Invalid HTML is unlikely to affect search engine ranking though according to google:

https://support.google.com/webmasters/answer/100782

2. W3C CSS Validator

What does it do?

Tells you if the CSS on your site is valid.

Why use it?

Much like the HTML validator if a page has invalid CSS your page may get rendered incorrectly.

3. Google PageSpeed Insights

What does it do?

Google PageSpeed insights will give you insights on a sites performance and pointers on how to address any issues it finds. The higher the score the faster your site loads.

As an example this website scores 100%.

Why use it?

If your website takes a long time to load people will get board or frustrated and go elsewhere. If you want to retain interest in your site content that content needs to be delivered quickly. Not only that but the time it takes for your site to load also effects your google search engine ranking. For further reading here is a good article on how pagespeed affects conversion rates:

https://blog.hubspot.com/marketing/page-load-time-conversion-rates

4. Chrome Dev Tools - Device Mode

What does it do?

View how your website looks at every conceivable device screen size.

Why use it?

Modern websites are designed to be responsive. They adapt the layout of the content to fit the available screen size. This tool helps you:

• View how your website looks on particular device sizes
• Simulate connecting via a slow mobile networks (to help gain an appreciation for the mobile users experience)

As well as selecting specific device sizes you can also select “Responsive”. This is my favourite mode as in this mode you can resize the device to any size and make sure the transitions between device size flow smoothly.

5. SEO Site Check-Up

What does it do?

Gives you a report on things that may affect your ranking in search engines.

Why use it?

The higher you show in a search engines results the better off you are. This tool provides pointers to improving your ranking.

It’s worth noting that it may raise some red herrings. For example in the new HTML5 standard on a page you can have multiple article tags each with it’s own h1. Historically multiple h1 tags was an issue and this tool will raise multiple h1 tags as an issue even if it is one per article tag which is perfectly valid.

6. SEOptimer

What does it do?

Gives you a F to A+ ranking on the following 5 factors:

• SEO
• Usability
• Performance
• Social
• Security

Why use it?

SEO and performance are covered by the tools already mentioned. This report adds usability, social media connectivity and security into the mix as well.