Google: 10 rules you must know to build a great mobile app

The differences between iOS and Android are the root of all differences in the mobile world, but by following the tips below, you can succeed in building cross-platform apps.

I recently wrote and published a book about cross-platform mobile development called "Building Native Cross-Platform Apps with Appcelerator: A Beginner's Guide for Web Developers". Today's article is mainly based on the excerpts of the book, but has been adjusted for clarity and length. Overall, this article can be regarded as a summary of the key points in the book - of course, if you like, you can also call it a "cheating list".

Although these tips are mainly centered around the Appcelerator platform, their core purpose is still applicable to any developer who intends to write applications for multiple mobile operating systems at the same time. If you can understand and master these tips thoroughly, they will definitely help you create outstanding cross-platform native applications.

Tip No. 1: Different platforms have different definitions of beauty

The following images show the Evernote mobile app running on iOS 8, Android 4.4.4, and Windows Phone 8.1. These screenshots show the app's home screen, and the data is identical because the same user was logged in at the same time.

As you can see, Evernote's user interface is very different on different platforms. They are all beautiful and well designed, but it's clear that the term "beautiful Android app" is very different from "beautiful iOS app". In summary, the definition of "beauty" varies from platform to platform.

Before designing your own application, please don't rush to act, first understand the operating characteristics of your target platform, and implement your own brand performance according to its specific parameters. Also, please remember that even if your application rendering mechanism is different on different platforms, with the help of Appcelerator, we can still use the same code base on multiple platforms and achieve a high code reuse ratio.

Tip #2: Code reuse refers to the application logic—not necessarily the UI

When using Appcelerator or other cross-platform tools, people often have many misunderstandings about the concept of code reuse. In fact, it is unreasonable to expect to reuse all the code, because it not only means that we have almost no control over the UI/UX of our application, but also means that the application will have almost the same visual performance on different target platforms.

Of course, some friends think that this is the ultimate goal of cross-platform tools - but I have to say that this is indeed a misunderstanding. This is the ultimate goal of web browsers and has nothing to do with cross-platform tools. Once again, high repeatability should be reflected in the logic level of the application.

Tip #3: Always think in a "Web services" way

Since we are developing a cross-platform application, I suggest that you write your code in a completely abstract way, which is very similar to creating a web service (a cross-platform application can be thought of as a localized web service if you like). Make all programming logic completely independent of the screen or even the platform on which it will run, so that all programming modules in the application will not be affected by the specific platform type, and more importantly, they can be reused on other platforms. Next, build the original user interface, whose function is to use these "local web services". With the support of this architecture, you will be able to ensure that all your user interface code is completely decoupled from the logic and each has an independent operation process.

As a former web developer, it took me a long time to make this mental shift and adapt when building mobile apps. Yes, I had the term "web services" in my head. But the mental shift was totally worth it, and our apps are much better for it.

More importantly, in this way, it won’t make any difference whether we use TabbedBar on iOS or ViewPager on Android. After all, the UI code is just a consumer of the application logic.

To help you on this journey, I have prepared an application template that you can use to create your own new application (see below). This template is written using Alloy, Appcelerator's MVC framework. This template provides the MVC architecture necessary to build multiple user interfaces for different platforms, and its content and logic are reusable. You can download this application template from GitHub here.

Tip #4: Remember that labels can be deep or shallow

The iOS standard includes a built-in NavigationController that allows multiple navigation levels within each tab. In contrast, the structure of Android tabs is relatively simple and does not have a mechanism for intra-tab navigation.

To illustrate this point, I’ll show you a mistake that Facebook’s Android app made (but has since fixed). The image below shows the original notification label for Facebook’s Android app.

In any set of Android app design guidelines, it is mentioned that when the user presses the back button on the home screen, the current application will be closed. Now, if you click on any notification in the Facebook application, you will see the screen as shown below.

In Android tabs, there shouldn't be any navigation buttons.

It's clear that Facebook wants to implement navigation within tabs like iOS does. However, this directly raises two problems. First, we are now facing a notification tab, but the title of the Action Bar says "Comments". This is really confusing and counterintuitive. Second, and most importantly, the back button is redefined here: pressing it no longer means closing the application, but taking the user back to the previous screen.

As an important rule of thumb, don't try to force navigation into your Android tabs. Doing so will only break the back button and make your app feel confusing.

Tip No. 5: Understand your target platform thoroughly

The examples listed above also prove this point, that is, we should have a thorough understanding of our target development platform. The best way to understand which functional features of the platform our application can borrow and which design ideas we should or should not adopt is to carefully read the user interface development guide of each platform.

Unless you use your target development platform every day and are confident that you know how it works, the visual similarities, and the differences, I recommend that you take the time to read its developer guide first.

Take a good look at the iOS Development Guide and the Android Development Guide. After thoroughly studying these documents, you will have rich background information to help you understand the characteristics of each platform, design better user interfaces, and understand what operational effects can be achieved with the help of Titanium API or third-party modules.

Tip #6: Collaborate with the Design Team

If you are a graphic designer, make sure you understand each mobile platform, its navigation patterns, and its visual language. You will find that these subtle differences can ultimately have a huge impact on the usability of your app.

If you are a programmer and have a professional graphic designer on your development team, or work temporarily for an agency as an outsourcer/freelancer, first learn how to work smoothly with these non-technical designers and educate them on the characteristics of mobile platforms. Help them realize that different mobile platforms have their own set of information display, screen layout and navigation implementation mechanisms, and these differences are not just that there is a back button and action bar on Android devices, but not on iOS. Mobile platforms are different from each other, so by definition, your cross-platform application should also provide different display effects on different platforms.

Tip #7: Don’t be afraid of modules

Appcelerator's goal has never been to provide full support for 100% native SDKs. On the contrary, its core appeal is to provide a comprehensive and excellent cross-platform API. In order to cover features that are not officially supported, Appcelerator provides a Native Module Development Framework, which allows Objective-C and Java developers to enjoy the convenience of more features and functions. These modules can significantly enhance the overall quality of the application and provide a better user experience. Learn to find modules, use modules, and accept modules.

Tip No. 8: Love your target development platform

Don't let our personal preferences affect the design, functionality, and quality of cross-platform apps. Even if everyone loves iOS more, there is no reason to make more commitments to the iOS version of the app and leave Android users alone. Learn to love each mobile platform and understand their respective strengths and limitations. Learn to compare different platforms instead of specifically nitpicking or even verbally attacking them. Each platform has its own way of survival and development, and has made the right choice given its background. Remember, we are professional developers, and our goal is to develop the best application products within our capabilities for each target platform.

Tip No. 9: Test Often

Since our cross-platform apps contain a lot of cross-platform and platform-specific code and components, make sure you test them frequently. Don't spend days tinkering with the Android version only to find that your work has problems with object positioning, incorrect fonts, or even crashes when loading the app when running on iOS. My advice is to test frequently so that if there is a problem on a single platform, everyone will be aware of it immediately.

Tip #10: Think from the user’s perspective

When building your own applications, your users are the core factor that needs to be considered first. To develop applications on the target platform, you should first become a user of the platform and understand how the platform works. In addition, try it yourself before the user to see if the application experience can meet your expectations. In addition, take a broader perspective, experience other applications, and compare and analyze their pros and cons with your own design results from an objective perspective.

When testing your own app, keep in mind the following questions: Will I use your app? Does it feel good to use? Make sure everything meets your own established standards. If you love your app, your users will love it, too.

We live in an age where no business can afford to ignore the power of mobile technology or the expectations and demands of mobile users. Knowing how to properly develop cross-platform apps is a critical skill that will help you (and your business) stand out in a competitive market. With these ten tips as a guarantee, you should be able to find your way to success in mobile development.

Note: I also made an infographic of the above tips to keep you motivated - click here to view it. It is designed to be poster size so you can print it out and put it on the wall next to your desk.

Original link:

http://www.infoworld.com/article/2918472/mobile-development/top-10-tips-for-building-better-mobile-apps.html

Original title: Top 10 tips for building better mobile apps

Nuka-Cola Translation