Optimizing Web Applications for a Mobile Environment

The following guest post was written by Brian Doll, the lead performance engineer for New Relic, a company specializing in web application performance.

A recent study from GigaOm found that users are more likely to turn to native mobile apps instead of using their mobile web browser during day-to-day use. But that doesn’t necessarily mean that companies are whole-heartedly embracing native apps. Building a native mobile app can be a serious undertaking that demands significant investment in developer resources, time and money.  For many companies, an alternative strategy–a very workable alternative in fact—is the mobile web.

Studies have also shown that mobile web site response is S-L-O-W. I think we can all relate to a scenario where you’re waiting 8, 10,  20, or more seconds for a site or a page to load on your mobile device, when you need the information NOW. And why are we so tolerant of a slow web experience  (or are we?). We would never put up with a situation like that on our laptops or desktops. Speed and performance are paramount.

So, what do developers need to know about optimizing their web apps for various mobile environments? Here’s a look at how you can optimize your application’s performance on the mobile web:

1. Guess what? You’re already mobile
Congratulations!  Your website is already being accessed on a mobile device, regardless of whether you’ve officially adopted a mobile app strategy or have plans to develop a native application. For many, optimizing a web application for mobile is an easier first step to addressing mobile users. Putting together that initial mobile web experience will also be helpful in the long run if you decide to pursue building a native app. The mobile web bullet train has left the station and you’re on it. Be prepared and think ahead.

2. Prioritize Functionality & Consider Latent Networks
In a mobile environment, simplicity reigns supreme. Focusing your application on the most necessary functions and transactions eases performance and gives users on the best overall experience.  For example, if you’re reading a news site, you’ll want to solely focus the user experience on the actual article without excessive images or ads. This bolsters performance and streamlines the end user experience. Because mobile networks tend to be much slower than browsing the Internet via a desktop or laptop, make sure your pages are lightweight and ad-free to speed load times. Developers should consider using an application monitoring tool that allows users to see exactly how the end-user experience of the website page really looks like.

3. Get Specific
Often, web apps are built to deliver content for all kinds of browsers at once. In mobile the opposite is true. Applications that send content that is specific to each individual mobile browser avoids weighing down the browser with data it can’t use. This can mean multiple CSS files — one for each contingency, depending on browser type, version, device, device OS, etc.

4. Maximize the real estate
The dimensions of the screen are important to consider given that the physical space of most mobile phones is usually less than 4 inches. When building your web app, account for the limited screen size by removing the clutter. But remember, these are very hi-res screens, so don’t try to decrease the file size, as your visuals and graphics will suffer.

5. If It Looks Like a Native App…
Leverage UI toolkits to create a similar look and feel as the native mobile app. This lets you create a better front-end experience for your users. For instance, UI toolkits can detect which way users orient their screens. By practicing responsive design [http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/] with style sheets, developers can create apps that orient themselves to both types of screen. The jQuery mobile framework (http://jquerymobile.com/), for example, aims to provide a common and consistent user interface across all mobile and tablet devices.

In general, there are two mobile strategies that I see companies pursuing: 1) “We acknowledge people are using our site on mobile devices and are taking steps to optimize their experience with our site and our brand” or 2) “Why bother? If people can access the web on their phones, then they can access our site.” The obvious problem with number two’s attitude is that it’s transmitted right through the mobile device and into the users’ perception of your brand. Why not take a few simple steps to let them know you care?

Leave a Reply