Four vital moves to ensure your mobile strategy is responsiveAdobe Responsive Development Guide January 2017

Adobe Cross-Channel Marketing GUIDE | Four Tips to Being Responsive

Four vital moves to ensure your mobile strategy is responsiveTable 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

1

Responsive mattersMobile 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.”

You don’t want to be on the wrong side of that gap. So what do you do?

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 interms of reaching customers.

• Marketers believe they need to optimize marketingcontent for more than double the number of devicestoday than three years ago (3 devices three years agovs 7 devices today).

2

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 2014.4

So what makes responsive web design such a compelling choice?

58%

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.”

47%Only 58% of respondents are using responsive in their e�orts to conquer mobile.

3

The payout for responsive designResponsive web design has many other benefits that fall into four main categories:6

• User experience—Moving through the customer journey fromdevice to device is made significantly easier by consistent navigation,structure and design.

• Scalability and versatility—Because the design basically existsindependently of the device, it’s not as vulnerable to newtechnologies and can scale easily.

• Development and maintenance—Everything you need fromdesign to content is contained in the same package, so initialdevelopment and revisions can be streamlined.

• SEO—Because you have only one site across all devices, you canbenefit from good search engine optimization (SEO). As of April2015, SEO gains even more importance, because Google announcedthat 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.

4

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) webdesign. Some respondents claimed it took 250% longer.7

• In the Econsultancy paper cited earlier, 53% of businesses complainedthat they didn’t have enough resources—either in money or staff—toeffectively 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.

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.

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 enoughresources to effectively optimize their mobile webpresence.

5

Strategy 1: Optimize your internal processesCreating, 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?

E�ort / Cost

Adobe.com estimated that it reduced their project costs by about 25%

ProjectManagementQA/TestingDevelopmentTraditional

DeploymentDesign

ProjectManagement

QA/TestingDevelopment

Adobe Experience Manager Optimized

Deployment

~25%Design

The costs vs. benefits of various development options for responsive can be dramatic

6

Strategy 2: Revise your technology choicesOftentimes 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 well-meaning 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.

A typical workflow roughly takes three days. An optimized workflow for responsive design can be achieved in just one day.

here here

Adobe Photoshop – favorite tool among designers to layout experiences Adobe Experience Manager – compose and improve visitor journeys

Before: ~3 days

Responsive style sheet

HTML into components

Template con guration

HTML/CSS from Photoshop

Now: <1 day

Faster Time to Market with Innovative Design Tools

7

Strategy 3: Make sure your mobile strategy is responsiveGreat 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.

8

Strategy 4: Be responsive to your marketing assetsResponsive 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.

9

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’smobile strategy a success

■ Improve business agility with efficient workflows for back-enddevelopers, front-end designers and marketers

■ Reduce cost and effort to implement responsive sites

■ Give marketers the freedom to easily create and manage responsivelayouts and adapt content on the fly, without compromising anycode behind that

■ Tap into the integrated single-platform experience, where WCM isconnected to DAM, creative tools like Adobe Photoshop, andanalytics to be truly responsive across the entire organization

■ When responsive is not enough, turn to Adobe ExperienceManager apps to create, manage and deliver mobile apps from thesame platform

10

1. U.S. Marketers Research Results, Adobe, March 2015.

2. Predictions 2015: Most Brands Will Underinvest In Mobile, Forrester Research,November 2014.

3. Quarterly Digital Intelligence Briefing: Finding the Path to Mobile Maturity,Econsultancy, May 2014.

4. Quarterly Digital Intelligence Briefing: The Quest for Mobile Excellence,Econsultancy, April 2015.

5. Ibid.

6. Ibid.

7. Analyzing the Value of Responsive Web Design Can Be Messy, ForresterResearch, June 2014.

8. Quarterly Digital Intelligence Briefing: Finding the Path to Mobile Maturity,Econsultancy, May 2014.

Adobe Systems Incorporated345 Park AvenueSan Jose, CA 95110-2704 USAwww.adobe.com

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.

© 2017 Adobe Systems Incorporated. All rights reserved. Printed in the USA.Adobe Cross-Channel Marketing GUIDE | Four Tips to Being Responsive1/17