Insider views on responsive design: the debate continues

Not since Coke vs. Pepsi has there been such widespread debate and intense controversy on a singular topic. Technology and design blogs across web are engaging in hot debates about responsive design vs. mobile sites, arguing over which solution best delivers the mobile experience.

Can’t we all just agree? No, not in this lifetime, especially for a topic as highly debated as this one. With the vast number of web developers and designers servicing clients today, and the huge uptake in mobile devices that has drawn focus to the issue, it would be nearly impossible for everyone to agree.

Want to be a fly on the wall to hear what professional companies think about responsive design and how they are servicing their clients?

I interviewed four prominent organizations that create mobile experiences for their clients on a daily basis. Below, you’ll find the inside information on their mobile development processes

Two opposing positions

Though many different viewpoints exist, there seem to be two predominant opinions circling the web.

In the blue corner…

Fans of responsive design tout the many benefits as enough evidence that this technology should be applied to all or most mobile sites.

According to responsive design proponents:

• Users want a full website experience regardless of their device, not a stripped down version of what web masters think users will want to view. Usability centers on making the website visitor feel like they are in control and making the decisions. Experts argue that a separate mobile site may frustrate the end user.
• Responsive design is a cost-effective choice since there is only one site to maintain. Businesses will need to create separate mobile sites for each device which can add up in the long run with content and maintenance requirements.
• With responsive sites, there are no costly, future upgrades when new mobile devices hit the market
.
• Many SEO experts feel that websites built with responsive design are more search engine friendly because they won’t pass link juice to other domains as is the case with mobile-specific websites — some SEOs dispute this theory and cite Google’s skip redirect update as evidence. According to Google, this update “uses the final smartphone destination url” in their mobile search results, bypassing the redirects, allowing for a faster load time.

According to Michael Wyszomierski who works for Google in Product Quality Operations, responsive design is where it’s at. Here is his post on Google+:

Michael responded to criticism in the comments by stating that in some cases mobile sites may be needed, but overall he is a strong proponent of responsive design and believes many sites could vastly improve their user experience by utilizing it.

So if responsive design is so cool, hip and trendy, why is there mass hysteria surrounding the topic? Here are some reasons why…

In the red corner…

The other side of the argument are not stubbornly opposed to responsive design, but they feel it is only appropriate in specific situations. This camp stresses that the decision over whether to build a separate mobile site over responsive design depends on the needs of the mobile user.

Here are some of the arguments against responsive design:

• Speed – When a mobile user opens a site with responsive design, all of the elements of the desktop site are downloaded and resized to fit the screen. This makes the site slow to load since all of the original Javascript and HTML code is still present. (When designers create mobile-specific websites, they consider the device when designing the site and optimize it accordingly.)
• Distinct Content – The camp in favor of mobile-specific sites generally argue that mobile users may need another level of content that is not present on a desktop website. Responsive design may fit the device but it does not take advantage of optimizing the user experience as it relates to meeting their unique needs.

We decided to take this argument to the streets to see how profitable companies service their clients’ mobile needs. I talked to four top-level organizations and asked them about their approach to responsive design. I chose them because they are successful in delivering excellent work to their clients and their growth is a testament to that fact.

I asked each the same questions to examine how different/similar their approach was on the topic.

Colin Proctor, Smashing Ideas

First up is Smashing Ideas, a Seattle-based interactive agency in business since 1996. Art director Colin Proctor was kind enough to share his thoughts about responsive design.

Q: How often do you develop mobile websites for your clients?

A: We’ve made a handful of them. With many of our clients, we see mobile web initiatives taking off right now. Mobile web experiences have been a major topic of planning and conversation for the last year or so for most of our projects. The mobile sites that we have developed have been either responsive m.sites as companions or a single responsive layout. Most of these have had very focused content. We do have a broad portfolio of mobile experiences, whether native or hybrid apps, web applications, etc.

Q: Do you automatically use responsive design for all mobile clients? Briefly explain why or why not.

A: No, but it’s always a part of the conversation. We explore the context of the audience before making decisions about the technology. To be transparent, fully responsive layouts still have technical limitations that cause concern for large businesses: advertising, responsive imagery and 3rd Party integration support are some of the main concerns. For brochure sites, we almost always use responsive design because the content hierarchy for those sites tends to degrade nicely across a multitude of break points. Often, the context of the user for brochure sites is consistent across devices.

Q: Would you say you are…

a) In favor of responsive design
b) Not in favor of responsive design
c) In favor of both responsive design and separate mobile sites

Briefly explain why you chose your answer…

A: I think that it’s dangerous to use responsive layout as a catch all, and that a responsive strategy will determine the ways in which your design system responds to the context of your user (which is key). Responsive design/layout is a very scalable approach, but does it always take into consideration what the user is doing? It doesn’t, because it’s one system of many design solutions for mobile.

If I was building a public transportation website, I would have to consider that a user sitting at their desk is probably planning their schedule or routes, while a user on their phone is trying to figure out where their bus/train is and is seeking more immediate solutions. These two contexts exhibit different behavior, needs for expediency, needs for navigation, and what content should be presented up front. One set of templates with contextual styling and layout may not be the solution – there may need to be an entirely different set of features.

Q: What is your best piece of advice to web designers/developers looking to build mobile experiences successfully for their clients?

A: Responsive design is not a starting point. It’s a great technology that many in the web community have put a lot of time into to work out the kinks that hold it back from more of a global presence. I think that we will see the adoption of responsive layout/design grow over the years.

In my opinion, the best thing to come out of the mobile web explosion is a break from the idea that our canvas is set, and that we just need to fill it in. We are forced to outgrow our old assumptions about user experience, and are accountable for our thought processes more than we have been in recent history. As a society, we no longer are a captive audience looking at a rectangle of an average viewing area as 1024×768, so the rules are being re-written. As an industry, this is a time to experiment and grow.

Evolve Creative Group

Next up is Evolve Creative Group, a full-service web solutions company based out of Akron, Ohio. I asked the developers the same questions and here are their responses:

Q: How often do you develop mobile websites for your clients?

A: We develop mobile websites probably about 30% of the time. It’s a combination of desire, budget, and necessity for our clients. Many clients don’t have the need or desire to support mobile due to their audience and budget. Due to the flexibility of the sites we build (non-mobile), they work decent enough on mobile that clients can’t justify the cost. It can be a hard sell, but as mobile trends grow and solidify, more clients are getting on board.

Q: Do you automatically use responsive design for all mobile clients?

A: No, we don’t use it for all mobile clients. We simply do what is in the best interest of the client and their users. We carefully evaluate the mobile approach on a case by case basis depending on their needs.

If the client’s mobile users have a subset of interests, or a specific goal that requires an alteration to the layout or amount of information delivered, we will recommend a separate mobile site on a subdomain, which allows us the ability to simplify the site for the mobile experience. But on the flip side, if the site is already simple and universal in messaging and goals (like blogs, landing pages, and small informational sites for example), then having a single site that is flexible across all platforms is definitely advantageous.

Q: Would you say you are…
a) In favor of responsive design
b) Not in favor of responsive design
c) In favor of both responsive design and separate mobile sites.

Briefly explain why you chose your answer…

A: Like everything in this business, the mobile approach is a give and take, as there are pros and cons of each method. Separate mobile sites offer the advantage of focusing the user on specific content that is concise and optimized. But the inherent downside is that the client may have twice the upkeep for future updates.

This is where responsive design chimes in with the “one site to rule them all” argument. Having a single site that is universal, rich in flexibility, and delivers the entire site for users to interact with as they please is a very exciting idea. It puts power in the clients’ and users’ hands and solves the problem of designing and building websites for a specific device (desktop or otherwise). But the arguments against responsive design like download time, development costs, and information overkill, can be just as compelling.

The moral here is to tailor the solution based on the project and users, and not to get hung up on the ever increasing fiery debate.

Q: What is your best piece of advice to web designers/developers looking to build mobile experiences successfully for their clients?

A: The biggest piece of advice we can offer is to be smart in choosing your approach. Don’t just jump on the responsive band wagon because it’s the hot new thing or stick with separate mobile sites because it’s safe and familiar. You need to carefully judge the pros and cons of each approach for the specific project at hand.

Also, base it on the end user of the solution. Are they the type that has a specific goal and no attention span? Do they want to get in, get out, and get on with their life? Or are they in a coffee shop and wanting to take in the full experience? The answer to that question will likely render the correct choice.

Ryan Anderson, Alchemy50

Next, I talked to Ryan Anderson, president of Alchemy50, a digital agency based out of Brooklyn, NY. Here is what Ryan had to say about his company’s process:

Q: How often do you develop mobile websites for your clients?

A: Rarely. I think mobile specific websites are becoming a thing of the past. There are so many different screen sizes, resolutions, etc… to consider these days that creating a specific “mobile” site is usually more work than it’s worth and doesn’t solve the problem completely.

Q: Do you automatically use responsive design for all mobile clients?

A: Not automatically, but frequently. It really depends on the nature of the project – whether it’s a web application or a corporate website – both have unique parameters that should be considered. We also don’t really separate out “mobile” so much anymore, rather, we go into a project knowing that in most cases it’s multi-device, multi-resolution, multi-browser, etc… it has to work everywhere and with one code base to be cost effective.

This is where a good responsive framework is key – you can address most permutations with a good framework. Alchemy50 has created its own framework that is a blend of rigid elements and dynamic scaling. We have found that more complex sites tend to be a bit unruly using elastic frameworks, so our framework uses media queries to adjust our pages at set resolutions. It’s proved to be extremely helpful and effective in our efforts to support multiple devices and browsers with one code base.

Q: Would you say you are…
a) In favor of responsive design
b) Not in favor of responsive design
c) In favor of both responsive design and separate mobile sites depending on the client and their users

Briefly explain why you chose your answer…

A: It’s really the only way to develop on the web these days. We have to put ourselves in our client’s shoes and consider – total cost, timeline, scalability, supportability, etc… and when we do, it usually supports the notion of a responsive framework. It is important to point out, however, that sometimes what’s being asked for can’t be done without native OS libraries – so a responsive web framework is not the answer to everything.

Q: What is your best piece of advice to web designers/developers looking to build mobile experiences successfully for their clients?

A: Don’t pick a solution until you fully understand what the client wants to do. And beware, often times a client will say they want “an HTML5 site” or a “mobile app that works everywhere” – we have found that they usually don’t fully understand what they are saying. Ask them to forget the technology for a minute and explain in plain language what it is they are looking to build. What is the target market? What are the habits of that market (technology, browser, do they sit at desks, etc) What functionality will the site/app deliver? Often times, as you talk through these points with the client, an efficient (and sometimes very different!) approach will emerge.

Nicholas Davison, Digitaria

Lastly, I talked with the Director of Web Development at Digitaria, Nicholas Davison. Digitaria is a full-service digital agency founded in 1997 with five locations across the United States. Here is what Nicholas had to say about responsive design:

Q: How often do you develop mobile websites for your clients?

A: The majority of our builds include a mobile component these days. With a portfolio as broad and as deep as Digitaria’s, that means my team typically has several sites with mobile components at any given time.

Q: Do you automatically use responsive design for all mobile clients? Briefly explain why or why not.

A: Ignoring Zeldman and honoring Marcotte’s definition…if you separate Responsive as, essentially, Adaptive plus liquid layouts and images, we don’t automatically choose Responsive over Adaptive. The main reason for this is return on investment.

Liquid layouts introduce a series of challenges: Mixing fixed dimensions and percentages tends to require additional div elements to hang the design off. Rounding errors lead to problems in older Internet Explorer builds and often leave single pixel gaps even in more modern browsers. QA, if performed properly, should be checking every element at every size in every browser – that adds massively to QA costs.

What do these costs get you over an Adaptive design that already caters for 320, 480, 720, 960 and 1140? They make slightly better use of space and add a slight wow factor. If those benefits justify the cost, we build Responsive. If they don’t, Adaptive is more appropriate.

If, as Zeldman suggests, we use Responsive and Adaptive interchangeably and aren’t looking at liquid variants, it should still never be an automatic decision. Anyone thinking of their client looks at the right tools for the right job.

Adaptive has a great many advantages and usually makes sense. However, there are always exceptions: Mdot often works better when the client wants different content for mobile. Apps often work better when the client wants very advanced functionality that requires a custom interface and interactions for each form factor.

Occasionally, Mobile doesn’t make sense, period. If a client simply has to have a minimal site up for legal or grant reasons and wants to keep costs low while simply checking a box, overselling isn’t appropriate.

So, Adaptive is something we usually recommend but, as a good partner, we should never automatically recommend anything without listening first.

Q: Would you say you are…


a) In favor of responsive design
b) Not in favor of responsive design

c) In favor of both responsive design and separate mobile sites

Briefly explain why you chose your answer…

A: Adaptive design is incredibly compelling in almost every case. Ignoring mobile and tablet is rapidly becoming as bad a business move as ignoring the web was ten years ago. You simply have to consider them for most projects. The days of partial Mdot sites are numbered. Users expect all content on whichever device they use. Once nonexistent or partial mobile are not even options, Adaptive is the most cost efficient way to deliver it in the vast majority of cases. Compared to a full Mdot and full Desktop site, it’s cheaper. Compared to full Mdot, Tablet and Desktop, it’s vastly cheaper.

And those are just the arguments for today: Adaptive is cheaper to maintain and build upon as it’s one platform. Sites aren’t just for today. With the several year lifespan on most sites, we need to not just think about how much people use mobile and tablets today but how much they’ll be using them long before end of life for the site.

Q: What is your best piece of advice to web designers/developers looking to build mobile experiences successfully for their clients?

A: Plan. Consider mobile and desktop at the same time. Going back and retrofitting the underlying structure to accommodate what you now need for a surprise design is way more expensive than planning and building one clean structure that serves both.

Use respond.js so your site works on every browser, not just the ones that know about media queries. Don’t build liquid just because Responsive is the cooler version of Adaptive. It has advantages but it also has costs. Make sure you’re picking what’s right for you.

Test early and test often. It was true when we were developing on four desktop browsers and had older Internet Explorer to consider. It’s doubly true now we’re adding many mobile platforms: An issue is easy to fix cleanly if you catch it when it first appears. It is almost impossible to fix when dozens of layers are built on top of it, obscuring the core issue. If you aren’t testing, cross platform, after every new feature you add then you’re doing it wrong.

For sanity’s sake, you have to agree to a list of platforms that you’re giving a code warranty for. There are so many Android variants, old iOS point releases, Windows Mobile devices that you’re going to be offering free patches for life if you’re foolish enough to simply agree “all smartphones.” And then there’s Blackberry where the older versions seem designed with a perverse love of breaking.

The debate continues

Thanks to all the participants for providing us with insight into their daily processes.

Jenna Scaglione

Jenna is the owner of Lady Content, a unique “content makeover” service. She is a successful writer, internet marketer, and a lover of family, friends and life. She enjoys helping her clients boost their conversions and increase brand awareness on the internet through content writing and social media. Connect with Jenna on Twitter or chat with her on Facebook.