Responsive Design: the T-Commerce and Mobile Cure-All?

| September 6, 2012

As the debate around how e-commerce websites should optimize for T-Commerce and mobile shopping continues, the challenges for ecommerce retailers mount as new mobile devices and platforms hit the market. The data is unambiguous: without a mobile site experience, shoppers abandon in droves.

Have you tried using your phone to shop on a standard website? If you have, you know you need to customize your shopping experience for smaller screen sizes. For myself, I know there are only so many times I’ll try to add a product to a cart when my thumb keeps hitting the privacy policy link beneath it.

But how should you accommodate the mobile experience? Should you:

  • Build a mobile-only site
  • Add a mobile conversion plugin
  • Develop a mobile app?

What about tablets, which are used more like laptops than phones?

Today, we’re living in a screen-size continuum, where standard screen sizes are dependent on the whim of technology developers like Apple, Microsoft and Samsung. Google Nexus 7 anyone? And what about the rumored 7 inch iPad?

You need to consider how to future-proof your website rather than just building for today’s screen sizes. Responsive Web Design can solve these headaches and prepare you for the screen proliferation to come.

What is Responsive Web Design?

Responsive Web Design (RWD) is a relatively new way of designing sites. It detects a visitor’s browser size and customizes the page display to match. Unlike mobile-only sites or apps, an RWD website changes based on the browser size, regardless of whether you’re on a tablet, a mobile phone, or a desktop computer.

You’ll know you’re on a responsive design site when the images change size and the page layout shifts as you resize your browser.

A good example of this is Look at how Tattly’s page layout and image sizes change as I resize my browser:

At 1016 pixels wide, it shows the full experience with left column navigation.
Tattly Responsive Web Design

At 741 pixels wide, the left navigation switches to be a top nav.
Responsive Web Design

At 503 pixels, the three feature products below the main image switch to two and all along the size reduction, the main image has gracefully sized down to avoid left-to-right scrolling.
Tattly Responsive Web Design

At 398 pixels, the site is in its smallest format with reduced image sizes and navigation optimized for mobile.
Tattly Responsive Web Design

The page always looks like it’s designed for your screen, no matter what size it is. No side-to-side scrolling or screen pinching needed.


Why Consider Responsive Web Design?

Do you think that screen size proliferation is a problem now? It will only get more complicated as we move forward when you have to consider the screens on your shoppers’ fridges, glasses and embedded-eyeball-display.

As screen-sizes become less standardized, the need to accommodate the size spectrum will become more critical. Building your site with RWD avoids expensive website development projects every time a new device hits the market. When you build your site in RWD you don’t need to continually rebuild it for new screen sizes or devices.

If SEO is a consideration for your site, you’ll be happy to know that RWD may positively affect rankings. Google has stated their preference for Responsive Web Design and I predict that Google’s SERP will soon be fully converted to RWD. That should only matter to you if you care about search rankings, though (and who doesn’t!)

With RWD each page has one URL rather than multiple pages and subdomains with the same content (like You only have to update one page, minimizing maintenance time. Another benefit is that your social interactions are aggregated rather than being split across multiple pages. Your tweets and Facebook likes show all activity.

Conversion Optimization for Responsive Web Design

Your site’s sales effectiveness is even more important than reduction in maintenance cost. Fortunately, you can optimize your site for conversion rate and revenue for all devices with RWD. The best way to do that is with continuous improvement through conversion optimization testing. WiderFunnel runs A/B split tests of RWD sites and we have found it to be a natural fit for our shopper-centric conversion optimization work.

You can find out more about RWD from a recent post on our blog about Conversion Optimization for Responsive Web Design.

As mobile technology continues to progress and produce new ways to engage, how is your website keeping up?

If you find this interesting please share with your friends or colleagues:

  • 8 Track Web Design

    Great Info about the Responsive web design… Today user engagement is increasing dramatically, therefore every business owner wants to make an own responsive website. Responsive web design helps to improve the SERP results and Conversion as well. Regards – 8Track Web

  • Sam

    This is important for marketing and you certainly do not want someone to get fed up at the checkout and just move on. But this sort of reminds me of the old days when you had to input the code for a 100 different printer models when software was written. Some platforms are making it easy to make websites smart phone and tablet friendly.

  • Jon Armstrong

    It will be interesting to see whether mobile websites can keep up with the demand for mobile app native functionality. With mobile apps there is a built in market to draw in users whereas mobile websites have to rely on existing traffic.

  • E3-111-C0WA

    You need to consider how to future-proof your website rather than just building for today’s screen sizes. Responsive Web Design can solve these headaches and prepare you for the screen proliferation to come.

  • Web Design Freiburg

    I also believe that mobile Web sites in the future will become increasingly important. Google has announced even more rewarding if the website has a mobile version or a responsive web design. More than 20% of internet traffic generated by mobile devices today. If you offer no website in Responsive Design or a mobile version, you give away important customers. When we launch new Web projects today, all corporate websites have a mobile website.

  • Adam

    Responsive is crucial now, it's amazing to see so many businesses with outdated Web 2.0 sites.

  • Jay

    I just built out our new website on a responsive design and we have seen our bounce rate cut in half.

  • Smartphones baratos

    A responsive design is fundamental for this modern times. If your website is not responsive, you are dead.