Mobile devices have evolved significantly over time, driven by advances in both technology and how people communicate. Content is increasingly user-generated rather than top-down, and consumed on personal mobile devices rather than desktop computers. Most mobile users now access the internet primarily through apps rather than mobile web browsers. When developing for mobile, key considerations include the mobile mindset of prioritizing user needs, deciding between apps and responsive web design, optimizing content for smaller screens, and accounting for mobile contexts like location, movement, and device capabilities. Associations can leverage location-based services and design with mobility in mind.

1. Mobile Matters: !
A Deep Dive
Reggie Henry, CAE!
Chief Information Officer!
ASAE

3. What We’ll Cover
Background
Trends

4. Background

5. Background: Evolution
Evolution of
Networks Evolution of
(People and Content
Technological)
Evolution of
“Personal”
Technologies

6. Evolution of Content
Defining Characteristics!
!
• Authoritarian!
• Top Down!
• Static!
• One to many
Evolution
of
Content

7. Evolution of Content
Defining Characteristics!
!
• Authority and User
Generated!
• Networked!
• Dynamic!
• Many to many
Evolution
of
Content

8. Evolution of Networks - People
The world is changing the way it communicates.
The world is changing the way content is created,
filtered, consumed, shared, rated……
Evolution of
Networks
(People and
Technological)
There is a group of folks, largely (but not
entirely) defined by generation, who
communicate differently. They have
always communicated differently.
That’s what this is REALLY all about!

9. Evolution of Networks - Technology
4G - 2012
Evolution of
Networks
(People and
Technologic
1983 1990 2002

10. Evolution of Personal Technologies
1973
1996
Evolution of
“Personal”
Technologies
NOW! 2002

11. Mobile: The fuel for change.
Evolution of
Networks Evolution of
(People and Content
Technological)
Evolution of
“Personal”
Technologies

12. So, what is mobile?

13. So, what is mobile?
Although both smartphones
and tablets are considered
mobile, increasingly, people
use them differently.
• Convenience!
• Save Time!
• Waste Time!
• Social! • Broad Content Consumption!
• Simple • Desktop-like expectations,
with mobile flair!
• Social!
• Complex

14. Who is Mobile?
http://blog.nielsen.com/nielsenwire/online_mobile/generation-app-62-of-mobile-users-25-34-own-smartphones/

15. Trends

16. Prediction…

17. Prediction…
A year
early!

18. Evolution of Mobile Access

19. Predictions for 2015
• There will be nearly one mobile device per capita by 2015.
There will be over 7.1 billion mobile-connected devices—
approximately equal to the world’s population in 2015 (7.2
billion)!
• Two-thirds of the world’s mobile data traffic will be video by
2015. Mobile video will more than double every year between
2010 and 2015.!
• Mobile-connected tablets will generate as much traffic in
2015 as the entire global mobile network in 2010!
• There will be 788 million mobile-only Internet users by 2015.
The mobile-only Internet population will grow 56-fold from 14
million at the end of 2010 to 788 million by the end of 2015.
Cisco Visual Networking Index: Global Mobile Data!
Traffic Forecast Update, 2010–2015

20. …and then there’s this!!
This is Different!!!

21. iPad Adoption is Crazy!
!
TOP MOBILE INTERNET TRENDS Matt Murphy / Mary Meeker – 2/10/11 http://www.slideshare.net/
kleinerperkins/kpcb-top-10-mobile-trends-feb-2011

22. So, What?
But from a !
business perspective !
why should I care?!
!
It’s just a media
consumption device,
right?

23. My first portable computer - 1986
COMPAQ Portable ll!
Price:! $4999!
Weight: ! 26 Pounds!
CPU:! Intel 286 @ 8 MHz!
RAM:! 640k!
Storage:! 20Meg hard drive!
Display:! 9 Inch monochrome!
! 80 x 25 text!
Ports:! 1 parallel, 1 serial, 1
CGA!
My present portable computer - 2012
iPAD 2!
Price:! $699!
Weight: ! 1.35 Pounds!
CPU:! 1GHz dual-core !
RAM:! 64GB!
Storage:! (in RAM)!
Display:! 9.7 Inch!
! 1024x768 resolution!
Ports:! 30-pin dock connector!

24. My first portable computer - 1986
COMPAQ Portable ll!
Price:! $4999!
Weight: ! 26 Pounds!
CPU:! Intel 286 @ 8 MHz!
RAM:! 640k!
Storage:! 20Meg hard drive!
Display:! 9 Inch monochrome!
Let’s see…! ! 80 x 25 text!
1024 MHz = 1 Ports:! 1 parallel, 1 serial, 1
CGA!
GHz, so….!
WOW! computer - 2012
My present portable
That’s
about 125 times iPAD 2!
Price:! $699!
faster! Weight: ! 1.35 Pounds!
CPU:! 1GHz dual-core !
RAM:! 64GB!
Storage:! (in RAM)!
Display:! 9.7 Inch!
! 1024x768 resolution!
Ports:! 30-pin dock connector!
OS:! iOS 5

25. My first portable computer - 1986
COMPAQ Portable ll!
Price:! $4999!
Weight: ! 26 Pounds!
CPU:! Intel 286 @ 8 MHz!
RAM:! 640k!
Storage:! 20Meg hard drive!
…and ! Display:! 9 Inch monochrome!
1024 MB = 1 GB, ! 80 x 25 text!
Ports:! 1 parallel, 1 serial, 1
so….! CGA!
That’s about
3,200 times more
My present portable computer - 2012
iPAD 2!
workspace and Price:! $699!
storage! Weight: ! 1.35 Pounds!
CPU:! 1GHz dual-core !
RAM:! 64GB!
Storage:! (in RAM)!
Display:! 9.7 Inch!
! 1024x768 resolution!
Ports:! 30-pin dock connector!
OS:! iOS 5

26. This IS a computer!

27. How do people feel about their mobile devices?

28. Quick Survey
What mobile devices do you use?

29. How To Vote via Texting
EX
AM
PL
E
22333
22333
1. Standard texting rates only (worst case US $0.20)!
TIPS 2. We have no access to your phone number!
3. Capitalization doesn’t matter, but spaces and spelling do

30. How To Vote via Web
EX
AM
22333 PL
E
TIP Capitalization doesn’t matter, but spaces and spelling do

32. So how do I think about this?

33. 1024 x 768
Now What?
320 x 480

34. So how do I think about this?
Or even worse,
now what?

35. Strategy Considerations
The Mobile Mindset

36. The Mobile Mindset
Mobile First = User Needs First!
It’s, ultimately, a re-imagining of how our content
fits our users needs. Just think about what Mobile
First really implies. “What tasks make sense to
the user?” “What does the user want?” “What
is going to be most relatable to the user?” All
of these things are focused on the personal
nature of the experience.
Jason Grigsby, Vice President, Mobile and Web Strategist!
Cloud Four, Inc.

37. The Mobile Mindset
Mobile “user experience” design is,
in many ways, an act of curation.
When designing for mobile platforms, one has to be much more careful
about selecting content and interactions for a given screen or app state
than on the web or desktop.!
!
Global navigation is often limited or absent. Menus, toolbars, and other
navigation elements usually have strict limits on the number of items
they can provide. So ensuring that users have access to all the functions
they need (and none they don’t), and that they can find their way out of
a given app state, is crucial.
Thoughts on user experience design by
Dmitry Nekrasovski

38. The Mobile Mindset
Mobile USAGE is Different!
Think !
Presence at the Point of Need!

39. The Mobile Mindset
Mobile First = User Needs First!

40. The Mobile Mindset
Mobile First = User Needs First!
Extraneous

41. The Mobile Mindset
Mobile First = User Needs First!

42. Strategy Considerations
Apps vs. Mobile Web

43. What’s an App?
• Apps are device specific and leverage native features on
smartphones/tablets!
• Usually look and interact in “cooler” ways than mobile
web…for now!
• How do you know? Apps are usually accessed via an
online app store like Apple’s App Store, BlackBerry’s App
World, or the Android Market

44. What’s the Mobile Web?
• Mobile web is accessed via a browser on the device!
• Typing the URL on the mobile browser brings up a mobile
formatted version of a traditional website!
• Many ways to approach mobile web!
• Different presentation of main site (good place to start)!
• Fully mobile-designed version (end game)

45. Apps v. Mobile Web

46. Apps v. Mobile Web
Mashable Tech, Sam Laird!
http://mashable.com/2012/06/06/mobile-site-mobile-app-infographic/

47. Apps v. Mobile Web
First time there's been a decline in
mobile web usage as compared to
app usage....hmmm....and the gap
is widening!
Mashable Tech, Sam Laird!
http://mashable.com/2012/06/06/mobile-site-mobile-app-infographic/

48. When Do We Get Apps?

49. How Do People Get Apps?

50. Strategy Considerations
Responsive Design

51. Responsive Design
What is Responsive Web Design?!
Responsive web design is the term given to the concept of designing and
developing a website so that the layout changes depending on the device/viewport
on which the website is being viewed. The term 'Responsive Web Design' was
coined by its creator, Ethan Marcotte.

52. Responsive Design
Fluid Grid
I dubbed this pattern "mostly fluid" because the core structure of the layout really
doesn't change until the smallest screen width. Instead, the design mostly relies on
fluid grids to adapt to a variety of screen sizes
Multi-Device Layout Patterns!
by Luke Wroblewski

53. Responsive Design
Column Drop
Another popular pattern starts with a multi-column layout and ends up with
a single column layout, dropping columns along the way as screen sizes get
narrower. Unlike the Mostly Fluid pattern, the overall size of elements in this
layout tend to stay consistent. Adapting to various screen sizes instead
relies on stacking columns
Multi-Device Layout Patterns!
by Luke Wroblewski

54. Responsive Design
Layout Shifter
This pattern does the most to adapt across different screen sizes.
That is, different layouts are used on large, medium, and small
screens. Because this inherently requires more work, it seems to be
less popular than the previous two patterns I outlined.
Multi-Device Layout Patterns!
by Luke Wroblewski

55. Responsive Design
Other Tools
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

56. Mobile Development Tips
• Focus is key!
• Provide a link to the full site in the app or mobile site!
• Leverage how devices might be used!
• Don’t make searching hard!
• Keep it light

57. Mobile Development Tips
• Think about multiple sizes!
• Stay away from flash!
• Auto-detect!
• Write for mobile—consider the content!
• Look into HTML 5

58. Strategy Considerations
Content Considerations

59. Why people use the web
• Answer questions!
• Perform tasks!
• Satisfy goals!
• It’s about their needs—not ours.

60. How Users Read on the Web
• Visitors don’t read—they skim/scan!
• They are quickly assessing credibility and looking for the
answer to their question!
• F-pattern. Reading horizontally first, then lower.

61. How Users Read on the Web

62. Content Considerations
Mashable Tech, Sam Laird!
http://mashable.com/2012/06/06/mobile-site-mobile-app-infographic/

63. Writing for the Web(review)
• Scannable layout using headlines and sub heads!
• Concise text-1/2 or less of what you’d use in print. If it’s
possible to cut a word-cut it.!
• Use objective language-be clear!
• Lead with information carrying words!
• Inverted pyramid approach

64. Writing for the Web(review)
• Write to your readers level!
• Avoid Jargon or blah blah text- Orwell’s Rules!
• Keep a consistent conversational tone!
• Short and simple pages, paragraphs and sentences!
• Stay reader-focused—both human and search readers

65. Writing for Handhelds
• Like writing for the web only amplified!
• Not all of your content needs to go mobile!
• 108% harder to understand information when reading
from a mobile screen ~ Jakob Nielsen!
• Added ‘context’ layer-what do your members need
when they’re on the go?

66. How micro?
• “Short is too long for mobile”!
• Headlines and subheads-60 characters max!
• Links 1-3 words!
• Rely on cut and defer

67. Mobile and Social Content
• Increasingly, web, mobile and tablet content is integrated
with social media!
• Social content is similar to mobile—it’s micro format and
personal!
• Consider the impact of video

68. Content on Tablets
• Personalization—life management devices not just work
management devices!
• Nexus of print design and web design-look at Flipboard
and Zite!
• Meta app versus single focused task app

69. Strategy Considerations
Mobile Contexts

70. Mono-context Multi-context

71. Mobile Contexts
• Location!
• Locomotion!
• Immediacy!
• Device Capabilities/Constraints!

72. Mobile Context: Location
Intentional Serendipity

73. Location based social serendipity
I really need some help
with this cloud computing My ASAE Technology Colleagues
thing…
Can we help our members have
“not so chance” encounters?

74. The LBS Breakdown
Three categories of location based services from
Pew Internet Study!
• Geo-social services (Foursquare, Gowalla, Facebook
Places, and other places to check in)!
• Driving directions, search results, location-based reviews
and other location-focused content!
• Social media location awareness-such as location
enabled tweets or geo-tagged Flickr photos

75. Adoption of LBS
According to Pew Internet Trust,!
Younger adults are more likely to!
use these services, as are those!
in households making at least!
$75,000 per year.

76. How can associations use LBS?
• Create places for your
association or conference
!
• Have members or staff post a tip
to FourSquare
!
• What offline value can you attach
to social value (e.g. Mayorship)?

77. Create a Facebook Place

78. Leverage location
What services do you provide that would benefit
from location awareness?!
• Member directory?!
• Maps to your events?!
• App location awareness?!
• Here are some association examples

79. Association Examples
ASAE’s beta mobile site
!
Driving directions to events!
Associations ‘around me’

80. Association Examples
Houston Association of Realtors

81. Association Examples
American Sailing Association

82. Association Examples
American Lifeguard Association

83. Association Examples
American Heart Association: Walking Paths

84. Mobile Context: Locomotion
How do I design for this situation?!
!
- Better have easily accessible navigation!
- Better have “small” content!
- Better GET TO THE POINT!

85. Mobile Context: Immediacy
Two of the defining characteristics of
mobile devices is ALWAYS ON and ALWAYS
CONNECTED. Users expectations are
colored by this. So mobile must:!
!
• Load quickly!
• Meet the users need quickly!
• Remember what I was doing quickly!

86. Mobile Context: Device
Capabilities
Can I take advantage of: !
• Cameras!
• Location Awareness!
• Device Orientation!
• Other Apps
Constraints
What do I do about:!
• Screen Size!
• “Uneven” Internet Access!
• User Familiarity with Device

87. Mobile Device Management is a MUST!

90. Final Thoughts - Q & A!
!
Thank You for Your Time
and Attention