Mobile sites, responsive web, mobile apps, native, HTML5 or hybrid apps…Which of these solutions and combinations are right for your industry and product? We’ll take a look at examples of each and how companies are leveraging different solutions to meet their customer’s mobile needs. We’ll also explore the pitfalls of designing hybrid apps, and best practices for device neutral design. Finally, we’ll look at a case study from the world’s largest non-profit health organization and the cross platform strategy we are designing.
7. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App
8. Responsive Web Site
Defined Web site responds to the environment using css media
queries. Typically achieved by using fluid grid layouts, like Responsive
Grid System, Bootstrap, from Twitter, or Foundation by Zurb.
10. Responsive Web Site
Ideal For
Informational Web Sites
Portfolios
Content Consumption Sites
• Newspapers
• Magazines
• Blogs
Boston Globe
11. If you want to learn more about designing for...
12. Optimized Web Sites
Defined Multiple web sites, each optimized for a different form
factor, and different usage needs.
Connect
Smartphone Home
At 80
Tablet Search
Laptop
60
On The Go
Entertain
Manage
40
While Shopping
Inform
20
At Work
Shop
On Public Navigate0
Transport
At Home AM To/From School/Work At School/Work Out and About At Home PM
0
0 10
25 20
50 7530 10040
Mobile PC
Mobile Usage Patterns
13. Optimized Web Sites
Some companies have three distinct sites...
Mobile Web Site
Tablet Web Site
Classic Web Site
14. Optimized Web Sites
More often there are only two distinct sites.
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
15. Optimized Web Sites
The mobile version is streamlined for core activities.
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
17. If you want to learn more about designing for...
18. Native Apps
Defined An application that has been developed for use on a
particular platform or device.
Typically native apps are coded with:
Objective C for Apple
Java for Android and BlackBerry
C# or Visual Basic for Windows 7.5
But there are also other options:
Ruby Motion
MonoTouch and MonoDroid
Adobe AIR
Adobe Flex 4.5 Showcase Apps
19. Native Apps
Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
22. Hybrid Apps
Defined A ʻnative wrappedʼ web application. Products like
Titanium and PhoneGap create a native wrapper that let the
HTML and JS access OS dependent operations they could
access on their own.
NBC-Built with Titanium