The document discusses responsive design from a marketer's perspective. It defines responsive design as providing an optimal viewing experience across devices through flexible layouts that adapt to different screen sizes. The key benefits of responsive design are meeting mobile user expectations, reaching mobile-only users who spend more time on mobile devices, and improving SEO. Most industries should consider responsive design, though some retailers may find mobile-optimized sites better. Responsive design requires additional time and costs compared to a typical website redesign.

1. Social Media Monthly November Webinar
Responsive Design:
A Marketer’s POV

2. What

3. Responsive Design: The What
Optimization Across Devices
•Put simply: Responsive design provides an optimal viewing experience across all devices.
•Four breakpoints are considered when building a responsive site: mobile phone, tablet, small screen/laptop and wide screen. Both portrait and landscape view are considered for tablets and smartphones
•Websites and Microsites are a 1 for 1 meaning users are viewing the exact same site regardless of device (different than a mobile optimized site)
•Technically put: through the use of CSS, pixel widths are converted to percentages. With percentage values in place, resizing the browser window creates a fluid layout that scales to the window.

4. Responsive Design: The What
Mobile Optimized vs Responsive
Mobile Optimized
Responsive
Content
Top 5-7 pages
Full replicaof desktop version
Design
Differentlook/feel/UX
Same look/feel/UX
Analytics
Recommended separateview in GA
(distinguish desktop/table vs mobile)
No separate view required
(use mobilefilter)
Maintenance
Separate site to maintain
Edits are made in 1 place
SEO
Googlenon-preferred
Google preferred
Build Levelof Effort
Minimal
Medium-High

5. Responsive

6. Mobile Optimized

7. Responsive Design: The What
What Responsive is NOT:
•A 100% replica of a desktop site: elements can be hidden based on breakpoint
•A friend to outdated browsers, particularly IE7 and IE8
•A TREND

8. Why

9. Responsive Design: The Why
Mobile-Only Users
In a November 2013 eMarketer report titled “Redefining ‘Mobile-Only’ Users: Millions Selectively Avoid
the Desktop,” the authors cite that “mobile device usage has already surpassed desktop in terms of time
spent” going on to say that users will spend 2 hours and 19 minutes per day on desktops and laptops,
“while mobile will rise to 2 hours and 21 minutes” per day.
Consider those who don’t sit at a desk everyday:
• Police/Fire/EMT Professionals
• Teachers
• Healthcare Professionals
• Teens/Young Adults/College Students
• Airline Industry Professionals
• Military
Consider those who are always on the go:
• Everyone
Time Spent on Device Per Day
Desktop/Laptop Mobile

10. Responsive Design: The Why
Expectations
85% of adults think that a company’s mobile
website should be as good or better than their
desktop website
[Visual.ly Website, December 2013]

11. Responsive Design: The Why
•Pinching/pulling
•Hard to find/touch navigation
•Menu is hard to locate and read
•No click to call
•No easy path to book a reservation
Cork Wine Bar DC vs. Old EbbittGrill, DC
•Accessible and easy-to- use navigation
•Easy-to-read pages
•Click to call enabled
•Menus are easy-to-read and scannable
•Events calendar well scaled to mobile device, easy to digest

12. Responsive Design: The Why
•Impossible to read HP (pinching/pulling)
•Challenging to select main navigation/tertiary navigation elements
•Text way too small
•Imagery does not scale
•Simple forms very challenging to complete, ieRequest Information
•Easy to read
•and consume
•Images scale well and are removed strategically on various pages vs desktop
•Navigation easy to use
•Search feature prominent and accessible
•Use of color and scale makes long pages easy- to-scan and consume, eg. Studies page
•All phone numbers leverage click-to-call
•Map feature optimized and integrated with Google Maps
Moravian College vs. University of South Carolina

13. “69% of tablet users have shopped via their tablet device in the last 30 days”
[Visual.ly Website, December 2013]
Responsive Design: The Why
•Navigation and tertiary pages hard to navigate
•Images not scaled correctly –cannot properly view inventory
•Impossible to navigate between inventory options within a given category without really pulling on the screen
•Contact/Find Showroom hard to use
•Imagery well scaled and easy-to-view
•Click to call enabled
•Navigation extremely easy-to-use
•Filter options within a category nice size and easy to touch
•Search results pages offer well sized imagery and typography
•Product detail pages scannablewith excellent use of accordions
Ashley Furniture vs. Raymourand Flanigan

14. Move the Needle
•Increase visitor time on site
•Increase page views and engagement
•Convert more leads
•Increase your sales
•Make search engines happy = move up in those search rankings
•Meet customer expectations
•Raise those repeat visitors
•Make sharing your site effortless
“ If you plan on sharing content or links to your website socially or through blogs, you need a mobile-friendly site, otherwise you will have high bounce rates, low conversion rates, etc. ”
[HubSpotResponsive Design Article]
Responsive Design: The Why

15. Who

16. Responsive Design: The Who
Industries
Financial Services
Media/News Outlets
Healthcare/Pharma
Consumer Products
Education
Travel
Real Estate
Sports/Entertainment
Professional Services
Food Services

17. Responsive Design: The Who
Missing the Mark
•United Healthcare
•TCF Bank
•Bristol-Myers Squibb
•USAJobs.com

18. Responsive Design: The Who
Retail/e-Commerce
Mobile Optimized is sometimes a better bet
•Macy’s
•Lowe’s
•DSW Show Warehouse
•Barnes and Noble
•Nordstrom’s
•Target
•WalMart

19. Minimal Mobile Traffic?
Are you garnering less than 5% mobile visits to your website? If so, it might not be worth the investment
until you see an up-tick in mobile traffic.
Mobile Visits
< 5%
Other Visits
Responsive Design: The Who

20. Where

21. Responsive Design: The Where
Websites, Microsites & Email
Hershey’s Chocolate World Responsive Website
Hershey’s Chocolate World Responsive Email

22. When

23. Responsive Design: The When
November 2014SMTWTFS129162330310172441118255121926613202771421288152229

24. How

25. Responsive Design: The How
IT vs Outsourcing
IF YOUR IT DEPARTMENT IS:
•Comprised of networking and telecommunications team members
•Are the people you call to order a new laptop or phone
•Focused on company telephony and Internet infrastructure needs
•Forcing you to use IE7 or IE8
•Sparingly helping you out with the company website but more for bug resolution THAN improvements/enhancements/redesigns
THE WRITING IS ON THE WALL:
They are not website designers and developers

26. Digital Agencies
• Staffed with specialized team members who play an integral role in
responsive design:
• Website strategists
• Information Architects
• User Experience Designs
• Designers
• Front-End Developers
• Software Architects
• SEO Specialists
• QA Engineers
• Stay abreast of trends
• Gain efficiencies in responsive design due
to years of experience (yes, years)
Responsive Design: The How

27. Responsive Design: The How
Cost
•Take your full website redesign budget and add 30-40%
•Full = IA, UX, design, front-end dev, engineering, launch
•It’s cheaper to do it all together versus going responsive after you launch a new site

28. Responsive Design: The How
Time
Need your website launched before a certain date? Consider that responsive requires an additional level of effort and time to cut up all your page templates against those breakpoints. Take your development timeline and add about 15-20% more time.

29. THANK YOU!
Let’s get started.
Tracy Pogue
tpogue@r2integrated.com
410.369.3769

30. Appendix

31. R2integrated (r2i) is a nationally recognized
and award-winning digital marketing agency
with one goal in mind. Our mission is to
develop innovative, memorable, meaningful
and results-oriented online customer
experiences for our clients.
11
100+
YEARS
OLD
TEAM
MEMBERS
STUFF WE
All Things Digital Integration/Platforms Analytics & Reporting
:
AT-A-GLANCE:
0 10101
01 101 1
110 100
010 10 1
Who are we?

32. Awards