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?

11 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

  4. Sam August 24, 2014 at 4:24 pm - Reply

    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.

  5. Jon Armstrong August 27, 2014 at 10:09 am - Reply

    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.

  6. DudaMobile September 19, 2014 at 9:54 am - Reply

    All of the points you make in this article are very important. More businesses have to get their websites ready and optimized for mobile device and shoppers that use smart phones. I think smart phones users don’t have the patience to wait for an unresponsive website either. On the go, they want to find the business info then and there.

  7. Newest Kindle September 23, 2014 at 5:13 am - Reply

    I am a total newbie to website design (or design of any sort). Decided to take on the task of building my own webpage. I worked for 4 weeks (yes) on my index page. One day my hubby asked if I made it responsive….uhhhh. What is this..so he explained to me. I looked through multiple websites and this is one of the only videos that truly helped me move into responsive coding!….I am so happy it wasn't hard to change :) . Thanks!

  8. E3-111-C0WA September 26, 2014 at 12:44 pm - Reply

    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.

  9. noise cancelling September 29, 2014 at 1:07 pm - Reply

    great post, I'm into responsive design my self and I have a lot of clients who are sttressed out because the conversion rates from mobile are way lower the desktop visitors.

  10. gamesfreak October 1, 2014 at 6:01 am - Reply

    love it

  11. Web Design Freiburg October 21, 2014 at 3:53 am - Reply

    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.

Leave A Comment

WP Socializer Aakash Web