Designing for mobile devices
Download as KEY, PDF•9 likes•824 views
The document discusses key considerations for designing websites and apps for mobile devices. It outlines two main approaches: mobile websites and mobile apps. It then covers challenges like varying screen sizes, performance issues, and limited resources. UI principles are presented to optimize the mobile experience. Tactics like simplifying designs, minimizing images, and optimizing navigation are recommended. The document concludes with additional best practices and resources for mobile development.
Designing for mobile devices
- 1. Designing for Mobile Devices Your First Guide to Mobile Development
- 2. Why To Care About ?
- 3. Why To Care About ?
- 4. Two Ways
- 5. Two Ways • Mobile Website, Mobile App, both ?
- 6. Two Ways • Mobile Website, Mobile App, both ?
- 7. Two Ways • Mobile Website, Mobile App, both ? re-creation Internet access platform-across Always Free
- 8. Two Ways • Mobile Website, Mobile App, both ? re-creation Utility Internet access Mob. Resources platform-across Local Use Always Free Making Money
- 10. Challenges and Limitations • Screen Size Variation
- 11. Challenges and Limitations • Screen Size Variation • Loading Time
- 12. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption
- 13. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption • Memory Consumption
- 14. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption • Memory Consumption • Input Mechanism
- 15. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption • Memory Consumption • Input Mechanism • Rapid change
- 16. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption • Memory Consumption • Input Mechanism • Rapid change • Deciding what is essential
- 17. Challenges and Limitations • Screen Size Variation • Loading Time • Battery Consumption • Memory Consumption • Input Mechanism • Rapid change • Deciding what is essential • Ultimate Testing
- 18. Short History
- 19. Short History • Standard Generalized Markup Language : 1986
- 20. Short History • Standard Generalized Markup Language : 1986 • Handheld Device Markup Language : 1996
- 21. Short History • Standard Generalized Markup Language : 1986 • Handheld Device Markup Language : 1996 • Wireless Markup Language : 1998, XML-based
- 22. Short History • Standard Generalized Markup Language : 1986 • Handheld Device Markup Language : 1996 • Wireless Markup Language : 1998, XML-based • Compact HTML : 1998 , subset of HTML
- 23. Short History • Standard Generalized Markup Language : 1986 • Handheld Device Markup Language : 1996 • Wireless Markup Language : 1998, XML-based • Compact HTML : 1998 , subset of HTML • XHTML Mobile Profile – 2001, the strongest language for Mobile Web.
- 26. UI Principles
- 27. UI Principles • Learnability • Mapping • Efficiency • Visibility • Memorability • Feedback • Error Recovery • Consistency • Simplicity • Satisfaction
- 28. Simplify!
- 29. Simplify!
- 30. Simplify!
- 31. Simplify!
- 32. Minimize the Use of Images
- 33. Minimize the Use of Images
- 34. Minimize the Use of Images
- 35. Minimize the Use of Images
- 40. Design for Touch
- 41. Design for Touch
- 42. Include as Much Content from Your Standard Site as is Practical
- 43. Include as Much Content from Your Standard Site as is Practical
- 44. Include as Much Content from Your Standard Site as is Practical
- 45. Consider Context http://www.giantant.com/publications/mobile_context_model.pdf
- 46. Consider Context http://www.giantant.com/publications/mobile_context_model.pdf
- 47. More Quick Tips
- 48. More Quick Tips • Use a Separate Mobile Theme
- 49. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction
- 50. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction • Use Alt tags.
- 51. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction • Use Alt tags. • Don’t Rely on Flash or JavaScript
- 52. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction • Use Alt tags. • Don’t Rely on Flash or JavaScript • Consider White Space
- 53. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction • Use Alt tags. • Don’t Rely on Flash or JavaScript • Consider White Space • Reduce margins and padding
- 54. More Quick Tips • Use a Separate Mobile Theme • Limit Scrolling to One Direction • Use Alt tags. • Don’t Rely on Flash or JavaScript • Consider White Space • Reduce margins and padding • Validate Your Markup and TEST
- 55. More Reading
- 56. More Reading ■ 7 Usability Guidelines for Websites on Mobile ■ Mobile Mammoth Devices A blog that features many mobile websites. Web Credible provides guidelines for creating ■ Web on Your Cell a website with visitors in mind. A directory of mobile websites. Not a huge ■ Make Your Site Mobile Friendly number of websites listed, but still a helpful An article from Vitamin that gives some resource. helpful information and advice. ■ Mobile Web Design: The Series ■ Mobile Web Design An older but still useful series of articles by A book written by Cameron Moll. Cameron Moll. ■ mobiSiteGalore ■ Mobile Web Practices 1.0 A free tool for creating mobile websites. The guidelines for mobile Web design from ■ Mobile Design Showcases (PDF) the W3C. A brief overview of good design practices, ■ Coding for the Mobile Web with examples of beautiful mobile Web Chris Mills describes coding techniques for designs. the development of websites for mobile ■ Google Wireless Transcoder devices. Enter a URL and see a stripped-down version ■ Designing and Developing mobile websites in of the website. This helps you identify the real world usability improvements that can be made. Mobile Web design in practice.
- 57. http://www.flickr.com/photos/ronlayters/ 2402199783/
- 58. http://www.flickr.com/photos/ronlayters/ 2402199783/
- 59. Questions ? http://www.flickr.com/photos/ronlayters/ 2402199783/
- 61. Thank You :-)