By: Jon Bosworth, Manager of Content Strategy
Responsive design is the new black. Everyone is talking about it. Companies that want to look like the future are clamoring to introduce their brand to the contemporary multi-screen world with a sleek responsive website that will wow their users no matter what device brought them there. It’s true that the future has increasingly more screens and devices to offer. For your business to serve the future, you will have to address these devices. The best way to know if responsive design is for your company is to study where it works and why. Compare what responsive websites do with what you need your website to do.
Is Responsive Design for You?
User experience professional Emily Wengert defines responsive design as “digital experiences from a single code base optimized for various devices” in her General Assembly class Responsive Design Vs. Context. Responsive design is simply a single website that reads the device it is being accessed from and adjusts the content display to suit that device. Wengert goes on to show the Boston Globe’s responsive website and some other terrifically functional and attractive user interfaces that do responsive design and do it well. But The Boston Globe is not a hotel website. You have different goals and objectives than a newspaper website.
The Successes of Responsive Design
For websites with limited user-interaction, such as informational sites, blogs and news sites, responsive design is a good and practical solution to a multi-screen world. The Boston Globe user experience is great. When your user doesn’t even know that your site is responsive, they just know they got everything they wanted when and where they wanted it with no obstacles, that’s when a website is working correctly. However, the content of a newspaper website remains the same regardless of the reader.
An August 2012 Google research study, The New Multi-Screen World Study, explores just how many screens we should be worrying about when we design a website for contemporary users. This research identified the primary devices influencing user behavior currently to be television, PC/laptop, tablet, and smartphone. It makes sense to develop one code base and let it feed those four devices.
Create once, distribute everywhere, right? Update your content once and it is done across all devices. How efficient! But there are some problems with the concept of responsive design.
Problems with Responsive Design:
- Inadequate Browser Support
- Expensive Development Process
- Long, Intensive Development, Build and Test Process
- Responds to Device Instead of Context
A majority of users, and probably a majority of your customers, are still using Internet Explorer 6. When you’re doing business online, future-proofing comes after being in the present and able to transact with the widest possible range of customers. Wengert shared some technical speak about this: “The current ways that many of the browsers are able to render the media queries, the CSS3, etc. is limited at the moment. Safari is the only one that has been able to be as rich as possible.” The future might be ready for responsive design, but don’t bet your bottom dollar on it until that future is here.
Expensive & Time-Consuming Development Process
When it comes to developing a site that is responsive to every commonly used device, you are talking about troubleshooting thousands of variations. There are 1,452 different sized screens as of 2011. To develop your responsive website, you need to address each screen size and display ratio and code each interactive element to address the native tools for each device and OS. There are breakpoints and sets of rules that must be determined. Page elements need to be systematically arranged inside containers to dictate their flow as the page collapses. Then testing and adjusting starts.
Keep in mind also, a responsive design rebuild typically means starting at the foundation again. “Doing updates is often a bigger infrastructure and technology investment. It isn’t just, ‘hey I had a bright idea, I’m going to make it responsive.’ There’s a lot of work and thought that goes into that on the ecommerce side” (Wenger). That simple single update to your code base just got a lot more complicated and expensive. And if only 9% of interactions are occurring on a tablet (see Google Study), is the return going to compensate you for all of that development work, money and time?
If you have the time and capital to invest in a truly effective responsive design, it can work. But plan on regular meetings with your development team and every person that has a stake in your web content. Plan on development alone taking many months with a devoted development and marketing team. Then there is a lengthy process of testing. The most crucial and challenging consideration to make when developing your responsive design: developing it for the user, not just the device.
Design for the User, Not the Device
Tablets don’t book hotel rooms online; people that need a hotel room grab the closest device to them to research and make the purchase. You want the process to be easy and intuitive for the user regardless of what device they are on. Wenger says, “The one biggest challenge with responsive design is it spends a lot of time thinking and talking about the device and pixels and thinking about how a column is going to move. And that’s lovely, but it’s not as focused on your actual user and what the user might need.” What do you know about them? You can make some pretty safe bets about them based on the devices they are using. Use that to your advantage. Your website must address the context of the user—context is all that matters.
Context Is Key
We want to make it easy to purchase regardless of the user’s circumstances. But how much more effective is our sales messaging when we use the device they are on to better understand their circumstances? Responsive design addresses those devices by delivering your content to each, but it doesn’t address the different contexts in which your customers are utilizing those devices. The Google study says, “Consumers turn to their devices in various contexts. Marketing and websites should reﬂect the needs of a consumer on a speciﬁc screen, and conversion goals should be adjusted to account for the inherent diﬀerences in each device.” If you want to close that deal, stop thinking about responding to their device and start thinking about adapting your content to the context the user is in when utilizing that device. A single code base doesn’t increase conversions, understanding your prospect does.
Wenger’s Four Sides to Context:
- Where are they?
- Who is with them?
- What is their mindset?
- What other channels are around them?
What about SEO
Google has issued statements about preferring responsive design. They also support sites that dynamically serve data to separate URLs for non-responsive sites. Google states, “If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML.” Make sure you utilize canonical tags so that Google knows the separate URLs are related and make your desktop site carry the SEO weight. It is interesting to note that google.com isn’t responsive; it has a mobile-specific site.
If Responsive Is Not the Answer in This Multi-Screen World, What Is?
For the hotelier trying to book rooms through your website, your best bet is to develop a mobile website that addresses mobile users and a desktop website (with a unified visual design and a sniffer program to detect which display to show based on what device is calling the site) optimized for tablet. This keeps users from having to know separate URLs and ensures they are comfortable moving between devices without getting lost in the process. Tablet users may be a small percentage of your traffic, but it reflects poorly on your business if your website doesn’t work correctly when accessed via tablet.
Optimizations for Tablet:
- Incorporate gestures on interactive elements such as image sliders, carousels and photo galleries.
- Increase linked content regions so the clickable region can be tapped.
- Increase button size for links.
- Optimize images and code for decreased page load time.
- Enable contextual keyboards on input fields when needed.
- Larger font size and line height for legibility.
- Images and icons optimized for retina display.
- Custom home screen icon for bookmarking.
- URL bar slides upwards and is hidden on page load.
The only constant in Internet marketing is change. The concept of “future-proofing” is a risky proposition in this industry. Had the idea of an iPad Mini even occurred to you 5 years ago? Given how expensive developing and updating your single code base is, you better be sure responsive is the safest bet. When you go to the drawing board on your website, start by considering this: A) What are your marketing and business goals for your website? B) Is responsive design the most effective way to achieve those goals?
If responsive design is the most effective tool to achieve your goals, be prepared for a lengthy development and buildout process and a healthy investment of capital and personnel hours. If you are turning to responsive because everyone says it’s the future, you may want to explore more cost-effective options that can achieve your marketing goals better in the here and now. You may be able to get more direct bookings through your hotel website by taking advantage of distinct code-bases and optimizing your content to address context than you can through a responsive design. Talk to your Manager of Client Marketing Strategy to determine the best option for you.
Some Other Interesting Articles:
Emily Wengert leads design and strategic thinking for large multitrack engagements at Huge in Brooklyn, NY. As VP, User Experience, she also helps lead the 50-person UX department, which includes interaction design, content strategy and research. She has successfully collaborated with some of Huge’s largest clients including Target, UnderArmour, SiriusXM, Thomson Reuters, and Nutrisystem. Her work has received an OMMA award and been honored at the Webbies, and she has spoken at the IA Summit, IxDA NY and Social Retail Summit.
Vizergy is an award-winning digital travel marketing company that empowers hoteliers to know more, do more and achieve more – with the ultimate goal of delivering maximum online revenue. The company uses data driven decisions to provide strategic guidance in the evolving world of online marketing. Online marketing services include search engine optimization, pay-per-click and display advertising, local marketing, website and mobile website design and development, reservation software and advanced analytics. Since 1998, Vizergy has propelled thousands of branded and independent hotels, resorts and hotel management companies to success.
Logos, product and company names mentioned are the property of their respective owners.