Responsive Design and You

Mobile is the way of the future, or so they say.  Having the internet in the palm of your hand and accessible from anywhere is certainly enticing.  However, mobile touchscreen devices present a design problem: instead of having a precise pointing device such as a mouse or trackball, you have the comparatively imprecise finger.  Everything that's designed to handle user interaction must be bigger so that the user can have confidence that when they touch the screen, the correct thing on the screen is registering that touch.

Enter the responsive design.  Through CSS, you can use what's called a "media query" to detect when the browser window is below a certain size threshold, and style your page differently.  This makes it fairly simple to cater to these devices with smaller screens and less precise input.  Catering to these devices involves removing things like menus and making them only show up when the user interacts with a nondescript icon of three horizontal lines, or perhaps a gear.  Also, generally speaking, you need to increase font sizes and the dimensions of areas the user is supposed to interact with.

In theory, the responsive design is the perfect solution.  Desktop/laptop (hereafter, desktop) and mobile have different design necessities, and one layout can cater to them all.  In practice, a one size fits all solution is hardly ever the best in the computing world.  It's also not a very good solution if it's not implemented properly, which goes for anything.

Improperly designed responsive layouts are absolutely terrible to use on a desktop browser.  The plethora of screen space afforded to a desktop browser gets wasted on having things be really big so that mobile users can use it properly.  In essence, we have a situation that's the reverse of what mobile users face: a site design that caters so heavily to mobile browsers, that it ignores desktop browsers.  Users of desktop browsers generally want that screen space used in a reasonably efficient manner, to the point that it's actually frustrating to use a site that doesn't properly make use of available screen space.  For example, text can be smaller, clickable areas can also be smaller, and you can leave menus visible and omit the nondescript icons, or combine the icons with a textual description so the user actually knows what's going to happen when they click.

My personal recommendation is to detect whether the user is using a mobile browser or a desktop browser, server-side by inspecting the User-Agent string supplied by the browser, and serve a site design that's appropriate for the platform.  Most sites these days, sadly, would balk at that, because it means having to design and maintain two separate layouts for presenting the same site.  They see that as redundant and a waste of time, effort, and money.

The reasoning behind my recommendation is simple: something dedicated for a particular function will be able to perform its function in a far superior manner to something that attempts to do everything.  In this environment, you have two very different usage scenarios, and it doesn't make sense to serve the same design to both of them.  The time, effort, and money required to develop two designs is well worth it given that your site's users will be far more satisfied with the usability of your website across different platforms.  Satisfied users are more likely to keep coming back, and also more likely to tell others about your site.

Let's get a few examples.  Google, for instance.  Look at their site on a desktop browser and you'd swear it was the only site design they have.  Go to it on a mobile browser, though, and you suddenly see a very different design, one that caters specifically to mobile devices.  Reddit, Twitter, YouTube, and a lot of other sites have completely separate mobile versions, accessible through a special subdomain of their site.  This subdomain is usually "m" or "mobile", but Reddit also has "i" in addition to "m".  Twitter actually employs a "best of both worlds" approach: its desktop site is actually reasonably responsive while still catering to the desktop browser, but their mobile subdomain serves a completely different site design.

At the same time, we shouldn't fall into the trap of assuming that it's impossible to have a good responsive design.  Since you can detect via CSS media queries when the window size is below a particular threshold, it should be reasonably obvious that your CSS for when it's above that threshold should cater more heavily to a larger window size.  Then you'd have a responsive design that would give desktop users what they expect, and mobile users what they expect.

Giving users what they expect, after all, is the entire point of a responsive design.  If you can't do it correctly with a responsive design, then you absolutely must take the two dedicated layout approach.