This is an older article, so some references and links may be outdated. Keep that in mind while reading. Thank you!
Designing for Mobile Devices
In recent years, the mobile web has exploded in terms of the number of people using it from a mobile device. In Sweden, a very large percentage of the population now owns a smartphone. What should one consider when designing for these?
When one begins to think about designing for mobile devices and building a mobile-optimized website, one faces quite a few specific questions.
The term responsive design is often discussed. When adapting a website for different devices through adaptive or responsive design, one can simplify by saying that the same materials are used for all devices. Still, CSS and JavaScript are employed to select what and how the webpage should be displayed depending on the visitor's device.
If this is done incorrectly, for example, by tailoring a design using only display: none in the CSS, the resource is downloaded but then visually hidden. This becomes a problem if, for instance, large images are used. These are scaled down and may look good, but the original is still downloaded, making the webpage feel very slow on a mobile phone. It is, therefore, important to tailor image sizes and content and only load what is necessary.
The most important consideration when deciding how to design for mobile devices is context. That is, what situation the visitor finds themselves in when using a mobile device in that specific project, and what conditions and expectations this sets for the design and experience.
1. Speed
Many have poorer mobile connections than at home. Although Sweden has advanced mobile data networks, there is still quite a significant difference, especially outside the major cities. Many mobile browsers are still slower than computer versions, which is also an important dimension of perceived speed.
2. Screen Size
Almost all mobile devices have smaller screens than we are used to from laptops and desktop computers. Can the existing design be adapted for a small screen size, or must one rethink it?
3. Where is the User?
Until now, it has almost always been assumed that a visitor using a mobile device is on the go. He or she is already out in the city and needs information about something quickly to continue with something else.
This is still true to some extent, but the proportion of people using a mobile as their first choice to look something up on the web is constantly increasing. It is also becoming more and more common for the mobile to be used at home on the couch during commercial breaks, which is easy to forget...
However, if one is out in the city, they almost exclusively want to find out questions such as:
- Where is the store/restaurant?
- What does the map look like in relation to where I am right now?
- Is the store/museum/restaurant open right now?
- What phone number does the company/store/hotel have?
- Is pizza served on the menu today?
Differences from Regular Websites
In general, a fairly flat information structure is desirable. It quickly becomes complicated to navigate through multiple steps and down many hierarchies on a mobile, so ensure that everything important is within one or two steps away.
On capacitive touchscreens (like iPhone, iPad, and Android devices), navigation is done with the finger, so there must be a sufficiently large hit area.
Whether a pen or finger is used to navigate the devices, the user often obscures large parts of the screen when interacting with them. Sometimes, even what the user actually wants to click on can be hidden by their own hand, so clarity is very important.
Example: If you have a link in a list, use padding on the a element instead of margins on the li elements to smartly increase the click area.
Also, keep in mind that as mobile phones get larger and larger, it becomes harder to reach the upper parts of the screen. This is something to consider when designing mobile navigation today.