What’s Up With Responsive Web Design?

Nic Tinworth | October 29, 2012

In previous columns I have covered mobile trends and the reasons why your business needs to consider integrating a robust and forward-thinking mobile strategy into your digital marketing efforts.

Just in case you need any reminding why, here’s a graph showing that by 2014 mobile Internet usage will overtake desktop Internet usage. What that means is that increasingly, people will be visiting your website using a wide variety of mobile devices – smartphones, tablets of varying sizes, feature phones among them – and expecting to find the information they need without too much effort.

(Source: http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx)

A few other interesting numbers to note:

Half of all local searches are performed on mobile devices.
86 percent of mobile Internet users are using their devices while watching TV.
As Facebook hits 1 billion users this month (October), more than half of the total user base (56.86 percent) accessed the service via a mobile device.

In fact, as of June 30, 2012, mobile monthly active users on Facebook were 543 million, which was an increase of 67 percent YOY. And Facebook has said on more than one occasion it’s making mobile a top priority, going so far as to claim that it is going to “become a mobile company.”

Looking at these facts and figures there is simply no denying it – the future is mobile. As increasing numbers of people turn to mobile devices for Internet browsing and content consumption, this presents new challenges and opportunities. And we as marketers, strategists, SEOs, and web designers must adapt to ensure not just the best possible user experience, usability, and content parity, but the right solution among all the options available. This is tough, especially considering how fragmented the mobile market is.

One particular technique for presenting mobile content that seems to have become the industry standard, or at least getting that way, is “responsive web design.” The main difference between a responsive website and having a dedicated, separate mobile-optimized site (m.yourwebsite.com or www.yourwebsite.com/mobile) is that responsive layouts adapt themselves to different screen sizes by scaling the content according to the “viewport” size of the visitor’s device.

There are massive benefits to a responsive web design, but that does not mean the approach is not without its negatives, and it is by no means a cookie-cutter solution. Let’s examine a few of the pros and cons.

The Pros

1. Google recommends responsive

In May 2012, responsive design became Google’s recommended industry best practice when designing for smartphones.

2. One site to rule them all

One of the main benefits to a responsive approach is that you only have to design, develop, maintain, and promote one website. From an SEO point of view, hosting a separate mobile site, e.g. m.yourwebsite.com, means you need to optimize and manage two separate sites and analytics profiles.

3. A good UX

As the website will automatically adjust itself to a wide variety of screen sizes, and also hides elements that aren’t necessarily needed for mobile visitors to accomplish their goals, it can be seen as a solid long-term solution to UX. Having just one URL to handle all the inbound links, likes, tweets, and shares also contributes to a better UX.

4. Familiarity between the desktop/mobile views

Often with separate mobile websites there is a learning curve to get used to the layout and navigation, especially if they differ greatly from the desktop version. With a responsive site, the mobile view mimics the full site’s information architecture and thus this learning curve is reduced.

The Cons

1. It can be a more time-consuming and costly endeavor.

As part of the process you will need to decide what content or images won’t be displayed on smaller device screens, and what the content order should be. Consideration must also be made for content structure across other device screens, how image optimization will be handled, and how the CMS will integrate. Generally speaking it is much easier to create a responsive website from scratch than convert a current website, but development time is still longer than building a non-responsive website. There is also extra work involved with wireframing and mockups for both a desktop and mobile layout, and what the “in-between” layouts will look like.

2. Load times

Often images are simply scaled down and not resized or optimized for the smaller screens, negatively impacting load times on mobile devices, which can be an issue for those visitors on slower connections who will also have to download HTML and CSS code that they may not necessarily need.

3. Compatibility issues

Due to the lack of compatibility of some older browsers for this approach (especially with media queries and HTML5/CSS3), users of older devices may not see the correct version for their device.

4. Varying objectives

As wonderful as having one website and content source to manage and maintain sounds, the fact remains that user goals and objectives for the desktop site may differ greatly from what they expect and need of the mobile version. Responsive then optimizes just for the resolution, and not the user behavior.

These are just a small selection of some of the things to consider with a responsive approach to your website strategy. At the end of the day, you will need to engage your digital agency and key internal stakeholders to decide what the best solution is to your business objectives, and what the overall user goals will be, before deciding if a responsive website is going to work for both.

Responsive web design image on home page via Shutterstock.

Tags: responsive design

Meet industry experts from Adidas, Coca-Cola, Facebook, Google, SAP, Sina Weibo, Taobao, Tencent, Youku Tudou, Unilever, and more. Find out more at SES Shanghai 2013.

About the Author

As the digital director for Fluid, Nic brings over 14 years experience in digital, mobile, and multichannel relationship marketing, with "hands-on" practical working experience of web and interface design and programming, information architecture, planning, strategy, and interactive art and creative direction. He has previously worked at agencies in the U.K. and the U.S. where he led digital projects for a range of clients, including Virgin, Vodafone, Quiznos, Goldman Sachs Ford, Disney, and The Wall Street Journal, winning several awards for his work. At his core, Nic is a user-centric interactive designer with a love for beautiful and functional design and all things digital and technology related. In his spare time he is a competitive endurance trail runner, sailor, surfer, and snowboarder and enjoys taking and sharing photos with Instagram (http://copygr.am/nictinworth/).

ClickZ.asia

What’s Up With Responsive Web Design?

About the Author

Subscribe to ClickZ Asia Weekly!

Categories

Countries

Archives