At Hippo we’re certainly seeing the explosive growth of companies investing in delivering content to multiple devices. And, while we mostly think of smartphones – it’s not just those devices that are part of that growth. Last holiday season, studies found that the total share of people owning a tablet device almost doubled. In fact, if you’d like to learn more about this trend – we’ve recently released a whitepaper ("Mobile Content Optimization - Content Marketing on the Go") describing how the priorities of creating content for mobile and desktop devices are beginning to shift.
One idea that has gotten a tremendous amount of attention is Responsive Design. If you’re not familiar with the term – it became popular after Ethan Marcotte published an excellent post on the subject on A List Apart web site back in 2010. That post subsequently inspired the book by the same name.
We know that today it’s not enough to make your Web strategy compatible with Mobile – you have to optimize your content for Mobile. Smart marketers and communicators are taking specific content strategies to their mobile channels. But, while Responsive Design has its place – and will work very well – it is only one piece of the puzzle for the enterprise to manage Web Content.
See, from content MANAGEMENT perspectives – Responsive Web Design works best when your WCMS is only capable of managing one channel. As a publisher with this kind of WCMS, you’re inherently depending on the responsiveness of CSS Media Queries to adapt the content and design to any device. For large enterprises – defaulting to this approach can actually mean LESS efficiency, LESS flexibility and MORE costs.
Let me explain what I mean:
Responsive Web Design Challenges
There has been a lot written – and some of it wonderfully well thought out on this subject. I would absolutely recommend Luke Wroblewski’s blog on the topic among others. Luke points out correctly, that while Responsive Design is one way of tackling the challenge – it’s definitely not the only way. And I’d like to take the opportunity to expand on that by pointing out some of the challenges from the enterprise web content strategy point of view.
1. Downloading Is An Issue For Both The User AND A Cost To The Enterprise
Despite your device or internet speed – when you access a Web site using Responsive Web Design, the totality of CSS, code and images that are on the page are downloaded at their fully rendered weight for the desktop experience. And it’s then the device and onboard browser’s job to resize and optimize that page as the screen shrinks and expands. But using this strategy means that you’re delivering (and making the user download) perhaps 80% more than is necessary for the experience.
So, let’s just take images as an example. Let’s say we have one page with six images that total 210K for the desktop experience. If we were to instead resize those images and deliver them in a channel-specific way they might be a total of 45K. That means there’s a 165K extra payload for the mobile visitor. Now, when you look at one visit and one visitor this doesn’t mean much (although in some cases – especially with data plan caps - this can be a real cost to your audience).
But it gets even more interesting when we look at the enterprise and costs. Using that same math – if we assume 5 million visitors per month (very common for Hippo enterprise customers) and we assume 20% of them are arriving via mobile device – that means 1 million visitors are downloading that extra 165K. Meaning an extra 165 Gigabytes of data per month delivered out of the data center. And, remember that’s just ONE PAGE! And, by the way, we didn’t even get into the extra CSS, Javascript and other code that also has to be delivered to accommodate the Responsive Design. These are real costs to the enterprise.
2. For Mobile Users Speed Counts
Mobile is becoming a huge piece of the e-Commerce pie – and speed absolutely is a huge predicator of that. Audiences are now expecting content to arrive in their mobile device as fast (or in some cases even faster) than their desktop counterparts. There have been studies done recently that suggest that an enterprise generating $100,000 per day could actually be losing $2.5 million annually with just a 1 second delay in their site.
And this isn’t just ecommerce either – over the last year Google has made more adjustments to their algorithm and speed is, more than ever, a critical factor in how websites are ranked in Search Results (and this includes mobile). Additionally, it’s also clear that faster sites don’t just improve your user’s experience; they can also reduce your overall costs.
Despite the advancements being made on the power of handheld devices – which are becoming themselves handheld computers - wireless networks still are still not there. A recent study done by Ofcom showed that while households using mobile broadband are increasing – it’s still less than 20% of the market. And, web pages still took, on average, 8.5 seconds to load on mobile – which is much slower than on fixed broadband.
This means that anything we do as an enterprise should be focused on delivering content to our users faster and more efficiently.
3. Responsive Design Doesn’t Take Context Into Account
Of course at Hippo, we are passionate about delivering contextually relevant experiences to audiences – and Responsive Design does not take this into account. Responsive design ONLY takes into account the device accessing the design – and more precisely only the screen size. For example, we need to be able to accommodate different TYPES of interfaces based on devices and input interfaces. As a web site that is optimized for desktop shrinks – so too must it also be optimized for “touch and swipe” interfaces rather than point and click. This is an important contextual layer.
Also, responsive design doesn’t look at location, connectivity speed, behavior and personal preferences. All of these can affect WHY a user wants to interact with content, and HOW.
For example, one of the examples that’s often used in Responsive Design is the Boston Globe website. Go try it. As you resize your browser window, it elegantly adapts using grids and media queries to eliminate content and reduce the design as you access it. But WHICH CONTENT SHOULD IT REMOVE? Using Responsive Web Design we have to decide which content to remove as part of the design process – not as part of the content consumption. Shouldn’t the AUDIENCE decide which content they want to view as part of the experience based on either their previously stated preferences, their real-time behavior on the site or even the context of where they are located? For publishers who only manage one channel that might seem like a “nice to have” – but for enterprises in today’s competitive world this is a definite requirement.
What’s The Solution
As Luke Wroblewski points out in his post – there should be multiple approaches to delivering content to multiple devices. One intriguing idea that he puts forth is RESS (Responsive Web Design with Server Side Components). He describes this as where “a single set of templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side”.
Now, I don’t want you to get the wrong idea. I’m not completely discounting the value of Responsive Design. It has its place. But, especially for enterprises, it’s not a one-size-fits-all solution. This gets back to the challenge that I mentioned in the beginning. Responsive Design is great when you are limited by your content management system to only managing one channel of content.
So, for example, if you’re blogging using WordPress, or using a solution like Drupal to manage one Web channel this can be an easy solution for delivering multiple versions of content to mobile devices.
But here at Hippo, we recommend a different approach – which utilizes our Context Aware Server. Using this, enterprises can manage channels in multiple ways – and in whichever way makes sense for their web content strategy. For example, the mobile corporate blog can be delivered using Responsive Design, while content from it is re-used on the ecommerce platform and delivered using a combination of a specific desktop channel, a dedicated mobile phone phone channel, an iPad optimized channel delivered as an “online magazine” and all across multiple languages and adapting in real-time as the user interacts with the content. Images, code and delivery is all optimized in real-time delivering only what’s necessary for the experience.
Ultimately, your content strategy should be a completely separated concern from the interface that is used to access it. Responsive Design blurs those lines a bit – and it’s important that we remember that it’s just one more way to deliver web content. And easier and “more fluid” doesn’t always equate to better or more efficient.