I have a confession to make: I hate mobile versions of websites.
Well, that’s not 100% true. More specifically, I hate when a mobile version of a website overrides the default navigation, and implements their own swipe/gesture based mayhem. Now, this all seems harmless, you could even call it a feature, but I’m sorry guys, that’s just not how to do it. You should under no circumstances alter the default behaviour of a device, and replace it with a sub-optimal alternative. I mean, please, I thought that sort of thing was behind us with the likes of ie6.
There are so many culprits out there, and it really makes navigating the internet on a phone an absolute chore. You click a link to read an article, and after, you want to go back to the previous page you were on. What do you do? Well, I would swipe left-to-right to use the phone’s built-in back button gesture. OH NO!! Not any more, now, if you swipe left-to-right it brings you to another article. And what about right-to-left, you guessed it: another, different article.
Smashing Magazine have a great article which covers some of the same issues with mobile versions of websites. Unfortunately, the issue is that people think that we need a separate version of the website to cater to mobile users, when, in truth, they just need to make their normal website more mobile friendly. Contrary to what Smashing say about not having separate versions of mobile websites, I’m not so bothered, once the default functions of my browser stay the same, I’m happy.
It is for this exact reason that I blacklist websites that override the default navigation. Believe it or not, the ONLY difference you need to have on a mobile version of a website is less on the sides, and more on the scroll. That’s it. Simples. Well, apparently, that would just make things too easy.
There are a number of rules we should follow when designing for mobile devices,
- Single Column Layout works best
- Drop Down Menus reduce space waste
- Take advantage of In-built Functionality
With these basic rules, it’s easy to make a useable and elegant mobile website. I’d like to add Keep it Simple to the list, but all developers and designers should be following that mantra anyway. Gone are the days of overwhelming the user with choices and buttons.
With a Single Column Layout, all of your content can be viewed and scrolled through easily and quickly. Letting your viewers find the information they want quickly and effectively.
If you haven’t figured it out yet, I’ll tell you how to tackle the challenge of navigation on a mobile website: use a responsive menu. With that simple change, your website can be navigated easily, and it will look good on a mobile, tablet, or laptop.
Lastly, take advantage of built-in functionality. Phones have this amazing feature called “making a phone call”, so why not make links out of phone numbers? It’s basic changes like this that make it a pleasure to navigate the internet on a mobile device.
Can we all agree to let the browser handle gestures? Please; overriding it is terrible UX.