"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought. There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences. Presentation first given at BarCamp Nashville in October of 2011.

1. W hy
“Mobi e First”
isn’t enough:
Developing a better user experience.
#bcn11expfirst
@kevinmpowell view full presentation

2. 1. What is “mobile first”?
2. The dangers of “mobile first” thinking.
3. How should we approach “mobile”?
4. The challenges & the challenge

3. 1 ?
2 3
What is “mobile first”?

4. Luke Wroblewski
Blogger
Author
Speaker
Former Chief Design Architect at Yahoo!

5. “Mobile First.”
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933

6. Why “Mobile First”? rnet Usage*
Inte
Heavy mobile data users are projected
to triple to one billion by 2013.
Mobile internet adoption has outpaced
desktop internet adoption by eight times.
Smartphone sales will surpass
worldwide PC sales by the end of 2011.
Over half of Android and iPhone users
spend more than 30 minutes per day
using mobile applications.
Desktop Mobile
*chart not “scientifically
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933 accurate”

7. “Mobile forces you to focus”
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933

8. “Mobile extends your capabilities”
GPS, i has teh
Accelerometer,
Compass, Cheese interwebz
Grater
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933

9. “Mobile First” has gotten BIG

10. The book comes out next week

11. Even the big guys are on board
“Mobile first in
everything.”
- Eric Schmidt
Google Chief Executive

12. #1!
Helpful as a design tool

13. MOBILE
FIRST!!!
Is this our battle cry?

14. !
The dangers of “mobile first”
thinking.

15. “Mobile First” forces us to
focus on a device.
It’s all about
me!!!

16. My “mobile”

17. His “mobile”

18. Her “mobile”

19. His “mobile”

20. Her “mobile”

21. His “mobile”
really ?!!!

22. His “mobile”?

23. There is no one
“mobile.”
Are you sure? I
am an iPhone

24. “Mobile First” causes us to
isolate our websites.

25. This is bad.

26. Bad technologically,
separate
codebases
separate teams
Mobile Desktop
twice the work
out of sync with
each other

27. doesn’t scale.
Tablet?

28. But more
importantly, it’s
bad for our
users.

29. The adventures of
Alexa’s top 100 US sites.
and the perils of isolation.

31. Both screenshots
taken at the same
time.

32. *click*, I mean *tap* -
This is not the iPhone
I’m looking for...

33. Separate “mobile” and
“desktop” sites make it
easy for content to get out
of sync.
Not to mention the missed sales
opportunities...

35. Welcoming to prospective
customers.
Prominent log in for existing
customers.
Allows users to transition from
direct mail marketing to a
conversion on the site.

37. Assumes I’m already a member.
Offers me an option to find a
branch / ATM location.
Gives me an option to
download a native app for my
phone.

38. Mobile Desktop
Assumes I’m already a Welcoming to
member. prospective customers.
Offers me an option Prominent log in for
to find a branch / ATM existing customers.
location.
Gives me an option to Allows users to transition
download a native app from direct mail marketing
for my phone. to a conversion on the
site.

39. Mobile Desktop
We wouldn’t do this in a bricks and
mortar store.

40. Are all mobile users already
members?

41. Are all mobile users already
members?

42. “Mobile First” leads to user
context stereotypes.

43. Mobile users are:
“in a hurry”
“on a slow connection”
“only interested in quick
interactions”

44. Wi-Fi
laxed
re
ka nd
yq uic
Ver ta sk?
hurried

45. 86% of mobile internet users are using
their devices while watching TV.
14%
86%
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

46. 37% of those are browsing the internet
(content unrelated to the show) while they watch
unrelate
d
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

47. Mobile users aren’t always on the go.

48. Mobile users aren’t always impatient.

49. on a slow
Mobile users aren’t always connection.

50. When we stereotype user
context we create
experiences that serve that
stereotype.

51. And we seem aware that these
experiences are insufficient.
Not what you wanted? Click this little link and have fun
pinching and zooming the rest of our site!

52. “Mobile First” yields
incomplete experiences.

53. Let’s play a game!
Let’s make a purchase on Walmart’s
mobile site. Imagine you’re the one going
through this experience, and raise your
hand if at any point you would abandon
the process.

54. Raise your hand if you would abandon the process.
Demo
Video

55. “The study by e-commerce agency Screen Pages looked
at more than 1.5m visitors to 30 non-optimised
websites, and found that conversion rates were an
average of 41% lower on mobile.”
http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e-
commerce-visits-but-converts-at-half-the-rate

56. 25% conversion 15% conversion
vs.
http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e-
commerce-visits-but-converts-at-half-the-rate

57. Users don’t want to
jump from this, to this.

58. The dangers of “Mobile First” thinking.
Forces us to focus on a device.
Causes us to isolate our websites.
Leads to user context stereotypes.
Yields incomplete experiences.

59. “Mobile First”
is not enough.

60. How should we
approach “mobile”?
I’m still here and I
brought my friends.

61. we need to focus on
“Experience First”

62. Talking about this.
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

63. Unintentional Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

64. Self Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

65. Genius Design
I’m the
expert.
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

66. Activity Focused Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

67. Activity Focused Design
Research & categorize users.
Build the features they want.
sound familiar?
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

68. Experience Focused Design
“Experience focused design looks at
discrete activities and all of the things
that happen in between those discrete
activities.”
- Jared Spool
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

69. We’re back here now.
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

70. How does
“Experience First”
apply to “mobile”?

71. Forces us to focus on a device.
“Experience First”
Forces us to focus on the experience

72. http://bostonglobe.com

73. It’s not about a device.
http://vimeo.com/28926711

74. Causes us to isolate our websites.
“Experience First”
encourages a common experience
one set of URLs

75. mobile.yoursite.com
view full site

76. m.yoursite.com
mobile.yoursite.com
yoursite.com/mobile

77. ook Po sts
Fa ce b
Email Cam
arks paigns
B oo km Tweets
na lA ds Share
Exte r d Lin
ks
yoursite.com

78. Leads to user context stereotypes.
“Experience First”
Leads to context-aware dynamic
experiences.

79. Cater to actual user context.
Where are they?
Home, work, in your store?
Are they relaxed or in a hurry?
How long are they spending on each page?
What types of content are they viewing?
Note: these have nothing to do with device.

81. Yields incomplete experiences.
“Experience First”
Delivers the complete experience

82. Another Alexa top 100 site.

94. “Experience First”
Forces us to focus on the
experience.
yoursite.com Encourages a common experience
Detects and adapts dynamically
to user context
Delivers the complete experience

95. What do I want my users to experience?

96. “Experience First”
Tailoring the experience
“Mobile First” Design
Responsive Design
Media Queries Geolocation
Social Media Integration

97. The Challenges
&
The Challenge

98. A lot of factors
affect an experience.

99. Content User Traits
Name
Device Capabilities Age
Portability Gender
Display Size Language
Display Resolution Locale
Location Awareness (GPS) Disabilities
Directional Awareness (Compass) Proficiency with technology (power user vs.
Battery Life novice)
Bandwidth Capacity
Input Type (touch/keyboard/other)
User Context
Bandwidth Available (3G, Wi-Fi, dialup)
Camera
Location (home? work? at your business?)
Flash Support
Patience level (in a hurry, relaxed, etc.)
Orientation Awareness (Accelerometer)
Prior experience with your site/application
Browser Capabilities
Javascript capable User Preferences
CSS version/supported features Favorites (color, restaurant, wish lists)
HTML version/supported features
File system accessibility
Device feature accessibility

100. It’s time-consuming
and expensive.

101. If you do “experience
first” well, much of
your effort will go
unnoticed.
But they’ll notice when you don’t!

102. You have to sell this
concept to: clients,
stakeholders, designers,
developers, that guy who
has to approve everything.
Feeling overwhelmed yet?

103. But start small.

104. It won’t happen overnight.

105. You don’t have to rebuild
your entire website.

106. Though that does make things easier.

107. Change your thinking.

108. No longer,
“mobile” vs. “desktop”

109. just
users
and
experiences

110. Experience
First.

111. Resources
“Mobile First”
Luke Wroblewski
http://www.lukew.com/ff/entry.asp?933
Book - http://www.abookapart.com/products/mobile-first
“Responsive Web Design”
Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
Book - http://www.abookapart.com/products/responsive-web-design
“Pragmatic Responsive Design”
Stephanie Rieger
http://www.slideshare.net/yiibu/pragmatic-responsive-design
“Adaptation”
Bryan Rieger
http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
Modernizr
http://www.modernizr.com/
Flickr - Awesome pics for presentations!
http://www.flickr.com/

112. Thanks
The Dave Ramsey Web Team
Nick at ModerNash
Luke at FoxyCart
My amazing wife, Sara.

113. Experience
First.
#bcn11expfirst
Kevin Powell
UX Consultant / Developer
kevin@underthebedstudios.com underthebedstudios.com
@kevinmpowell