Ever wonder how designing for the tiny screen differs from desktop software and web design? When designing web applications for desktop browser use, the developer makes several assumptions that are fundamentally true in most cases: maximum screen real estate is available at their disposal, an underlying Internet connection is fast and reliable, processing power and memory are plentiful resources.
However, in a mobile environment users may be accessing content and applications on a myriad of different devices of varying screen sizes, processing power and memory capacity. If you’re designing for mobile, the following guidelines are critical for building experiences suitable for mobile consumption—even as standards, usage patterns, and mobile technologies are still evolving.
15. Reduce the size of your assets
Users expect an experience of equivalent or greater quality than on their PC/desktop when accessing applications on mobile devices, even if several elements of the mobile experience work against these expectations (e.g., network speed and device processing power/memory). Assets such as documents and other file types should be optimized for faster downloads.
14. Optimize images for web use.
Graphics programs such as Photoshop allow you to choose to output settings that are optimized for web.
13. Use MP3 sound files when possible.
This file format is drastically smaller than WAV or AIFF formats.
12. Build for variable connection speeds
When designing your mobile applications, assume that the Internet connection will be less than optimal. Anticipate network latency when building the functionality of your app.
11. Design your application’s behavior to update on the front-end, as the user’s expectation is that their interactions have immediacy on the server side.
For example, when updating your photo or “liking” an item on Facebook on a poor connection, the mobile application will reflect this change, even if the website does not. The mobile version has effectively cached the change locally, while it has queued the update to the server. It enforces the user’s impression that their interactions have immediacy.
Due to lack of screen real estate, such features are usually nominally effective in mobile environments anyway.
9. Use interactions and inputs native to mobile devices
Consider user behavior on the mobile device: taps and swipes versus mouse clicks on your desktop or PC. Your application’s optimal experience should utilize the former and default to mouse clicks as the “degraded” method of interaction.
8. Build for limited screen real estate
As stated previously, mobile applications are most notably limited by screen real estate. If targeting a mobile web application for both PC/desktop and mobile users, design with mobile in mind first.
7. Leave out bells and whistles such as fancy menus and animations.
The trade-off is better usability and structure.
6. Make sure your application behaves responsively.
Responsive web design with HTML5 allows both desktop and mobile users to enjoy a unified user experience. Build around the constraints of mobile viewing first and allow your application to “size-up” under desktop use.
5. Target the appropriate platform.
Ideally, you should build a version of your application for each of the 3 leading mobile platforms: iOS, Android, and HTML. This, however, may not always be feasible. In cases where you must choose one—either to start or to focus solely on—keep in mind the limitations and unique opportunities of each platform.
If your goal is market penetration and volume, develop for Android devices.
3. General ROI is greater for applications developed with iOS.
The iOS platform holds the the greatest user and developer loyalty, as well as an application ecosystem and developer tool set. Furthermore, monetization rates with iOS devices are higher
2. Developing your application in HTML5 will allow you to target both platforms, as HTML5 works the same for both iOS and Android web browsers.
Instead of users having to download and install either the iOS or Android version of your software, they would instead access the application on their mobile device browser. You will lose the ability to build in custom behavior native to iOS or Android, but what you gain is cross-platform usability.
1. Use third-party tools to build in HTML5 and output to both iOS and Android.
In the early days of mobile application development, one had to choose between iOS or Android as a primary target platform– similar to how desktop software developers target either Windows or MacOS to deploy on. These days, HTML5-based tools such as PhoneGap and Appcelerator allow developers build applications for both Android and iOS platforms simultaneously. The following is a typical workflow when using one of these tools:
- Designs and wireframes are composed within Adobe PhotoShop or a similar graphics application.
- The HTML5-based tool (PhoneGap, Appcelerator, et al) converts the web app into a native iOS or Android application.
Remember that devices may be connecting to the Internet at various speeds: 2G, 3G, 4G/LTE, 5G, or Wi-Fi/broadband speed via hotspots. Design considerations should therefore be based on both screen size as well as connection speed.