By Giovanni Calabro published August 26, 2012

Is Responsive Design Right For Your Content Marketing Strategy?

Responsive-Website-DesignMarketers and technologists are buzzing about the field of responsive design because it promises to solve a critical problem: creating engaging content for a proliferating number of devices. But can responsive design deliver on such a tall order?

In essence, the responsive-design methodology makes certain all channels are designed as one using clear content prioritization. Whether you see a web page on a laptop or a mobile device, the experience is consistent and optimized for viewing on each device, essentially, “different but the same.”

As more companies behave like publishers and rely on content to connect with customers, they must think about how to design an engaging content-based experience, from full-screen desktop to small-screen smartphone — without having to reinvent the experience with each new device that comes around.

Want to understand what responsive design looks like? Take a look at Starbucks’ new website on a desktop, tablet and phone — and see how the company creates an optimal reading experience for each context. The Boston Globe site offers yet another example of what’s possible.

Old technique, new technology

Responsive design has been around a long time, but has picked up steam lately because of device proliferation (ever heard of the “phablet”?), and because consumers behave differently with their devices than what was expected. The idea that consumers might shop on their smartphones was once considered ludicrous — but more than 60 percent of mobile users now make purchases while at home. And the idea of consumers engaging with “second” and “third” screens while viewing television is no longer novel.

All this means consumers need a consistent user experience across all devices, and want an optimal viewing experience for each device.

When to consider responsive design?

To put more of the content users want in their hands, companies must look across their entire portfolio of content and begin to prioritize the most important elements. If you are struggling over whether a piece of content is necessary, ask yourself, “If the content is not important in a mobile environment, is it really important at all?” Simply put, the smallest device will have the most important pieces of content. More content is introduced as you work your way up in resolution size from smartphone, to tablet, to laptop and finally desktop.

This “mobile-first” approach is important because it forces you to design for the most frustrating viewing experiences — a small screen and a slow connection — and zero in on what matters most. Not surprisingly, a mobile-first perspective often leads to a realization that your website is overfilled with content that doesn’t support your objectives or lead to conversions. Also, research shows even small delays in load time can turn away viewers, and so a design that begins with the mobile experience prioritizes speed, leading to a better desktop experience as well.

What are the risks?

As with any large undertaking, responsive design can be expensive and tends to front-load costs when compared to investing in design on a device-by-device basis. It also requires a comprehensive, cross-channel content strategy — something that can be challenging for organizations with many silos. The best designs pull input from a multi-disciplinary team composed of content strategists, designers, developers and marketing technologists.

Some strategists caution a responsive design philosophy may mean marketers are making decisions about what their audience wants to view on mobile, instead of allowing users to make this decision themselves. What’s more, mobile users are more likely to be forced to download too much data to view a page (something less likely to happen when sites are designed specifically for mobile-only). Companies intent on adopting responsive design should pay close attention to all of these issues.

What’s the cost?

The immediate up-front investment, both in terms of time and cost, can be substantial. A responsive design project is more expensive than doing a single-device mobile implementation, but the cost is roughly the same as the aggregate of those individual projects.

Responsive design offers a new ethos to help content marketers adapt to customer behavior online. Forty-three percent of mobile Internet usage now happens at home (InsightExpress, 2011); more than 60 percent of consumers make mobile purchases while at home (Ipsos and PayPal survey, 2011); and 86 percent use their mobile device while watching TV (Yahoo, 2011). Given the astounding rise of mobile, responsive design is no longer a UX-only discipline, but something all marketers must understand and consider as part of their strategic planning.

How is it done?

Content prioritization is the first step in a user-centric approach to responsive design. Break your web content into core elements or building blocks. To prioritize, ask yourself, “What do my customers need on a smartphone? Tablet? Desktop? How will they use each device to access information?

The content your customers absolutely need for the most basic, useful experience is delivered on the smartphone. With each bigger screen (i.e., resolution), introduce more content. Your approach must take into account the most important content based on the context of each device, from the perspective of your users.

Want more content marketing inspiration? Download our ultimate eBook with 100 content marketing examples.

Author: Giovanni Calabro

As VP of Design at Siteworx, Giovanni leads teams responsible for blending business, design, customer experience and content to achieve award winning strategies and experiences. Giovanni is a noted expert and speaker in the areas of customer engagement, design, and technology, and is frequently cited in business and trade publications such as EContent, Ecommerce Times and UX Magazine. He writes on these topics and trends in mobile and digital experience design in FastCompany.

Other posts by Giovanni Calabro

  • David Dunworth

    While I fully embrace your philosophy regarding design, I am still wanting to understand the How-To’s of the methodology. Is it performed with unavailable software, is it done with photoshop, what? A direct answer to this would greatly uncover the mystery of getting it done.

    • Justyn Hornor

      David, I design responsive sites regularly as a content engineer. Responsive design is done almost entirely via CSS.

      There is a standard within CSS of @media screen that detects the size of the screen on which the page is being viewed by the user. So what happens is that if the user is looking at your site while holding their iPhone in the upright position, your site will display using a certain set of CSS. As soon as they rotate their phone, a new screen size is detected and the site layout adapts without having to download anything or reload the page.

      You don’t have to view a responsive site on all kinds of devices – just make your browser window smaller and if the site is responsive it will change the layout accordingly.

      • Justin Avery

        “You don’t have to view a responsive site on all kinds of devices – just make your browser window smaller and if the site is responsive it will change the layout accordingly.”

        ^ While technically true it is important to test responsive designs across multiple devices and browsers on those devices. Ever looked at a site on a Kindle? Well some people do and you still want it to look great and be easy to use/read.

        • Justyn Hornor

          Absolutely! For testing purposes, I definitely would go through multiple devices. But for the non-techies here, responsive design is simply a reformatting of the content based upon screen size and you can see it in action without whipping out the iPhone.

    • Giovanni Calabro

      Thanks for the question David. Responsive design uses the exact same tools a company would use to create a website or application. There’s no software that converts your website to responsive.

      Responsive design is an approach that results in the seamless adaptation of content, based on the device being used. This approach enhances the digital experience by adapting content to suite the device context of the user’s operating system, browser, screen size, or orientation. Responsive sites are “device agnostic,” responding to the device they are viewed in and delivering the richest user experience to that device.

      Team roles remain the same but the teams need to work together more closely and iteratively. Business analysts are still asking similar questions and solidifying use cases and requirements. Rather than looking at one channel, they are looking at a few at once when thinking of a responsive website. Information Architects are still reviewing nomenclature, architecting the appropriate user pathways, and aligning website needs to user needs. However, they are looking at the impact of additional screen resolutions (or breakpoints) when establishing the user experience. Same goes for designers and content strategists. Both envision or maintain tone and brand as they would a desktop, but have to consider smaller breakpoints as well as full desktop designs and what that means for the design and content.

      A major difference is the immediate inclusion of front end development for prototyping. While it’s a good idea to include development early even if a company is designing a non-responsive site, it’s absolutely imperative to include developers early on a responsive project. Many of the questions a team will encounter (ex. What will happen to this headline when being displayed at a larger breakpoint?) will be discovered through prototyping.

  • Justyn Hornor

    Great post and thanks for putting responsive web design into the limelight.

    One area that I disagree with you on is the cost. I’ve implemented a number of responsive designs as a content engineer and the mid and long-term costs are far less than maintaining multiple versions of mobile specific sites.

    Responsive web design is 99% CSS driven and the code is already done. If a site is running on a common CMS framework like WordPress, they can load a free theme like Skeleton and modify it with their brand.

    For those with an ecommerce site the process can be more painful, but my clients all love having a single responsive site rather than multiple mobile sites to maintain.

    • Giovanni Calabro

      Thanks Justyn. Let’s start with you are
      absolutely correct. The longterm benefits of a responsive approach bare
      return-on-investment fruit, in maintaining content from
      a single system (and an easier ability to manage brand from a single
      place). As more devices are introduced into the market, minimal costs are
      associated with on boarding new devices into a channel lineup because
      you already have a design in place with responsive. However when
      comparing a single channel redesign approach to a responsive design
      approach, upfront costs can be more substantial for
      an enterprise sized website. Some things to anticipate:
      allow for organizational challenges of working in
      a multidisciplinary approach, get teams accustomed to rapid
      collaboration across skillets and prototyping, and build in time to
      gain buy-in from departments that may not have been included if the
      project were strictly based on one channel. Again the longer term benefits and
      costs do outweigh the initial upfront spend.

      • Justyn Hornor

        Yes, those larger, enterprise sites are automatically hamstrung just because of the mountain of policy and people that have to give their sign off.

        One project in which I was involved on a large site required that we prototype the entire responsive design in a sandbox. As you know, it’s just a CSS redesign. I recall we had to add a few custom classes to get the formatting just right, but it was fairly painless – two developers and myself.

        And, to your point regarding multiple channels, responsive web design isn’t going to be for everyone. An organization may have a perfectly good reason for sticking with a mobile version of their site.

  • Ayaz

    Hi Calabro! responsive design is the requirement for the modern time as well and you have to make sure all the requirements as per your smartphone as well and responsive websites are also easily created. ;-)