Mobile is a rapidly evolving medium, with a constantly expanding range of devices. As a result, designing for mobile sites can be particularly challenging -- even more so given the need to keep your brand strong by maintaining cross-channel consistency.
This challenge is reflected in our recent study which showed that only 20% of the UK’s largest companies currently have mobile web sites. And of those that do, the majority are still struggling with site quality and usability issues.
One of main challenges businesses face when designing or developing content for mobile websites is that best practice standards for traditional (desktop) websites are not all directly applicable, because mobile devices differ from desktop computers in a number of significant ways.
The top 10 issues you need to take into account when designing for mobile are as follows:
- The reduced screen size of mobile devices
- Less memory and bandwidth
- Most devices lack the ability to display multiple windows on the same screen
- Slower speed of service
- Harder text entry -- many devices do not have pointing devices (e.g. a mouse or physical keyboard). This all makes entering data slow and tricky, with mistakes a frequent occurrence.
- Limited web standards support
- Variable support for certain file types (e.g. secure pages, Flash, PDFs, video)
- Limitations imposed by battery life
- Variable support for cookies, embedded objects or scripts
- Not all devices have color screens.
Compatible Content
Bearing the above issues in mind, here are five essential tips for delivering effective mobile content:
- Be goal-directed. Mobile web browsing can take longer because of slower connection speeds (although this continues to improve), and users don’t want to waste time. Consider the user’s reason for visiting any given page and remove all text that does not help them achieve that goal. Offer key information first, so users can decide whether they want to continue reading.
- Limit page content to less than 500 words and keep paragraphs to a maximum of two or three sentences long. Anything longer than this will be difficult to follow on a small screen.
- Use bullet points. Bulleted lists are a great way to present information in a concise format as they help users to select relevant information quickly.
- Links. Many mobile browsers lack basic controls, such as "back," so adjusting link navigation is important.So, include at least one link on every page (which prevents pages becoming dead-ends), butlimit links to ten per page (except on index pages).
- Indicate when a link will open in a new window. Some mobile devices do not support more than one window and users may think the link is broken.
Great by Design
When it comes to design, it’s not so much the limitations of mobile devices that perplexes -- it’s their diversity. iPhone, BlackBerry, Windows, Android: they all have different specifications. For example, the average screen resolution for mobile devices changes quite frequently, and there is as yet no standard common resolution.
Learning Opportunities
Webinar
Apr
5
Adopt a Modern Digital-First Marketing Strategy
Learn how to use a composable DXP to your advantage
Webinar
Apr
13
Composable Commerce The Future of Retail
The Adobe Commerce approach to composable and why it's best in class
Webinar
Apr
13
Accelerating Content Velocity Across the Digital Supply Chain
Learn to integrate DAM with upstream tools to improve workflow efficiency.
Webinar
Apr
18
Drive Business Growth Through Customer Service and Support
Defining the future of technology. What is AI’s role in the future of customer service?
Again, bearing in mind the top ten issues set out above, here are five tips to help you on your way.
- Stick to standards. When designing for mobile, it’s useful to follow the principle of progressive enhancement. Use a safe set of core technologies to deliver the essential content and then use, but don't rely on, further techniques.
- Keep image dimensions small. Do not exceed 120 pixels in width (unless you are using advanced device detection techniques). Any images that are too large for the screen will be difficult to view. Sometimes devices resize these large images and distort them. The entire image should be viewable without scrolling.
- Use relative (e.g. %), not absolute (e.g. px or ems) values, except for images and for margins, borders and padding, which should be specified in pixels. This will allow the design to expand naturally and contract to fit page width.
- If you’re using rich media such as animation and video, it’s important to specify whether the video can be played on a user’s device. This helps users avoid downloading incompatible software.
- Aim to keep pages to less than 20K and keep Java and CSS files small. Roughly 10K for markup and 10K for images is a good standard for mobile pages. Also, remember that some phones will only cache files that are 25 kb or less, so aim to keep any reused files under this restriction.
Maintenance Through Monitoring
Crucially, not everything is different when it comes to the mobile web. Earlier this year, when we carried out the survey mentioned above we found that mobile sites are more likely than desktop sites to contain basic errors such as broken links, and to fall behind when it comes to accessibility, usability and SEO.
These findings highlight a final, crucial key to success: regular monitoring. Mobile web is a rapidly evolving medium, so to ensure your mobile site continues to deliver that high-quality user experience over time takes regular assessment.
Editor's Note: You may also be interested in reading:
