Is Responsive Overhyped?

Is Responsive Overhyped?

Responsive Web Design is all the rage.  All of a sudden, we hear advocates asserting that “responsive is the way to develop sites.”  Or “Google recommends responsive for SEO.”

Observers might think that this approach has become the de facto standard among e-commerce leaders.  But a close look at the top companies in the Internet Retailer rankings, reveals a surprising reality:

Responsive Adoption among Top Retailers March'15

Among these top 16 retailers, only 2 have gone with responsive, despite obviously having the resources to do so if they wished.

So, what’s the disconnect here?  Why hasn’t this hot-trending technique taken hold among the industry leaders?  Are we confusing mobile-friendly as mobile-optimized?

Pros & Cons Summary

The table below summarizes the key advantages and disadvantages of responsive and dedicated approaches to mobile.

Responsive Dedicated
Advantages
  • Satisfies Google’s mobile-friendly requirement
  • Only 1 site to maintain leads to a low cost of ownership
  • The mobile experience is not tethered to the desktop experience
  • More cost-effective if you want to maintain mobile as a distinct experience
Disadvantages
  • Slow performance
  • Higher one-time cost
  • Disruptive to the desktop site
  • Two sites to maintain

What Is Responsive Web Design?

We can answer this from 3 vantage points:

  • Technical: Responsive is the use of a media query in a website’s HTML, giving formatting instructions to the browser, and instructing the browser how to reformat the page to fit the width of the screen.
  • Design:  a design approach that allows different device types to be served by a single set of HTML pages.
  • Strategy:  an approach of “one site fits all” for handling different types of devices.

Responsive Technique

Another way of looking at responsive is how Google positions responsive alongside the 2 other recommended approaches to mobile:

  • Responsive web design: Serves the same HTML code on the same URL regardless of the user’s device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size.  Responsive design is Google’s recommended design pattern.[1]
  • Dynamic serving [aka Adaptive]: Uses the same URL regardless of device, but generates a different version of HTML for different device types based on what the server knows about the user’s browser.
  • Separate URLs [aka Dedicated]: Serves different code to each device, and on separate URLs. This configuration tries to detect the users’ device, then redirects to the appropriate page using HTTP redirects] along with the Vary HTTP header.

[1] Google goes on to say that they do not favor any particular URL format as long as the page(s) and all page assets are accessible to all Googlebot user agents.

Responsive Strengths

Responsive is an elegant solution for handling small screen sizes.  By reprogramming the desktop site’s HTML and redesigning the layout, site owners can deliver pages that know how to adjust for screen size via a media query, that lets the html respond to the browser’s screen width.

Responsive meets the standards Google has set for being mobile-friendly.  Due to this, responsive sites, properly done, will be saved from Google’s Mobilegeddon.

And because of the “one-site-fits-all” approach, there are fewer content elements to control and therefore fewer management tasks.  Advocates of responsive say this leads to a lower cost of ownership.

Responsive Weaknesses

Responsive has one glaring problem:  slow page load speeds.  A responsive page works by delivering more content to the smartphone, and then asking the mobile browser to sort things out based on its screen width.  This performance gap was reported by Internet Retailer:

It turns out responsive design sites are slow on smartphones, very slow. That’s the conclusion that emerges from an Internet Retailer-exclusive, monthlong study of 12 e-retail responsive design sites conducted by web and mobile performance testing, monitoring and analytics firm Keynote.

A secondary weakness is that deploying responsive is complex and can be disruptive to the main website.  As a result, responsive deployments tend to be more expensive than dedicated projects.

Dedicated Strengths

Dedicated is the better choice when a retailer actually wants to have the mobile experience different than the desktop experience.  The “one-site-fits-all” advocates might ask why you’d ever want to deliver different experiences. There are several compelling reasons because – as we all know – mobile is so much more than just a small screen:

  • Mobile UI Capabilities – Mobile brings enhanced capabilities for interaction – such as location, touch, voice, camera, fingerprint, and motion. All can add richness to the mobile experience.  Today’s desktop site does not support these capabilities, nor does it need to.
  • Different User Circumstances – Consumers have their phones in many places and settings that the desktop site needn’t worry about:  in stores; on sports fields, in the garage, where the retailer’s product is being used; or in social settings.  Most retailers can find new advantages here.
  • Different Desired Outcomes – Because of its omnipresence, mobile is the ideal omni-channel device.  We know consumers use mobile for product discovery & research, even when they complete the purchase in a different channel – online, in-store, or call center.  Why wouldn’t the mobile UI help facilitate this in a way that’s different than the desktop?  Different calls to action; and different ways to prioritize them.

Dedicated Weaknesses

The conventional wisdom is that a dedicated site is something else to manage and that it represents an additional cost of ownership.  Conversely, the counter view is that dedicated is a more cost-effective way to manage your mobile customers.

In addition, it is often asserted that Google will give an advantage to responsive sites.  But, as discussed in the What Is Responsive section above, Google states that it does not favor responsive over dedicated.

Perspective

  1. Responsive is a good choice for adapting a desktop site for the small screen.
    As a web development technique, it’s an elegant way to deliver a small screen experience.
  2. Dedicated sites are the better choice if the retailer wants the mobile experience to take full advantage of uniquely mobile capabilities.
    For retailers who want to get the most out of mobile, dedicated sites make it easier to build a mobile-specific experience — one that takes advantage of unique mobile capabilities that the desktop site isn’t geared for.  And to deliver different calls-to-action that optimize across all channels.

Responsive is a very useful technique for adjusting web pages to screen size. Due to this, developers love it as a tool.  Unbound uses it as one of several methods for integrating the mobile experience into the retailer’s web infrastructure.

But that doesn’t make it a good mobile strategy.

If mobile-friendly is good enough for your company, then responsive is a fine choice.  Comparatively, a better choice for your company might be to take full advantage of mobile-unique capabilities and deliver a distinct mobile experience.  Unbound loves working with retailers who want to make the most out of mobile.

 

Keith Lietzke is the Co-Founder of Unbound Commerce.  You can reach him at [email protected].

How to Match App Design to iOS 7

ios7 design

With the recent iOS 7 release some of the biggest buzz has been about the major redesign of UI and app elements. Though it is definitely not necessary, some of you might be interested in matching your app design to this sleek new interface so that it seems to directly integrate into the apple ecosystem. With that in mind, the following steps will help you closely match your app to the new iOS 7 conventions.

1. Simplified Icons

The new iOS 7 app icons are all very simple, flattened representations of the apps they represent (standing in stark contrast to Apple’s older, more realistic icons). To match these icons, you will need a very simplified icon without text. You should also keep it to one color, preferably a black, white or light grey.

2. Gradients

Most of the new design elements incorporate gradient backgrounds. You should make sure that your app icon, splash screen, and background all feature gradients. Note that most of these are soft gradients, so don’t make a radical jump between opposing colors if you want to match the iOS 7 design precisely. Fortunately it’s pretty easy to create a gradient in most image editing programs, and some tools will even do it for you.

3. Elegant Text

Apple has chosen Helvetica Neue as their text of choice for most UI elements due to its sleek, elegant nature. Choose an app font in the Helvetic family to approximate their text.

4. Transparency

Apple has also made many of their menus and containers transparent, allowing the gradient to show through the menus. When creating a menu for your app, make it very light grey and set the transparency high (without making the menu disappear completely).

5. White Space

iOS 7 uses a LOT of white space. You can do the same in your app, which will highlight your multimedia, text and design. Simply make sure that you don’t flood your app with large blocks of text, and follow established mobile writing tips to make everything more streamlined.

There you go! Let us know in the comments if you have any other ideas, or if you have questions about incorporating any of these elements into your mobile app.

Color Considerations For Your App

Apptive developer Brandon Fairchild gives some great tips on color choices for your app, as well as why certain options are better than others.

By the way, here are the links he discusses in the video:

http://www.colorblender.com/

https://kuler.adobe.com/create/color-wheel/

Thanks for watching!