The mobile revolution is taking off and the number of internet users who are accessing web pages from mobile devices of different types is higher than ever, and growing almost daily.
For you, this means that your website has to be highly accessible to mobile users unless you want to miss out on a large and possibly crucial segment of your target market.
This need for a mobile friendly design applies even more if you’re operating in certain cultural or tech friendly niches whose readers are much more likely to be surfing your content from mobile screens
And by many commonly accepted practices for mobile design integration, your best bet for creating a mobile site that works is through the use of responsive design techniques, At least according to much of the latest conventional wisdom.
On the surface, this seems to make sense: Responsive design is a methodology for page layout that allows the various elements on your site pages to reshape and resize themselves based on the screen size of the device they’re being viewed from. Under the right circumstances, responsive design can look elegant, beautiful and at the same time impart enormous functionality to almost any website.
But pay attention to those key words there: “under the right circumstances”.
Because while responsive design can be beautiful and very useful, it can also lead to some serious web design failures under the wrong sorts of circumstances.
Here are a few of them, watch out for these and any others that would lead to the same logical result.
Sometimes it’s just unnecessary
Building and maintaining a fully functional desktop website is usually much harder than doing the same for its mobile counterpart. Thus, if you’ve already got a pretty, fully functional desktop site up and running, you probably won’t want to tear it all down and begin again for the same of the responsive mobile experience.
And the point here is that you usually don’t have to. Your site works well for the PC/laptop user crowd and is probably fine for most tablets since their screens are usually quite large. Thus, you only really need to cover usability for your smart phone viewing visitors and for this you almost certainly don’t need a whole new responsive design rebuild.
Instead, you can get away with creating a mobile friendly secondary version of your regular site and programming your pages to redirect its way any time someone accesses your content from a smart phone. Not only is this much cheaper and simpler, it also has several other potential advantages.
Speed is crucial and responsive design might not have It
Mobile users expect practically the same levels of site load speed as any conventional desktop user and disappointing them can lead to extremely high bounce rates.
Considering the fact that mobile browsing often depends on weaker connectivity and lighter processing resources than what you’d get with a laptop/desktop browser, you had better create a mobile site that’s feather light and loads as quickly as possible — ideally, in less than three seconds.
This is where responsive design can really fail and burn you badly. Evidence shows that an overwhelming percentage of responsive site platforms tend to weigh just as much as their desktop counterparts despite their “responsive” reformatting ability. This means that, while they’re adaptable to a mobile experience, they’re not at all optimized for it. And optimizing your responsive design can cost quite a bit of time and money.
Going with a lean mobile design eliminates the above problem easily and quickly.
Trying to fit too much in is pointless
Chances are that not all the information and displays on your website are equally important or necessary for most of your audience. This applies especially to your mobile viewers.
They’re coming to your pages for the sake of getting their hands on specific content such as directions, schedules, prices etc, and they don’t need to be wowed by clutter or too many browsing options.
Where responsive design often fails is in its attempt to squeeze most of what a desktop site contains into a tiny mobile format. You don’t need this. You’re likely better off going for a much leaner more mobile optimized layout that gives readers a site with essential, core information in a quick loading format.
The bottom line is that there’s more to the mobile experience than simply scaling down intelligently. The process should also involve a certain amount of selective culling of elements and even design changes that are better for mobile optimization, as this research from Venturebeat shows.
While this can be done with responsive design through careful planning, the end compromise might limit too much both your desktop page layout and your “mobile friendly” layout.
One additional, possibly minor, possibly major (depending on your main revenue model) potential failure of responsive design is the resizing of advertisements that is going to happen as your page reshapes to a different screen.
Some advertisers are paying you for specific ad sizes and to see what they put money down on reshaped into a smaller mess might not make them happy.
Lack of user choice
Finally, we get down to a single basic failure of responsive design that can leave many of your tablet loving users annoyed: people like choice and they normally hate having their experience dictated or constrained by minor technological quirks that they can’t control.
With responsive design, this can become problematic as your site automatically resizes for different screen size when a user who wants to see it in a specific format tries to load a page. Some users, especially those on tablets, might not necessarily want to use your responsive mobile format and being forced into it might annoy them.
A couple of final words
None of the above is to say that responsive design is terrible or that you should absolutely go for more conventional mobile site formats.
No, instead, simply think about what best optimizes for your website needs and go from there, whether it leads you to choosing responsive design or certain other ideas.
How to Simulate Mobile Devices with Device Mode in Chrome
By Craig Buckler,
Does your web app work in all devices? Testing is a huge job. Learn how to enable Chrome's useful device mode to emulate dozens of mobile devices.
How to Test Responsive Web Design Cross-Browser Compatibility
By Craig Buckler,
Craig introduces CSS options for setting up a responsive website, including media queries, Flexbox and Grid, and covers tools for testing cross-browser compatibility.
How to Create a QR Code Reader for Your Mobile Website
By Dmitri Lau, Beardscript,