top 10 tips for building better mobile apps

Download Top 10 Tips for Building Better Mobile Apps

Post on 08-Aug-2015




0 download

Embed Size (px)


  1. 1. If you keep these tips handy, theyll help you stay focused on building best-in- class, cross-platform native apps.
  2. 2. Beauty is relative to the platform (#1) These screenshots show the main screen of the app, logged in as the same user at the same time, so the data is exactly the same. They are each beautiful and well designed, but the concept of a beautiful Android app is very different from that of a beautiful iOS app. Thats because beauty is relative to the platform.
  3. 3. Before you design your apps, take a step back, learn how your target platforms work, and implement your branding around their specific parameters. And remember that even if your app renders differently across platforms, with Appcelerator, youll still be able to use a single code base and have a very high percentage of code reusability.
  4. 4. Code reuse is for your apps logic -- not necessarily for UI There are many misconceptions about code reuse with Appcelerator or any cross- platform tool, for that matter. Expecting 100 percent code reuse isnt reasonable because it not only means youd have very little control over your apps UI/UX, but also your app would look the same across all target platforms. Of course, some people think this is the ultimate goal of a cross-platform tool, but thats misguided.Thats the goal of aWeb browser. Code Reuse
  5. 5. Make all of your programming logic completely independent from the screens or even the platform in which it will run, so all of your programming modules are platform-agnostic and, most important, reusable across platforms.Then build the native user interfaces, which will consume these localWeb services. Using this architecture, you can make sure all the user interface code is completely decoupled from the logic, and both can flow independently. Always think Web service (#3) Because were developing cross-platform apps, I recommend you build your code to be completely abstracted, as if it was aWeb service.
  6. 6. This template is written using Alloy, Appcelerators MVC framework.The template provides the MVC architecture needed to maintain platform- specific user interfaces, with content and logic reusability. You can download the app template from GitHub.
  7. 7. Remember that tabs can be deep or shallow (#4) iOS tabs have a built-in Navigation Controller, which allows multiple levels of navigation inside each tab. Android tabs, however, are shallow and should have no in-tab navigation. Per Android design guidelines, tapping on the Back button in the main screen with tabs should kill the app. Now, if you click on any of the notifications on the Facebook app, youll see whats illustrated in the image.
  8. 8. There are two problems with this. First, youre in the Notifications tab, but the ActionBar title says Comments.This is confusing and counterintuitive. Second, and most important, the Back button now is redefined: Instead of closing the app, it takes you back to the previous screen. As a rule of thumb, dont try to force navigation inside your Android tabs. Doing so will break the operation of the Back button and make your app feel awkward.
  9. 9. And the best way of knowing whats available to your app, and what you should and shouldnt do, is by reading each platforms user interface guidelines. Know your target platforms (#5) Check out the iOS guidelines and the Android guidelines. After reading through these documents, youll have a wealth of information that will help you understand each platform, design better user interfaces, and know what to look for in theTitanium API or, alternatively, in a third-party module.
  10. 10. If youre a graphic artist, make sure you learn about each platform, their navigation paradigms, and their visual language.You will find subtle differences that make a great difference in usability. If youre a programmer with a graphic artist in your team, or youre working as a contractor/freelancer for an agency that is giving you mockups of the app to be built, learn to work with the designers and educate them. Work with your design team (#6)
  11. 11. To cover the features not officially exposed, Appcelerator offers a Native Module Development Framework, which Objective-C and Java developers can use to expose additional features and functionality.These modules can dramatically enhance the overall quality of the app and therefore the user experience. Dont fear modules (#7)
  12. 12. Learn to love each platform with its strengths and limitations. Learn to compare the platforms, but not to criticize them. They are all good in their own right and in their own contexts. Always try to build the best possible app for the platform youre targeting. Love your target platforms (#8) Dont let your personal preference influence the design, functionality, and quality of your cross-platform apps. If you love iOS, thats no reason to show more commitment to your iOS app, leaving behind your Android users.
  13. 13. Dont spend days working on the Android version, then finally run it on iOS and discover the object positions are off, the fonts need adjusting, or the app simply crashes on load. My recommendation is to test often; if something breaks on one platform, you can immediately identify the problem. Test often (#9) Since your cross-platform app will have both cross-platform and platform-specific code and components, make sure you test often.
  14. 14. Your user is the most important consideration when it comes to building your app. Be a user of the target platform and know how the platform works. Be a user of your app so that you can experience it for yourself. Look around, examine other apps, compare and analyze as honestly as you can. Be your user (#10)
  15. 15. Learn more about native cross-platform app development in the book Build Native Cross-PlatformApps with Appcelerator by Ricardo Alcocer KEEP INTOUCH! Email: Twitter: @FromLabsNews Website: