Build Your Own Mobile App in a Jiffy!
Smartphones have invaded our lives in a big way, and there is an all out effort to develop Web pages and Web apps that will enhance the user experience. In this article, the author discusses a three-pronged strategy for developing Web apps. Interested? Th
I n the era of smartphones, people are no longer using a computer to shop online, to book a train ticket or to get the headlines. Today websites are no longer viewed only on PCs. Users expect a website to look and function similarly on all the devices, and smartphones in particular. Till a couple of years back, Web development was considered a creative technical job, but now there is also the need for a well-planned strategy to cater to mobile users. Given the fragmentation of the mobile devices market and the dynamic user behaviour, there is no one stop solution that will please mobile device users.
Let’s examine the strategic options available and check whether there are any open source technologies and tools to execute these options.
Mobile websites
How different is it to build websites for mobiles compared to building websites for PCs? Quite different, actually. Fitting Web components into mobile real-estate is altogether a different ball game. Responsive Web Design (RWD) expects reshaping and resizing of Web components for each and every design size. Realignment of the Web components according to device orientation-horizontal or vertical—is important. You need to be prepared for tiny mobile screens, not-so-tiny tabs and you can't stop the PC clients invading your site. A complex job indeed, but are there any tools and technologies available to address the requirements of handheld devices? The answer is yes, of course!
HTML5 with CSS3
HTML5 is cross-platform, which means you can use it for a tablet, a smartphone, a notebook or a smart TV. Officially, no browser supports HTML5 completely, but sooner or later, there will be support for at least all the popular tags.
The Media Queries feature of CSS3 allows you to target CSS rules based on, say, screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak CSS for an iPad, printer or to create a responsive site.
Twitter Bootstrap
Twitter Bootstrap was initially developed by Twitter for its internal projects, but was later published as an open source framework. It is basically a CSS framework shipped with various Web components in a ‘ready-to-use' condition. These components help those with little or no design knowledge to achieve responsive Web designing, gaining acceptance in the world of Web development.
The pros and cons of mobile websites
Mobile website development consumes less time and effort. The user need not install the app in the device, but just needs to browse. The contents are on the Web. Search engines can index these sites and show them up in the search results. For users who don't want to install yet another app on their device, this is the best way forward. On the downside, mobile
websites can’t leverage the device’s features like the camera, phone-book, etc. The absence of an app store prevents a relatively good user experience.
Hybrid apps
Is it enough to build a website with a responsive Web design? Unfortunately, it is not. Sophisticated smartphone features like the camera, phonebook, etc, are often underutilised. You can’t have the app store attendance with the website itself. With a hybrid app one can control all the device features and have the app store presence as well. It is not a true mobile app (native app) but disguised as one. There is no need to build for each and every mobile platform. Fundamentally, these are Web apps wrapped with a thin interface layer to interact with the device platform and to control the device’s features (like the camera, phonebook, device settings, etc). PhoneGap and jQuery Mobile are open source frameworks available for building hybrid apps.
jQuery Mobile
As the name suggests, the jQuery Mobile theme revolves around smartphones. You may need to dress your HTML elements to look and act like mobile widgets. The jQuery Mobile framework supplies these kinds of widgets in a ready-to-serve state. jQuery Mobile, along with PhoneGap, appeals a lot to those building hybrid apps.
PhoneGap
The PhoneGap framework takes the ‘write less, do more’ mantra to the next level. Instead of writing unique apps for each mobile device or OS, the PhoneGap framework allows you to design a single, highly-branded app that will work on all popular smartphone and tablet platforms. PhoneGap is a free and open source framework that allows you to create mobile apps using standardised Web APIs for the platforms you care about. PhoneGap supports all the leading mobile platforms. You can easily create apps using the Web technologies you know and love: HTML, CSS and JavaScript.
The pros and cons of hybrid apps
Hybrid apps can be built with less development effort compared to native apps. These apps are able to tap the device’s features. And the learning curve for app developers is less steep. These apps are able to ensure a presence in the app store.
The disadvantage is that hybrid apps lag behind native apps slightly with respect to the user experience and performance.
Native apps
Unlike the hybrid apps, you need to develop an app for each and every mobile platform (OS) you intend to support. Native apps provide the best usability, the best features and the best overall mobile experience. The best way to develop highly refined and stylish apps, unless pressed for time and hampered by budget constraints, is the native app way.
The technologies available for this option depend on the mobile OS chosen. For example, to build an iPhone app, you need to develop in objective-C.
The pros and cons of native apps
Native apps ensure the best mobile user experience and app store presence. A lot of support is available to help build these apps, from platform vendors. Native apps leverage the device’s features to the maximum extent.
On the downside, since there are many platforms to support, a lot of time and a vast budget are required to develop native apps. It is also difficult to get talented resources for each mobile OS, considering that a new OS shows up every other day.
References
[1] http://phonegap.com/ [2] http://getbootstrap.com/ [3] http://jquerymobile.com/ [4] http://www.sencha.com/ The author is a solution architect at Ericsson with over 10 years’ experience in open source technologies. After a decade with Java related technologies, he switched over to mobile related technologies, particularly to develop scalable Web applications. You can reach him at pradeep.meruva@gmail.com.