Web Developer Case Study

1. Final Outcome

The site you are on today is: quick to load and compliant with UK and EU law. It has a great structure to perform in Google and is much more secure than your average WordPress site. It will not need constant updating of its CMS. WordPress released numerous maintenance / security patches in 2022.

We add, amend and delete content through the CloudCannon CMS. It’s very easy to use. On each amend the site is rebuilt using the Eleventy static site generator and synced with our Github repo. This gives us a remote back-up of the latest changes with the option of rolling back to an earlier version. The Eleventy and Github workflow all happens behind the scenes.

Each new build of static html pages is pushed out on a global content delivery network. The site is as fast in the UK as it is in America, Australia or the Far East. Thanks to CloudCannon and their CloudFlare content delivery network.

2. Background

I wanted to showcase this site on five key points:

1. High performance
2. Strong accessibility - AA compliant
3. Structured for SEO
4. Higher security
5. Low maintenance

We designed the site from scratch to ensure it’s fast and compliant. 

We felt we needed to focus on the above points as these are critical areas that seem to be lacking these days. The majority of websites I see are not AA compliant for accessibility. They are not quick, often downloading many dependencies and making many server requests. They’re often built on top of an archaic system which makes the site vulnerable if not kept updated. And more often than not sites are not structured well to perform in the search engines.

I’d like to take you on a tour of the new site’s functionality. And why we hope (know) it will perform well for us.

3. Performance

The site is super-fast because…

Static site generator (SSG) - we’re big fans of SSGs. An SSG is software that rebuilds your website as a collection of static html pages. That’s fast because each page is only served by the server and not built specific to each page request. The latter being the way WordPress works. Read our article on SSGs to find out more about them.

We also used the latest version of Eleventy. This NodeJS SSG builds the whole site in seconds.

CloudCannon hosting - we host the website on CloudCannon. A specialist in the delivery of static sites (as well as more). It has a super-fast content delivery network that stretches around the world.

Design - we’ve optimised the design to load quickly even though there are rich-content landing pages. 

Coding - we’ve reduced the number of requests to the server to the absolute smallest we can. The main CSS and Javascript are in two small compressed files. And each component brings its own CSS and JS with it (embedded). We’ve also purged the CSS to remove any unnecessary code - the final gzipped size is only 4kb!

Responsive Images - one size does not fit all! The site always uses the most appropriate image for the device viewing it and thanks to the Eleventy image plugin provides WEBP image optimisation which is automated as part of the build. This could be mobile (small image), desktop or extra large desktop (extra large image). It uses built-in html attributes (thanks srcset) to achieve this.

SVGs (scalable vector graphics) - SVG images are small in size, but clear at any size. We have used them where necessary.

4. Accessibility

The site is accessible because of the following features…

Skip to main content: Disabled users often cannot use a mouse. They rely on a keyboard to navigate around a website using the tab key to jump to different sections. If you use tab on this site, then you’ll see the skip to main content appear. Hit the return key and it will take you to it.

Focus styling: As you tab around the site, it’s very clear which link you have reached. We have styled links that have focus with a dotted outline.

Page menus: Each main content area has a page menu. This means that when the visitor skips the content they can then jump to the most relevant section. It’s also handy for a lengthy article and will also please SEO bods.

Aria and semantic tags: Behind the scenes, we have tagged each region of the website with its correct tag. We have done this using html semantic tags. For example, marking the main content (<main>), side content (aside) etc. We have also used Aria labels. This ensures that screen-readers can better understand what each component is there for. E.g. a marketing banner would have the aria label marked as ‘call to action’.

Sitemap: There is a sitemap at /sitemap/ which lists the main content sections of the site.

Contrast: We have ensured that all text meets contrast checks. I.e. is visible against its background. In the hero section, due to the image, we added a transparent background to ensure that the contrast was OK.

Font sizes: We’ve opted for bigger fonts throughout the site.

Main navigation: You access the main menu via clicking rather than hovering. Hovering can be challenging for people with a motor disability.

Alt tag: All images have alternate text.

H1, H2, H3: The heading tags are all used in the correct order. For example, we don’t jump from an h2 to an h4 without an h3.

Anchor Text: We have ensured that anchor text states where it will take the user. For example: we don’t say ‘Read More…’ when linking to an article on web development. We say ‘Read more about our web development services’.

5. Structured for SEO

We’re strong believers in the silo approach to SEO. And aim to provide good quality content in well defined silos. This is so that it is obvious to Google that there is a range of good quality content available.

Throughout we have structured the site to achieve this. We have used permalinks to ensure that we can output any page type to any url location. For example, web development blog articles get output to /services/web-developer/blog/my-article/.

We have also used canonical links. To ensure that Google knows about any duplicate content.

All the speed and accessibility mods give the site a boost in the search engines.

6. Higher security

A static site generator builds the site every time the CMS makes a change to an article. The output is html, CSS and javascript. So there are less vulnerabilties using this tech when compared to WordPress tech. For example, there is no database and no PHP coding language. Two well known areas for hackers to exploit.

We are also using CloudCannon. So we have outsourced our backend. This means that we are not responsible for the server but a team of experts are. A lot of servers are running on old versions of their software. This makes them a target for hackers. The situation is changing all the time as hackers find loop holes. The software manufacturers then release security patches. This means you need to be monitoring your server all the time.

CloudCannon provide our security certificate with one click. It’s provided through Let’s Encrypt.

7. Design

The design is our bespoke design. We built it from scratch using the Bootstrap 5 CSS framework as a base.

8. CMS - CloudCannon

We manage all content through the CloudCannon system. It’s very functional and does what it says. Its interface is very easy to use and navigate. Every change made in the CloudCannon CMS triggers a new Eleventy build. CloudCannon then pushes the new site out to its content delivery network.

We use permalinks as stated above (in SEO) to ensure that the new content is available in the right url location.

You can read more about our thoughts on CloudCannon here - heads-up... we think it's great.

9. Social media

We have embedded social media throughout the site as

a) open graph tags

b) Shareable links

c) and simple links to our social media platforms

Whenever a visitor shares a page on social media then the page’s og tags supply the content to share. We add content to the og tags through the CloudCannon CMS - as setup by us.

10. GDPR

We've opted out of using any web statistics. This is because we were never using / analysing the data. And we don't use any marketing cookies either. If we decide to implement remarketing then I will include an option in the CMS to turn on Google Tag Manager whenever we have a campaign running. So whilst we aren't running campaigns there's no need to slow down the site with third party code. So, in sum, we haven't implemented a GDPR solution, such as Cookiebot... because we don't need it. BTW, we'd implement Cookiebot via our Google Tag Manager container... which would make it super-easy to turn on and off.