mobile mandate: why you need to stop worrying and love the mobile web
TRANSCRIPT
Connected Healthcare Experiences
Mobile Mandate: Why You Need to Stop Worrying and Love the Mobile Web Digital Pharma East, Philadelphia, PA October 20, 2011
Presented by Seth Perlman President, The Lathe
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com}
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
By 2013, more people will access the web
from mobile devices than from computers.
Will you be ready?
Source: Morgan Stanley Research.
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
How many pharma brand websites are mobile-friendly?
A. 10% B. 25% C. 40% D. 65% Prop
erty o
f The
Lathe
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
If you answered A (10%)... You’re still wrong. And I cheated.
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Only a tiny percentage of brand websites are mobile-friendly
Source: The Lathe’s Web Mobilization Index. Last update October 13, 2011.
Not Mobilized
96%
Mobilized
4%
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Not having a mobile-friendly website is: Poor user experience Dismissive of an engaged audience An issue of compliance
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Desktop websites are designed for large screens
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Desktop websites are not designed for small screens Logo Branding Claim Indication ISI Prop
erty o
f The
Lathe
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
But how about when it’s shown to scale?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Perspectives from regulatory:
“FDA wants us to be more patient-friendly” “Find it very frustrating: difficult to read, difficult to navigate” “Fair balance must be pervasive” “Even if logo/colors are somewhat visible, it is a violation” “OPDP will now have the resources to scrutinize” “Most significant challenge is for products with boxed warning” “Take advantage of direct communication with FDA”
“Long term, I can see a mobile mandate” Prop
erty o
f The
Lathe
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Mobile web UX is more complicated than desktop web UX. But why? Isn’t it just… smaller?
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
The complexity of desktop web design and development is trivial compared to what it once was Consider the list of things we don’t care about any more: Mac vs. PC Connection speed OS version Firefox vs. Chrome vs. IE* Screen size Browser version Screen resolution Flash penetration CPU and RAM
* Unless we’re talking about IE6. Then there is crying and screaming and sadness.
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
However, the complexity of mobile web design and development rivals the desktop world 12-15 years ago For mobile web, we have to care about a whole lot more:
iOS vs. Android vs. BlackBerry vs. Windows Platform version Screen size Screen resolution Single-window environment CPU and RAM Connection speed Flash Contextual content and navigation hints
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
There are several considerations when developing a mobile website approach Mobile platform support — modern, legacy, small tablet Full website vs. partial website Presentation of ISI Adaptation of complex features Forms Video Charts and graphics Linked initiatives
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Let’s check out some examples from the 4%.
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Primarily text-based Safety information excerpt at top of every screen Best practice: Large, touch-friendly menus
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Primarily text-based Safety information excerpt at top of every screen Best practice: Large, touch-friendly menus
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Best practice: Enable phone numbers to be tapped to initiate call
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Layout is much more app-like Establishes clear iconography for navigation
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Layout is much more app-like Establishes clear iconography for navigation
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Residual “click” instructions could be replaced with “tap” Best practice: Link to full website for users who want it Prop
erty o
f The
Lathe
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Iconographic, touch-friendly navigation Visual emphasis on safety information
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Be careful that high-priority links are also mobile-friendly
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Best practice: Mobile-friendly without losing brand strength
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Best practice: Use of SVG or hi-res graphics for retina display
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Note jagged images compared to text
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Note jagged images compared to text
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
ISI expanded by default on first visit, scrolls within its own panel ISI collapses to globally accessible tab after first tap
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Charts hidden until user taps to view Charts not optimized for hi-res mobile screens
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
So, how do mobile websites work? There are three different models worth considering: Direct (self-contained on existing web infrastructure) Proxy (push through external server, e.g., usable.net) Hosted transformation (inject mobile design on the fly)
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
The direct model: Mobile website is a different presentation layer on existing website Pros Self-contained Single content source Cons Tightly integrated future-proofing Inefficient for multiple websites
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
The proxy model: Mobile traffic is pushed through a third party infrastructure Pros Decoupled future-
proofing
Cons Possible content
duplication Dependency on proxy
infrastructure Security, patient privacy
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
The hosted transformation model: Mobile transformation injected on the fly Pros Single content source Decoupled future-
proofing Degrades gracefully Supports multiple sites
Cons Difficult to achieve for
older mobile platforms
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
There are important considerations for maintaining a presence in the mobile web channel Phase-ins — supporting new platforms and versions Phase-outs — avoiding the IE 6 trap Testing and QA — covering enough of the market Multiple asset creation — e.g., SVG vs. raster images
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
A closing thought:
Mobile website best practices will lead you to better desktop websites
Propert
y of T
he La
the
Use by
perm
ission
only
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Thank you! For more about our mobile solutions, please visit us at thelathe.com Like us on Facebook and follow us on Twitter @thelathe
Prop
erty o
f The
Lathe
Use by
perm
ission
only
Connected Healthcare Experiences
The Lathe
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Connected Healthcare Experiences The Lathe helps companies utilize web and mobile technologies to connect patients, caregivers, and professionals to support improved outcomes.
Propert
y of T
he La
the
Use by
perm
ission
only
Connected Healthcare Experiences
Bio
©2011 The Lathe, Inc. Proprietary and confidential. {www.thelathe.com} October 20, 2011
Seth Perlman, President [email protected] 646-291-6490 / 646-528-5755 m http://www.linkedin.com/in/sperlman Seth has more than 17 years of web development experience for hundreds of clients, from design and implementation to technical leadership to executive management. He has spent the past 8 years focused on healthcare and pharmaceuticals since founding The Lathe in 2003. Most recently, Seth has focused on mHealth and the application of mobile technology (apps, web apps) to the needs of patients, caregivers, and healthcare professionals.
Propert
y of T
he La
the
Use by
perm
ission
only