Introduction to responsive Vs mobile specific

Background

Website owners are seeing a dramatic increase in mobile traffic to their websites. This traffic is fragmented amongst hundreds of devices, each with varying capabilities and constraints. Considering this trend, diversity and fragmentation will increase exponentially.

To cater for this increase in traffic and fragmentation, website owners should be looking to establish an approach to deal with mobile and multi device users.

The concept of fragmentation, capabilities and constraints is important when considering mobile traffic. Mobile is not just a few extra OS (eg Apple and Android) on your stats; you are likely to see hundreds if not thousands of devices each with varying capabilities and constraints.

Two approaches tend to be shortlisted; responsive design and mobile specific design.

Here are some of my thoughts on why responsive is often the better choice over a separate mobile website. It’s not nearly exhaustive enough, just easier to post here than a forum reply. There are many awesome resources online about mobile design and development. I’ll signpost to some throughout this blog, so you can make up your own mind.

What is responsive design

Responsive design is the process of building one website, with one set of content, that adapts to whichever viewport (browser window) displays it. The building blocks of responsive are fluid dimensions (allowing presentations to stretch in width), CSS media queries (allowing adaptive layouts at set breakpoints) and optimised content.

The primary focus is the content, not the device. Responsive web design supports the idea of One Web.

What is mobile specific (.mobi / m.)

Mobile specific design is the concept of building an additional website often with trimmed down content, designed specifically for mobile devices. The building blocks of mobile specific are device detection (allowing the server to redirect to a different site), different URL structure (commonly m. or .mobi) and trimmed down content specifically for “small” screen.

The primary focus is the device, not the content. Mobile specific contradicts one web.

Considerations

The content problem

User testing consistently highlights a common problem on websites to be either too much or irrelevant content. This problem must be tackled at the root. Regardless which device accesses the website, the content should be succinct and potent. Creating a stripped down, mobile version of a journey does not solve the problem.

Why would we deliver an optimised experience to a mobile device and an un-optimised experience to the desktop user? Too often, marketing departments fill an empty space with rubbish. By letting go of 1024 fixed layouts and “canvas”, website owners are forced to look at the real architecture of content and how it all hangs together. Website owners must think about how to design the content, not how to design for specific devices.

Mobile specific design would be like sticking a plaster over the problem by by not addressing it directly.

Responsive design would tackle the problem at the root, forcing the website owner to look at their content regardless of style or layout.

Context

There’s been an increase in the number of users who use only a mobile to access the web. To them, web is not “mobile”; web is one place for information.

It is technically impossible to ascertain the context in which a mobile device is being used. Surveys show 93% of mobiles are used in the home. This disproves the myth that small devices are always on the move.

Any decision we make to send location based content or “light touch” information would be based on outdated and dangerous assumptions. Users accessing the website on mobile or desktop could want the same content.

Mobile specific would restrict the content experience to the users.

Responsive design would grant users the full content experience, regardless of context.

Maintenance

The maintenance of one codebase is easier to manage than two. Development time and costs are lower with one codebase than two. There is little benefit of running two codebases on separate URL structures. Website owners who own a relationship with a third party supplier may find themselves managing many relationships across many platforms and skillsets.

Responsive design forces designers, developers and managers to rethink the way they plan and consider content. This may require learning and education work at kickoff, but once that corner is turned the design workflow almost normalises to that of maintaining a single website.

Mobile specific has two codebases.

Responsive design allows for one codebase.

URL Structure

A clean, tidy and logical URL structure is important to a website not just for SEO and maintenance, but also for sharing.

If a two tier URL structure is in place it’s possible that a desktop, tablet or TV user could click on a mobile specific URL on a larger device and be trapped in an un-optimised experience. Take Twitter for example; on a mobile device, a mobile specific website would be shared as m.example.org rather than www.example.com. Remember, assuming context is dangerous.

Responsive allows for one URL structure, encouraging the concept of one web and net neutrality.

SEO

Google recommends responsive design as its preferred approach to mobile.

Bing recommends responsive design as its preferred approach to mobile.

Future Proof and scalability

The future is unknown. Website owners should expect lots of diversity in the fragmentation of devices that access their website. With an increase in the number of devices, it is important to choose a flexible and future proof approach to these devices.

With more and more devices (and possibly more platforms), website owners have to let go of the idea that we once built for 5 browsers. Testing on every device is impossible, so practicing good web standards, semantic markup and basic progressive enhancement is more important than ever.

It is much more efficient to build one flexible, adaptable website than try to manage redirections for new channels as they appear. This approach should be device agnostic, and focus on semantic flexible content easily accessed on one web.

Responsive design is an obvious candidate for future proofing.

Although it’s often spoken about in the context of mobile and tablet, responsive web design and CSS media queries can be used at larger breakpoints as well as small. This allows for layout changes on new internet media such as television and large screen.

Resource

In the long run, anticipating and planning a responsive piece of work is no more resource intense than supporting the same two tier mobile / desktop system. In the short term, there is a learning curve as people start to embrace the technique.

It could be argued that it’s quicker to implement a separate mobile site, as the work can happen on a separate track to the main site development, but considering the long term goals and two tier implications this is a short term benefit.

What about page weight? Isn’t responsive inefficient?

Nine times out of ten page weight is likely to be lighter on a mobile specific build. Less content means less page weight. Assuming the device is a mobile means you can send down optimised assets such as JavaScript and images.

By default, that doesn’t mean responsive a a lot heavier. Website owners implementing a responsive build should do so with a content / mobile first approach with careful consideration of file sizes. The vast majority of responsive sites that are heavy in page weight are simply done wrong. Careful consideration has to be made around optimising the assets, content, http requests… By following this practice (as should be done with any website build) you make the responsive site as light and quick as it can be on mobile, and on desktop it just performs even faster.

Can responsive and device detection live in harmony?

Kind of. Responsive and server side components (RESS) is a model being adopted by many advocates of responsive which is a hybrid of responsive techniques and server side detection. It’s more about capabilities and constraints and catering for what that device can handle, based on what you know about that device. For example the templates and content would remain the same, but we could switch out an image path to deliver hi-res, heavier images if we’re certain the device is capable of comfortably handling it.

In my opinion, RESS offers the most hope for a solid universal multi device solution for the future.

Summary

The landscape has changed very quickly in the past year, and looks set to continue into the fragmented unknown for the foreseeable future. By choosing responsive, website owners are building a flexible foundation which is the most logical for scaling and building on for months and years to come.

Responsive is future proof, saves time and resource in the long run, is favoured by Google and Bing, provides a multi device solution (both small and large screen) and allows us to focus on the single most important element of the site that converses with users: the content.

So that’s my brain dump, which I’d like to tidy up some day to make it more joined up. Particularly around the key considerations for any good website: