Improving Website Accessibility, Usability and Performance in 2019

Improving Website Accessibility, Usability and Performance in 2019

Ryan Gittings

Ryan Gittings

December 24, 2018

The industry is ever changing and evolving and as developers, we need to make sure we keep on top of the current trends and technologies to stay relevant and useful. Over the past 12 months, I’ve been working on making sure my technical skills and overall industry knowledge has been kept up to date. I wanted to share a few of my tips, techniques and tools that have helped me improve across 2018 and how that has impacted on the end result.

Making the web accessible

I think my biggest improvement across this year has been trying to develop more products that are built around accessibility, to make sure we make the web as open and inclusive as possible. Previously, I’d been guilty of sometimes being naive with colour contrast. I’ve Sketch Color Contrast Analyser. Using Chrome Developer Tools and Lighthouse, I’ve made a massive improvement in making sure that every site I build is as accessible.

Google Console Accessibility Score

Focus on basics

I think a focus on the basics is all massive too. Making sure my syntax is valid, relevant and uses HTML5 tags where possible to improve the code’s readability has been a huge improvement in the code I’m producing. I make sure I pick the tag most relevant in every scenario. I still think I can make better use of tags and I’m hoping I can improve further in 2019.

Focus on performance to get content to the user quicker

I’ve always been a developer who’s focused on performance. It’s something I think is a fundamental part of a successful digital product for the majority of websites. It’s one of the reasons I choose Perch CMS to power most of our websites that are content managed, and why I choose to go as lightweight as possible with starter frameworks.

Alcedo

Alcedo Starter Framework

I wanted a framework that suited around my needs, my coding style and was easy to build a site from. I wanted to make sure the framework only had the key basics that every website is made up from, including:

  • A responsive grid
  • Typography scales
  • Buttons
  • Forms

So after years of exploring solutions from Zurb’s Foundation, to Bootstrap, this year I made a major switch to devise my own starter framework, that’s heavily based on open source Michael Gunner’s Bullets, called Alcedo. It’s super lightweight, extremely flexible and has improved my code tremendously.

Utilise technology to make it easier for users

The web is a great place to develop on right now. There seems to be a real focus on making standards great and the technology we use even easier for all developers. As technology evolves, if we can make it more convenient for users, easier to use, and more secure, companies and brands can gain small but significant advantages over competitors, so making sure I as a developer can stay ahead of the curve can mean that we as an agency can create digital products that go beyond what other agencies can deliver.

Improving eCommerce experiences

Apple/Android Pay for eCommerce projects. Depending on the payment merchant, it can be quite difficult to install but the results can me significant. It’s a secure, well known and more importantly more convenient way to handle payments, and its growing year on year.

Creating fluid experiences

Front-end Javascript frameworks can provide some great ways to improve user experience, providing content to the user in a more dynamic and immersive way. I used Next JS (a React framework that allows server side rendering) for one of my biggest projects this year, Crafty Counsel. The result is a product that matches its brief, it needed to be quick, easy to dive in and out of videos, and a real joy to use. You can read more about how we created a fluid browsing experience.

Crafty Counsel Built on Next JS

Scalable vector graphics

SVG’s have been a common image format on the web for years, but the amount of websites I see where icons, logos and other image elements that could be vector is astonishing. SVG’s make sure icons are sharp, crisp which makes the resulting product more sharp and professional. It’s a small but simple change that can make a massive difference on the quality of the website.

4C SVG Icons

Improving server side

This year I’ve made an effort to try and look at the technologies behind the website in greater detail. I’ve always tried to get my hands dirty with servers, mainly working with DigitalOcean servers to create unmanaged virtual private servers.

I’ve managed to explore other solutions including Amazon’s AWS, installing a variety of Linux based OS’ like Ubuntu and centOS, as well as installing technology to improve server side performance like http/2 and caching solutions. I’ve also used Zeit’s Now to power the front end of Crafty Counsel. I’ve learnt over the course of the year more than ever, that there isn’t a one size fits all solution and that tailoring the server to fit the clients demands in this detail allows us to be more well rounded as an agency, to advise clients on the different type of platforms and how they can improve website performance, experience and reliability.

And finally, becoming more social and active within the developer community

This has been huge for me. I’ve always been one to be a bit shy, conscious and worried about my code not being good enough. I’ve been working within the industry for almost 8 years now and over that time gained a lot of experience and knowledge. Towards the backend of 2018, I realised that although I may not be the best worldwide developer, I have a lot of knowledge to share, and the more open I can be with the work I do, the more I can receive feedback and opinions to make my work even better than it is today. I’ve been trying to open source as much as possible, with projects including:

I’m more hungry than ever to improve the products we put out even better in 2019 with the continued mission to create world-class digital solutions for businesses of all sizes.