Angela Hicks

1. Angela Hicks
@angela_9
Debunking Mobile Web
Design Myths in the Age
Of the Smartphone
#DSMPLS
@DigSumMPLS

2. Why is the mobile experience important?
FLICKR USER JAMESJUSTIN

3. 46.1%
of the world’s population is using the internet.
SOURCE: UNITED NATIONS, ITU, 2016

4. 77%
of the United States owns a smartphone.
SOURCE: PEW RESEARCH, 2016

5. Every month, mobile
users in the U.S. spend
87 hours browsing.
Focus and browsing energy
happens in short bursts with
attention span waning.
SOURCE: MOBILE METRICS, 2016

6. MOBILE MYTH #1
“I’ve created buyer personas, so I understand
my mobile users.”
OR
“My buyer persona doesn’t use mobile to browse
my content since I’m in B2B.”

7. Device context can influence behavior
more than buyer personas.

8. SOURCE: GOOGLE, 2012
You never have a
user’s full attention.
90% of people use more than
one screen at a time.

9. Discover the user’s journey.
Maximize conversions on mobile devices by identifying
the micro-moments.

10. MICRO-MOMENT:
An intent-driven moment
when a person turns to a device,
increasingly a mobile device,
to act on a need:
to know, to go, to do, to buy.
SOURCE: GOOGLE, 2015

11. I want to know.

12. MOBILE MYTH #2
“The person walking down the street who’s listening
to music wants to leave Facebook, convert on my form,
and download a 40-page white paper.”

13. Rethink the
PDF experience.
Ungate long-form content on your
website pages. Deliver PDFs via
email for the user to locate later.

14. Keep mobile users
engaged.
Make long pages media rich and
create a robust navigation system.

15. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

16. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

17. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

18. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

19. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

20. 1. Make it responsive to resize to the screen.
2. Ask only what you need.
3. Use conditional logic.
4. Choose field types wisely.
5. Test it yourself.
Steps to a Mobile-Optimized Form

21. I want to go.

22. Simplify mobile
navigation.
The simpler, the better. A mobile
menu is the first mobile-specific
design you should implement.

23. MOBILE MYTH #3
“If I don’t have a brick-and-mortar store, I don’t need
to concern myself with localized thinking.”

24. Nearly 60% of searches
happen on mobile.
SOURCE: SEARCH ENGINE LAND, 2016

25. Optimize directions
with native mobile apps.
Apple Maps URLS will automatically
redirect to Google Maps on Android.
HTML:
<ahref=https://maps.apple.com/?q=HubSpot></a>

26. I want to do.

27. MOBILE MYTH #4
“We’re going to create ‘how-to’ videos that are micro-sized
so that mobile users will watch it to the end.”

28. 40+ minutes
is the length of a mobile viewing session on YouTube,
which has a billion mobile video views per day.
SOURCE: YOUTUBE, 2017

29. Encourage the user’s journey.
If a user needs to do, be complete and give them more to do.
IMAGE SOURCE: Volkswagen

30. I want to buy.

31. MOBILE MYTH #5
“Selling intangible goods and customized services
on mobile needs a sophisticated strategy.”

32. Sell where the user is.
Payment gateways make it possible on social or on your site.
x
x x
x
x
x
x
x
x

33. Provide the option to communicate.
Create an immediate connection through many channels as possible.
● Chat applet on website
● Text message
● Social chatbot
● Phone call

34. Show or hide content for mobile users
only.
By using media queries, you can easily customize the mobile experience.
CSS:
@media (min-width: 980px) {
.hide-on-desktop { display: none; }
}
HTML:
<div class="hide-on-desktop">
EMBED CODE HERE</div>

35. Optimize your phone number.
Take advantage of native mobile apps and activate the phone app.
Talk with us now.
<a href=“tel:+16178675309”> Talk with us now. </a>
(Don’t forget to include the country/area code.)

36. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

37. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

38. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

39. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

40. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

41. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

42. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

43. How to Optimize Your Mobile Experience
1. Implement a mobile navigation. Go check yours ASAP.
2. Reimagine your ideal persona’s conversion paths on mobile.
3. Ungate long-form content and fix your form experience.
4. Use native mobile apps as much as possible.
5. Take advantage of displaying or hiding content on mobile only.
6. Test it yourself.

44. WHO HAS QUESTIONS ABOUT
WEBSITE REDESIGNS FOR A BETTER
MOBILE USER EXPERIENCE?

45. GROWTH-DRIVEN DESIGN CERTIFICATION
Learn how to make educated decisions
to improve your website experience with the
free Growth-Driven Design Certification from
HubSpot.
http://bit.ly/learnGDD

46. THANK YOU.#DSMPLS
@DigSumMPLS