A successful mobile strategy that will contribute to your bottom line is more than just a mobile website or app. Eileen Boerger, President of CorSource Technology Group and Greg Rau, CEO & Founder of Upstart Labs, introduce technical and business questions you need answered prior to starting your path to mobile. In this presentation: - Discover what really is “mobile” and what that means for your business. - Find out what questions need answered before you begin. - Review a case study comparison of two leading websites and their mobile editions . - Learn best practices, common mistakes and solid planning from 2 pioneers in the mobile industry. A successful end-game in mobile business begins with a well-planned & structured approach.

1. Measure twice and cut once
(then measure again)
Planning & designing your site for mobility
Monday, 09.24.2012 1

2. Implementing a Mobile Strategy
Today’s Focus
• Planning & designing for mobile
Future Webinars
• Development dilemma- native app, mobile web, or hybrid?
• Considerations when extending software into mobile.
2

3. Today’s Presenters
• Eileen Boerger, President & Director
CorSource Technology Group
• Greg Rau, Founder & CEO
Upstart Labs
3

4. Why Mobile?
4

5. The Opportunity Costs
• There are 5.9 billion mobile subscribers -
87% of the world population (ITU)
• 600 million new smartphones will be
shipped in 2012 (Morgan Stanley)
• Over 1 billion feature (non-smart) phones
will be shipped in 2012 (IDC)
• In 2012, mobile device usage eclipsed
desktop usage
5

6. Mobile usage is more than phone calls
How are people using mobile?
94%
• Accessing websites
• Using mobile apps
• Interface to enterprise applications
• Playing Games
• Watching Videos
• Reading the news & other media
content
6

7. Mobile App Considerations for Business
It’s not too late to start but you must start now and with a thoughtful & strategic approach
• What should you be providing through mobile?
• What do your enterprise and legacy users want?
• What about security? What role does data play?
• Mobile UI is different, and each type of mobile device has different UI
requirements.
• You don’t have to provide all access from the mobile device, i.e., your
mobile apps don’t have to do everything.
• Good enterprise app software developers do not necessarily make good
mobile app developers.
• Don’t underestimate security implications of going mobile
7

8. Key planning considerations
Planning Area Key Considerations
Mobile user and functional • Which user roles should be targeted for the mobile device?
requirements • What functions should be accessed through the mobile device?
Data access • What data can be made available on mobile device?
• How will data be synchronized?
• How will security of data be handled?
Mobile platforms to support • Smartphone's, Tablets, …?
• iOS, Android, Blackberry, …?
Security • How will authentication and authorization work on the mobile device?
• Single-user devices or multi-user devices?
• How will mobile users be provisioned?
Monetization • Free?
• Fee – transaction-based, one-time fee, …?
8

9. Key design considerations
Design Area Key Considerations
Device types • Screen size and resolution (DPI)
• CPU performance, memory and storage space
• Development tools
• Special needs (GPS or camera, for example)
Network constraints • Occasional connections and/or low bandwidth
• Choose protocols based on speed and power consumption
UI design • Different UI characteristics (touch, for example)
• Different screen sizes of devices
• Security
Architecture • Web app or native app
• Multi-layered architecture
Device constraints • Battery life, memory size, processor speed
9

10. Where do we start?
In many cases, it makes sense to start with your existing users:
Make your website mobile-friendly.
10

11. Define what you mean by mobile.
What are your goals in mobile
•Reach new audience?
•Better serve existing client base?
•Increase revenue?
Who is your existing audience?
•Can you measure their mobile usage today?
•What content are they accessing via mobile?
•Have you gotten any direct user feedback?
11

12. Your primary mobile web presence
Three practical approaches to consider:
1. Improve, but ignore the small screen
2. Responsive web design
3. Separate mobile web site
12

13. 1. Improve, but ignore the small screen
• A good starting point if your target audience uses modern devices
with advanced browsers
• Make your site faster for all users
• Ensure usability on touchscreen devices
• Review content: if it feels too heavy for mobile, should the site be
simplified for desktop as well?
13

14. 1. Improve, but ignore the small screen
Pros
• Immediate benefits to 100% of your users
• Ease of development and testing
• Relatively short time to see improvements
Cons
• May not work well (or at all) on less-capable devices
• Not adapting to screen sizes means users will have to zoom; pan
14

15. 1. Improve, but ignore the small screen
• Screen width isn’t everything.
• Google desktop results for
movie times are arguably more
mobile-friendly than its mobile
counterpart.
15

16. 2. Responsive web design
Responsive web design is a development technique of adapting
content dynamically to fit the screen size
• A flexible layout—making sure that the underlying page adapts to
varying screen sizes and resolutions
• Flexible images—images that scale well within a layout
• CSS styling tailored to ranges of resolutions or types of device
16

17. 2. Responsive web design
Pros
• Mobile users have access to full features of the site
• Backend device or feature detection not required
Cons
• Can potentially lead to heavier pages and slower loads
• Technical difficulties in implementation depending on use cases
and design
17

18. 2. Responsive web design
Example: http://barackobama.com/
Dynamically resizes and displays content tailored to
smartphone browsers. Doesn’t render any content
at all on some feature phones.
Shares all functionality of the primary site so that
users can access a majority of content
At time of writing, the main page load is 3.6MB on
an unprimed cache. This is not designed for quick
loading on-the-go.
Progressive enhancement: ―Make a Call‖ call on
the candidate’s behalf directly from a phone via
mobile browser links.
See Brad Frost’s write-up at Smashing Magazine: http://bit.ly/O1Dz70
18

19. 3. Separate mobile site
• Delivering separate content to mobile devices
(m.example.com) solves some of the challenges with a
pure front-end Responsive approach.
• It can be easier to support lower-end devices.
• Don’t assume that mobile users want a stripped-down
experience. Provide a ―full site‖ link.
19

20. 3. Separate mobile site
Pros
• Allows a reduced feature set if desired (even if just in the short run)
• Can simplify front-end development by simply hiding some content
• Separate entry in Google mobile search results
Cons
• Often requires more planning and development effort: think about
domains, redirection, user preferences, multiple sets of content
• Device detection usually accomplished by maintaining User Agent string
databases, or integrating with an external service
20

21. 3. Separate mobile site
Example: http://m.mittromney.com/
Device detection to route users to a separate
mobile website, though still targeting smartphones.
The main page on Romney’s mobile site is under
700 KB and loads more quickly than that on
barackobama.com.
Less content is presented than on the desktop
version. Content is surfaced gradually through a
deeper navigation.
―Store‖ section makes use of iOS-inspired UI
framework
See Brad Frost’s write-up at Smashing Magazine: http://bit.ly/O1Dz70
21

22. Further thoughts
• A hybrid approach — combining elements of Responsive Web
Design with device detection or a separate mobile site — can allow
for more tailored user experiences
• If you’ve determined that mobile users want (e.g.) more direct
access to your important content, should that hold true for your
―traditional‖ users as well?
22

23. Key Takeaways
• Understand the opportunity costs of avoiding mobile
• Articulate your needs and goals first
• Don’t assume too much about your users
• Don’t underestimate the differences in developing for mobile vs.
developing for a desktop/laptop
• Planning an overall strategy first will help you deliver a successful mobile
web site
• If you haven’t started a mobile strategy, start now or you will be left behind
23

24. Questions?
Learn More About Upstart Labs
• Upstart Labs is a product development company based in Portland Oregon that provides
strategy, design, development, and go-to-market support for mobile technology innovators.
Find Upstart Labs on the web at www.upstartlabs.com or follow on Twitter: @upstartlabs.
Learn More About CorSource Technology Group
• CorSource Technology provides consulting, software development services and technical
staffing that businesses need to succeed in the fast-moving, highly competitive world of
software development and IT. CorSource is headquartered in Portland, OR with an office in
San Mateo, Calif., serving SMBs and ISVs nationwide. Learn more at www.corsource.com,
and follow on Twitter: @corsource.
24

25. Watch for our follow-up Webcasts:
• ―Development dilemma - native app, mobile web, or hybrid?‖
October 30
• ―Considerations when extending software into mobile.‖
November 27
25