Making a Mobile-friendly Web App: Crucial Things You Must Consider

AD

With the release of Google’s latest search algorithm update “mobile friendly”, it’s become inevitable for any website to have a mobile-optimized design. For the first time ever, the search engine giant officially confirmed that “mobile-usability” would now be taken into account when deciding where to rank a website in search results on mobile devices.

Although most of the people consider responsive web design as a one-size fits all solution for making a website mobile-friendly but from my perspective, it works only to some extent. In certain situations, especially when you wish to empower your users with mobile-specific features like click-to-map, one-click calling and mobile commerce etc, responsive design seems like a heap of trouble. This is where a mobile web app comes into play!

Understanding a Mobile Web App?

Simply put, a mobile web app brings together the power of web and the functionality of touch-enabled devices to provide you all the benefits of a regular mobile website. These kinds of applications are typically written using web technologies like HTML, CSS and JavaScript, run on a central web server in the cloud and can be accessed through any mobile device’s web browser like Chrome (Android) or Safari (iOS).

Despite the existence of several mobile web app marketplaces, users don’t need to go to one to download and install a web application on a specific device. Instead, they are given a special URL to directly use the web app or add a one-touch bookmark for that page to their device’s home screen. In fact, using a web application is as easy as accessing a web page while updating it requires nothing except refreshing the browser.

With the continued evolution of HTML5, and HTML6 coming up, mobile web apps are becoming very popular day by day on account of offering native-like functionality in the browser. As HTML5 is being used in almost every website these days, it’s quite difficult for a user to differentiate between a web app and a regular web page, isn’t it?

How Is It Different from a Native App?

Unlike a web app, a native app is built for a particular operating system, such as Android or iOS, and requires to be downloaded from an app store like Google Play or Apple’s App Store.

While web apps rely on the browser’s capabilities, native apps run on the device and can be accessed through an app icon. In terms of appear and feel, a web app is quite similar to a native app but from development point of view, there’s a huge difference between the two. Let’s see how they are different from each other. We’ll first take a look at an infographic and then move on towards detailed understanding.

Native Apps vs Web Apps

Development Process:

Each mobile platform, for which the native application is being developed, has its own development process, offers developers a specialized, standardized SDK (software development kit) and uses its own native programming language. For example, Android uses Java while iOS uses Objective-C. For web apps, on the other hand, there are no such SDKs or native programming languages.

Platform Compatibility:

As a native app relies on a device’s capabilities, you need to develop multiple apps for each device platform. Conversely, web app runs in a browser and therefore is platform-agnostic: write once and it’ll work seamlessly everywhere.

Installation:

As discussed before, a web app doesn’t require downloading or installing from an app store since it’s accessible via a web browser and not developed for one specific device. Contrariwise, native apps have to be downloaded and installed from a device-specific portal like Blackberry App World.

Upgradability:

Whenever a native app gets an update, the app users have to manually download and install the update to take advantage of new features. On the other side, a web application can be updated in just a few seconds: just refresh or reload your browser and you’re good to go!

Accessibility:

Native apps depend on the hardware and native features of a device and for this reason, users first have to download and install the application before using it. In case of web apps, there is no need to download or install an application as you can simply access it via a URL or bookmark provided.

Distribution:

A native app must pass the approval process and other restrictions imposed by app marketplaces. You may have to wait for one or two weeks to get your app up and meanwhile, your application could also be denied if you violate any of their requirements. While a web app doesn’t need to go through all these hassles: just build and release it to users.

Discoverability:

Mostly, people use search engines to find answers to their questions or to get information on a specific topic. They never go to the app store for the same and this makes a web app more discoverable than a native app. Most importantly, visitors automatically get redirected to your web app if they inadvertently access your site on a hand-held device.

Development Cost:

Native apps require you to hire an expert developer having in-depth knowledge of native programming languages, which may result in higher costs of development. On the other side, anyone who has some experience with web development languages can easily develop a web app. For this reason, a web app is usually less expensive to develop than a native app.

Maintenance:

Last but certainly not the least, maintaining a web application is as easy as maintaining a web page and thus relatively easier than a native app. Just update your app and you’re done. On the other hand, maintenance of a native application requires a developer to deal with multiple versions for different platforms, which results in higher maintenance costs.

Key Considerations: Developing a Mobile Web App

Below are few aspects of web app design that you should keep in mind while you’re going to write a mobile web application:

Plan Strong User Experience:

Whether you’re developing a mobile web app or native app or even a website, your first and foremost priority should be providing your users a unique, engaging and most pleasurable experience. Before embarking on a web app, consider what features and functionality your users expect and accordingly, plan how you’ll be coding it. For example: http://pattern.dk/sun

Strong user experience

Keep Content Short and Sweet:

As the screen of a mobile device is relatively smaller than that of a desktop computer, you need to convey your story in fewer words on your web app. To achieve this, include only the most essential information to the user interface of your mobile web app. Use conventional mobile icons wherever possible to keep your application free from clutter. For example: https://m.uber.com

Concise content

Don’t rely on the User’s Memory:

A good web application never asks users to remember any information for future use. Instead, wherever required, it presents them with the most relevant details possible so that they could complete their tasks as fast as possible. So it would be better if your web app asks a user to enter particular information only once. For example: http://www.flynite.com

Share your location

Keep Files and Images Sizes to Minimal:

As compared to desktop devices, mobile devices have lesser memory and slower data connection. To provide users quicker experiences with your web app under any circumstances, you have to keep files few in numbers and small in size. Therefore, do everything in power to speed things up. Minimalize the code, and optimize images. We at Designzz.com optimize our images to the best we can so that picture size stays at minimal.

Consider Offline Support:

Take advantage of HTML5 offline data storage to maintain users’ experience while they are not connected to the internet for some reason. Assuming that the user will always be online ends up a lot of offline opportunities. Hence, while crafting a mobile web app, consider providing offline support to your users. For example: https://www.our-tab.com

Offline storage example in HTML5

Take Advantage of Vertical Scrolling:

Scroll bar can degrade the overall user experience; many app developers have this unrealistic fear in mind. Yes, it can, but only if you force users to scroll a web page horizontally. Conversely, vertical scrolling can make your web app simpler and engaging. Don’t worry too much about the fold and let your users scroll down to experience more of your web app. For live example: http://app.ft.com

Financial Times vertical scrolling

Give Valuable Status Messages:

Don’t let users become frustrated at your web app as for not responding to their input. Avoid using small and unnoticeable status messages, like loading, which couldn’t make a user realize that the web app is busy doing something in background. Instead, make use of meaningful status messages such as please wait while we load… which gives the user an idea of what’s really going on. I’ll take example from Financial Times again. Notice how the bar is loading and the text is also meaningful.

Financial Times

Avoid Multiple File Requests:

Because the internet connection speed on a mobile device is usually slower than a desktop computer, you have to reduce the number of file requests to make your mobile web app load faster. To speed things up, avoid loading extra CSS and JavaScript files in the <head>. As well, store static objects in the browser cache. For instance: http://lalagif.com

Low number of queries

One more thing…

Remember to test your web app before release to know whether or not it’s built in the same way as you wanted it to be. Check if the content is properly viewable on different devices or there are some improvements needed. It would be the icing on the cake if you test it with people who never got their hands on it before.

That’s it guys. Hope you found this article useful. Please do comment because I really need your feedback.

create free website wix below post

Further Related Readings

Comments
  1. Giuseppe Frattura May 21, 2015 at 8:15 am

    One of the greatest problem when you build hybrid (Web) app is the application performance. Load time in this kind of application is veri long and in not as good as you can think. The good thing is that with cordova/phonegap api is possible use GPS or Camera in the web application

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyrights © 2016 - Designzzz. All Rights Reserved