Is your site as mobile friendly as you think?

This post is sponsored by Interaction Design Foundation.

We all know how important it is for a website to be mobile friendly, and most of us have turned to responsive design as the answer. Without a doubt, responsive design has transformed the mobile web. Generally speaking, it has improved the user experience and made it easier for us to manage our websites, avoiding the need to maintain multiple versions.

That was something I was thinking about recently as I was browsing the courses on the Interaction Design Foundation website. I came across a course on mobile user experience design, and it got me thinking about how, good though it is, a responsive website is not a silver bullet.

Responsive design can be implemented poorly and often is. Unfortunately, it also lulls us into a false sense of security. We think we have "solved the mobile problem" simply because we have made our website responsive. Nothing could be further from the truth.

Let me give you some examples of where things can go wrong, starting with the biggest problem of all; a half hearted responsive site.

Is your whole site responsive?

When you are redesigning a website from scratch, building it in a responsive way makes complete sense. But retrofitting responsiveness to an existing site (especially a large one) can be a nightmare.

That is the problem faced by many of my clients. Most of their websites have at least tens of thousands of pages, built over a period of years. Making that mobile friendly is incredibly challenging.

To reduce the work involved they make a decision. They decide to focus on making the core pages mobile friendly and responsive, ignoring the rest.

Although I can understand this decision, it sucks from a user experience perspective. Nothing is more frustrating than being lulled into thinking you are navigating on a mobile friendly site only to find yourself dumped onto a desktop optimised page that you cannot read or browse.

These organisations need to think long and hard about whether they need such large sites. In my experience, they rarely do and are just blindly migrating content from one version to the next.

Have you cut down functionality?

Designers face a similar problem when confronted with some tricky bit of functionality. Something that feels just too complicated to make mobile friendly. Instead of doubling down and coming up with a creative solution we take the path of least resistance. We convince ourselves that mobile users won’t need that piece of functionality and just remove it from the site.

That is, of course, incredibly naive. Mobile users are not different in some magical way. They are the same users who have been using your site on the desktop. They have just switched device. Hell, I have even seen people use mobile phones while sitting within arms reach of their laptop! We cannot make assumptions about their requirements based on device.

Do you support touch gestures?

But mobile friendly mistakes are not all about removing things. A failure to add something can be just as dangerous. Take for example support for touch gestures. No wonder users often prefer mobile apps when they can’t swipe or pinch on a mobile website.

As web designers, we really should be allowing users to swipe carousels and pinch images. Often this kind of functionality is overlooked because we are so focused on adapting the design for different breakpoints.

Does your content adapt as well as your design?

Being mobile friendly isn’t just about changing the design. It is also about changing the content itself. Take for example a table. Just because we show data as a table at larger screen sizes doesn’t mean we have to on a mobile device. We might conclude it is more mobile friendly to display an interactive chart or some form of calculator.

Then there are infographics. These look great on a big screen but become illegible on a mobile device. Sure we could just allow users to zoom and call our job done, or we could reimagine them. Perhaps we should break the infographic down into a storyboard or use a video instead.

Is your mobile site as readable as possible?

The problems with legibility are not just limited to images and tables. It applies just as much to the text. Just adding a breakpoint to reposition elements isn’t going to create a mobile friendly and readable experience. It often shortens line lengths so much that reading becomes painful.

Designers make an effort in this regards by making font size relative to the breakpoint, scaling it down accordingly. But I have been to many sites on mobile devices where font sizes have become so small that it becomes illegible.

Finally, there is the issue of colour. Designers often fail to take into account the screen glare mobile users struggle with, and so create subtle colour palettes that make a mobile reading experience difficult, to say the least.

Are you too focused on the latest and greatest smartphones?

Of course, some of these legibility problems are invisible to us even when we test on a mobile device. That is because we have the latest and greatest smartphone. It has a retina screen and brightness so blinding even the sun cannot match it! But not everybody has devices like this. Even if you ignore feature phones, experiences can vary massively.

Then, of course, there are breakpoints. I still see designers setting breakpoints based on device, rather than the appropriate place on the content. They have an iPad sized design, an iPhone sized design and so on. But in truth, sizes are hugely varied, and we need to stop thinking about specific devices.

Is your performance mobile friendly?

What we should be thinking about is performance. In fact, this is probably the single biggest area where responsive design lets us down. Don’t misunderstand me. I am not saying that responsive design makes our sites slower. It is just that it does nothing to improve it and that is one thing mobile devices need.

Image size is certainly one culprit. Using media queries might scale a picture down visually, but it will do nothing to reduce the image size or load times. That is not good when using a cellular network. Add to that fonts, libraries, frameworks and all of the other elements that bloat today's websites and you have poor load times.

But this isn’t just an issue with download size and cellular network speed. Performance is also a device issue too. Many mobile devices lack the processing power of laptops, desktops or tablets. The result is that they can struggle to handle some of the more intensive Javascript found on many modern websites.

Is filling in data mobile friendly?

Next, we come to a particular bug bear of mine, entering data on mobile devices. Perhaps it is because I am old and I can’t type at a million miles an hour on those tiny virtual keyboards, but entering data on a mobile device sucks.

As web designers, we seem to make the problem a hundred times worse on websites. When entering numerical data, we fail to display a numerical keypad. When entering passwords, we hide what the user is typing, despite the fact typos are common place on mobile devices. In fact, we should not expect mobile users to fill in passwords at all. There are many other alternatives such as text notifications, email links or Touch ID.

There are so many situations where data entry could either be avoided or simplified. Remembering people's login username between sessions will be a good start. But we should also be improving form design and avoiding fiddly form elements such as date pickers or lengthy drop-down menus.

Are links too tightly packed?

Talking of fiddly interactions, I am amazed how little consideration designers seem to give to the challenges surrounding using a touchscreen. I find many websites that claim to be mobile friendly, are anything but when you start to interact with them. Links and buttons are often so tightly packed together to maximise screen real estate, that they become impossible to click on.

Again, just repositioning content is not enough. We need to ensure the space around elements expands to allow for the lack of precision that comes with using one's finger. Admittedly, space is at a premium, but if we use the space we have wisely, there is no reason why links cannot be more easily selected. Just look at your average mobile app.

Do users have to endure fixed position content?

Talking of a lack of space, why is it that despite all designers desire to create a mobile friendly website, we consider it acceptable to add fixed position content to a page. That significantly reduces the available space for other content elements.

Think carefully before transferring your fixed position navigation to the mobile view of your website. Equally, banish those overlays and dialogue windows, as well as those fixed position social media icons. They have no place on a mobile site.

I am a horrendous hypocrite

If you are viewing this website on a mobile device, you may be thinking how hypocritical I am right now. I use fixed position navigation, have links too tightly packed in some places and fall into a number of the other mistakes I have outlined.

My reasons for this are the same as yours, a lack of time and money. It was easier for me to make the website responsive and consider it mobile friendly. But since I designed this site the world has changed as mobile becomes increasingly important.

Google and other search engines are beginning to penalise websites in search results that don't offer a good mobile friendly experience. The number of users navigating a site on mobile devices is skyrocketing. A simple responsive website will no longer be enough. No longer enough if we want to provide a great experience or rank well in search engine results.

We are going to have to adjust our priorities so that creating a mobile friendly experience it's just as important (if not more so) than a great desktop experience.

Mobile usage overtook that of desktop way back in 2014; since then, the gap between devices has only widened, with the rise in mobile usage doubling the loss seen on desktop. This increase in mobile traffic has made mobile user experience one of the most important factors in the success of a product or website, and it means that the skills involved are absolutely essential for designers, marketers, and developers if they want to keep up with the times. This course will teach you how to do just that — design great mobile user interfaces, with an emphasis on mobile usability best practices.

The post Is your site as mobile friendly as you think? appeared first on Boagworld - User Experience Advice.