The document discusses key considerations for designers creating experiences for mobile devices. It covers topics like understanding different mobile platforms, using responsive design techniques, deciding between web and native apps, leveraging frameworks like PhoneGap, prioritizing usability, and designing for varying mobile contexts of use and screen sizes. The presentation emphasizes the importance of functionality, reliability, proficiency and creativity for successful mobile design.
Things Every Designer Should Know About Creating for Devices
1. Things Every Designer Should Know
when Creating for Devices
Paul Trani, Adobe Evangelist
@paultrani
Thursday, January 19, 12
2. Paul Trani
@paultrani
ptrani@adobe.com
• Adobe Evangelist
• Lynda.com author
• 15 years of agency/design experience
• 4 year old at heart
Thursday, January 19, 12
4. jQuery Mobile
design Sencha Touch
fundamentals
iOS user experience
What do you need to know to design successfully for mobile?
smartphone vs. tablets user interface design
Windows Phone
Android PhoneGap
@PaulTrani
Thursday, January 19, 12
10. Smartphone Platform Market Share
50%
37.5%
25%
12.5%
29% 46% 32% 17% 25% 28% 8% 5%
0%
Google RIM Apple Microsoft
Dec 2010 Oct 2011
@PaulTrani
Thursday, January 19, 12
11. HTML 5
Offline / Storage
Realtime / Communication
File / Hardware Access
Semantics & Markup
Graphics / Multimedia
CSS3 Media Queries / Fonts / Transitions / Rounded Corners
http://html5boilerplate.com http://mobilehtml5.org
@PaulTrani
Thursday, January 19, 12
13. jQuery
jQuery Plugins for responsive design:
• http://masonry.desandro.com http://alpha.patterntap.com
• http://responsejs.com
• http://fittextjs.com
@PaulTrani
Thursday, January 19, 12
14. Web App vs. Native App
@PaulTrani
Thursday, January 19, 12
15. Web Apps
}
Strengths
• Easier to learn
• Reusability across platforms
• Larger development base
Weaknesses
HTML5
• Poor device and OS integration
• Lower performance
• Doesn’t have platform look
and feel
@PaulTrani
Thursday, January 19, 12
16. PhoneGap
• Embed a chromeless browser in a native app
• Create a “bridge” between the browser and
the native code
• Package the web app with the native code
and deploy
@PaulTrani
Thursday, January 19, 12
22. Native Mobile Apps
Strengths
• Great integration with OS
Objective C and device
• Better performance
• Better user experience
Java (Harmony) • Supported by platform manufacturer
Weaknesses
• Platform dependent
Java J2ME
• Multiple skill-set and tool
requirement
• Higher TCO
.NET (true cost of ownership)
• More difficult learning curve
@PaulTrani
Thursday, January 19, 12
23. Frameworks
Mobile
Touch
Flash Pro/Builder
xui
@PaulTrani
Thursday, January 19, 12
24. Appcelerator Titanium
Titanium supports all of the iPhone, iPad and
Android UI, including table views, scroll views,
native buttons, switches, tabs, popovers and more.
@PaulTrani
Thursday, January 19, 12
25. Reliability
(The User Experience)
Thursday, January 19, 12
26. User Experience
“The way a person feels about using a product, system or service.”
@PaulTrani
Thursday, January 19, 12
28. Single Experiences
Single experiences influence the overall user experience
• Key click affects the experience of typing a text message
• Typing a message affects the experience of text messaging
•The experience of text messaging affects the overall user
experience with the phone
@PaulTrani
Thursday, January 19, 12
29. Outside Factors
• Pricing
• Friends' opinions (apps)
• Media reports
• Marketing
@PaulTrani
Thursday, January 19, 12
60. Attractive Things Work Better
Two ATMs, exact in function:
• One had the buttons arranged attractively.
• “Attractive” ATM was proven to be easier to use.
http://www.jnd.org @PaulTrani
Thursday, January 19, 12