Fast, accessible, well structured for SEO and compliant…
- Final Outcome
- Structured for SEO
- Higher security
- CMS - NetlifyCMS
- Social media
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 8 maintenance / security patches in 2019.
We add, amend and delete content through the NetlifyCMS. It’s very easy to use. On each amend the site is rebuilt using the Jekyll 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 Jekyll 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 Netlify of course, our cloud hosting provider.
We recently started Pendigital and Emma and I wanted to showcase this site on five key points.
- High performance
- Strong accessibility - AA compliant
- Structured for SEO
- Higher security
- Low maintenance
We opted to use a template to build the site but we have turbo-charged it to ensure it’s fast and compliant. We chose a template as we liked its look and feel as well as its many options. As a start-up we needed to keep the build-time short so we could launch our business.
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.
The site is 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 Jekyll 4. This version promises quicker build times than older versions. We’ve noticed an improvement.
Netlify - we host the website on Netlify. 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 minimised the amount of images used. We decided that one strong headline plus image was enough for customer conversion.
SVGs (scalable vector graphics) - SVG images are small in size, but clear at any size. We have used them where necessary.
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’.
Breadcrumbs: All pages have navigable breadcrumbs so that the user knows their location.
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 news articles get output to /services/web-developer/news/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
We are also using Netlify. 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.
Netlify provide our security certificate with one click. It’s provided through Let’s Encrypt.
With thanks to Ardian at Inspiro who designed the versatile template. It’s called Polo and comes with a huge amount of options. It’s well made and I hope he’s making a good living from it! Thank you!
8. CMS - Netlify CMS
We manage all content through the NetlifyCMS system. It’s very functional and does what it says. Its interface is not quite as beautiful as CloudCannon but it does mean we can use the Netlify ecosystem. Every change made in the Netlify CMS triggers a new Jekyll build. Netlify then pushes the new site out to its content delivery network.
Within Netlify CMS you’ll see folders that represent our main Jekyll content collections. We categorise every new page. Jekyll knows how to filter content together. For example, all web development pages are all categorised in the web-developer category. This includes, case studies, news articles, landing pages and knowledge base articles.
We use permalinks as stated above (in SEO) to ensure that the new content is available in the right url location.
Whilst the NetlifyCMS is not very pretty we have grouped specific elements together. This ensures that each page section is not overwhelming.
We used a mixture of Netlify CMS widgets to ensure that we have the best editing option for each element on the page.
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 Netlify CMS - as setup by us.
The only cookies used by the site are to do with Google Analytics and managing GDPR itself. The visitor has the option of declining the Google Analytics cookie. In which case, Google Analytics will not track the usage of the site by the visitor.
As mentioned above, we use Google Analytics to track visitor traffic.