Two users, one website
Aisha has a new laptop and fast home internet. Her grandfather has an old phone, a slow mobile signal and poor eyesight.
You build one website. It must work for both of them.
Good developers ask questions about the users before they design. Today you learn which questions to ask.
Key words
| Word | What it means | Example |
|---|---|---|
| Browser support | Which web browsers your page works in. | Chrome, Safari, Firefox, Edge |
| Target device | The kind of device you design for. | a phone or a laptop |
| Responsive layout | A layout that changes to fit the screen size. | |
| Media query | A CSS rule that applies only on some screen sizes. | |
| Bandwidth | How much data a connection can carry each second. | |
| Contrast | How different the colour of the text is from the colour behind it. Strong contrast is easy to read. | |
| Branding | The colours, logo and style that make a company known. | |
| Accessibility | Making a product usable by people with many different needs. | |
| Screen reader | Software that reads the screen aloud for blind users. | |
| Alt text | A short text that describes a picture, for a screen reader. |
The cells students fill in are left blank in this preview.
Seven design questions
| Question | Ask | Example decision |
|---|---|---|
| Browser support | Which browsers do users have? | Test in the 3 most used browsers |
| Target device | Phone, tablet, laptop or a mix? | Phone first, then bigger screens |
| User characteristics | Age, skills, language, needs? | Big text and simple words for older users |
| Available bandwidth | Is the connection slow or costly? | Small pictures, no auto-playing video |
| Style and branding | What look must it have? | Use the company colours and logo |
| Accessibility | Who might find it hard to use? | Alt text, keyboard use, contrast |
| Input method | How will people give input? | Big buttons for touch |
The cells students fill in are left blank in this preview.
Try it: a responsive layout
<div class="row">
<div class="box">Menu</div>
<div class="box">News</div>
<div class="box">Shop</div>
</div>
Quick check: responsive design
Have a go
Quick check: responsive design
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
Accessibility: design for everyone
Accessibility means making a product usable by people with many different needs. Some users are blind. Some cannot use a mouse. Some are colour blind. Some read English as a second language. Many are only tired, or using a phone in bright sun.
Good accessibility helps everyone. In the UK, the Equality Act 2010 also expects services to be accessible.
An accessibility checklist
| Check | Why |
|---|---|
| Every picture has alt text | A screen reader can describe it |
| Text and background have strong contrast (a free checker tool gives a score of 4.5 or more) | Easier to read for everyone |
| Everything works with the keyboard only | Some users cannot use a mouse |
| Every form box has a label | A screen reader can say what the box is for |
| Colour is not the only message | Some users cannot tell colours apart |
| Text can grow bigger without breaking the page | Many users need larger text |
| Videos have captions | Deaf users and users in noisy places |
The cells students fill in are left blank in this preview.
Scenarios and decisions
| Scenario | A good decision |
|---|---|
| Users are mostly on old phones with little data | Light pages, small pictures, text first |
| A club app for people aged 65 and over | Large text, simple words, strong contrast |
| A game played with a controller or a mouse | Hover and precise controls are fine |
| A bank must look like the bank's brand | Brand colours and logo, but still enough contrast |
The cells students fill in are left blank in this preview.