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

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 Tattly.com. 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 m.domain.com). 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?

3 Comments

  1. david May 8, 2013 at 10:59 am - Reply

    Your site’s sales effectiveness is even more important than reduction in maintenance cost.
    upper west side photography

  2. Stephen Ross May 28, 2014 at 3:00 pm - Reply

    I read that over 50% of online searches will originate from from mobile devices in 2014. Any business that uses the internet in any shape or form – to generate enquiries and hopefully sales – really must have a responsive website as their main marketing priority this year.

  3. 8 Track Web Design July 16, 2014 at 12:04 am - Reply

    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

Leave A Comment

WP Socializer Aakash Web