The world is shifting from different customers using different devices for different goals, to one customer using multiple devices to achieve a single goal. It’s important to understand where and how your customer is trying to make contact with you. Responsive sites address the use of multiple devices by consumers. In this presentation, Ariad's Information Architect Abram Chan provides a guide to responsive design — what it is, how it works, and how it allows today's omnichannel customer to connect with your brand when it matters most to them.

1. /25
RESPONSIVE DESIGN
for an omnichannel world
1
Tablet
Landscape
Smartphone
Portrait
Tablet
Portrait
or
Smartphone
Landscape
Desktop
ABRAM CHAN
INFORMATION ARCHITECT
ARIAD COMMUNICATIONS
ACHAN@ARIAD.CA
COLIN WITHERS
BRAND & COMMUNICATIONS MANAGER
ARIAD COMMUNICATIONS
CWITHERS@ARIAD.CA

2. /25
PLANNING A RESPONSIVE DESIGN PROJECT……….…….….
2
WORLD OF RESPONSIVE SITES .........................................
SO... WHAT’S THE ROI? ...................................................
3
11
19
TABLE OF CONTENTS

3. /25
WORLD OF RESPONSIVE SITES
3
Responsive sites address the use of
multiple devices by consumers.
Tablet
Landscape
Smartphone
Portrait
Tablet
Portrait
or
Smartphone
Landscape
Desktop

4. /254
90% complete tasks over multiple devices
98% move between
devices that same day
Only 14%
of all media
interactions
are
non-screen
based
Most search is
on a 2nd device
Omnichannel
The world is shifting from different customers
using different devices for different goals, to one
customer using multiple devices to achieve a
single goal. It’s important to understand where
and how your customer is trying to make
contact with you.
Statistics from: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

5. /255
Google searches began prioritizing for
mobile optimized sites on smartphones.
We’ve passed the date.
April 21, 2015
Mobilegeddon for Search
Do a mobile-friendly check here:
https://www.google.com/webmasters/tools/mobile-friendly/
Note: Bing is also now following
this trend with a change to their
own ranking algorithm.
IS YOUR SITE GOING TO BE AFFECTED?

6. /256
Effects of Google
Search Changes
Two weeks after the changes, Mahalo.com
laid off 10% of its workforce thanks to what
CEO Jason Calacanis called "a significant
dip in our traffic and revenue.”
- CNN
http://money.cnn.com/2015/04/21/technology/google-mobilegeddon/index.html

7. /25
The Devices
7
You may think these are the
screen sizes you need to
design for, but in reality...

8. /258
The Devices
... screen sizes
vary a lot!
/18

9. /25
The Devices
In Reality: Another Perspective
9
1920x1080, 1366x768, 1280x1024, 1280x800, 1024x768, more every few months . . .
LG Desktop Monitor iPad
Apple Desktop iPad mini
Samsung Note
iPhone 5
iPhone 6
Samsung Tablet
Asus Tablet
Samsung Galaxy S6 BlackBerry Bold
more
every few
months
. . .

10. /25
So how do we deal with it?
10
To address this crazy world, good responsive
design turns content into blocks which change in
size and move around to adapt to the available
space. The content is the same across devices,
only the way it looks and is interacted with
changes. The experience across devices stays
connected.
Modular Blocks & Content Parity
2
3 4
1 2
3 4
2
3 4
5
2
3 4
2
3
4

11. /2511
PLANNING A RESPONSIVE DESIGN PROJECT
2. UX/IA1. Planning and Strategy 3. Design 4. Development 5. QA/QC

12. /25
Defining user’s journey
1. Planning and Strategy
12
Throughout the early stages, it is important to define
the touchpoints that work together in the user’s
journey. A strategy needs to be identified on how
your customer interacts with your brand across
different channels and devices at different times in an
omnichannel world. Collaboration is important in
defining the right channels as these early decisions
will trickle down, determining the direction taken by
UX, design, and development.
EXAMPLE OF CUSTOMER
INTERACTIONS IN OMNICHANNEL
See poster
about a credit
card
Check out credit
card website on
phone
Go to coffee shop
with site on tablet
Apply for the credit
card at work
Print Ads Website Website Website

13. /25
Defining Features
1. Planning and Strategy
13
Try to keep specific features promised to clients open. New
features need to be assessed to make sure that they can be
adapted across technologies and they make sense to use on
your site across the range of customers touchpoints.
My Location
FEATURES CHANGE WITH TECHNOLOGY AND CONTEXT
“My Location" doesn’t always work across devices
or even across browsers. Availability of GPS?
WIFI-triangulation? Does the "My Location"
feature even make sense for the experience you
want to create in your customer’s current
environment?

14. /25
Design Strategy
2. UX/IA - Experience
14
Engage
Entice Inform
Cool
Features
Engage
Entice Inform
Inform
Engage
Entice
Engage Inform
Engage
Build in time to design the experience for omnichannel. The
way the customer will experience a product or campaign will
usually involve moving across multiple screens and contexts.
Use-cases need to be formed, understood, and addressed to
make sure your customer is properly guided and incentivised
at each touchpoint with your site to move them towards the
conversion goal you want them to achieve.
DESIGNING FOR USE-CASES
Entice Engage Inform Trigger
See a poster
about a credit
card
Check out credit
card website on
phone
Go to coffee shop
with site on tablet
Apply for the credit
card at work
Trigger
Trigger
Trigger
Trigger
Trigger

15. /25
Layout and Interaction Design
3. Design - Usability
15
Products Our Vision News Forums Contact Us
Menu
Our Vision
News
Forums
Contact Us
Menu
Products Our Vision News Forums Contact Us
Products Our Vision News more>>
Products Our Vision News more>>
Build in time to make sure layouts and messaging work
across screen sizes. To ensure usability, time is needed to
make sure the layout rules, buttons, and features of a
website will adapt to the contextual needs of a customer’s
environment and device.
Products Our Vision News Forums Contact Us
Products
Our Vision
News
Forums
Contact Us
Menu
FEATURES ADAPT TO DEVICE
Products Our Vision News more>>
http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1
Responsive Design detailed example:

16. /25
Typography, Icons, Logos
3. Design - Readability
16
Build in time to make sure text, icons, and logos are
readable and recognizable. Additional care must be taken to
make sure content can be read in different contexts, and
that icons and logos still make strong impressions. Creating
vector images and sourcing retina images are also
important best practices.
Best Brand Ever
Best Brand Ever
Best Brand Ever
Best Brand Ever
BBE
? This is really hard to read if
you can read you are a god.
This is really hard to read if
you can read you are a god.
This is really hard to read if
you can read you are a god.
This is really hard to read if
you can read you are a
god.This is really hard to
read if you can read you are
a god. This is really hard to
wreaths is really hard to read
if you can read you are a
god. This is r
This is really illegible
http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1
Responsive Design detailed example:

17. /25
Development
4. Development - Flexibility
17
Build in time to code all the extra layouts and elements that have
been designed. Developers need time to work with the collective
team to align on creating something that is useful, impactful but
still doable under technical constraints across platforms. There is
added complexity to ensure the code written is robust and
flexible for the future when there are updates.
<li>
<a id="notifications-anchor" href="/wiki" class="mw-anchor read aui-nav-
imagelink" title="Open Notifications (g , n)"><div class="badge-i aui-icon
aui-icon-small aui-iconfont-workbox-empty"></div><span class="badge-w"><span
class="badge">0</span></span></a>
<span></span>
</li>
.mw-anchor{border-top:0;display:block;font-weight:bold;line-
height:1em;padding:4px;float:right;width:20px;height:18px;}
#notifications-anchor{height:14px;padding-top:10px;padding-
bottom:16px;padding-right:14px;position:relative;}
#notifications-anchor.active,#notifications-anchor:hover{background-
color:#326CA6;}
#notifications-anchor .badge-i{left:15%;top:20%;pointer-events:none;}
#notifications-anchor.read .badge{font-size:0;}
.mw-anchor .badge{color:white;border-radius:7px;font-
size:12px;display:inline-block;padding:0 2px;min-width:10px;min-
height:10px;margin:0 auto;}
.mw-anchor .badge-w{position:absolute;left:21px;top:8px;text-
align:center;pointer-events:none;line-height:14px;}
.mw-anchor.unread .badge{background:#3A7EC2;border:1px solid rgba(0,0,0,.2);}
WHAT CODE LOOKS LIKE FOR BUTTON

18. /25
Quality Control
5. QA/QC - Robustness
18
Build in time to test the many different devices and browsers a
user will use in their interactions with your site. Each device will
react differently to software and technology.
NOT QC FOR THIS ACTUALLY QC FOR THIS

19. /2519
SO... WHAT’S THE ROI?
Increase Leads
Increase Conversion Rates
Keep up with the Competition
Easy to Manage and Cost Effective

20. /25
Engages customers online
65% OF SEARCH STARTS ON SMARTPHONES;
MEET THEM ON THEIR JOURNEY
Enhances your stickiness
61% LEAVE TO COMPETITOR SITES IF THEIR
NEEDS AREN’T QUICKLY MET
This is something you can
read and relate to on a
smartphone. This is
something you can read
and relate to on a
smartphone. This is
something you can read
and relate to on a
smartphone. This is
something you can read
and relate to on a
This is a
legible and
targeted CTA
BBE
This is really hard to read if you can read
you are a god. This is really hard to read if
you can read you are a god. This is really
hard to read if you can read you are a
god. This is really hard to read if you can
read you are a god.
This is really hard to read if you can read
you are a god. This is really hard to read if
you can read you are a god. This is really
hard to read if you can read you are a
god. This is really hard to read if you can
read you are a god.
This is a CTA made for desktop.
This is really hard to read if you can
read you are a god.
Best Brand Ever
PHONE
Increase Leads
53% of emails opened on mobile
80% of people delete emails if it
doesn’t look good on their mobile phones
20
Statistics from:
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

21. /25
Retains customers across time
98% MOVE BETWEEN DEVICES THAT SAME DAY
IN THE OFFICE
COMMUTING TO WORK
Encourages your shareability
ONLY 14% OF ALL MEDIA INTERACTIONS ARE
NON-SCREEN BASED
PHONE
DESKTOP
TABLET
PHABLET
Statistics from:
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Increase Conversion Rates
21

22. /25
85% of web users believe a company’s mobile website
should be as good as, or better than, their desktop site
Keep Up with the Competition
This is something
you can read and
relate to on a
smartphone. This is
something you can
read and relate to on
a smartphone. This
is something you
can
This is a
legible and
targeted CTA
BBE
This is really hard to read if you can read you are a god. This is
really hard to read if you can read you are a god. This is really hard
to read if you can read you are a god. This is really hard to read if
you can read you are a god.
This is really hard to read if you can read you are a god. This is
really hard to read if you can read you are a god. This is really hard
to read if you can read you are a god. This is really hard to read if
you can read you are a god.
This is a legible and targeted CTA
This is really hard to read if you can
read you are a god.
Best Brand Ever
DON’T WAIT FOR A RETROFIT WHICH COSTS MORE MONEY IN
THE LONG RUN. DO IT RIGHT THE FIRST TIME
22
Statistics from: http://www.business2community.com/digital-marketing/responsive-web-design-
essential-2015-01205621

23. /25
Only 1 website to maintain
DON’T DUPLICATE ADDITIONS TO MAINTAINING
YOUR SITE FOR CONTENT, DESIGN, AND
FRONT-END & BACKEND DEVELOPMENT
Easy to Manage and Cost Effective
Only 1 website to track
GET MORE INSIGHT WITH LESS MONEY, DO
ANALYTICS FOR 1 OMNICHANNEL SITE NOT
SEPARATELY FOR DIFFERENT DEVICES
This is something
you can read and
relate to on a
smartphone. This is
something you can
read and relate to on
a smartphone. This
is something you
can
This is a
legible and
targeted CTA
BBE
Only 1 SEM campaign
SEM IS A COMPLEX TASK, ENSURE IT WORKS
ACROSS CHANNELS IN A SINGLE INTEGRATED
CAMPAIGN
Ads
Search Term
Paid Search
Organic Search
Social
Mobile Optimization
Maps
Meta Descriptions
23

24. /2524
No product is an island. A product is more than the
product. It is a cohesive, integrated set of experiences.
- Donald Norman
“Systems Thinking: A Product
Is More Than the Product"
(2009)

25. /2525
Ariad Communications
15 John Street, 7th Floor Toronto, Ontario M5W 1E6
416-971-9294
www.ariad.ca
Twitter: @ariadcomm
SlideShare: AriadComm
Abram Chan
Information Architect
achan@ariad.ca
Colin Withers
Brand & Communications Manager
cwithers@ariad.ca

26. /2526
http://omnichannel.me/what-is-omnichannel/
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33
http://www.smartinsights.com/email-marketing/email-creative-and-copywriting/responsive-email-design-infographic/
http://www.comscore.com/Insights/Blog/Major-Mobile-Milestones-in-May-Apps-Now-Drive-Half-of-All-Time-Spent-on-Digital
http://money.cnn.com/2015/04/21/technology/google-mobilegeddon/index.html
http://www.entrepreneur.com/article/244175
http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1
http://www.razorfish.com/binaries/content/assets/ideas/digitaldopaminereport2015.pdf
Citation & Resources