The Advantages of Being Sensive and Mobile

Transcription

1 Four vital moves to ensure your mobile strategy is responsive Adobe Responsive Development Guide June 2015

2 Four vital moves to ensure your mobile strategy is responsive Table of contents Responsive matters 1 The payout for responsive design 3 Optimize your internal processes 5 Revise your technology choices 6 Make sure your mobile strategy is responsive 7 Be responsive to your marketing assets 8 Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive

3 Responsive matters Mobile is poised to overtake fixed desktop experiences as more and more consumers are multiscreening and increasingly spending time on their smartphones and tablets. Is your business ready for this changing dynamic? Does your mobile strategy address the challenges of responsive web design and growing usage of mobile apps versus mobile sites? Recent research shows that 55% of marketers rank mobile as the biggest driver of change in marketing. Nearly 100% say that smartphones and tablets are the most important devices that they needed to master to reach their customers. 1 Forrester sums it up nicely: The gap will increase between marketing leaders who re-engineer their businesses to deliver mobile moments and the majority of marketing executives. The Rise of Mobile is Now The rise of mobile is the biggest driver of change in marketing (55%). Marketers view smartphones (96%) and tablets (87%) as the most important devices to solve for today in terms of reaching customers. Marketers believe they need to optimize marketing content for more than double the number of devices today than three years ago (3 devices three years ago vs 7 devices today). You don t want to be on the wrong side of that gap. So what do you do? Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 1

4 One of the critical ways that businesses are re-engineering themselves to deliver mobile moments is in how they choose to interact with customers. Are businesses using a mobile app? A mobile website (like m.yourwebsite.com)? A responsive site? The way you craft your customer experience on mobile devices is crucial. For example, 47% of respondents to one joint Econsultancy and Adobe survey felt that the quality of the mobile experience is more important than that on a desktop because there s no room for error or waste. 3 Customer expectations are so high on mobile devices, there s little room for error. As technology advances, more businesses are choosing to approach this challenge with responsive web design. A 2015 report shows that 58% of those surveyed are using responsive in their efforts to conquer mobile. This is up more than 10% from % 47 % Only 58% of respondents are using responsive in their efforts to conquer mobile. 47% of respondents felt that the quality of the mobile experience is more important than that on a desktop because there s no room for error or waste. So what makes responsive web design such a compelling choice? Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 2

5 The payout for responsive design Responsive web design has many other benefits that fall into four main categories: 6 User experience Moving through the customer journey from device to device is made significantly easier by consistent navigation, structure and design. Scalability and versatility Because the design basically exists independently of the device, it s not as vulnerable to new technologies and can scale easily. Development and maintenance Everything you need from design to content is contained in the same package, so initial development and revisions can be streamlined. SEO Because you have only one site across all devices, you can benefit from good search engine optimization (SEO). As of April 2015, SEO gains even more importance, because Google announced that it is now ranking sites according to how mobile friendly they are. This change has a significant impact on search results. So if responsive web design is so critical to business success, why isn t everyone using it? One respondent to the study put it like this: The pros outweigh the cons so much that it is almost moot to ask the question nowadays. With a plethora of devices and screen resolutions, it is important to not multiply versions covering different devices, but to create a single version that responds to the device and renders optimally. 5 In other words, if you can solve the problem of many different devices with many different form factors with a single solution, why wouldn t you? One of the main challenges with responsive design was centered around development resources. Typically, marketers do not have the needed skillset of HTML and CSS to create responsive sites without relying on IT, web designers and web developers. Also, businesses are often not structured to support the development of responsive sites. As a result, responsive design development takes a lot longer than necessary while businesses struggle to devote the necessary resources. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 3

6 Consider some of these data points: According to a 2014 Forrester study, responsive web design took developers 20% to 50% longer than traditional (that is, desktop) web design. Some respondents claimed it took 250% longer. 7 In the Econsultancy paper cited earlier, 53% of businesses complained that they didn t have enough resources either in money or staff to effectively optimize their mobile web presence. 8 Additionally, it takes a long time for the designs and code to go through typical IT processes and organizational approvals. Plus, every time marketing needs to make a change, they need to go back to IT, which restarts the whole process. Responsive Design Doesn t Have to Be Difficult It takes IT 25-50% longer to develop responsive web design as compared to desktop design. 53% of businesses complain they didn t have enough resources to effectively optimize their mobile web presence. Luckily, these problems are not insurmountable. In fact, a lot of your development struggles can frequently be solved by adjusting business priorities and processes. And these solutions can be sped up by new technologies as well. The following pages outline four strategies along with some new features in Adobe Experience Manager that can improve your mobile strategy and help you realize the most value of your responsive experiences. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 4

7 Strategy 1: Optimize your internal processes Creating, managing and delivering great responsive experiences involves a lot of tasks big and small reviews, designs, prototypes and approvals. The key to being responsive is to make sure these tasks take as little time as possible while getting you to your goal. You can address this by taking a look at your current processes and finding what s taking up too much time. Inefficiencies can show up at every step of the process, so be ruthless. For example, when marketers want to make changes and they will want to make changes are things getting bogged down in IT? Is the process stalling because of legitimate security reasons? Are there ways to make compromises that can speed things up and still keep everything safe and sound? Do you need to review your approval processes and mobile strategies to speed up time to market? Do you have the right resources involved? Adobe.com estimated that it reduced their project costs by about 25% Traditional Deployment Adobe Experience Manager Optimized Deployment Effort / Cost Design Design Development Development QA/ Testing QA/Testing Project Management The costs vs. benefits of various development options for responsive can be dramatic Project Management ~25% Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 5

8 Strategy 2: Revise your technology choices Oftentimes technology can aid you. For example, are you using the right tools in your development environment? By tightening up both the technology and the processes, you can cut down on the time it takes to create and update a responsive experience, thus maximizing its value. When you look under the hood, today s responsive experiences are usually pretty complicated. They combine everything from HTML and CSS to various JavaScript libraries, scripting languages, templates, underlying bits of logic, and calls to various internal and external services. Just because the whole thing is complicated, however, doesn t mean individual pieces are. In today s market, good, qualified back-end developers the kind who understand the guts of your customer experience engine are harder to come by than you think. If they end up wasting their time handling the easy stuff, like HTML and CSS, or worse, fixing code that s been broken by some wellmeaning marketer, they re not doing what you re paying them for. And they re probably not very happy. You can fix this by adopting technologies and processes that cleanly separate the code from content and design and let your web designers and front-end web developers handle everything in a more efficient manner. This approach also helps them prioritize and accomplish more sophisticated tasks that will really properly your business. Your valuable back-end resources will also have more time to work on these innovative tasks, which saves you money. Faster Time to Market with Innovative Design Tools here HTML/CSS from Photoshop Responsive style sheet Now: <1 day Before: ~3 days HTML into components Template con guration here Adobe Photoshop favorite tool among designers to layout experiences Adobe Experience Manager compose and improve visitor journeys A typical workflow roughly takes three days. An optimized workflow for responsive design can be achieved in just one day. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 6

9 Strategy 3: Make sure your mobile strategy is responsive Great responsive experiences aren t an exact science. In the customer s world, things big and small are constantly changing. That also means you need to be nimble and responsive with your mobile strategy. The result is that you can t just set a responsive experience and leave it. If you re going to be successful, you need to keep working with it, keep using the data you receive to refine it and keep it relevant. Many businesses, however, aren t set up for this kind of flexibility. Again, the disconnect between marketing, who usually has the data and is driving the change, and front-end and back-end personnel can often stop responsiveness in its tracks. A solution is to give your marketing managers easy-to-use tools that don t require technical knowledge to create, manage and publish a responsive web page or site. Gone are the times of responsive being a developer task. Marketing now has the power to use proper technology to launch responsive sites without having to write a single line of code. Responsive experiences seemlessly flow from desktop to any mobile device, and can be easily created and controlled by marketers, without overreliance on developers. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 7

10 Strategy 4: Be responsive to your marketing assets Responsive experiences these days are massive, complicated webs of marketing assets: images, copy, forms and so on. Updating a single image can feel like knocking over a domino. And to make matters worse, that complicated web of assets is integrally enmeshed in the complicated structure of your website. You can fix this by making sure that your technological platforms include all the appropriate components for you to be successful. For some, it can be a combination of digital asset management (DAM) and mobile apps management platforms. Others might have a different mix of technologies vital to their business, such as a marketing automation technology working seamlessly with their web content management (WCM) system and mobile analytics. The more your various pieces of technology are integrated and work like a single product, the more efficient you can be with your mobile strategy. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 8

11 Summary: Make responsive matter These four strategies help you mitigate many of the challenges of being truly responsive. Adobe Experience Manager makes it easy to act on these strategies by putting the power of authoring responsive experiences into the hands of marketers while allowing web designers and front- and back-end developers to take advantage of the streamlined workflows and focus on creating the sophisticated experiences that require technical knowledge. Responsive web design is about meeting the mobile challenge head on, about taking advantage of everything the mobile revolution has to offer in a powerful but efficient way. These strategies can help you improve the way you create responsive experiences. It may seem like a lot to wrap the mind around, but it s worth every minute of your time and focus. With Adobe Experience Manager, you can Get the technological foundation to make your organization s mobile strategy a success Improve business agility with efficient workflows for back-end developers, front-end designers and marketers Reduce cost and effort to implement responsive sites Give marketers the freedom to easily create and manage responsive layouts and adapt content on the fly, without compromising any code behind that Tap into the integrated single-platform experience, where WCM is connected to DAM, creative tools like Adobe Photoshop, and analytics to be truly responsive across the entire organization When responsive is not enough, turn to Adobe Experience Manager apps to create, manage and deliver mobile apps from the same platform Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 9

12 1. U.S. Marketers Research Results, Adobe, March Predictions 2015: Most Brands Will Underinvest In Mobile, Forrester Research, November Quarterly Digital Intelligence Briefing: Finding the Path to Mobile Maturity, Econsultancy, May Quarterly Digital Intelligence Briefing: The Quest for Mobile Excellence, Econsultancy, April Ibid. 6. Ibid. 7. Analyzing the Value of Responsive Web Design Can Be Messy, Forrester Research, June Quarterly Digital Intelligence Briefing: Finding the Path to Mobile Maturity, Econsultancy, May Adobe, the Adobe logo, and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners Adobe Systems Incorporated. All rights reserved. Printed in the USA. Adobe Cross-Channel Marketing GUIDE Four Tips to Being Responsive 10 6/15