How to Design for the Mobile Web
Mobile is the word of the moment. It’s everywhere, from app production to mobile marketing and mobile website design. But it’s not a fad; mobile is here to stay. To help you get to grips with the medium, here’s our definitive guide design for the mobile web:
Understanding the mobile experience is the key to creating your mobile representation. It is only when we fully understand what our users are looking for and how we can benefit them on a mobile device that we can start to design. Take a look at The Mobile User Experience for more on the mobile user experience.Depending on the nature of the services provided as well as the perceived needs of users, a targeted mobile experience can be provided in a number of ways:
- Optimization of a desktop website using targeted style sheets
- Creation of a dedicated mobile site
- Development of a standalone app
1. More than ‘streamlined’ contentScreen ‘real-estate’ is at a premium on a mobile device, and for this reason, it’s not feasible to provide mobile users the full website experience. That’s not to say, however, that mobile web content should just be a streamlined version of its ‘desktop’ equivalent. Instead, think what does my mobile user need and consider how best to structure your content to meet those needs. The lack of space is further compounded by the download speeds of mobile phones; because they have less memory than your laptop, they often take longer to load a page. Your mobile website should therefore be designed and developed in the most economical manner. For some, that will mean really cutting down your content and focusing on what is really essential for the end user; perhaps you might condense long paragraphs of text into quicker bullet points, or consider re-designing the navigation to section content in a more mobile-friendly manner. BUT don’t fall into the trap of omitting the things that make your user experience; if your images and videos improve the user experience, they should be a part of your mobile website. Just bear in mind image sizes and how your videos play to ensure they both work and work well on your site. The NSPCC Child’s Voice Appeal Website is a good example of how a mobile website compares to its desktop equivalent. Source: www.zabisco.com
2. Maximize Space with a Good LayoutAgain, it is the lack of space which should be the main consideration for a mobile web designer. Your content should be easily viewable without having to zoom or resize, which can be off putting. Instead, opt for single column pages with a good navigation. This will typically mean your pages are longer, but don’t worry; the majority of mobile devices make scrolling easy so your user will effortlessly move up and down your content.
3. Create a Mobile Friendly NavigationAn intuitive navigation is arguably the most important element of your new mobile design. The navigation will set the expectation for the user of what they will find on the site and how easy and enjoyable their experience is going to be. But traditional navigations won’t cut it on a mobile device; horizontal screens are clearly out because of spacing issues, while a navigation down the side of the page would make for unusably slim content spaces. One common option is to offer a vertical menu at the top of a homepage, encouraging users to drill down immediately to the content they want rather than read homepage content first. The content page then has a simple ‘back to home’ or equivalent link at the top and a repeat of the navigation at the foot of the page. This allows for content to take up the most important space without restricting the user’s ability to navigate elsewhere. Another popular option is to replace the ‘back to home’ link with a standard breadcrumb, however these can look rather clumsy and often require very small, (verging on unreadable) text sizes. Alternatively, many designers will make use of jQuery functionality to create accordion navigations which open on request, thus saving space without scrimping on content. It’s incredibly important that the functionality works across all mobile platforms, so make sure your designer/developer has tested it then tested it again.
4. General Design TipsThere are a few key design tips which you should be aware of when looking at your mobile site or app:
- Increase small and body copy sizes throughout as this will improve readability.
- Ensure padding around buttons and links is enough to account for error. It’s incredibly frustrating for a user who has accidentally pressed something they didn’t mean to with an inaccurate finger.
- When using images, they should be recreated in their simplest form, using live text and background colours in order to reduce overall file size.
- Design clear, bold active states for buttons to help reassure users they have successfully clicked their intended target. This is especially useful as hover states are not possible to design for mobile devices.