BY ANDREW LANG · FEBRUARY 12, 2021

Having designed and developed websites for over 25 years, I must confess the biggest gripe I have when it comes to dealing with clients: their obsession with aesthetics. Hold on – what’s wrong with that? Surely I’m forgetting the “design” part of web design by complaining that clients focus too intently on how the site actually…looks? No, I’ve not forgotten – it’s just that aesthetics need to be balanced with usability and accessibility considerations too, and that if a client becomes too focused on aesthetics, their site can concede too many usability and accessibility features in the process.

The advantage aesthetics have over usability and accessibility is that it’s visual, whereas the latter two are often “invisible”: they’re not obvious, yet they can severely affect the level of success a website can hope to achieve.

Before we go too far, let’s get definitions of two words that are already popping up a lot in this article.

Usability
This term is fairly self-explanatory: usability concerns itself with how easy a website is to use. A website with strong usability is easy to navigate while making it easy for the visitor to do stuff (e.g. buy something, find out certain key information).

Accessibility
This term has two chief aspects to it: 1) how accessible a site is to people, particularly people with disabilities. 2) how accessible a site is to all devices.

On point 1), a site might be inaccessible if you can only navigate it by mouse, or if images do not have alt text, so blind people can’t have the images described to them via a screen reader.

On point 2), a website might be considered inaccessible if it doesn’t provide small-screen devices with a single column layout (therefore the text is very small, and you have to pinch-and-zoom to read it).

Suggested article: Directory of Web Design and Development Related Websites

So what kind of problems can too much focus on aesthetics cause?
Some common problems that come to mind:-

• custom fonts that are hard to read
• imagery in the header area that pushes the actual content of the page way below the fold (“below the fold” is the part of the page you have to scroll to see).
• “mystery meat navigation” – navigation that’s hidden away, and you only know something is a link when you hover over it with your finger or mouse (usually these are images)
• layouts that require horizontal scrolling

These are just some examples. They are usually part of a concept that the client has in their head. For example, a client might say “I’m imagining my site where each page looks like lined paper, and all the text will be displayed as a handwritten font”. There’s nothing wrong with such an idea per se, but problems can arise when the content of the site doesn’t match the design. For example, text as scrawled hand-writing can work very well with short-form content, but people will struggle to read it if it’s long-form.

There’s certainly a time and a place for conceptual ideas to be developed as web pages, but the typical client of mine is a small business that needs their site to perform specific tasks: to make it as easy as possible for someone to buy something, sign up to a service, sign up to a newsletter. Achieving these goals means balancing aesthetics with usability and accessibility so that they can create an optimum experience for the visitor.

Suggested article: Design Views | Share your design philosophies and ideas

Established websites focus a lot on usability and accessibility
You only have to look at the big platforms like Google, eBay, and Amazon to know how much time and money Big Tech throw at making their own websites as accessible and usable as possible. These sites aren’t using conceptual designs or trying to “wow” the visitor with eye candy. I often cite these examples to prospective new clients.

Hold on – most sites use templates now – isn’t usability and accessibility baked in?
For sure, there’s a lot of issues that are ironed out by the underlying website template. For example, HTML structure (headline tags et al), and responsive design are included in most templates these days. However, the content itself can cause issues. A client adding large images to the top of the page can push text down the page – even the title of the page can end up below the fold. Their navigation titles are vague or outright misleading. Moreover, not all design templates practice good usability and accessibility. Many layouts flagrantly ignore good web design practices. This is the issue where clients say “I really love the look and feel of this design template…”, and you know you’d have to turn it inside out to make it a useable and accessible website. I’ve put many a design template through an ahrefs.com audit only to see it get a very low score, and realize the amount of work I’d need to get a score of 95%+ isn’t worth the trouble. In summary, not all templates are the same. Some are very considerate toward usability and accessibility, others don’t even know these concepts exist.

Making it clear to clients
Of course, I don’t get in a war of words with clients. I explain what I can do for them, and what they need to look out for when it comes to maximizing their website’s potential. Actually, it’s more often the case that as soon as their website goes live, they then start to focus heavily on site performance – which is like the lightbulb moment for them: they’re reeling off their basket abandonment stats, their page bounce percentages, their conversion rates. And thus, often without knowing it, they start to optimize their site’s content to further help their visitors achieve the aims they are trying to achieve.

Andrew Lang

I’ve been developing websites for a quarter of a century, and I still strangely have a strong passion for HTML, CSS, and all the other stuff I wrestle with everyday when making websites.

articlesbase.com/