Designing and developing web experiences for everyone

Sergio Agosti

The web is constantly changing, but accessibility, usability and inclusion are always paramount concerns. As designers and developers, we have to stay alert – and adapt – to make sure we create experiences for all.

When the World Wide Web was created in 1989, its driving ethos was collaboration and, ultimately, inclusion. Tim Berners-Lee developed the web to enable easier information sharing between scientists across locations, but ultimately decided to make his invention accessible to all. Soon servers popped up all over the world, creating a shared digital space for everyone, everywhere.

But when we talk about inclusion online today, it’s more complex than connectivity. Inclusion encompasses a user’s experience of navigating the web, too. As designers and developers, we need to consider whether all users will share the same experience and be able to access the same information adequately.

But web development remains a challenging environment where things change quickly. As developers we’re always learning new ways of doing things. But the web can be fragile, and the things we create may break due to the multitude of hard-to-predict variables involved, such as what browser or device people are using; what’s their connectivity like; or if they have JavaScript disabled.

To stay competitive, we always need to keep on top of the latest developments, platforms and technical approaches – which can change daily – and adapt accordingly. That’s the only way to make sure we’re always creating experiences that are inclusive.

The hurdles to access

As designers and developers, we can’t make assumptions about who we’re creating for. We must analyse whether the experience we’re creating will be equally accessible to all users, whatever individual needs they have and whatever device they’re logging on from.

This analysis needs to cover all eventualities. Some audiences may have a slow internet connection that impacts their browsing experience; others may be using a keyboard rather than a mouse; or they may be visually impaired and, therefore, use browsers that read webpages to them. The list goes on.

What’s interesting is that anyone can – even temporarily – need help with access. When I (a non-native English speaker) read English, I read more slowly and need more time to view content to understand it. That’s why I’m not keen on the very popular auto-rotating carousel.

Where I’m viewing content also impacts usability. If I’m using my smartphone at the beach and the sun is bright, I need enough contrast to see the content properly. Or if I’m travelling and my ability to concentrate is affected by my external surroundings and inputs, the website I’m visiting on my mobile phone needs to be easy to use in order to hold my attention.

Developing design together

It can feel like a never-ending task trying to predict all the situations that users may face when trying to use the internet. So, it’s important that designers and developers work together to make sure as many circumstances as possible are covered.

At The Frameworks we apply the collaborative, open ethos at the heart of the web to the creative process, too. Rather than work in silos, our developers are involved in the design process to prevent any obstacles to execution further down the line.

Developers offer designers a valuable perspective; we can anticipate the technical limitations of a design or offer technical suggestions to broaden it. It can be something as simple as choosing the text colour so it has enough contrast, or accounting for different types of input devices (mouse, touch, keyboard).

When one of our designers was creating a page to celebrate the work of IBM in the UK and Ireland – This is IBM – I was involved as a developer from the very beginning. This meant I could confirm what was possible and practical to implement and ensure that inclusion was a priority, from the colours and contrasts chosen, to how it viewed on different devices or depending on what different input devices were used.

Likewise, we think it’s important that designers contribute to the development process, so they can make sure their design is executed properly. It’s also an opportunity to learn about technical aspects of the web, which we’ve found really useful for informing and improving designs for future projects, too.

If inclusion is viewed as just a box to be ticked, the project could fail, as deadlines are tight and often there simply isn’t time to spare. It’s hard to retrofit inclusion. The smarter, more efficient approach is to embed inclusion into the process from the very beginning.

Going native

Today, the technology we’re using is set up to support more inclusive and accessible design. Browsers take accessibility seriously and it is always a good idea to use native browser elements. For example, a dropdown selection: when using the native browser <select> element, users will be able to use a keyboard to access the list.

Sometimes as a developer it can be hard to style such elements exactly the way designers envision, in which case we may choose to go “custom”. This can make accessibility quite hard to achieve, and we need to pay careful attention to whether their chosen approach can be used with a keyboard or recognised by screen readers.

An open, collaborative mind

As the web was evolving into what we know today, there was a time where inclusion took a backseat to look and feel. But equality of access and usability are now non-negotiable. Today’s more advanced, powerful browsers mean that it shouldn’t really be a problem anymore. But inclusion is not a given.

To get it right, designers and developers need to remain open-minded, be alert to the latest technological advances and updates and embrace collaboration from design through to development and execution. It’s only by embracing this approach that they will be able to uphold the web’s ethos – and keep it as a tool that can be used by everyone.

A version of this article previously appeared on New Digital Age in July 2022.