✨ Introducing the new Rodney Lab Site #
The new Rodney Lab site is now live. It is built around the three core user experience (UX) needs of being accessible, fast, and secure. Starting out with those needs in mind, the Gatsby Static Site generator seemed a solid choice. Principally known for creating lightning fast websites, Gatsby also helps build in accessibility . As an example, it can handle page announcements by default — no doubt much appreciated by users using screen readers to access the site. The site scores exceedingly well by industry-standard tests for accessibility, speed, and security.
Some results are shown further down the page. Gatsby offers GraphQL support, which makes adding Search Engine Optimization (SEO) to the site a breeze. Traditional meta-data as well as modern JSON-LD allowing rich Google search results for the site are included. SEO, security, speed, and accessibility all help create a great User Experience, which, at the end of the day, is the most important metric of all. In the next paragraphs, we take a look in a little more detail at the site features.
🤗 Accessibility features #
Accessibility is a priority for us. We include a number of features from keyboard navigation using semantic HTML in the site code to help users browsing the site with a screen reader. Other coded-in features include all non-decorative images having alt attributes so screen readers can announce the image (this is also best-practise for pure SEO reasons). The site design is also optimized for the visually impaired, with large button and colour contrast ratio of 4.5:1 or higher on all elements, so all parts of the site can be read by people with moderately low vision.
You can see a live report of the Rodney Label new site on the Web Accessibility Evaluation site .
🔥 Site Speed #
Waiting for a site to load can be quite annoying. On top, you quickly lose visitors when your page loads slowly. Google's own research shows that the probability of a bounce (the percentage of site visitors leaving the website without staying to explore the content) increases 32% as page load time goes from one second to three seconds. On top, a slow site affects SEO. Google needs to 'crawl' your site — visit it with a robot which follows links on your pages, adding new content to the Google index. A slow loading page impacts the number of pages on your site the bot is able to explore in a fixed time window. Clearly, all of these factors will impact search result performance, fundamentally because they impact on user experience. All Google really wants to do it get the right information in front of its users as quickly as possible, in other words, provide them with a great user experience.
With speed being second on our list of must-haves, we decided to go for a statically hosted website. Statically hosted websites load quicker, but are suited to applications (like this one) where there is no constant feed of real-time updates. For example, a static site would not be first choice for an Instagram-like site where users are constantly adding content and interacting with it.
Statically hosted sites are faster, out-of-the-box. Gatsby has a few tricks up its sleeve to improve speed. As an example, resources from other pages are prefetched so you getter a quicker response each time you click. Images can also be optimized using the brand-new image API. This has inbuilt features like lazy loading and placeholder images. Lazy loading means the images on the fraction of the page you are currently looking at load initially. This means you see the images that matter quicker. This can have a massive impact on user experience for an image-heavy site. Placeholder show a low quality image, while the full quality image loads, allowing users on a slower connection to interact with the page quicker.
Just how fast is the new Rodney Lab site? There are a number of benchmarking tools for speed. They offer varying results. Lighthouse is a common one it is also quite strict, for example at the time of writing a test on amazon.com returned a 78 for performance. Currently, the site scores 99 for Performance, 100 for Accessibility, 100 for Best Practices and 100 for SEO. The tool is constantly evolving, so this might change the relative weighting of factors changes.
🔐 Security features #
We host the site on the Netlify CDN for speed and security reasons. Out of the box, Netlify hosted Gatsby sites include HTTP headers to improve security. On top, we have added additional headers to reduce the attack surface for bad actors, guarding against cross-site scripting (XSS) attacks . Although many sites implement CSP, it takes a lot of effort to do it well. Many sites include the 'unsafe-inline' directive which works against many of the security benefits CSP provides. Our site's high A+ score on security reflects our investment in designing safe CSP for the site.
| Test | Result |
|---|---|
| Mozilla Observatory |  |
| observatory.mozilla.org | |
| Qualsys SSL Labs | |
| ssllabs.com | |
| SecurityHeaders.com | |
| securityheaders.com |
Intrinsically, statically hosted sites are more secure as users hit a CDN rather than a live server.
In terms of privacy, the site also scores well. See our results from The Markup's Blacklight Privacy Inspector .
🤖 SEO features #
Good user experience is essential for SEO. An example of the SEO and UX prioritized design of the website is the in-built blog search feature. Rather than rely on an external provider for search, which can reduce performance, we are able to offer search, keeping the site static using the js-search client-side search library . This is a lightweight implementation of Lunr JS and provides fast site search. To improve UX we added a couple of features. Firstly, search results use stemming. This just means if you search for ‘provide”, results with the words “provider” and “provides” are also returned. That's not all, though. To further improve UX, when you open a search result, the window automatically scrolls to show the first search result and all search results in the text are highlighted. This saves you having to scroll through the text manually to find what you need.
🙏🏽 Feedback #
The page will be open-sourced soon onto the Rodney Lab GitHub page . In the meantime, keen to hear your thoughts on the site design and features. You can get in touch via @askRodney on Twitter and also askRodney on Telegram . Alternatively, see further ways to get in touch with Rodney Lab. If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee.
We post regularly on accessible Gatsby website development as well as OpenBSD-centric content. Also, subscribe to the newsletter to keep up-to-date with our latest projects.