adaptive content, responsive design and medical information
DESCRIPTION
In today's digital world we find that even our laptop computers are too bulky to carry around. We rely more and more on our real personal computers, our phones and tablets. In the future we can expect even smaller and more integrated and wearable technology, such as Google Glass, smart watches and related devices, and even augmented reality contact lenses. Other than the fact that they're all mobile, these devices don't have many capabilities in common. How do we create content that can be used most effectively on each of them? Responsive Design is only a start. We need Adaptive Content and Design to take advantage of the capabilities of all these devices. Join Charles Cooper as he explains what we need to do to make our content adaptive -both to our customers and their devices.TRANSCRIPT
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Adaptive Content, Responsive Design and Medical Information
@Cooper_42 #ICCLSH
Charles Cooper – VP The Rockley Group
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Why do we do this?
• To communicate ‘stories’ to our readers.• Those stories can be:• Technical• Narrative• Informative, non-fiction• Graphical• Sales and marketing
• Any information that we want others know and remember
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
Wall Art– Matobo Hills, Zimbabwe
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets Clay tablet (87 BCE) describing the
arrival of Halley’s Comet– British Museum
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
Book of Kells – Trinity College, Dublin
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
Gutenberg Bible – Morgan Library NYC
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’ve used many techniques
• Face to face communication• Cave wall• Clay tablets• Scrolls• Handwritten books• Typeset books• Portable computers• Mobile phones & PDAs• eReaders• Smartphones• Tablets
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
When most successful…
• We’ve adapted the way we display the content to match the medium
Book of Kells – Trinity College, Dublin
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’re pretty good at migrating content
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
The available technology used to be a problem
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
This now fits in your pocket
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
But the tech is finally here
• To deliver content, to anyone, any time, on any device, in any language.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is mobile?
• Five main types of mobile information delivery:• Traditional Web• Mobile Aware Web• Adaptive• Responsive• And blends
• Web Apps• Ebooks• Kindle• EPUB and variants
• Native Apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you define a mobile?
• It used to be easy
• If you could carry it, it was a mobile device.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you define a mobile?
• That changed, and became related to screen size.
Luke Wroblewski - UXIM 2013
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you define a mobile?
Luke Wroblewski - UXIM 2013
• Then keyboard access became the defining feature.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you define a mobile?
• Then it didn’t
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you define a mobile?
Our definitions of a mobile device keep changing
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
We’re in the multi-device world
http://commons.wikimedia.org/wiki/File:Device_pile.jpg
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Not just ‘tablets’
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Some work better than others…
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Everyone uses mobile
• For recreation
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Everyone uses mobile
• And for health/wellness
• Wello case • ECG• Heart Rate• Blood Oxygen• Temperature• Lung Function (with spirometer add-on)• Blood Pressure https://
azoi.com
1:46
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Willing to access medical info on a smartphone
Manhattan Research - Cybercitizen Health® U.S. 2013, *ePharma Consumer® 2012
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Not just looking for information
• Pfizer partners with game designer Akili Interactive Labs • Project Evo• Hope to detect
indications of Alzheimer's in healthy individuals
http://mobihealthnews.com/28429/video-game-maker-partners-with-pfizer-for-alzheimers-clinical-trial/
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Health care professionals
• Are getting more of their information from digital sources
Manhattan Research - Taking the Pulse® 2013
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Health care professionals
• Use a broad range of sources
Manhattan Research - Taking the Pulse® 2013
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Working together
• 30% of patients said they or their doctor used a mobile device during the exam period.
• Patient use of mobile is 30-50% higher if the doctor uses a mobile device during the exam.
• Patients were 80% more likely to switch medications if mobile devices were used in the exam room.
http://lifesciencesnow.com/wp-content/uploads/2013/11/10.24.2013-Digitas-Health-Study-Consumer-Mobile-Health-Impact-Assessment.pdf
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Working together
• Using dedicated apps to explain problems and treatments to patients as part of the examination
https://orcahealth.com/
1:141:21
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Working together
• Using dedicated apps to explain problems and treatments to patients as part of the examination
• Show animations
https://orcahealth.com/
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Working together
• Using dedicated apps to explain problems and treatments to patients as part of the examination
• Show explanations
https://orcahealth.com/
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Working together
• Using dedicated apps to explain problems and treatments to patients as part of the examination
• Share information
https://orcahealth.com/
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
New technologies abound
• Technical Illusions
• The ability to view projected, 3D images (of just about any data) in free space.
• Can interact with images via a ’magic wand’.
https://www.youtube.com/watch?v=Pb8h-Mauc-E
0:35
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Health care professionals
• Are beginning to see tests of integrated mobile device systems
https://www.youtube.com/watch?v=jnEdaslPtEg
3:24
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
IRL - now
“When a clinician walks into an emergency department room, he or she looks at bar code (a QR or Quick Response code) placed on the wall. Wearable Intelligence’s software running on Google Glass immediately recognizes the room and then the ED Dashboard sends information about the patient in that room to the glasses, appearing in the clinician’s field of vision. The clinician can speak with the patient, examine the patient, and perform procedures while seeing problems, vital signs, lab results and other data.”
http://geekdoctor.blogspot.com/2014/04/google-glass-details.html
John D. Halamka, MD, MS, Chief Information Officer of Beth Israel Deaconess Medical Center, Chairman of the New England Healthcare Exchange Network (NEHEN), Co-Chair of the HIT Standards Committee, a full Professor at Harvard Medical School, and a practicing Emergency Physician
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Interoperability
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Lots of catching up to do…
“Our maiden Digital Competitive Landscape survey last fall found that less than a third of pharma U.S. consumer-facing websites were mobile optimized.”
Matthew Arnold, Principal Analyst, Manhattan Research
http://healthandpharmainsight.tumblr.com/post/80991320870/will-pharmas-be-ready-for-healthbook
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Enter Responsive Design
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Responsive (web) Design
• Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).http://en.wikipedia.org/wiki/Responsive_Web_Design
http://alistapart.com/article/responsive-web-design
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Responsive Design
• I like responsive design
• I’m so over this >>>>
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Responsive Design
• Reflects what can easily be seen on the screen
• Low bandwidth friendly
• Ignore the visual design
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Visual design is not content design
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Don’t think it’s always easy…
• The website for LG’s android powered watch (a mobile device!) viewed in the ‘wrong’ orientation
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Don’t think it’s always easy…
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
No better on a ‘big screen’
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
No better on a ‘big screen’
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Properly Done Responsive Design
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
TRG website on a laptop
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
TRG website on an iPad Mini
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
TRG website on an iPad Mini
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
TRG website on iPhone 4s
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What’s wrong with that?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What’s wrong with that?
Nothing – but what if I need more functionality?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Enter Adaptive Content
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
What is adaptive content?
• Adaptive Content is content that adapts to the needs of the user or reader, responding not only to the screen size and orientation of their device, but is aware of, and takes advantage of the specific device capabilities (such as GPS, magnetometers, etc.) to display content to the best advantage on the device.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Adaptive vs Responsive
• Responsive• Focused on displaying
the content in the best possible way on a given device
• Adaptive• An overall approach for
enhancing the usability or capability of content on a given device
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Adaptive content
• Adaptive content is limited only by your design decisions, the capabilities of the device being used, and the intelligence of your content.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
MyAsthma app
• Developed by GSK in the UK• Updated information on weather,
temperature, pollen and pollution for your local area
• Handy personalised reminders and tips sent directly to your mobile device
• The Asthma Control Test™ and regular reports to help you monitor your asthma control
• Tailored information about how to identify and manage your asthma triggers
• Tips on travelling with asthma• Customised lifestyle tips and
information on treatments• How to get the most from working
together with your healthcare professional
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How do you manage this?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Decide what mobile means to you
• Remember this?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Mobile Aware Web
• Responsive Design• Screen size• Orientation• Progressive Content Disclosure
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Mobile Aware Web
• Adaptive Design• All of the above PLUS• Location*• Direction*• Language*• Speed*• Acceleration*
* depends on browser used on device
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Web App
• Like having a customised mini browser in which to display your content
• No content lives on the device• Connectivity is required
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Native Apps
• All of the above• Screen size• Orientation• Progressive Content Disclosure• Location• Direction• Language• Speed• Acceleration• ALL THE DATA, ALL THE TIME!• But can reach out to external sources
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
How much info can an app determine?
• More information than you require
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Location-based information
• It knows where you are, but the direction you’re facing is unimportant
• App has full access to the capabilities of the device• GPS• Wifi or• 3/4G connectivity
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Augmented Reality
• Using AR to explore an unfamiliar location
• App has full access to the capabilities of the device• Compass• GPS• Camera• Wifi or• 3/4G connectivity
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
So you’re going to do an App, right?
• There are downsides
• More expensive
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
So you’re going to do an App, right?
• There are downsides
• Only works on one device/family
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
So you’re going to do an App, right?
• There are downsides
• Experiences will be very different from system to system
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
So you’re going to do an App, right?
• There are downsides
• You have to think it all the way through• You have to reimagine it on a regular basis
• It’s not all bad• On the positive side, you can load all the data
‘into’ the app• You have full control over the experience
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Talk to the hand (set)
• Works with apps• Not as simple as Media
Queries• Much more reliable
• Code fragment querying the device to see if it has a magnetometer (compass) and if it’s working
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Mobile Aware with Adaptive
• Many of the advantages of an App
• Usually much cheaper• Can access many of the device functions• Easier to rollout (just change the referenced data)• Easier to make work on multiple platforms
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Media Queries
• Simple idea – why don’t we ask the device about itself?
• Part of the available meta information from a webpage
• How big is the content area on the screen? - use the ‘viewport’ query
• Protip – sometimes the devices lie
<meta name="viewport"content="width=device-width"content="height=device-height" />
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Are people doing this?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Yeah – sometimes all of them
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
WebMD traditional site
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
WebMD mobile site
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
WebMD apps
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
WebMD Allergy app
• Personal data tracking• Multiple profiles• Location (gathers local
information)
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Where can it go?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Remember this?
• That was an ad!
• The IRL they use QR codes to determine the room they were in.• That could be replaced
with automatic location detection.
• If the ambulance has it’s siren on, an ‘urgent’ flag could be sent to the primary care facility…
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
You need a Content Strategy
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
You need a Content Strategy
Not a Mobile Content Strategy
Unified
v
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Where does Content Strategy Start?
• Right at the beginning
• Not restricted to:• Content creation• Publishing/Printing• Translation• Localisation• Mobile
• All are important facets of an overall method
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
• Without a content strategy none of this works.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
You need to understand:
• Structure• Modularity and Granularity• Metadata• Your users• Your content
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
It’s all about the content
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
It’s all about the content
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
It’s not “all about the content”…
• It’s about balance
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Balance
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Content
• Determine primary content to display• What can be layered/scrolled?• How does the content need to be structured to
facilitate filtering/layering/scrolling?• What content should be eliminated and in what
situation?• What alternate content should be presented?• How must your content be structured to support
this functionality?• Can you structure your content for unexpected
situations?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
…and how your customer will experience it
• Know your customer• Know your device constraints• Map their requirements to content requirements
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Know your customer
• Who are the primary customers?• What language do they use?• Where do they live?• What the typical customer profile?• Where do your customers come from
(region/country, referring site, search engine)?• What platform are they using: Smartphone, Tablet,
Phablet (OS)?• What do customers need to know to make a buying
decision?• What do they think are the most effective ways to
be reached?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Know your device constraints
• Even though you should write content separate from its eventual output, you must understand the constraints of the device on which your content will be displayed.
• Design your models to adapt to those constraints.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Test on actual devices
http://www.topatoco.com/merchant.mvc?Screen=PROD&Store_Code=TO&Product_Code=QC-DEVICES&Category_Code=QC
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Like regular ”writing for online”
• But more so…• Keep titles short • Keep content short• Use bulleted lists• Balance brevity with legibility and clarity• Carefully consider the use of
charts/tables/images. • They may be the best way to present
information on a page, but are problematic on a small screen.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Tables
• Tables are always an issue on mobile. Some options include:• Tables where screen real estate permits• Image of the table• Modularized table• Fixed first column, scrolling remainder• Cascading list• Drill down
• Tables are inherently structured, you need to map your table structure to desired output
• Why are you using a table?
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Navigation is key• Navigation can be a challenge, due to small screen
size.• Try not to break content into too many pages, one
page per item/article is usually better, even if the page is loooong.
• Flatten the hierarchy. • Drilling down to reach content is problematic.• Cluster like information together• Use ”more like this” or ”related content” links to
make it easy for the user to navigate• Images should not be used for navigation, and
should never be used as the only means of navigation.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Business rules
• Business rules are the rules that your content follows to adapt to different devices and different customer requirements.
• Business rules allow the system to automatically pick and choose content and adjust the presentation of that content to meet specific requirements.
• If ‘this’ then ‘that’ • If displaying on a mobile device break content
into ‘pages’ at the intro, ingredients and instructions
• Integral to your complete content strategy
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Format free content: XML
• XML lets you separate content from layout and visual design• Like HTML, but focuses on
structure, not appearance• Can use one of many
underlying structural schemas• DITA• DITA4Publishers• DocBook• Industry specific
• Very powerful for transformation and reconfiguration for multiple channels
Concerned about XML? Don’t be, even Word uses a form of XML “under the hood’.
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
XML
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
But!
• Technology is not the focus for content contributors and never should be
• Tools should support tasks, not impede tasks• Tools must enable your content strategy
<?xml version="1.0"?><procedure> <title>Logging On to AccSoft </title> <p>The first time you click on a component in AccSoft you are required to log on to the system.</p> <intro>To log on to AccSoft:</intro> <procedure_steps> <step>Double-click the AccSoft application.</step> <step>Select Accounts Payable from the Explorer.</step> <step>Type your USERID into the Name field.</step> <step>Type your password into the Password field.</step> <step product="extended">Select the customer to update.</step> <step>Click the OK button to log on to AccSoft.</step> </procedure_steps> <note>If you do not know your USERID or Password, consult your System Administrator. </note></procedure>
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
But!
• Technology is not the focus for content contributors and never should be
• Tools should support tasks, not impede tasks• Tools must enable your content strategy
<?xml version="1.0"?><procedure> <title>Logging On to AccSoft </title> <p>The first time you click on a component in AccSoft you are required to log on to the system.</p> <intro>To log on to AccSoft:</intro> <procedure_steps> <step>Double-click the AccSoft application.</step> <step>Select Accounts Payable from the Explorer.</step> <step>Type your USERID into the Name field.</step> <step>Type your password into the Password field.</step> <step product="extended">Select the customer to update.</step> <step>Click the OK button to log on to AccSoft.</step> </procedure_steps> <note>If you do not know your USERID or Password, consult your System Administrator. </note></procedure>
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
But!
• If your technology makes your employees look like this… you’re doing it wrong!
• It must be easy to use
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Summary
• Determine your ‘concept of mobile’.• Know what content is required, by whom, when, in
what circumstance, and in conjunction with what other content or interactivity.
• Create structured content separate from format.• Create a balanced design, not Mobile first or eBook
first or Video first or Poster first or Content first or Package Insert first…. but always with an awareness of where and how content can be consumed.
• Remember – mobile is expected, it’s not something special!
@Cooper_42 www.rockley.com © The Rockley Group, Inc.Intelligent Content for Life Sciences and Healthcare
#ICCLSH
Questions?