Bandwidth optimization is a rare practice in desktop-oriented web development nowadays, because we assume that broadband is available to most of our users, but when considering the mobile network, the scenario is different. Data plans are seldom limitless (2GB/month is a pretty common value), the signal can be weak, high-speed networks (4G) are not around everywhere, and mobile networks are, in general, less reliable than their landline-based counterparts. Resource optimization becomes a necessary step to undertake when starting a mobile project and, apart from the usual technical practices like responsive images and asset request cuts, the entire user experience has to be redesigned with simplicity and efficiency in mind. The UX designer who desires to optimize the mobile version of a website must first focus on what is essential: be ready to get rid of all the elements that add value or visual glare on desktop but can be discarded on mobile, without decreasing the quality of the browsing experience. A mobile layout has to be much easier and simpler than its desktop counterpart; that is what users expect so there’s no reason to transpose every element, especially the ones that need to be redesigned to maintain their functionality.
Most users handle the phone in portrait mode and websites are all designed with this in mind, but there’s also a landscape mode that offers significant more room for a design improvement, so why not take advantage of it? You could design a specific section better, display more information or even provide extra features. iOS makes extensive use of this approach.
A responsive website, ideally, should be fluid, gently adapting itself to every resolution, not just to the common ones. However, too often we see websites that, when viewed in an uncommon or supposedly not used resolution, fails to display itself decently. This happens because we write media-queries with a glitch-fixing attitude instead of building a really fluid experience. The limits of this approach, as time passes by, become more and more evident since even more devices hit the market. Before the release of the iPhone 6, the standard viewport width was 320 px (even though some Android terminals with a different viewport size were already out, their market share was considered still too fragmented to hit the statistics) and we designed with only that size in mind for a long time. It was Apple’s new phone, with its 375 px viewport, that revealed the limits of a too strict fixed-width mobile strategy. Phone screens are becoming larger and larger, while mini-tablets already have a relevant market share: basically every resolution is covered by one or more devices. So it makes no sense anymore to develop only with a fixed-width strategy: make it fluid!
Searching for UX bugs in a website can be a tiresome task, but it will be much quicker if you know where usual errors lies. Read on to find out more about common UX mistakes.
Hopefully, the most important concept that you got from this article is that when designing for mobile, making a good responsive website that scales well is not enough. You have also to take care of the numerous details and micro-interactions that happen on the page.
Making errors is pretty common and totally understandable; as we have not been designing specifically for mobile for all that long. On the other hand, the topic has been pretty hot recently (I mean… for the last five years, at least), and the web is full of resources and hints to easily bend the mobile UX to our will. And there’s one more thing… stay tuned, since we are going to talk about UX for mobile apps, one of these days.