In its essence, design is powerful and can have a huge impact. As designers it is our job to do right by the people our work is for, to consider the individuals above all. In his article ‘A Designer’s Code of Ethics’, Mike Monteiro outlines the various aspects of how our work will ultimately affect people and society. The quality of our design work is a direct outcome of our work ethic.
How do we approach our design work? What are the principles we follow when we create and put our web designs online? Are we merely doing work to pay the bills? Do we care about people? Are we striving to make our work the best it can be, deliver the site's content to everyone equally? ~ These are some of the questions we have to ask ourselves as we publish online content.
Inclusive design is essentially what design should be, in my humble opinion anyway. It means making sure that those who the design has been created for can use it easily and that it will deliver on its promise. If we design a tea pot, the only outcome has to be that the container can carry the hot liquid inside, is easy to handle and will allow the tea to be poured without spilling. The added bonus will be if it is aesthetically pleasing, nice to the touch and a pleasure to use.
If we consider then what inclusive web design is, the conclusion must be that it is design for the web that has to be accessible: accessible inclusively to all people, accessible in turn to their chosen devices as well as apps and accessible on connections of varying speeds. We should aim to design our sites with refined typesetting, clear layouts and easy-to-use interfaces to ensure access for all.
The beauty of design work is that there is always an objective, always a target group and a mission. It is work that is people-orientated ~ both when it comes to the work itself via the team work and collaboration involved, and importantly the measure of its success on the feedback from the people it has been created for.
Inclusive design means...
... user-centred design.
The most successful web designs are the ones which focus on a user-centred approach. This view will guide the entire design process, from brain storming to the final decision making. People are directly involved in all aspects to give input, feedback and constructive criticism. As designers, we will listen and learn from reactions to and interaction with our work.
We might think that we have come up with the ideal design solution, a clever and unique angle to a design. And this might be the case ~ or not. Without user testing, asking for direct feedback and input from people, we cannot know. Our view would remain purely subjective, lack substance and could be entirely wrong. The objective judgement of the end user, the people who will use our design, is what is required to make sure that our designs deliver.
User-centred design is based on the understanding of the target group specifically, their needs and demands, their priorities, and their individual experiences. It will encourage empathy and understanding during all stages of the project in hand. The work follows an iterative approach: designs are tested and reviewed, refined and iterated, and improved based on direct feedback, insights, reactions and input. User-centred design may use empirical data and evidence gathered through user research[1] and usability testing[2] to inform design decisions.
... accessibility for all.
A good website will be design for everyone, regardless of their abilities or their choice of device or software. Creating an accessible site starts with good content which is well structured, clearly written and presented. The design will ensure that colour contrast is sufficient for a good reading experience for all, including those with low vision. The layout will establish a clear visual hierarchy to aid skim reading and navigation. Any media included will offer alternatives which can be accessed by those unable to view or hear it. The code itself will ensure that assistive technologies, such as screen readers for example, will be able to access the content easily.
The web's original mission was to be for everyone, to be a medium that offers freedom of speech, freedom to publish to a wide audience and the freedom to access information easily. So when we publish online, it is our aim to respect this mission ~ to be inclusive in our approach and consider the individuals who access the content we present. Legally, sites for the general public are obliged to follow the guidelines of the W3C [3] which specifies certain requirements to ensure that disabled people will be granted the same access as everyone. Ethically speaking however, as designers we should do the same regardless.
... a good user experience.
User experience takes the user-centred approach and accessibility one step further to focus on the overall experience that someone has while interacting with our website. It includes all aspects of interaction, including visual design, ease of use, interactivity, and the overall satisfaction and effectiveness of the design. Our sites should be intuitive, user-friendly, and enjoyable to use. It involves understanding the needs, goals, and preferences of our users and designing the website in a way that meets those needs effectively.
A good user experience means accessible design and code and a website with intuitive and easy-to-use navigation, well-structured content, and straightforward interactions with effective feedback. All means of access are considered as well as tested, building on the results of user research, studies of the user journey and usability testing.
footnotes
‘User research’ in web design is a systematic and investigative approach to understanding the users of a website. It involves various methods and techniques to collect qualitative and quantitative data about the users and their interactions with the web interface. It is the study of user behaviours, needs, motivations, preferences, and goals to inform the design decisions and create user-centered experiences. ↵
‘Usability testing’ involves observing real users as they interact with the interface and collecting feedback to identify any issues and areas for improvement. It typically involves defining specific scenarios and tasks to simulate realistic user interactions and to provide insights into how well the design supports those tasks.↵
The World Wide Web Consortium (W3C) is an international community who work together to develop Web standards and publish the Web Content Accessibility Guidelines (WCAG). ↵
the web publisher's point of view
Content planning, production and strategy are of course not part of a designer's job per se. However, we are part of the web team overall and it is important that we understand the nature of the content we are to design for. Without good content, inclusive design is not possible. Without content to work with right from the start, we would not be doing design work but merely be experimenting with possible scenarios, creating empty shells.
Content precedes design. Design in the absence of content is not design, it's decoration.
This quote really does hit the nail on the head. If we use placeholder text we are working without the context or real purpose as any visual aspect would be created in a vacuum that is yet to be filled. This means our design might, or might not, work at all. This is the reason for the 'content out' method ~ why it is the only approach that will be effective. Only when we work with the actual content itself can we create designs that will be fitting and true to purpose.
It is likely that we will at least work on one website for which we will produce our own content, our portfolio site. Let's switch mind set for a moment and consider what actually makes good content. This will allow us to learn about some general aspects that will both help us for our own site, as well as allowing us to advise our clients.
why good content matters
We're all individuals with our own tastes and preferences but when it comes to what we expect from a website, it all comes down to pretty much the same thing: good content. A website with a bare and minimal design might not deliver much eye candy but if the content is top quality, we will enjoy the reading and viewing and come back for more. To get this right as web publishers, we should look first to produce good text and accompanying media and then how to present it well on the page.
As content producers and publishers, we have to consider the factors affecting the site visitor's experience when viewing our publications. These include the device/browser used, the connection and the access and presentation of content within the overall site. At the core of it is the text in all its forms: the main article with its sub-/headings, lists, quotes and paragraphs as well as the microcopy, i.e. the phrasing of menu links and prompts.
as site visitors: what we want
near-instant results on any search
what happens: we perform a web search, click on the most
suitable-sounding link and expect to find what we searched for
= if not – skim page or leave
quick & easy access to what we are looking for
what happens: on page load, we hastily skim the content,
searching for the quickest way to our point of interest.
= if none found – abandon site
scannable text / easy skim reading
what happens: we read headlines, parts of the first paragraph,
scroll and continue skimming.
= if not clear – go elsewhere
accurate and up-to-date content
what happens: we seem to find what we were looking for and
will be expecting recent publishing dates.
= if too old – consider something else/newer
clear referencing of information
what happens: we arrive via a search on the page, check for
details on author/creator and date for authenticity.
= if not found – return to initial search
Instead of taking our time, we tend to access web content in a
rush. Always skimming the overall page and looking for the next
hook to lead us to the sought-for information. Good content, when
presented well, will answer our questions, allow us to get to the
goods quickly and easily which in turn will result in a good user
experience.
as content publishers: what we can do
publish regularly and only high quality content
ongoing production of new content + keep content and setup
updated + use effective SEO techniques to boost findability
! produce/publish good content regularly
accessible menu and search function
succinct phrasing + clear signposting + effective layout/hierarchy of all content
! focus on clear IA and inclusive design
good web copy and typesetting
well-written text + fitting choice of typeface/s + clear hierarchy via sub-/headings + good use of white space
! write for people, present clearly
set effective update cycle for new content
put together an achievable publishing schedule for updates to
site + ensure clear dating of new content
! publish/update site regularly
include expected details and references
ensure site inc. all content are clearly credited + include
dates and details for authenticity
! include credit and context
We can do a lot to make sure that our site does deliver well. This
starts with the content itself, the core importance being on the
text. Only with good content in hand can we consider the other
aspects, like the ease of access and presentation on the webpage.
Quality content can have its impact when we format and present it
well.
In his book ‘Don't make me think!‘[1],
Steve Krug concludes clearly how
a poorly planned and implemented design will affect site visitors'
attention and results in more time and mental energy spent. When we
publish online, our focus has to be ease of access to the sought-for
content.
We are then confronted with the actual scenario - how we might design with thorough planning and best of intentions, only to find that our site visitors are not at all doing what we expected. Therefore, we have to consider carefully our own online behaviour, and more importantly, that of our site visitors.
‘Don't make me think!‘, originally published in 1999, now in its 4th edition, has long been and is still considered a must-read for anyone working on the web. Whether you're publishing or designing the websites, this little book will make you aware of what's matters most: good and easy-to-access content.
Highly recommended reading!
how to create good content
produce, revise, iterate
Our content production will follow the overall project planning and stay true to the goal of the site. This means finding the right tone of voice for textual elements, producing fitting supplementary content and creating an effective design for type and layout.
As soon as practically feasible, we will reach out to people from within our target group, ask them to view and read our content and request their input and feedback. Publishing online means we are starting a conversation ~ the earlier you get people involved, the better the end result will be. This user-centred approach will be the foundation of our inclusive design going forward.
While there is no formula for effective web copy, the suggested inverted pyramid approach, as given by the ONS[2] is a good starting point generally.
the inverted pyramid
Overall, good content is…
user-centred
clear
concise
appropriate
consistent
useful
easy to understand, view and read
The following notes on how to write effective copy for the web is merely scratching the surface, of course. Becoming a professional writer requires much practice and goes much, much deeper than these brief lists of pointers. The aim is merely to offer advice to novice writers, highlight important aspects in writing and publishing text online, prevent common mistakes and share some tips of what works.
write for people
finding the right tone of voice
Reading online is part of a connection, a conversation between the producer/creator and the intended audience. To be successful, it is important that we write for our target group to stir their interest and foster engagement.
Tip for most written pieces published online:
Ensure that the first paragraph establishes the tone of voice and introduces / summarises the text in hand, giving it its context. This benefits both the site visitor as well as the search engines and is considered best practice.
effective headlines & sub-/headings
From the days of the arrival the printed word, headlines are written to draw people in. The headings and subheadings online serve the additional purpose of adding hierarchy to the page and making skim reading easy. Time is well spent on refining the exact wording or making a specific addition to the text in form of sub/headings (if not already in place).
clear and succinct phrasing is best
aim for clear and easy-to-read wording; this will make text both easy to skim read and accessible as well as being effective for SEO.
keep to a low word count
no more than 4-5 words, but never more than 7-8; headlines
should be quick to read and act as signposts throughout the page.
be expressive
use calls to action, a question or prompt to peak your site
visitor's interest; make people curious and keen to find out
more.
be consistent & clear
headings should stand on their own and remain meaningful and
consistent in tone; phrasing to be in keeping with the overall
language used, including context-specific words.
Nice-to-read sentences
A general rule of thumb is to write text that can be read and
superficially understood by a 7-10 year old. This might sound
wrong, and does not apply to all written text online, of course,
but it works very well. By keeping sentences short, reading is
easier and quicker, resulting in more time spent on the site. Text becomes accessible to a wider audience.
start with context
generally, the first paragraph is the most likely to be read in full; expectation is an introduction or summary which clearly states the context of the subsequent content.
write in an active style
whichever tone of voice our site will use, we write our text
with the aim of talking to our target group, to establish a
connection.
cut unnecessary words
generally, the fewer words we can use to express our point,
the better. Aim for clarity rather than needless elaboration.
favour short sentences over long
keep phrasing clear and succinct. Split long sentences to make text easier to read and understand.
use paragraphs to structure text
clear paragraphs which are succinct and not too long will aid legibility and create a more pleasant reading experience.
use lists if fitting
lists are great alternatives to content when fitting context,
easy to overview and read ~ allowing quick access to info and creating a slight change in the rhythm of reading.
proof read. proof read again. + once more.
one of the most damaging aspects to the quality of our content are errors - spelling, grammar and punctuation mistakes. And it is not easy to proof read our own writing - best to find some helpers for extra eyes on our text. High quality content does mean error-free text.
formatting text
Typesetting and layout will greatly contribute to the reading
experience. Formatting text well will make it accessible, easy to
skim and read. Poor formatting, such as text set to the same size,
lacking spacing, will appear like a wall of letters. This will be
much harder and more laborious to read for all, causing major
issues for others, those with dyslexia, for example. Adding
appropriate paragraphs with clear margins and using headings and
media will give the content structure and hierarchy and will
result in a better reading experience for all.
What to do.
Do ensure legibility of all text.
The most important aspect of typesetting is legibility for
all. This means ignoring subjective preferences and setting
typesize to a comfortably large size, set appropriate line height and ensuring that the contrast between text and background colour is sufficient.
Do use sub-/headings to add hierarchy.
Text, especially if long-form, should be presented with a clear structure on the webpage. It will benefit from featuring a clear hierarchy to encourage skim reading and offer meaningful markers throughout the page. These can be set
as in-page links as fitting.
Do use paragraph and lists to add structure.
Text formatting should complement the content and use good spacing for a clear layout of text. Using varied options, e.g.
quotes set as pullquotes within the page, will result in an engaging layout and a better reading experience. Paragraphs and lists will break the text into easy-to-read ‘chunks’, aiding skimming of the page.
Do ensure consistency.
Consistency of both text (phrasing/tone) and design (format/layout) across all page will be essential for good accessibility, good user experience as well as branding and promotion. Ensuring that established typefaces, colours and layouts become a pattern across all pages of a website will create familiarity during browsing and smooth interactions thoughout.
Do experiment with layout.
Layout and text formatting should be creative and engaging the site visitor in keeping with the site's mission. This can be done by adding different format options, intersecting text with appropriate media (images/video) and allowing plenty of white space between elements. Original and unique approaches can be effective, as long as legibility remains the core focus.
What not to do.
Do not set single-sentence
paragraphs.
For a good reading experience, it is important to consider the
flow of text, rather than aim to 'chunk' text into small
portions. Studies show that paragraphs which contain only a
single sentence slow down reading and result in a choppy and
more tiring experience.
Do not set text to all uppercase.
Words set in all capitals are more difficult to read as their
'shape' is no longer as unique as the standard setting. We
tend to recognise words quicker than we read them when they
are set this way. All uppercase will slow down reading, making
it less accessible as well - and is often seen as 'too loud'.
Do not underline text that is not a
link.
It is a common assumption that underlined text online is
understood as a link. Adding a line below text, like a
heading, is not the same as adding the underline to text, e.g.
within a paragraph. Be aware of common patterns and work with
them.
Do not centre-align paragraphs.
This might look aesthetically pleasing to the eye on first
glance. However, reading more than 2-3 lines of centre-aligned
text will demand a lot more concentration and mental energy.
It causes the reader to have look for the start of the line
each time as the lines do not start at the same horizontal
point. Left aligned text is much easier to read as our
eyes will just go on autopilot to find the start of the new
line as it will be near the previous line's starting point.
Do not succumb to poor type
choices.
Be very careful with script fonts, fonts which aim to imitate
handwriting and fonts with a primarily italic or ornamental
style. You might like them, find them easy to read - but not
everyone will. If your script font is merely to highlight
small text elements, then this can work. But avoid setting
the main copy to anything fancy and stick to a clearly legible
font instead.
footnotes
‘Don't make me think!‘ is considered a must-read book for anyone working on the web. One of the most quoted books to read for anyone looking to get into UX - highly recommended!↵
ONS is the office for national statistics. The inverted triangle method is part of their guide to writing about statistics: style.ons↵
Design for UX & accessibility
While user experience and accessibility are two different topics when it comes to the work involved, there is a strong connection between them - one that is worth considering. The intrinsically linked nature of both will allow us to keep our design process user-centred and aim for the most inclusive final result as possible.
By understanding that an accessible design is a good foundation for a good user experience we will be able to approach our projects from the right angle. Using the ‘content out’ approach in combination with working with user personas we can make sure that our design work will include the most important aspects: to deliver a user-friendly website, one that will be accessible as well as a pleasure to use.
Effective inclusive UX design:
focus on your users.
study & learn from their behaviour.
listen & observe | review | iterate | repeat
consistency is key.
establish your approach and stick to it, across all aspects:
content | copy | design | interaction
provide alternatives to all media.
content | copy | design | interaction
offer a positive experience.
quality of content | tone of language | delight to use/access
design for inclusion
Good design is thorough down to the last detail.
Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.
Our project planning starts with the content. To ensure that our final site will be accessible to all we have to prepare alternatives to all non-textual content. This means that audio and video media requires captions and transcripts, for example. This is both part of the content production and then has to be incorporated into the design as well.
physical
Ensure access to functions via keyboard - test by using tab key to navigate site
sensory
Provide captions/transcripts for visual/audio content - provide text alternatives for images
cognitive
Add alternative versions of content - use visuals/icons and text in combination
Inclusive Design Principles
These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.
Provide comparable experience
Ensure your interface provides a comparable experience for all so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
Consider situation
People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.
Be consistent
Use familiar conventions and apply them consistently.
Give control
Ensure people are in control. People should be able to access and interact with content in their preferred way.
Offer choice
Consider providing different ways for people to complete tasks, especially those that are complex or non standard.
Prioritise content
Help users focus on core tasks, features, and information by prioritising them within the content and layout.
Add value
Consider the value of features and how they improve the experience for different users.
Léonie demos her screen reader
Smashing Magazine published a brilliant article, titled
How A Screen Reader User Accesses The Web: A Smashing Video
– in which Bruce Lawson introduces a
webinar with Léonie Watson. It shows
recordings of Léonie using a screenreader to access the web – an
excellent demo with insights not only from a blind user but one with
special expertise in dev and accessibility. Make sure to watch in
its entirety!
Try keyboard only
To understand how someone with accessibility needs views a website, I'd highly recommend that you try this out yourself. Put your mouse away and try to manage with only keyboard navigation. Set up a screenreader and try out its function to see how well you'd manage to navigate the webpage. I found this to be a humbling experiment which highlighted the necessity of good accessibility of content.
design for delight
Continuing our user-centred approach we will then build onto the foundation of accessibility ~ working towards a good user experience. How much we can do, or how deep we can delve into the UX design might depend on the size of the project (both in terms of timeframe and budget). However, we will be able to do much even on smaller projects and with small teams, or even if we're doing the project only by ourselves.
A good user experiences is really the result of a user-centred approach, of involving people as soon as possible in the design process. In the early stages of our career, taking on smaller projects on a freelance basis, for example, we might the designer as well as the developer. In that case, we can make sure that our client is involved in all aspects directly from the start. This will begin with planning, content strategy, and cover the content structure and ultimately the design. Involving the target group as soon as practical and possible and continuing this collaboration until project completion will ensure a good end result.
If the project and the web team involved is larger, with more time and budget in hand, then the exploration of the user journey, the personas and their specific expectations, needs and goals can be explored in much more depth, of course.
Design for real life
When we work on our designs and build our sites it is all too easy to imagine a typical scenario, to think of a calm situation when our site user is viewing our site with time to spare and without too much distraction. It is important however not to make any assumptions, to imagine the less common moments and locations.
‘Design for real life‘, written by Eric Meyer and Sara Wachter-Boettcher and published by ‘A Book Apart‘, is a must-read for anyone working on the web. This book looks at the concept of compassionate design and highlights the importance of considering the diverse range of users and their real-life experiences. The book offers insights and practical strategies for creating more inclusive and empathetic designs.
‘Designing for crisis‘ preceded the book. It is a talk Eric gave in 2015 and it is one of the most moving and insightful conference talks - one which everyone working in web should watch. This very personal experience, shared by one of the brightest minds in our industry, painfully illustrates how our designs and builds will fail in real life scenarios unless we consider our users mindfully.
It’s easy to design for the idealized user, someone who’s smart, calm, and informed. It’s less easy, and thus more important, to design for a more realistic user: still smart, but harried and uncertain. The best designs handle both with care. But how many designs can help a user who is completely in the dark and barely capable of rational thought?
In this passionate presentation captured live at An Event Apart Austin, AEA cofounder Eric A. Meyer draws on his personal and professional experience to explore examples of crisis-mitigating design successes and failures. In the process, he illustrates ways that you can *and should* consider the needs of users teetering on the edge of panic. Helping them will make your designs more relevant and useful for *all* your users.
Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards.
Author of “Eric Meyer on CSS” and “More Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and “CSS Web Site Design” (Peachpit) as well as numerous articles for the O’Reilly Network, Web Techniques, Web Review, and A List Apart, Eric also created the classic CSS Browser Compatibility Charts (a.k.a. “The Mastergrid”) and coordinated the authoring and creation of the W3C’s first official CSS Test Suite.
In 2006, Eric was inducted into the International Academy of Digital Arts and Sciences for “international recognition on the topics of HTML and CSS” and helping to “inform excellence and efficiency on the Web.”
uk.authenticjobs.com, (no longer online)
view US version: authenticjobs.com
One phrase that is commonly used to describe what makes a design successful and effective is: “good design is invisible”. This expresses that if something is easy to use and does not interfere with the action it is designed for, then the design itself delivers well. If we think of a door handle, for example ~ we will not consciously take notice of it but simply use it. Only if we struggle to open the door would we pay attention as a result of the door handle being awkward or difficult to use.
The better the design, the more invisible it becomes.
What makes a design visible is the frustration it brings.
Great designs should be experienced and not seen.
This definitely applies to user interface (abbreviated: UI) design. If no one notices our site menu and happily browses the site, our design works as intended. We will have achieved our goal of a user-friendly and accessible navigation.
Like a key to open a lock, our interfaces will be designed to ‘unlock’ the site and its functions. Our UI design has to give easy access to the content without bothering the user with the complexities which might lie beneath ツ
Before we fall into the usual pattern of doing what’s popular – it will serve us well to consider all aspects of the interface to be designed — and once in testing, ask the right question to review the proposed design.
who / what / how
user-centred planning:
who will be using our interface?
– our target groupWe have to focus on the fact that it is not us, or even our clients, but the end user who is to guide the approach to interface.
what is their motivation and goal?
– user journeyWe need to understand whether our interface is purely navigational or includes features with more involved functions (like sign-ups etc).
how will they be accessing it?
– device / connection / appPlan well to avoid complications during testing. Test early and frequently.
asking the right questions
usability testing & observing:
how easy is it to complete the task in hand?Do our users navigate with ease?Or pause and hesitate?
how efficient is the process?Do our users complete the task smoothly?Or does the involved process take too long?
how well are confirmations/errors handled?Do our users understand and navigate errors easily?Or is the error handling likely to prompt our users to abandon the process?
is using your interface a pleasure or pain?Are you users happy when using your interface? Or do they frown and feel frustrated?
learning by observation
The more we observe interfaces, study their details and the way interactions are designed, the more we will understand and learn. Here are two websites created to test our attention to detail and point towards.
Can't Unsee is a tutorial/quiz that challenges you to find the details that are wrong via comparison of two given images. Great fun to play ~ you can learn a lot and train your eye ツ
User Inyerface is a ‘worst-practice UI experiment’ that will drive you mad... a demo of how infuriating poor text prompts, badly designed interaction and colour can be.
effective menu design
Part of an inclusive design is of course the menu itself. It is the gateway into our site and its content and has to be easy to use, accessible and work well across devices.
Any UI design is informed by various factors. Starting with the content itself which will be produced and collected in context and designed to deliver well for the target group. The content structure, the AI of our site will be the foundation upon which our interfaces will be designed and built. Thorough planning of both the organisation of content, the labelling and naming of site sections (and in turn menu links) will be essential, both for usability and accessibility as well as branding. Only once we have a clear site plan can we begin the design and development of the site's menu.
tips for effective menus
visual
menu presentation
Distinctive presentation within the page for easy recognition of the navigation is vital. This can follow common patterns or be different in approach but the core priority lies with making sure that the menu stands out and is easy to recognise and access.
link phrasing
Menu links should clearly express their destination. The should use simple and short terms which are easy to read and understand.
typesetting
The typesetting of the links should be consistent with the overall design and tie in well. We have to make sure to set a comfortable size of text for legibility and accessibility.
clear visual feedback
The links have to give an obvious visual indication on interaction to make navigation easy. A change of text or background colour can be sufficient if the difference is obvious and clear to see.
technical
menu markup
Site navigation should be marked up with the <nav> tag to ensure semantic code and accessibility. This tag will be recognised by assistive technologies such as screen readers and will make access to links easy.
link styling
All links (across content and menu) have to define styling for all 5 states: a:link, a:visited, a:hover, a:active and a:focus. For an effective menu link, this means ensuring that the link will respond well to interaction, be that with the cursor, a screenreader or a tap on mobile. The active area therefore needs to be well defined. One way to achieve this is by setting the links to display: block; in CSS and adding a small amount of padding.
importance of a:focus
People who use the tab key to navigate the web rely on a clear visual highlight of the link. The a:focus state of the link is of particular importance for accessibility and has to be considered carefully.
Toggle it!
CSS-only menu toggle for small screens
This tutorial walks through the set up of a mobile first menu, featuring a simple toggle for mobile as common practise, and adding sprite roll-overs for larger viewports. It keeps things simple with only 3 links and is intended to give you a step-by-step process to design an effective menu.
On small viewports (such as mobiles), the toggle is shown to allow easy access to the menu links. Once the viewport is large enough to accommodate the menu horizontally, the toggle is hidden and the full menu shown. As a recap, the first part will set up image sprites as a visual enhancement to the links.
In this first part, we will create a menu that will show a simple, vertical list of plain links for mobile.We then adapt the menu display to a horizontal presentation of links which will include the sprite images for hover.
step 1: the sprite visual
Our menu consists of 3 links, we'll name with the numbers of the 3 steps involved for demo purpose. Let's create a sprite visual which will brighten up those 3 numbered links with a little visual touch. Our links will feature the simple number in a circle as default (1), and change the visual for hover (2) as well as on focus (3). The graphic here is quite busy and quirky ~ feel free to adapt this to whatever visual you prefer ツ
Open a new vector file, considering the amount and size of individual icons to include; or download this .zip archive with files including the grid and visual basics to work with.
screenshot of included file in Adobe Illustrator
screenshot of included file in Affinity Designer
The file measure 3 times the 512px square, i.e. we have an overall size of 1536px x 1536px. This is probably a little large for your average UI icon :D but we might want to use this particular visual for more...
We'll create a grid of 3x3 squares of 512px x 512px and add the number in the centre of each, aligning it within our given layout. Our file might look similar to the screenshot of the sample file.
NOTE: the sample files include 2 artboards: one for the sprite and one for working on the graphics, called 'WIP'. When saving our sprite image for web, we'll need to make sure to export only the one artboard.
alignment
For the perfect fit, we'll keep an eye on our guides, ensuring that our icon with all its details will fit our planned proportions. For menu links especially, we have to aim for consistency and clarity.
Our links will change colour of the number, will show the graphic in addition and for a bold focus state, the circle will be full colour with white text colour.
While editing our visuals, we'll keep a keen eye on our grid to ensure the correct alignment for each visual! Zoom in+out / outline+preview
NOTE: while working on the finer details - we can add the sprite image to our links to preview early (see Step 3 for the code of this menu). At this point, it can be useful to keep the layer with the grid visible on export. This will help refine the alignments and we can tweak your CSS until it looks right. Then export the clean file (hiding all guides), ready for use on the site ~ easy :)
optimise & optimise some more.
For the best results, we will make sure to edit our vectors, clean with few points is best — and save in various formats. Optimise the final file for weight, compressing PNGs and cleaning SVG code. The final step will be the same regardless of file format.
step 2: the menu setup
Ready to get the sprite set up and working. Add a typical navigation to your HTML page - or download these sample files which are a stripped-down version of this tutorial without the sprite image applied.
We start with the mobile menu, setting type, colour and a transition for the background colour only. While our plan is to use the sprite rollovers, they are a little too large for the small screen. We keep in mind that we will add those later and set the transition for the background colour for mobile, and change this for the larger screens as needed.
nav {
margin: 0 0 3em 0;
background: #005e6d;
}
nav li a:link, nav li a:visited {
display: block;
padding-left: 6vw;
/* link text */
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-align: left;
text-transform: uppercase;
/* background colour */
background-color: transparent;
transition: background-color .2s ease-in-out;
}
nav li a:hover, nav li a:active, nav li a:focus {
color: #3ac0c9;
background-color: #000;
}
This completes the design for the mobile menu itself ~ a colour block with the list of links. We can now use media queries to implement our sprite rollovers when the viewport is large enough to support the horizontal menu.
step 3: adding the sprite
We'll now tweak size and appearance of the links to accommodate our graphics. By default, the links are the size of their content. Now, the space needed will be larger as the visuals are added as background image via CSS.
menu for larger viewports
We'll introduce the sprite rollovers at a breakpoint of 520px and make changes to the links for interaction. As the visual change on interaction will now be the sprite graphic (located in a folder called 'vis'), we change the transition to affect text colour only and remove the background colour.
@media (min-width: 520px) {
nav ul {
width: 100%;
max-width: 40em;
margin: 0 auto;
text-align: center;
}
nav ul li {
display: inline;
}
/* link styling */
nav li a:link, nav li a:visited {
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
/* sizing for sprite */
width: 128px;
height: 128px;
margin: 0 auto;
/* SVG fallback */
background-image: url(vis/sprite-3step.png);
/* SVG */
background-image: url(vis/sprite-3step.svg);
background-repeat: no-repeat;
background-size: 384px;
/* change transition */
transition: color;
}
nav li a:hover, nav li a:active, nav li a:focus {
/* remove background colour */
background-color: transparent;
color: #50b5cb;
}
}
NOTE: while CSS shorthand should be used where possible, this scenario will yield better results if you declare the rules separately.
background-size: 384px;
= 3 times the size of our planned display size for the graphic, for the menu links this is 128px squared.
We now have applied our sprite as background image, and the links now all show the top left image of our sprite visual. This default is left in and will be set for each link individually.
Complete setup, inc roll-overs
Now to the number juggling... yikes.. :-P Next and final step will be to control the precise positioning of the large 3x3 square image file, revealing each square as required.
NOTE: The following code is to be added to the CSS into the same media query for the rules which adapt the menu to a horizontal layout, and below the given link styling.
/* sprite graphic positioning *//* step 1 link */
nav li:first-child a:link, nav li:first-child a:visited {
background-position: 0 0;
}
nav li:first-child a:hover {
background-position: 0 -128px;
}
nav li:first-child a:active, nav li:first-child a:focus {
background-position: 0 -256px;
}
/* step 2 link */
nav li:nth-child(2) a:link, nav li:nth-child(2) a:visited {
background-position: -128px 0;
}
nav li:nth-child(2) a:hover {
background-position: -128px -128px;
}
nav li:nth-child(2) a:active, nav li:nth-child(2) a:focus {
background-position: -128px -256px;
}
/* step 3 link */
nav li:last-child a:link, nav li:last-child a:visited {
background-position: -256px 0;
}
nav li:last-child a:hover {
background-position: -256px -128px;
}
nav li:last-child a:active, nav li:last-child a:focus {
background-position: -256px -256px;
}
Our menu setup is now complete, showing a simple list of links for mobile only and the enhanced styling with sprites for larger viewports. For the latter, our links now show their respective numbers via a horizontal shift (to the left via negative values). On hover and focus states, the graphic keeps its horizontal value and is shifted vertically (upwards via negative values) to show the different visual on hover or click/tap.
And let's say we wanted to feature these numbers more than once... easy peasy now. To add the graphic before headings at a smaller size, as done for these tutorial steps, we can just adjust the size and alignment, sorted! ツ
The icon for our menu toggle is the typical 3 lined icon (hamburger) with the addition of the word 'menu'. It will change to a cross once clicked. Do bear in mind that though you might think everyone understands what those 3 lines mean - it will be clearer and much more accessible to add text alongside it.
step 1: adding the toggle
The toggle is set up using a checkbox which will give us two states: checked (to show the menu) and unchecked (to hide the menu). We hide the actual input and add an additional element to ensure a clear :focus state.
NOTE: the important detail here is to ensure that this is a properly formed form element, consisting of 2 parts, the input itself (checkbox) and a label. Make sure that the ID and the for values are the same ~ this is required to link the two and make our toggle work.
The checkbox is now added to our menu - we'll nest it inside the <nav> tag, before the menu list. We can then use the adjacent sibling selector to show and hide the list. The full menu code now looks like this:
At this point, the checkbox will be visible next to its 'menu' label.
We will keep the label text as prompt for clarity, adding the toggle icon in front of it and hide the checkbox itself in the next steps.
step 2: styling the toggle
Next up is our toggle setup. The following code is added to the mobile menu's CSS. We won't need to show the checkbox itself as we'll be using the label alone as trigger. The ID #menu-toggle is applied to the input and used to hide the checkbox. The class .toggle is applied to the label and will be the trigger of the toggle. We'll style the text and positioning and in addition, we need to make sure to add the correct cursor to the active states to give visual feedback.
We could have hidden the input via display: none;. However, this would be detrimental to accessibility as it will remove the input from the DOM. To ensure the input remains accessible, we are using opacity: 0; instead and add position: absolute; to prevent interference with the layout of our visible elements.
As the hidden input has no visual feedback (vital for those using the tab key to navigate), we will add an extra element to highlight the toggle when in focus if navigated to via keyboard. While our method assumes that the toggle will only be required on mobile (where tab key navigation does not apply), we should not rely on our assumptions and ensure that the toggle will remain accessible on smaller viewports for all.
The new addition allows us to highlight the menu when in focus. This usually means adding a clear visual highlight to the element that is accessed via the tab key. This could be a frame or a distinctly obvious border as clear indicator of the focus state. Once in focus, hitting the spacebar will then activate the link ~ in our case, open the menu.
activating the toggle function
The showing and hiding of the menu is very simple: we'll hide the list by default via the adjacent sibling selector [check out the links under 'learn coding' for more], i.e. on page load the checkbox is unchecked and we set the list to be hidden. Once clicked, set via :checked, we'll set the list to be displayed ~ easy peasy :)
/* show/hide menu */
input[type="checkbox"]#menu-toggle + label.toggle + ul {
display: none;
}
input[type="checkbox"]#menu-toggle:checked + label.toggle + ul {
display: block;
}
NOTE: we added the ID and class to the input and label elements to allow us to target only those specific elements alone and avoid any of our rules to be applied to other form elements. Strictly speaking, we could merely use the ID and class for styling. The CSS therefore does not need to include the input[type="checkbox"] or label as selectors. They are included here as they help in understanding which elements our CSS rules apply to.
hiding the toggle for larger viewports
To complete the toggle setup, we'll now add to the media query which is already in place and to hide the toggle for larger viewports. We will show the menu, i.e. the ul but hide the toggle, i.e. the label - for both checked and unchecked states of the input. As there will be no need for the toggle once the horizontal menu is in place, we can use the display: none; in this instance as it will merely remove the now unnecessary element. The media query is included here for clarity only, the code itself should merely be added to the existing CSS.
Now we have a working toggle which only displays on smaller and is hidden on larger viewports. The alignment is yet to be completed. As final step, we will add the toggle icon and finalise the presentation of the toggle within the menu.
step 3: adding the toggle icon
As our final step, we will now use code to add the 3 lines and change their position and visibility to indicate the open toggle and close function.
We'll now add 3 empty <span> tags with different classes inside the <label> and enclose the text in a <strong> tag for positioning. Keeping the icon inside the <label> will mean that it will be hidden for the larger screens as set up already.
We'll position the text to the right of the visual and set its own colour for hover. Next we'll create lines by setting width, height and background colour as well as setting margins for spacing and positioning of the lines.
To keep our CSS light, we are using the attribute wildcard selector [check out the links under 'learn coding' for more] here which allows us to target all span tags with a class containing line- at once for the main settings, then refer to the individual classes for the :checked state only.
To change the 3 lines to the 'x' - we'll rotate the top and bottom lines, hiding the middle one. To get the desired effect for the rotation, the transform origin is shifted for the bottom line.
And we're done ツ
Hopefully you managed to complete the page yourself ~ and if not, have a look at the demo. One extra element in the demo and not covered in the tutorial is the addition of the number icons before the subheadings ~ a little challenge for you to figure out yourself ツ
Design a login
Your brief is to design a single login form, including all possible details.
The aim is to make you focus on which details would be required to make the login user-friendly and easy. In a real life scenario, the context would of course dictate much of the requirements. This practice project is intended to allow you to focus on the small details alone, making you aware of what can make a simple form nice to use.
Consider all aspects involved in a login form: the text prompts, the positioning and layout of the form fields and their labels. Draw out a mini user journey to ensure that you cover all scenarios. Take time to explore the different methods of layout for all form elements and consider the effect on the usability and accessibility.
Objectives:
sketch out the steps involved in the login process, include the full process and different situations.
design alternative presentations of the labels and notification messages; include confirmations as well as error messages.
implement at least the 2 different form designs for comparison.
Learn accessibility
When we markup our content with HTML, our webpages are accessible by default. The aim is to ensure that all content remains accessible to everyone, their browsers and devices. This is something we should consider as soon as we build our pages. MDN has a section which will explain and elaborate and show us how we can understand how to improve the accessibility of our site. read: Accessibility — Make the web usable by everyone
CSS selectors
Find out more on the selectors used in the 'Toggle it!' tutorial (under 'site navigation'):
Forms may seem quite simple and straight forward. We use them all the time without much thinking. However, both the design and the underlying code will need to be carefully crafted to not only function well but also be accessible and user-friendly.
For the Toggle it! tutorial, the menu toggle's focus highlight has been set up with :focus-visible. Usually, especially in the case of form fields and buttons, we would use :focus alone which will show the highlight whichever way the user interacts with the element. In our case, there is no need for the visual highlight via the cursor and so we are only triggering the highlight if the tab key accesses the toggle.
screenshot of included file in Affinity Designer
Our links will change colour of the number, will show the graphic in addition and for a bold focus state, the circle will be full colour with white text colour.
Forms may seem quite simple and straight forward. We use them all the time without much thinking. However, both the design and the underlying code will need to be carefully crafted to not only function well but also be accessible and user-friendly.