Creating mobile content presents some interesting challenges for the designer and developer alike. From screen size, button size, typeface, and layout decisions to using unique mobile capabilities such as the accelerometer, gestures and geolocation. In this presentation, I provide clear solutions to these questions and show how they can be easily executed.

1. Mobile Design that Doesn’t Suck Paul Traniptrani@adobe.comwww.paultrani.com @paultrani

3. Lynda.com and Layers Magazine author

4. Adobe Certified Instructor

6. Don’t Get Caught… “Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Many Will Wonder What Just Happened.” Barbera Ballard, author Designing Mobile User Experience

8. Bigger than desktop browsing in 5 years

10. Because Ugly Doesn’t Sell

11. Most Common Mobile Design Mistakes 1 of 5

12. Most Common Mobile Design Mistakes No Mobile Site Not Understanding the User Lack of Context Lack of Understanding Mobile Technology Lack of Design Fundamentals

13. No Mobile Site 1 of 5

14. Don’t Make Me Work

15. Create, Don’t Convert

16. Not Understanding the User 2 of 5

17. The User Who are the users? Anyone who interacts with content on their phone. (What phones?) Men and women between 16-35.

18. The User Where are they? Design for all environments and account for screen glare. Development Inside Outside (partly cloudy) Outside (sunny)

20. Design for 1 minute tasks.

22. The User Why will they use your app? Valuable, appropriate content.

23. Content

24. Content (But have a link to the full site)

25. Lack of Context 3 of 5

26. Lack of Context

27. Proper Context

28. Neglecting Mobile Technology 4 of 5

32. Avoid, if possible:

33. Filters

34. Transparency

35. Blend modes

38. Swipe for additional items?

39. Pinch to zoom?

42. Elements of Successful Design

43. Use Existing Design Standards

44. Use Existing Design Standards

45. Leverage Real World Metaphors The UK’s Most Popular Handheld

46. Leverage Real World Metaphors

47. Elements of Successful Design It’s about leading the eye

48. Elements of Successful Design Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction Typography Serif vs. Sans Color Color Wheel, Color Choices, Meaning

49. Elements of Successful Design Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction Typography Serif vs. Sans Color Color Wheel, Color Choices, Meaning

50. GRID Start with a

51. Grid Structure Divide the page into a grid The eye naturally follows an “F” shape

52. One Column? Two?

53. PLACEMENT

54. 44 Placement Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.

55. Native Keyboard Placement

56. SIZE MATTERS Make it large, then make it larger.

57. Size Matters “Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard Mobilize, don’t miniaturize Design for real hand sizes

58. Design for Real Hand Sizes 45x45px 15x15px The average fingertip is 3x larger than the hand cursor Make your buttons 3x larger Then make them even larger

59. SPACE Implies importance, elegance, and professionalism.

60. Space “Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” Antoine de Saint-Exupery Don’t try to be great, try to be invisible

61. Space WalMart Target

64. Elements of Successful Design Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction Typography Serif vs. Sans Color Color Wheel, Color Choices, Meaning

65. Typography “Typography has one plain duty before it and that’s to convey information in writing.” Emil Ruder, Founder of Basel School of Design Choose a font that fits the subject Don’t use more than three @font-face Flash

66. Choosing a Font San-serif lack Serifs and are considered modern Understand type anatomy Understand type measurements

67. Focus on Clarity Contrast Size Hierarchy

69. Elements of Successful Design Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction Typography Serif vs. Sans Color Color Wheel, Color Choices, Meaning

70. “Use color to emphasize importance, not decorate a page.” Alexander White Use color to create hierarchy, dominance, and balance Consistent use of a few colors makes a more cohesive design Color

71. Color Choose colors using The Color Wheel Warm colors bring elements forward Cool colors move elements back Find contemporary colors using Kuler

73. Flash Player 10.1

74. Additional Capabilities In the Browser Beyond the Browser

75. planning We want to sell you stuff you don’t need.

78. www.bytearray.org

79. http://www.RIAgora.com

80. http://www.flashmobileblog.com

81. http://www.gotoandlearn.com