designing content for multiple devices
DESCRIPTION
TRANSCRIPT
![Page 1: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/1.jpg)
![Page 2: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/2.jpg)
Brandon & MichelleIntroduction
• Brandon Carson, Bill.com
• @brandonwcarson
• LinkedIn: brandoncarson
• Michelle Lentz, Clarity Consultants
• @michellelentz
• LinkedIn: michelleslentz H E L L Omy name is
![Page 3: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/3.jpg)
5, 10, 80
![Page 4: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/4.jpg)
5, 10, 80Average number of apps used
Percentage of apps deleted within 2 weeks of download
Percentage of available apps that have actually been discovered
5
80
10
Source: Pew Research Center's Internet & American Life Project.
![Page 5: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/5.jpg)
In only 4 previous eras have humans experienced a transformation on the scale of the internet:
• the printing press• the telegraph and telephone• recorded media• transmit sound and imagery
![Page 6: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/6.jpg)
a brief history of mobile time
![Page 7: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/7.jpg)
Year Event
1888 First patent for an electronic tablet awarded
1992 IBM Simon introduced as the first “smartphone”
1999 Microsoft re-introduces the “tablet PC”
2001 Palm introduces the Kyocera 6035 — the first widespread mobile device in the US
2001 The Blackberry is introduced — the first widespread mobile device for e-mail
2007 The iPhone is released
2008 The Android OS is released
2010 The iPad is released
![Page 8: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/8.jpg)
mobile users
![Page 9: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/9.jpg)
Your users now have near real-time access to information in the palm of their hand. They expect:
• technical stability• up-to-date, credible information
![Page 10: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/10.jpg)
The majority of Internet users will eventually connect with
mobile devices first.
In many Asian countries,they already do.
![Page 11: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/11.jpg)
Compared to just last year, consumers:
• Spend 54% more time with their connected devices
• 49% more time talking and texting• 29% more time watching videos
Source: Yahoo! Insights 2011
![Page 12: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/12.jpg)
mobile mindsets
![Page 13: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/13.jpg)
Mobile users engage in short ‘activity bursts’with the expectation to continue
their experience across multiple devices
![Page 14: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/14.jpg)
Fully one in three people multi-task with their devices
![Page 15: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/15.jpg)
Most mobile consumers use their devices between8:30 a.m. and 1:00 p.m.
Source: Yahoo! Insights 2011
![Page 16: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/16.jpg)
Almost two-thirds of smartphone owners state “my mobile device allows me to access information that helps me in real
life circumstances”
Source: Yahoo! Insights 2011
![Page 17: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/17.jpg)
65% of mobile consumers agree that their mobile device quickly provides the answer to questions when
they need an immediate response
Source: Yahoo! Insights 2011
![Page 18: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/18.jpg)
The deeply personal connection that people have with their connected devices means that we must keep in mind their consumption habits, activities and accompanying mindsets
![Page 19: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/19.jpg)
![Page 20: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/20.jpg)
![Page 21: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/21.jpg)
![Page 22: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/22.jpg)
differences between app types
![Page 23: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/23.jpg)
discover > install > click icon > run
![Page 24: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/24.jpg)
native apps
• must be installed on the device• written specifically for the OS
![Page 25: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/25.jpg)
web apps
• reside on a server• coded once for multiple OS’s
![Page 26: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/26.jpg)
which app to develop?
• native API or native graphics?• written specifically for the OS
![Page 27: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/27.jpg)
Characteristic Native Web
Downloaded to the device
Coded in a language specific to the device OS Objective C, Java)
Runs in a browser
Coded in HTML, JavaScript, and CSS
Distributed via an app store
Full use of device hardware and APIs
Limited access to device hardware and data, as well as user data
![Page 28: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/28.jpg)
Characteristic Native Web
Downloaded to the device
Coded in a language specific to the device OS Objective C, Java)
Runs in a browser
Coded in HTML, JavaScript, and CSS
Distributed via an app store
Full use of device hardware and APIs
Limited access to device hardware and data, as well as user data
X
X
X
X
X
X
X
![Page 29: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/29.jpg)
hybrid apps
• written in native languages• downloaded to the device• can access APIs• content comes from the web
![Page 30: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/30.jpg)
![Page 31: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/31.jpg)
Consumers expect participatory content experiences:
• contextually relevant• consumable with multiple devices• trusted and sharable
![Page 32: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/32.jpg)
![Page 33: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/33.jpg)
![Page 34: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/34.jpg)
authoring tools for mobile first
![Page 35: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/35.jpg)
Flash > HTML5 conversion project
Articulate Presenter
Articulate Storyline > Articulate iPad App
![Page 36: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/36.jpg)
pitfalls
![Page 37: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/37.jpg)
audio and other bugs
![Page 38: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/38.jpg)
creating interactions from scratch
![Page 39: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/39.jpg)
cost
![Page 40: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/40.jpg)
maintenance
![Page 41: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/41.jpg)
conversion:
![Page 42: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/42.jpg)
course length
![Page 43: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/43.jpg)
legacy technology, interactions
and Flash
![Page 44: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/44.jpg)
content
![Page 45: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/45.jpg)
best practices for mobile design
![Page 46: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/46.jpg)
always ask why
![Page 47: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/47.jpg)
know mobile constraints
small screensunreliable networks
people in all kinds of situations
![Page 48: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/48.jpg)
![Page 49: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/49.jpg)
one step at a time
![Page 50: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/50.jpg)
small chunks
![Page 51: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/51.jpg)
orientation
![Page 52: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/52.jpg)
create a default reference designfor the devices and knowyour device capabilities
![Page 53: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/53.jpg)
become more aware of touch targets, gestures, and actions
![Page 54: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/54.jpg)
use technology to your advantage
![Page 55: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/55.jpg)
consider performance optimization
![Page 56: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/56.jpg)
emulation
![Page 57: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/57.jpg)
test and test again
![Page 58: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/58.jpg)
new opportunityreboot
fresh start
![Page 59: Designing Content for Multiple Devices](https://reader034.vdocuments.mx/reader034/viewer/2022051816/545b45ffaf79594e128b5993/html5/thumbnails/59.jpg)
goodbye