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 constantly changing and evolving. As a developer, we need to make sure that we keep on top of the current trends and technological advances to stay relevant and practical. Over the past 12 months, I have been working to ensure that my technical skills and overall industry knowledge is both relevant and practical as to be keeping up with the advancements of the industry. I wanted to take this opportunity to share tips on the techniques and tools that have helped me to improve over 2018 and how this has impacted the end result.

Making the web accessible

I think my biggest improvement this year was through the focus on accessibility in product development. This made sure that the website was its most open and inclusive. I admit that I have previously been naïve with colour contrast. But since I’ve been using Sketch Color Contrast Analyser, Chrome Developer Tools Lighthouse, I have made a massive improvement. Accessibility is key.

Focus on basics

I believe that a focus on the basics is massively valuable. Simply ensuring that my syntax is correct and that it uses HTML5 tags where possible makes a valuable improvement to the readability of the code. I make sure to pick the most relevant tag in every scenario; but I am not complacent. I continue and will continue into 2019 to challenge myself to the better use of tags. I am constantly self-critiquing in order to encourage improvement.

Focus on performance to get content to the user quicker

I have always been a developer who centres performance. It is something I believe plays a fundamental part in the success of digital products. This is one of the main reasons that I choose Perch CMS to power most of the content managed websites I provide. I am persuaded by the option to go as lightweight as possible with starter frameworks.

Alcedo

Alcedo Starter Framework

I wanted a framework that suited my coding style and provided a foundation that was easy to build upon. I only wanted the framework to have the key basics of the structure of a website:

  • 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, 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 for development right now. There seems to be a real focus on improving standards and uncomplicating the technology for developers. Alongside the evolution of technology, if we can ensure convenience security and accessibility for users, companies and brands can advance significantly beyond competitors. So as a developer, making sure I am ahead of the curve can determine that my 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 be 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 afford great ways to improve user experience, in 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 number of websites I see where icons, logos and other image elements have not adopted this format is astonishing. SVG’s make sure icons are sharp. This makes the resulting product sharper and more professional as a whole. It is 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 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. This year, more than ever I have learnt that there is not a ‘one size fits all’ solution and that tailoring the server to the clients demands provides us to be a well-rounded agency. We have the ability to advise clients on the different types of platforms available how it can individually benefit in areas such as 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, conscientious and apprehensive about my code not being good enough. I’ve been working within the industry for almost 8 years now and over that time I have 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 am more hungry than ever to improve the products we put out even more in 2019 with the continued mission to create world-class digital solutions for businesses of all sizes.