Mobile traffic to websites has been rapidly increasing for the past few years and it’s not rare these days to see a website getting a majority of its traffic from mobile devices. Yet, most websites, though responsive still offer visitors suboptimal experiences on mobile compared to “desktop” devices.
Responsive is better than nothing, but that doesn’t make it good enough in most cases. Adaptive means more work, but allows you to provide much better experiences to your mobile visitors. While intuitive in my opinion, most people I talk to think responsive is really good and largely sufficient. Until I walk them through my restaurant visit as a vegetarian analogy that is.
To better understand mobile experiences for websites, it’s best to shift contexts and consider the following analogy: imagine you’re vegetarian (or any other diet, vegetarian seems the most common) and you’re trying out a new restaurant. Let’s see how your experience will compare depending on the menu design.
No menu indications / Desktop-only design (not responsive nor adaptive)
Restaurant experience
The menu doesn’t indicate which dish is vegetarian or which ones can be made vegetarian. You have to ask and you have to trust the waiter and chef. You can eat in this restaurant as a vegetarian, but your experience is solidly subpar. The only good thing is that you’re not told to go elsewhere.
Mobile Website experience
Desktop-only design. You can pinch-and-zoom your way through the website, but that’s painful. If you’re really motivated or need to access this website, you surely can do it, but there’s nothing great with your experience. Given a choice, you go elsewhere.
Vegetarian dishes indicated / Responsive design
Restaurant experience
Vegetarian dishes are indicated in the menu now, which makes it much more friendly to browse. It also gives you trust that the chef is used to preparing vegetarian dishes and you won’t get a sauce containing meat in your dish. But that doesn’t mean it’s a great experience. You have to look through all the pages to find the dishes indicated as vegetarian. Some dishes look great, but are not indicated as vegetarian: does that mean they can’t be made vegetarian though? Can you ask?
You also get to see the tasting menus with wine-pairings. They look fantastic, though you can’t order them as only a few courses in them as marked as vegetarian. So it’s both much better than a menu without indications but also quite frustrating because it highlights what you’re missing out.
Mobile Website experience
Responsive design is much better than nothing. No zooming around to see the content, as it’s resizing automatically to best suit your screen size. But the content stays the same, and the general layout stays the same as well. The only change is to resize and re-arrange it slightly. That’s much better than desktop-only design, but it often results in very long pages that cram many elements on a narrow screen size.
Dedicated vegetarian menu / Adaptive design
Restaurant experience
You’re sitting down, the waiter comes and after you tell him/her you’re vegetarian, they hand you the vegetarian menu. In it, everything’s vegetarian. So you can enjoy browsing everything without any doubts. You also have tasting menus with 3 or 5 courses that are all vegetarian. If you have the choice, then of course you would only eat at restaurants with this type of menus!
Mobile Website experience
Adaptive design means that you really design multiple versions of your website to cater to specific screen sizes and types of interactions. At a minimum, that means a desktop version and mobile version. Ideally, at least a tablet version since touch interactions are much different than point-and-click interactions.
Of course, that means more work to design 2 or 3 different websites, and more ongoing costs in terms of maintenance. But if you’re trying to optimize your mobile visitors’ experiences then that’s what you need to invest.