Home  › Marketing › Strategies

No Silver Bullet, Chapter 57

  |  March 28, 2012   |  Comments

Responsive is the new black.

There's a lot of responsive in the air - responsive design, responsive content, this post - but there's also a growing set of misconceptions that agencies are hearing in discussions with clients. The next phase is, naturally, the backlash. It might be worth taking a deep breath before then, and trying to make a bit more sense of what it is and what it helps you with.

First, what is it? While various pieces of responsive design were already in use - advanced CSS and JavaScript tricks, media queries to detect the device size - it wasn't until Ethan Marcotte wrote the book on the subject that the concept took off and entered common discussion.

How Was It Really, Pops?

In the early days of the web it was easy - you picked a screen size, wrote that into the requirements, and coded away. Once mobile browsers started to leave the WAP era (jeez, remember?) and started to support HTML, designers found themselves with a ton of different screen sizes, varying support of CSS and HTML tags, and a clamor to support them all. Borrowing an ancient technique from UNIX (all rise! OK, be seated), we developed device profiles, which were basically a hardcoded set of device characteristics for each and every mobile device, stored in a database. Our server pages would detect the user-agent from the request, decide which device it was, pull the profile, and then - perhaps - accommodate the unique screen size and capabilities of the device.

It was an expensive drag. You basically punted the unpopular browsers, because you generally ended up writing custom server code for each device profile, and that was a pricey and unmanageable mess. You could get some reuse if you were careful, but since no one was really thinking in services then, it ended up as bits of code scattered around. The "m.site.com" URL style started around then, because it allowed you to make one decision - it's a mobile browser - quickly, and you could segment your code and servers.

Fast-forward to recent times, and things have changed in mobile devices. First, we have two popular flavors of tablets and phones, iOS and Android, all of which are running pretty powerful CPUs and graphics engines. Also, much of the web browsers across both platforms are based on the same browser engine, WebKit. Because of this, HTML5 and CSS3 standards are widely supported - if somewhat inconsistently. This combination of rough standardization of browser, a more powerful HTML and CSS, and JavaScript on the device laid the technical groundwork for very sophisticated mobile web work.

Finally, the skillsets to do very sophisticated presentation work - JavaScript as well as lightweight, easier-to-code server scripting languages - are much more widespread.

Cool! So, responsive design lets me code once and run everywhere and support everything forever, right? Ponies live!

Um…not quite. At a base level, you're still adapting experience across multiple devices, writing code, and expecting it to work across multiple devices. You can't get away without thinking how it's going to work across those devices.

Squeezing the Tube

Responsive design is not a silver bullet. In technology solutions, there is always complexity - you just design where in your system you put it. You can decide what change you want to make easy in the future by designing to embrace that change. In some important ways, it's less about the interesting coding approaches, and more about your entire approach to delivering the brand experience.

You decide what part of the system you want to spend your energy (time and money) on. Generally, in marketing, you don't want to spend all your time rebuilding your server systems, so you should make those as simple and service-based as possible. You do want to spend time creating great new utilities and services for customers, so you should make those front-end systems as adaptable, and re-useable as possible.

That's where responsive design comes in. It opens up the possibility of designing experiences that can adapt across the multiple devices customers are using, and leverages modern browsers to push code reuse and innovation to the presentation layer. But it doesn't remove the need to make design decisions and investments - it just helps to shift it to the right places, in services in the backend, and design decisions upfront and closer to the device.

By taking a more systematic approach to how your web experience shifts and adapts across multiple devices, it also starts you thinking more about building design systems rather than styling pages. It asks you to think about your brand, and how that adapts and responds across multiple user contexts, and the devices that support that context.

Well, OK, I'll think about that - but I still get a mobile site for basically free, right?

How Hard Can It Be?

It's always going to take more effort and cost more to carefully architect and code a site than it is to crank out something. A responsive design site is going to cost more than coding up a plain old website.

At a simple level, you still need to decide what screen sizes you're supporting, and how it will look across those screens. More deeply, if you're making modifications to features and functionality - showing some content here, less on a phone - you need to design and wireframe up how that works. And if you have a reasonably complex services design you're thinking about supporting - in-store integrations, mobile location-based services - the more your experiences will diverge, and the less responsive design may help.

Then you need to code it. Never as fast as one would like, right? And like I said, it takes a bit more coding and testing to make it responsive.

It doesn't get you out of testing across the devices you're targeting. There's enough quirks and "emergent behavior" in the various implementations of WebKit to keep your developers gnashing their teeth.

The labor costs a bit more too - not many offshore or low-cost dev shops are fully up on the latest technologies here. The tools are not quite as mature as existing website tool chains.

Finally, the current state of play in HTML5 is that it's not going to have the polished, smooth animated actions of a native app. That's OK for a wide variety of applications, but you're not going to get the full pizazz. Responsive is not something that helps with this problem.

Oh…so, Why Do I Want It Again?

There are great reasons to work with your agency toward designing and developing responsively:

  • By thinking, designing, and developing in a responsive fashion, you're naturally going to think in terms of reuse and targeting presentation functionality. Coupled with thinking responsively about the content and functionality, you can end up in a very nice place with a good set of pared down mobile services built off your web that you can adapt across user contexts.
  • Your presentation tier gets much more thought put into making it adapt across devices, making supporting new devices straightforward.
  • You can support a range of mobile and tablet form factors with a single, reduced codebase.
  • If your internal IT does your backend coding - and they are often less responsive to supporting new devices than your creative technology agency - having form-factor support in the front-end code can avoid this bottleneck.
  • You're employing "mobile first" principals, and have a slimmed down, highly focused web offering. Then your website's IA and UX are probably very aligned with your mobile profile.

However, it's probably overkill if:

  • You just wanted a simple website, or you're doing landing pages or microsites. You're going to throw them away shortly anyway.
  • You're doing something different for mobile, maybe a native app. You're going to want a mobile site, but you have other plans for targeting your mobile experiences.
  • Your CRM or CMS system is used to generate all the pages using a proprietary templating system. This you may want to look at case-by-case - as some vendors are more flexible than others - but it's worth investigating first.
  • You're doing something pretty functional like user account management, but you don't have services to call. At this point, you probably have other problems too.

Responsive design (and coding, and content) is a rapidly developing field, and tools, techniques, patterns, and libraries are going to make it easier to build responsive web properties. However, it's not going to allow you to target lots of screens cheaply - but it will push you to think more deeply about how you're delivering your brand to those screens, and give you the opportunity to put your energy and money into where it will do the most good for the user - their experience of your brand.

Tags:

ClickZ Live Chicago Learn Digital Marketing Insights From Leading Brands!
ClickZ Live Chicago (Nov 3-6) will deliver over 50 sessions across 4 days and 10 individual tracks, including Data-Driven Marketing, Social, Mobile, Display, Search and Email. Check out the full agenda, or register and attend one of the best ClickZ events yet!

ABOUT THE AUTHOR

Todd Drake

As vice president of technology for Organic, Todd enhances Organic's technology delivery capabilities and develops leading-edge concepts and solutions that support diverse client needs. With deep expertise rooted in over 20 years of technology experience and a passion for reframing tough problems and building new models of action, Todd has helped leading brands successfully leverage new technologies.

Prior to joining Organic, Todd was a director at SapientNitro where he provided technical and client leadership to a portfolio of global CPG, non-profit, and financial clients. During his tenure at SapientNitro, he worked with clients on long- and short-term technical strategy, and mentored and managed end-of-delivery activities such as load testing and quality control. Previously, Todd was a director of engineering at Grow Network/McGraw-Hill and senior technology director at Avenue A-Razorfish.

Todd received his B.S. in Computer Science from Massachusetts Institute of Technology.

COMMENTSCommenting policy

comments powered by Disqus

Get the ClickZ Marketing newsletter delivered to you. Subscribe today!

COMMENTS

UPCOMING EVENTS

UPCOMING TRAINING

Featured White Papers

IBM: Social Analytics - The Science Behind Social Media Marketing

IBM Social Analytics: The Science Behind Social Media Marketing
80% of internet users say they prefer to connect with brands via Facebook. 65% of social media users say they use it to learn more about brands, products and services. Learn about how to find more about customers' attitudes, preferences and buying habits from what they say on social media channels.

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising

An Introduction to Marketing Attribution: Selecting the Right Model for Search, Display & Social Advertising
If you're considering implementing a marketing attribution model to measure and optimize your programs, this paper is a great introduction. It also includes real-life tips from marketers who have successfully implemented attribution in their organizations.

WEBINARS

Jobs