Bnode. Digital done right.

Firstly, let’s start by defining what ethical website design and development actually means.

Noble CE defines being ethical as “doing what is right, fair, and honest – even when no one is watching”.

And:

“Ethics guide how people act in personal, professional, and public life. Strong ethical behavior builds trust, supports communities, and ensures that decisions are made with integrity.”

Specifically, and in practice, ethical web design and development “prioritises users and the wider community by focusing on privacy, security, accessibility, sustainability, and transparency. It involves building websites and applications that are not only technically sound but also fair, inclusive, and beneficial to users, society, and the environment, rather than being built solely for business gain”.
(Source: Google Search and AI Overview on “ethical web development”)

Web design and web development as terms are somewhat interchangeable, but here at Bnode, when we talk about web design, we mean putting together a working design concept for a website for web developers to follow. Building a blueprint for what the finished website will look like, and web development is the process of actually building and delivering the finished website.

With ethical considerations like usability and accessibility built-in, of course.

Now we’ve defined the terms, what does it mean to be ethical in the website building game?

Firstly, being ethical in this business is hard.

You might have to turn work down because the client or project goes against your ethical beliefs, morals and principles. Turning down lucrative work is never easy, especially when you’re starting out or times are tough financially, but if you’re going to have integrity and the courage of your convictions you need to walk the walk as well as talk the talk. This means not taking on work from ethically dodgy clients on the sly, because you think no one is paying attention.

An ethical client statement (more commonly referred to as a client code of ethics or ethical policy) is a formal declaration by a business or professional about the core ethical values and principles that guide their interactions and relationship with clients, including who they will and won’t work with.

You should ask yourself what are you in the web design and web development game for?

Are you in it for the greater good of people and society, and to make the web a better place, or just to make money?

Earning a living is important (of course it is) but you can still do that ethically and without compromising ethical standards and principles.

Again, it’ll be challenging but you can actually charge more for ethical services. But it’s not just a case of simply increasing your markup – doing so requires a strategy to justify the higher price by communicating the increased value and quality of your services to your clients.

To do ethical website design and development, and to truly be ethical yourself, you’ve got to think about the bigger picture:

• How will your design and finished website impact people and communities?
• Are you reinforcing harmful stereotypes or excluding certain groups, or being inclusive and embracing diversity and equality?
• Are you putting business and commerce before people and their needs and well-being, or putting people first?
• Are you OK with using shady tricks or manipulating people into doing and buying stuff that they don’t want or need, or do you put people before the sale?

What are the key considerations and practical aspects of ethical website usability and accessibility?

Getting people to the information they need quickly and easily – and enabling them to complete the task they need to do or aim they need to achieve in as few steps as possible – is a key consideration of ethical website usability and accessibility.

This saves the website user time and effort – metaphorical energy – but also actual energy too.

Efficient, ethical online task completion cuts down on user session time, which saves electricity and carbon emissions associated with web page delivery and time spent online and device use.

Before we look at how to make your website quick and easy to navigate, we’ll look at how not to do it. Not anymore, anyway.

A common example of bad navigation includes stepped menus or ‘fly-outs’. They used to be a thing back in the day. But now they are outmoded and have fallen out of favour and usage.

This is because they are bad for usability and accessibility.

Too many navigation options can quickly become overwhelming or confusing. And, if those options can only be triggered by hovering over them and clicking on them with a mouse, then the website isn’t usable for people who can’t or don’t use one.

Key updates in WCAG 2.2 focus on improving user experiences for people with cognitive, learning, and mobility impairments.

One of the key areas covered by WCAG 2.2 AA is input method. This is ensuring that users can navigate and interact with content using a keyboard and other assistive technologies.

In practice, and as Accessible Web say in their article on how to navigate a website with your keyboard, make sure that users can navigate a website with the keyboard by first hitting the tab key. This should highlight the the element that has focus.

Here’s some keyboard navigation basics from Accessible Web:

“Tab – move to next interactive element
Shift + Tab – move to previous interactive element
Return/Enter – activate elements (links, buttons, etc.)
Spacebar – activates buttons (such as to pause/play videos, submit forms, etc.)
Esc – close opened content (modals, navigation menus, etc.) or cancel current action
Arrows [Cursor Keys] – navigate within widgets (tablists, checkboxes within a disclosure button, etc.) and navigate around a page”

How users can navigate your website is important, and so is how quickly then can get to where they want to go.

So, if the goal of your web page is to get information across (like brand stories, service offering, special offers, announcements etc.) then focus on the clarity of your message and make it succinct.

Your goal here is to help users focus on the relevant information instead of distracting them.

Avoid sneaky, ignorant or malicious attempts to shift their attention and interrupt their flow.

One definition of sticky content (according to Google Search AI Overview anyway) is “Content that is memorable, useful, and provides a compelling reason for users to come back repeatedly”.

But for those of us who are old enough to remember what it was like doing web content back in the day, it also means content designed to keep someone on a web page for as long as possible.

This sort of sticky content is problematic for usability and accessibility.

Keeping your web content largely text-based with as few “bells and whistles” as possible minimises load times and task time to completion.

Green Hosting – data centres powered by 100% Renewable Energy is the ethical option for choosing which servers your website is hosted on, as well as making your website as low carbon as possible. All of which helps minimise the digital carbon footprint associated with your website.

A good web page content layout design and the elements used on the page should give your readers an engaging and interesting experience, but with informative content and calls to action to complete tasks positioned prominently and front and centre so they are easy to find and follow.

If the purpose of your web page is product information or purchasing, then allow customers to get that information so that they can make an informed purchasing decision. Then, if they do decide to buy, don’t put undue pressure on them to do so.

And really importantly…

Cognitive fluency is how easy or hard it is for our brains to process information. You can make a web page feel familiar, simple, and easy to understand, or not (like when they are too many elements on a web page all competing for your attention).

When information is presented in a clear, organised, and familiar way, we experience high cognitive fluency. This creates a feeling of confidence, comfort, and satisfaction.

Conversely, complex or unfamiliar information requires more mental effort to process and results in low cognitive fluency.

Too many interruptions also deplete a users’ attention span and ability to focus.

Information that is well-structured and easy to follow increases cognitive fluency.

Businesses use cognitive fluency to make their messages more persuasive. Presenting information in a clear, simple, and familiar way can improve customer experience, satisfaction, and loyalty.

Another practical consideration for minimising user session time and time spent on an individual web page is the choice of font that you use.

Choosing user-friendly and accessible fonts is also the ethical thing to do.

Don’t use too many fonts on the same website or web page as this also decreases cognitive fluency.

Basically, users will find it difficult to understand what they’re looking at.

Script fonts (or ones that look “hand-drawn”) are hard to read and interpret. Don’t use them, because they make things harder for your website users and potentially put them off. If they leave your website because they can’t read it they’re unlikely to ever come back.

This applies to all website users, not just those who are dyslexic or visually impaired.

Prioritise usability and accessibility, don’t choose the first font that you like the look of.

If you’re not sure what the best font to use is, Scope has a really good article on accessible font choices.

For example, Scope’s own brand font (called Hargreaves) has multiple accessible design features. Easy to read, it has a larger letter height and generous spacing between each letter. Plus, there’s no ambiguity between letters and numerals, like capital “i” and “I” and “1”s (for example).

User group testing also gives you first-hand feedback on what your users like and find easy to read.

As Scope say, “Mencap developed their [own] custom font FS Me in 2008”.

Called FS Me (MenCAP), it was created by Fontsmith in conjunction with several learning disability groups in the UK.

Also designed for better readability, “FS Me’s main feature is its differing forms and characters”.

But beware of so-called Dyslexia Accessible fonts.

Scope says, “Several designers have made fonts that claim to help people with dyslexia. Either by improving reading speed or general comprehension. Examples include Dyslexie, or Gill Dyslexic”.

However, according to Scope, “there’s not enough research to suggest that they’re any better for people with dyslexia than Helvetica, Arial or Verdana”.

Scope advises choosing “sans serif fonts like Arial, Calibri, Verdana or Tahoma”, because they “are easier to read and less crowded than other typefaces” (Source: Scope – How to write better website content for people with dyslexia).

Scope also mentions the actual font that The British Dyslexia association uses on their website (www.bdadyslexia.org.uk) – which is called Aktiv Grotesk, and used for headings and body text (Source: Scope – Accessible fonts and readability: the basics), so obviously this is a good one for you to use too.

It is worth nothing though that some people that are Dyslexic have reported that the Dyslexie font does help them. Therefore, as the Bnode website is created using a Sans Serif font, we have included the Dyslexie font as an option in our accessibility tool. Once again, putting the control in the users hands.

What else can you do?

Make your website easy to navigate for smart phone and tablet users by having a mobile-friendly version of the site, with a hamburger menu for navigation.

No, we don’t mean the sort of hamburger menus you see in Burger King or Maccy D’s!

A website hamburger menu is an icon, usually with three horizontal lines. That’s why it’s called a hamburger menu, because it looks a bit like one. We think it looks more like a sandwich than a hamburger, but there you go…

The navigation links are hidden until the icon is clicked.

The main purpose of a hamburger menu is to save space, but it also creates a cleaner design – especially on mobile devices with smaller screens.

When clicked, the menu expands to reveal the website’s main navigation options.

Yes, true, this does create extra steps for website users viewing it on a smart phone or tablet, because they’ll have to expand the hamburger menu and choose the page they want to go to. But the pros outweigh the cons as far as hamburger menus and usability and accessibility are concerned.

Make sure that you thoroughly test your mobile-friendly version on Apple and Android phones.

If you haven’t got access to a range of different phones then you can press the F12 key on your keyboard which (in Chrome and Edge) brings up a developers window. From here you can change the page to simulate different devices from a list in the top middle of the screen.

Incorporating AI into web design is becoming increasingly common, but it’s problematic from an ethical standpoint.

Is using AI ethical? It depends on who you ask. Some people would say yes, and some people would say no way.

The ethics of AI centres on ensuring its development and usage aligns with human values and rights, a goal that requires careful consideration of key principles and proactive risk management.

The primary ethical issues surrounding AI involve a balance between its powerful potential and the significant risks of misuse and unintended harm, plus the environmental impact of a proliferation in data centres.