Mobile UX checklist
All content we create on the Age UK website is accessed from mobile devices (and often from more mobiles than desktops). Any time you create or edit a page, consider how it will appear on mobile.
These are the elements you should consider for mobile content:
Images
- Avoid using too many images. Images can slow your page down so always question the purpose of your image. Is it adding something useful to the page (eg encouraging, inspiring, illustrating) or is it just there for the sake of it? If so, it’s diluting the impact of the page and shouldn’t be used.
- Images should load quickly. Always resize before uploading - never wider than the largest width it’ll be displayed at - and aim to keep the file size under 40 KB. You can do this by compressing your files. For graphic images, a 32-bit PNG is usually not needed, so stick to 8-bit and turn off transparency if there is none.
- Below is a guide on the type of image file that should be used for each image and the max kb size of the image file.
| Image | Type | Typical size | Max size (kb) |
|---|---|---|---|
| Small icon | PNG | 150x150px | 15 |
| Small | JPG | 380x350px | 20-30 |
| Medium | JPG | 500x300px | 50 |
| Medium | JPG | 600x300px | 70 |
| Large | JPG | 1200x383px | 300 |
| Large | JPG | 1440x385px | 500 |
To compress an image in Photoshop
- Go to 'File' and 'Save for web'.
- Choose the right size for the block you’re using.
- Use the slider to adjust the quality of the image. If your image is small, the quality can be lower.
- Tick 'progressive' for JPEGs as this allows for better compression and immediate loading of web images through gradual layering during page load.
Layout
- Don't think about the device; think about the content. This is more important for your audience.
- Break content down into smaller chunks of actionable information.
- Mobile users can be very task focused (eg I just need the phone number) so keep your content focused on the jobs to be done.
- Don't make mobile users hunt for key info. Put useful information as early as possible in the copy and use sensible headings to break up the content, as this will help people find the information they need more easily.
- Avoid false ends on initial splash (eg content blocks that cover the full screen giving the impression that there is nothing below).
- Avoid accordions where possible for mobile. When using accordions, make sure content within each item of the accordion is concise – ideally within one phone screen.
- Avoid using carousels as users rarely interact past the first tile.
Top tip: preview your page on mobile
To preview your page on mobile, right click anywhere on your screen, click 'inspect' and a pop-up will appear. Click the second icon at the top left of the pop up (toggle device toolbar). This will give you mobile display. You can change the type of device you're viewing from at the top of the page.
Copy
- Make sure the above-the-fold content is clear and focused.
- Keep intros short (make sure it stays above the fold).
- Try to focus on one topic or problem per page, eg on a save energy page, you might want to share a list of the different ways you can save energy, but put information about how to do each of the tasks on a separate how-to article (eg Guide to switching energy).
- It's important there's no content that can be perceived as duplication within one page or section.
- Make sure all link text and button copy is descriptive, and clear what the user will land on when they click through. Add context with surrounding copy if necessary.
Navigation
Remember on mobile the side nav is missing and mega menu is hidden, so ensure you're cross linking to all appropriate pages from within the visible content area.
When making a new page, consider where users will access it from other pages, and add links from those pages to your new page.
Develop user journeys so that the right audience identifies clear actions to address their need. Triage users against a scale of:
- Relevance to the user.
- How critical their information need is.
- What support do they already have?
Does your page pass the Google test?
Use Google's mobile-friendly test to see whether your page works well for mobile users.
Speed/usability
- Make sure interactive elements are clear for mobile users, eg arrows on accordions or carousels.
- Focus on phone portrait mode.
- Your page should load quickly. Under 3 seconds is good, and anything 5 seconds or above is a concern. A quick win is to cut down on imagery and ensure any images are resized correctly and compressed.
- Don't assume older users are not online; they are and often display a high level of confidence.
- People are using mobile phones mostly with their thumbs, which means that we need to design for thumbs, not for clicks. Everything on the screen should be easy to reach without requiring them to stretch their thumb or use 2 hands. Space out clickable elements to make the user experience simple.
Questions?
If you want to know more about any of these points or have a question about mobile UX, drop us a line.
Testing testing testing
Just testing to make sure CMS editing still works fine