Be responsive, accessible and different

When someone uses the term ‘accessibility’ in the context of web development, they’ll likely be referring to the practice of ensuring that users who require assistive technologies are able to use your website.

However, the topic of accessibility is far wider ranging than the aforementioned scope. Rather, it is ensuring that anyone regardless of device is able to use your application.

With such a wide-ranging array of internet-enabled devices (phones, tablets, etc), it’s important that your application caters for these devices in seamless way.

“Oh, here is another big picture website…!”

Hamburger menu? Check. Full screen image? Check. Scroll prompt? Check.

Did you ever get a sense of deja vu?

Chances are, the website you’re looking at is ‘responsive’ – meaning the same webpage will fit in different screen sizes nicely, with the same functionality on offer.

But why don’t you make a separate m. website instead?

Chances are you’ve seen a URL in your address bar whilst on your mobile that is prepended with an ‘m’ subdomain.

The vast majority of the time this’ll denote a standalone mobile-specific website, that is entirely separate from the desktop version.

There are some major drawbacks with this model:

  • Maintenance overhead and development costs associated with several disparate codebases.
  • Reliance on potentially brittle device detection.

In contrast, a responsive website incorporates the same underlying codebase, with its responsive nature coming from adaptations of its user interface based on environmental variables.

These include screen resolution, aspect ratio, and orientation. This concept provides a leaner approach throughout the project lifecycle.

In addition to the technical decisions when constructing a responsive website, design considerations are also incredibly important.

A typical responsive website, with hamburger menu and ‘big picture’.

responsive website

Mobile first

Another buzz word in the responsive design sphere is the term ‘mobile first’. Essentially, this means that you should be designing for the smallest device size envisaged, and progressively increasing support for larger resolutions.

On larger screens such as a desktop monitor, you can have content elements side by side. There is enough room for it. You can have several items displayed almost at the same level.

However on the narrowest possible screen, you have to reduce the number of columns, which forces you to organise your content in a much more linear fashion. Moreover, it forces you to think in terms of information hierarchy and single priority order.

Once you work out the order, going back to a larger screen is a much simpler process. And many choose to keep this single order; even keep the hamburger menu (it’s the icon with three lines stacked up and usually reveals a site navigation in some way).

They reason “you might as well put beautiful massive images on it. Or make it a video. Nice simple layout. Clear hierarchy. Job done.”

Except, that is what a lot of other people are doing. How can we achieve a responsive website that doesn’t look like everyone else’s?

It’s all about typography

The best responsive designs come with good, considered typography. As far as I am concerned, there are two factors for great typography.

The first one is personality. Is the typeface appropriate for what you’re trying to communicate? You don’t warn people of death in Comic Sans (unless it’s for comic purposes obviously). Does it represent the brand? Does it have right level of authority?

And the second one is semantic. Typography has to convey the right relationship between each word, sentence and paragraph.

To illustrate, this example is stripped off any typographic consideration:

It’s all about typography.

How personality of typeface and semantic affects how you communicate through words.

“Oh, here is another big picture website…!” Hamburger menu? Check. Full screen…

And the same text, with some of those considerations added back in:

It’s all about typography

How personality of typeface and semantic affects how you communicate through words

“Oh, here is another big picture website…!” Hamburger menu? Check. Full screen…

The second example makes it clear that these are heading, subheading and extract, rather than three equally weighted paragraphs in various grammatical styles.

It may seem that this is simple stuff that everyone does but awareness of relationships between content and style are critical in achieving a good responsive layout.

Once style and content are tied together so they are ‘semantic’, layout can be a lot more flexible.

This is the same principle as the relationship between HTML and CSS, which have separate functions but linked meaning. HTML displays the ‘meaning’ of your content and CSS displays how it ‘looks’.

Typography displays the ‘relationships’ of your content and layout changes how it ‘flows’ without changing the order.

Having strong typographic principles allows you to move your content around more freely without breaking what it means.

Good typography combined with clear prioritisation of mobile devices will allow you to be more flexible with layout at different screen sizes.

An example of bold typography from agency land.

bold typography

Think accessibility and beyond

How can you ensure your typography is semantic and communicates what it supposed to do? I found the best way to achieve this is to think in terms of accessibility.

Here are some stats around visual impairments you can consider.

To give you the sense of scale, current IE8 & IE9 users in UK are about 3.5% combined.

As you can see, these are not trivial numbers. And on top of making all these new users happy (and hopefully buying your products), by considering them, you can design a better responsive website.

Semantic typography

The way to do this right is to think of semantic HTML. If it’s an article, call it an article. If it’s a button, call it a button.

The same principle applies to typography, if it’s a heading, call it heading 1

, if it’s a subheading call it heading 2

, etc.

It helps the browser to examine your content and really understand the position of each sentence.

Think large and spacious

For those with minor visual impairment, having large text definitely helps. I consider 14pt average sized, as a guide. Having plenty of space that complements typography helps dyslexic audience, as well as creating a clean spacious design.

With so many different devices, thinking about ‘the fold’ is pretty much replaced by mobile first, single priority order, which means you can add more space between elements; in fact, as much as you need to create the right context.

Characterful typeface

Those with dyslexia may prefer having a font with distinct shapes for each letter. For example when d and b are just the mirror of each other, it’s hard to distinguish between them.

Choose a font that reflects your brand well and works well for a dyslexic audience. Differentiate for yourself and for others.

Make it work without colours

The principle “if it works without colours, it works anywhere”  is a good, plain old usability.

Colours can be used to emphasise information and that can be a really powerful design element. However, if it works without colours, that is even more robust.

Mind the contrast

Good contrast helps mild vision impairment and make things much easier to read for everyone.

Consider background colour

Dyslexic audiences may find it easier to read when the page doesn’t have the strong glare of a white background. A softer tone is easier to read from and it will help add a personality to your design. Added bonus.

You can see this in action at Fortnum & Mason’s site, where we’ve used soft cream tones to differentiate the atmosphere of the site and create a warm and ambient feeling.

Be different

Taking all these factors into account, you will end up with a clear, accessible, responsive website. And it doesn’t have to look like a wider, bigger version of mobile layout.

Push yourself to think differently – as long as you don’t forget the all important accessibility, your responsive website will work well and stand out from the crowd. Give it a go.

This blog was co-authored by Sari Griffiths, Chief Design Officer at Red Badger