Insights | 13/03/2016

The Various Concerns When Talking About Mobile Devices

We often use the word mobile device when talking about limitations while designing and building a new application or website. But what do we mean with that? What is a mobile device and what makes it so special that we have to care about? Are the problems we refer to limited to smartphones? Thoughts from Robert Katzki.

What do you mean?

A mobile device is a small computing device, typically small enough to be handheld […] having a display screen with touch input and/or a miniature keyboard […] Mobile device on Wikipedia.

This definition shows that with mobile device we mean a device with a small screen and often with a touch input. Another thing we assign to a mobile device is that it is used on the go (hence the word mobile) and has a low bandwidth because of that. Often we also assume that as the device is small, the performance cannot be the same as with a bigger device.

To summarize, we assume four things with that kind of device:

small viewport

touch display

low bandwidth

bad performance

When saying that we need to take care of mobile devices, it is at first not obvious what is meant with that. Do we need to take care because of all those limitations or do we mean something specific? Let’s look at the different concerns.

Small viewport

When referring to a small screen while mentioning mobile device, it means we have to take care of the limited space. A small screen has a smaller viewport. Even though the resolution of a small screen can be huge, the area that pixels are crammed into is way smaller than on a big device. The User Interface should adapt to these limitations. Interaction elements and the presentation of the content still need to be accessible and readable. Smartphones already are a common thing if not the most used device type worldwide to access the internet and information. We already got used to the fact, that not everything that fits on a desktop computer also fits on a smartphone. With new device types like smartwatches, the importance is even bigger.

For web development the handling of small screens can be easily achieved using Media Queries and the buzzword responsive web design.

Touch display

Meaning the type of input when talking about mobile devices, we refer to the touch input which is the standard input on most smartphones. But it’s wrong to assign the touch input to only smartphones. Tablets have a big screen and always come with a touch input, too. More and more laptops are equipped with a touchscreen. Kiosk panels for information often also have one. There is no correlation between screen size or mobility and the type of input. Optimizing for touch input means that the targets to tap need to be bigger than click targets as a finger is not as accurate as a mouse pointer. Buttons and links should be sized accordingly. As this is a different type of input, the interaction options are different, too. The most notable difference is that there is no hover state. That’s a big thing when thinking of all those menus that expand on hover. Besides that, the scrolling works different as with a mouse input. When scrolling on a touch input device, the interaction starts as a regular tap, while a mouse delivers different signals for clicking and scrolling.

Low bandwidth

Assigning low bandwidth to mobile devices only is a wrong assumption. Sure, smartphones are used on the go, but not always. People also use their smartphone at home. With the rise of 4G networks, the mobile bandwidth can be even better than the connection at home. As there are more and more free Wifi networks available, bandwidth isn’t a concern neither, when using these. Sure, being on the road with bad connection is a problem to consider. But it’s not said that other device types cannot suffer from bad connections. Using a laptop or tablet on a train means that the bandwidth isn’t great neither (at least with trains of the Deutsche Bahn). People living in a developing country know how bad the bandwidth for the main connection at home can be. Even in the countryside of industrial countries like Germany it can be really slow, as high speed internet isn’t available. So it is never guaranteed to have a good connection, no matter which device. Building a web application or website should consider this and always provide an offline fallback and treat offline as a normal state, not an error.

Bad performance

Referring to mobile devices because of bad performance is misleading. Sure, many mobile devices are not comparable to a modern desktop computer. But still, current high end smartphones are pretty performant. And a cheap computer, a few years old, can have a bad performance. ARM predicts, that mobile phones will surpass PlayStation 4 in performance next year. So is a PlayStation a mobile device, too? For sure nobody would categorize it like that. There is a wide range of devices with varying performance where an app could be used. Ranging from smartwatches over GameBoys to TVs, you’ll never know how people will access something, especially for web content. That means the performance is in no way related to the screen, the input type or the bandwidth. An application or website should be responsible with the resources of the client. Heavy calculations should be moved out of the UI blocking thread. For the web this can be achieved using Web Workers and Service Workers.

Conclusion

There are different limitations that need to be considered when designing and building an application or website. A mobile device features some of these limitations – just like other device types do. When mentioning that an app needs special treatment because of these concerns, make sure to specify what you mean. It can either mean to handle small screens, catch touch input differently, provide a fallback for low bandwidth or take care of bad performance.

This article first appeared here: robert.katzki.de/posts/the-various-concerns-when-talking-about-mobile-devices