The present is almost mobile — as many as 85% of all American adults have cell phones and 45% of them have smartphones — and the future is certainly mobile. Thanks to iPhone, because soon after its release the trend of having a separate mobile website, based on the idea of creating a dedicated experience for on-the-go usage, found its birth.

Just when we thought we’ve got the ultimate mobile solution in separate mobile websites, we saw the arrival of a new concept on the heels of the future-friendly Web movement — responsive Web design. Coined by Ethan Marcotte on A List Apart, responsive design breaks away from creating a different website for each different platform or browser and embraces a one size fits all mantra. Many websites, such as those of Sony and Barack Obama’s presidential campaign, have graciously adopted this water-like design.

Responsive design has now been enchanting us for more than two years, and many of us have started feeling it is the future. But is it really so in all the scenarios? Sure responsive design fits every viewing context, but is it the solution to every mobile need (the ultimate solution, finally)? Let’s find out.

User Experience Matters Most

Brad Frost touches on what’s at the heart of Web designing — the ultimate user experience — through this tweet:

Brad Frost’s tweet.

Frost notices what we often miss while thinking about mobile Web design: mobile users have expectations similar to those of desktop users and, if possible, they should not be given any less. I agree with Frost’s statement here, but it all ultimately depends upon the website. For example, a pizza restaurant would want to give a great pizza ordering experience, whether it is on mobile devices or desktop. An accounting analysis company, however, would obviously not like to give all those detailed flowcharts to its mobile users.

One issue that most people see with responsive websites is that they just rearrange the contents of the website to fit a screen resolution. But limiting responsive design to a flexible, adaptive Web design would be like clearly underestimating its potential, as this CSS3-driven Web designing style also enables your users to select from the well-rearranged content they see on the small screen, significantly enhancing their experience.

Boston Globe is one of the most celebrated examples of responsive Web design.

Responsive design, however, is not a preferable choice and might not provide a good user experience if your existing website is not build on modern Web standards and at the same time you don’t have a high budget to rebuild your site as per the now-preferred mobile-first responsive design concept. In such cases it’s better to go with dedicated mobile sites.

If we compare the responsive design strategy with the separate mobile site strategy on the performance front, 7 of 10 designers would say that the latter has to win out. I partially agree with them. As a matter of fact, we all somewhere have to. Of course bad performance is not inherent to responsive design – hell no! Its implementation is rather a sore area. Tests after tests show that responsive websites are often bloated, and this is why they’re not able to meet the expectations of low-bandwidth mobile users. Tim Kadlec, in his recent article, has eloquently uncovered almost all the things we can do to improve the performance of responsive websites – things such as conditional loading, setting up the maximum page size limit etc.

Categorization Makes Your Life Easier

Sometimes, in a bid to enhance user experience, businesses create more than one mobile-optimized website. Facebook has created three. Their original mobile website (m.facebook.com) was made for the same purpose we all create one: an optimal mobile experience for the users. Then through their touch website (touch.facebook.com), they gave users of touchscreen devices an all-new social networking experience. And 0.facebook.com was built with the idea that collaborating with mobile operators to offer free access to Facebook could increase Facebook’s mobile usage.

But why is Facebook still putting its energy into so many websites when it can do it all with one? Or can it? To answer this question, we’ll have to categorize websites on three fronts:

• Interaction heavy,
• Text heavy,
• Media heavy.

Facebook, as we all know, is an interaction-heavy website. And its interactions on mobile are very different than those on desktop. So Facebook would not benefit from responsive design. On the other hand, content-heavy websites like Mashable, which recently turned responsive, have limited user interactions and their content can easily be reflowed. These websites would not need a dedicated mobile website.

When going mobile, content-heavy websites also have an issue of duplication of content, which can hurt them badly in their search engine optimization (SEO) efforts. To get things moving in the right direction, they need different content for both the mobile and desktop websites, so their cost of content gets doubled. That’s why most blogs nowadays are opting for responsive design.

Let’s now come to media-heavy websites. The three most famous websites in this category — YouTube, Pinterest and Vimeo — have zeroed in on the separate mobile website strategy. And rightly so. Responsive design utilizes HTML and CSS to manipulate and adjust elements in real time, utilizing a single set of classes. While this is possible for Web page elements, in the case of media-rich websites which may use a variety of player and video formats, one has to go with conventional browser detection mechanisms.

Factors That Should Be Considered In Mobile Design

The World Wide Web Consortium (W3C) wonderfully defines mobile design as “the art of communicating within an environment of mobility.” We might not have forgotten the definition, but there is one thing that we are unfortunately ignoring in the fight between separate mobile websites and responsive websites: W3C Web Best Practices 1.0, a great compilation of practices that help us give our users not just a design but a performance-driven design, and hence the experience of their lives. To remind one and all of these practices, I’ll discuss them briefly:

Design For One Web

The present-day world, as we all know, is not limited to desktop. It is flooded with a plethora of web-enabled devices. It has become a must to keep all of them in mind and try to give people what they want: a flexible, future-friendly website.

Stay Away From Known Hazards

Known hazards include frames, graphics for spacing, nested tables, etc.

Rely On W3C Mobile Web Standards

The W3C Mobile Web Standards include:

• Graphics,
• Multimedia,
• Device adaptation,
• Forms,
• User interactions,
• Data storage,
• Personal information management,
• Sensors and hardware integration,
• Network,
• Communication and discovery,
• Packaging,
• Performance and optimization.

Be Cautious Of Device Limitations

Since not all devices have the same capabilities, don’t rely on the availability of cookies, embedded script, font-related styling and other things that might cause problems to users.

Keep It Small

Users love small websites which open quickly and save them money.

Optimize Navigation

Keep navigation as simple as you can. This helps attract mobile users, as they are able to find what they were seeking easily.

Use The Network Sparingly

To make sure that your mobile design gives an optimal user experience, you must find ways to lessen the impact of network problems: strategies like doing away with the auto-refresh functionality if users don’t have an option to disable it.

Check Graphics And Colors

Every designer has their ICU (Intensive Care Unit). While designing, colors and graphics are probably put in this category faster than anything else. This is because different devices might not support one format and some even have low-contrast screens.

Think Of Users On The Go

Short, articulate and relevant information is the key to attracting users that are on the go.

Help And Guide User Input

To enhance the experience, don’t make your users do too much typing. Embrace functionalities like auto-suggest./p>

Finally, What Did You Decide?

Your business type, your business requirement and, of course, your budget can help you decide your silver bullet when it comes to mobile. Whatever you may choose, never forget the best mobile Web practices and remember that neither responsive website nor separate mobile website is a wrong choice. That neither of them is the ultimate solution, too — you just have to figure out what’s right for you, or rather how you can make it right for you.