It's now a fact of life that both consumers and businesses are accessing the web more often with their mobile devices than with traditional desktop and laptop computers.

Google recently confirmed that more than half of their search queries come from smartphones. And in her 2015 Internet Trends report presentation, Mary Meeker, an analyst at Kleiner Perkins Caufield & Byers, revealed that over half of all digital media consumption is being done using a mobile device (smartphones and tablets).

All this matters to website owners and developers because this new dominant mobile platform brings with it the encumbrances of viewing and using websites with a very small screen.

Right-sizing for the mobile web

More than anything else, it's the small screen sizes of mobile devices that have changed the way websites are designed. While the web browsers on smartphones have the ability to scale the size of websites to fit their tiny displays, the results are often less than desirable when the site hasn't been specifically designed for the mobile web - such as presenting the user with microscopic text and unusable navigation.

Luckily, there are two popular methods available to build a website that's optimized for mobile devices: creating a separate, mobile-only website, or designing a single website using responsive techniques.

Dedicated mobile-only websites

A dedicated mobile website is, at its core, created solely for the purpose of serving mobile users only. They are companions to desktop-only websites and the two mostly exist as separate and autonomous entities.

You may have noticed these websites often indicate that they are the "mobile" version of themselves, while sometimes providing a link to their "desktop/full" version. Often these sites include an "m" (as in mobile) in the URL (such as m.facebook.com), indicating that, as a mobile user, you've been redirected to a different website that's been specifically optimized to work on your device. These are all indicators that there are two distinct versions of the same website - one meant for desktop users and another for mobile users.

In our research on the top techniques used by web developers and marketers from around the world, we've found that a dedicated mobile website, although ideal in some large-scale applications, just isn't feasible (or necessary) for most businesses. Here's a breakdown of some of the pros and cons:

Pros of mobile-only websites

  • Customized experience: Provide an optimized experience specifically for mobile customers.
  • More options: On a small scale there are tools available that help automate a mobile transition.
  • Exacting: Can offer more control for designers and developers.

Cons of mobile-only websites

  • Costs: Building a separate website for mobile users can be expensive.
  • Maintenance: Keeping a website up-to-date is challenging enough. Having two websites means double the work.
  • Marketing complexities: Because of duplicate site issues, a separate site, when setup improperly, could actually hurt your search marketing.

Responsive websites

Unlike a separate mobile-only website, responsive sites (along with adaptive sites) are designed using techniques that allow them to be viewed on virtually any size screen. As the name implies, they are flexible enough to "respond" or adapt to the screen size of virtually any device including those of traditional computers, tablets and smartphones.

Responsive websites differ from those that are mobile-only in that there's just a single website using the same code base, content and URL (visitors are not redirected to a separate website address) for every type of user.

While responsive design remains the preferred recommendation from Google, the search giant has made it clear that it now rewards all mobile-friendly websites (whether they be mobile-only or responsive) with better rankings. But there are still some pros and cons to consider when using responsive design patterns:

Pros of responsive websites

  • One website: A single website address serving all of your users.
  • Simpler marketing: It's easier to market one website.
  • Less expensive: There's less to build, maintain, support and update. 

Cons of responsive websites

  • Redesign costs: It's often not easy to redesign an existing website using responsive techniques, and may require painstaking work or a complete rebuild.
  • Loss of complete control: Designers and developers will have to be very creative to deliver an optimal experience for all types of devices.

The bottom line: mobile-only or responsive?

At Atilus, the choice has been simple: Responsive design makes sense for 99% of our clients, especially when the project calls for a brand new website.

And while choosing a responsive website is almost always the best course of action, there are situations where a mobile-only website may be the better option:

  • When it's a matter of cost: It may be less expensive to keep your current website as-is while adding a mobile-only version, rather than starting over using responsive techniques.
  • When it would be too disruptive: Attempting to redesign complex, legacy or high-volume websites may negatively effect your business.
  • When the user experience would be better: As great as responsive/adaptive design techniques are, sometimes a mobile-only website can provide a much better experience for its users. This is highly dependent on the particular type of website.