Author Mike

Date: April 4, 2014

Get with the times: How to Build a Responsive Website for Mobile Devices

Don’t expect your users to adapt to your development situation. Adapt your website for them.

responsive website development consultation

As someone who uses his smartphone regularly, I find it fairly frustrating that a surprisingly large amount of websites, some of which are run by big and established brands, still use poorly-designed websites that are outright dysfunctional on mobile devices. Seriously, proper web development consultation is imperative. In today’s day and age, a website shouldn’t:

• Rely on hover effects or menus, especially for navigation;

• Require users to pinch-and-zoom in order to view legible text;

• Have custom form controls that break established accessibility standards;

• Disable pinch-to-zoom when large text is enabled;

• Present inadequately sized touch targets that are too small to tap with a finger;

• Display a user experience intended for a smaller device than you are currently using;

• Require Flash, Java, Silverlight, Quicktime, Shockwave, Move Media, Authorware, or any other native-code plugin in order to be viewed; or,

• Try to push me to a native application, especially if it’s going to interfere with the usability of a site.

While much of these gripes have been the traditional gripes of a web developer for quite some time, the uptake of smartphones and the rate at which they have permeated our lives has brought this issue to a fever pitch. Traditionally, these concerns would be brushed away or ignored for the sake of ‘good design’, but no longer. We live in a world where your website will break for half your traffic, simply because you’re ignoring them by not building a responsive website.

Avoid building a mobile application.

Let’s talk about mobile applications for a second. There seems to be a preconceived notion that, if you want to capture the mobile audience, it is required to have a native application. This is a false assumption, as mobile responsive websites are fully capable, and more economical, at creating a seamless user experience on any device.

In some very specific cases, a native application does make sense. If done correctly, they can blow away any website. But the simple truth is that most people don’t need something that crazy. Having a mobile application that doesn’t take full advantage of a device can end up turning people away from your brand.

Additionally, if you do have a mobile application, its no excuse to not have a working web version of the same experience. Some people are just going to prefer using the browser, especially if you don’t have feature parity between your various mobile applications and websites. The browser is a safe minimum, the common denominator – you may not be able to justify expenditures to port your app to the recent explosion of irrelevant mobile platforms, but since they all have modern browsers, you can reach those customers with an experience that’s just as good.

Mobile Redirects Don’t Work Either

A non-responsive website displayed zoomed-out is acceptable, but not great – this is basically the “do nothing” state of most websites before mobile web design was an issue. It requires double-tap or two-finger zoom, which is annoying, but tolerable. However, when people started taking smartphones into account, they typically decided to design separate experiences for mobile devices, using crude browser detects to shuttle users to one of two separate, fragmented experiences.

This was a decent short-term hack for phones, but like anything else that relies on a browser detect, it broke. Because tablets exist, and all they are is some phone hardware tied to a larger display, they parse the same viewport instructions as their smaller cousins. So, while pre-mobile sites actually rendered well on a tablet, mobile-aware sites would instead decide to send the tablet user over to a much more cramped website. Unlike the pinch-to-zoom pre-mobile sites, however, this is not in any way an acceptable experience.

People raced to update their flimsy browser detects to handle iPad, and later Android tablets, with a bit more nuance, i.e. sending them over to the desktop version of the site. Now, earlier I said that this would be an acceptable experience on mobile, but I should qualify that. It’s acceptable if your website is already well designed in other aspects. That means your website is built on proper web standard technologies and follows most accessibility guidelines. Many websites still have issues with this. For example, if your website relies heavily on hover effects, guess what – they don’t work on touchscreens, period.

Some people decide to use their website to drive mobile app installs, which is worse. I hate it when I get some random banner or pop-up getting in the way of my web browsing to get me to approve and install crap. It’s annoying! Apple’s “smart app banners” try to improve the experience, but I can safely say that I never have engaged with one aside from closing it. To make this worse, sometimes this isn’t even used to promote an enhanced way to view the same content I came to your site for, but instead to simply promo the fact that they have a mobile app.

Simply put, in 2014, I expect that every website I go to gives me the same content and experience on my 5-inch smartphone as it would on my 23-inch desktop monitor. Build responsively and adapt your website for the user’s situation, not make your users adapt to your development situation.

No comments found

Leave a Reply

Your email address will not be published. Required fields are marked *