How Hybrid Mobile Apps Deliver A Native Experience With Web Technologies?

commas-left

Want to give native experience to your users with web technologies?

Check out this post to know how hybrid mobile application delivers a native experience in details.

commas-right

html5

HTML is one of the most used languages for mobile application developers, according to some report. One of the main reasons of choosing web technologies is low-cost development and cross-platform portability of code.

There is no doubt hybrid applications manage to be poorly designed. So, here we are going to prove that whether it is possible to deliver the native feel and look to the application that we are used to.

Generally, mobile applications can be divided into three types, i.e. native, hybrid and web apps. Developing web applications enable code to be ported across platforms which reduce development time and cost.

In Hybrid application, essential things of both the worlds are combined using a common code based to deploy native-like applications to a wide range of platforms. Mainly, there are two approaches for developing a hybrid application:

WebView app

The HTML, JavaScript, and CSS code base runs in an internal browser, which is better known as WebView and it is wrapped in a native application.

There are some native APIs that showed JavaScript this wrapper.

Just like

Adobe PhoneGap and Trigger.io.

Compiled hybrid app

Here, the code is written in one language like JavaScript or C# and gets accumulated to native code for each supported platform.

A native app for each platform is a result, but provide less freedom while development. For e.g. Appcelerator Titanium, Xamarin, and Embarcadero FireMonkey.

Advantages:

  • Access to some device and operating system features
  • Reduced development time and cost
  • One code base for multiple platforms
  • Advanced offline capabilities
  • Increased visibility
  • Developer can use existing web skills
  • Easily design for various form factors, including tablets for using responsive web design.

Disadvantages:

  • Increased time and effort required to mimic a native UI and feel
  • Risk of being rejected by Apple if app does not feel native enough
  • Performance issues for certain types of apps
  • Not all device and operating system features supported

Provide Easy Accessibility to Your Users

A single code base doesn’t mean that application looks exactly same in all platforms. Moreover, users don’t have to care about the underlying cross-platform technology.

They want the application to act as anticipated. One have to consider each platform’s design guidelines:

Such type of guidelines might not be perfectly preferable to all types of application as it provides a standard set of interfaces and experiences that users are looking for each platform.

DIY VS. UI FRAMEWORKS

It is quite challenging to implement all of such patterns, factors, and animations. All such kinds of frameworks are available to help you, which ranges from commercial to open-source ones and from ones with a common UI (jQuery Mobile and Onsen UI) to different platform-specific user interfaces like ChocolateChip-UI and Sencha Touch.

Some of them are good for delivering a pixel-perfect layout while other seems to be sloppy so it is compulsory to check a web application.

Custom UI Components

There are many good use cases in custom UI components. Moreover, choosing a platform’s UI and a custom UI depends on the targeted audience.

If you want to do everything on your own then you must have a deep understanding of UX design as the guidelines are connected to above, and are crafted by professionals to consider particular needs of their platform’s users.

There are some design patterns that are mostly used by people whether they stick to a platform’s UI guidelines or do their own things with custom factors. Usually, people are introducing latest application through a slideshow walkthrough or an instructional overlay.

Now, the question arises how people navigate, the only answer is through a sidebar drawer or a tab bar. How users load and refresh data? The answer is by simply pulling to refresh.

Related : Smart Tutorials That Help You to Build Mobile Applications

Sketch A Native-Looking Header Bar

The header bar with its title and navigation elements is an important part of UI, particularly the “back” and “up” buttons.

According to my personal view, there are some popular frameworks that fail to deliver an HTML and CSS solution as compare to a native application.

The part of the UI along with a minimal DOM and some of CSS seems to be fairly easy:

<header>
   <button class="back">Feed</button>
   <h1>Details</h1>
   <!-- more actions (e.g. a search button on the right side) -->
</header>

 

If you are looking for a full code of the native-looking header bar for iOS, Android and Windows Phone on JSFiddle, you will find the result like given below.

It is preferable to use the same DOM across all the platforms as the results are cleaner code and thus, utmost maintainability. Such things are possible for many UI factors of Android and iOS, including header bar, custom navigation menu, tab bar, settings page, popover, and so on.

Related : iPhone Application Development Tutorial for Beginners 2015

Support High-Resolution Screens

The vast majority of mobile devices are made up by smartphones and tablets with high-resolution screens that are created over 80% of iOS devices and more than 70% of Android devices.

One has to deliver double the dimensions than the actual one to make your images look crusty for every person. One of the most discussed topics in responsive design is to serve proper size of images for all different resolutions.

No doubt, there are different approaches available with its advantages and disadvantages that are related to browser support, bandwidth, and code maintainability. Here, we review the popular ones in no specific order:

  • CSS image-set
  • CSS media queries
  • Server-side resizing and delivering
  • Client-side detection and replacement via JavaScript
  • Resolution-independent images (SVG)
  • HTML5 picture element
  • HTML5 srcset attribute

 

One cannot find silver bullet for responsive images as always. It totally depends on image types and how they are used in the application. It is advisable to use SVG for static images like tutorial images and logo. Such images are scaled perfectly with no extra efforts and have excellent browser support as long as you find with Android 3+.

The HTML5 picture element and srcset attributes are absolute, where front-end development is heading when SVG is not an option. Right now, you will find the main drawback is limited browser support and thus, the requirement of polyfills is needed.

Related : Developing HTML5 Hybrid Applications – Do’s and Don’ts To Be Considered

CSS background images and media queries are the most excellent solution:

/* Normal-resolution CSS */
.logo {
   width: 120px;
   background: url(logo.png) no-repeat 0 0;
}

/* HD and Retina CSS */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
	.logo {
      background: url(logo@2x.png) no-repeat 0 0;
      background-size: 120px; /* Equal to normal logo width */
   }
}

 

But, a lot of content might be available on your application and adjusting all of the img tags or changing them with CSS would be excellent. In this case, a server-side solution is an excellent option.

There are many Android manufacturers moving forwards with what is called XXHDPI (or very high-resolution) screens. No matter which solution fits your requirements, you need images that are 3x times more than the original dimensions to support the latest flagship of Android devices.

Make Use of System Fonts

One of the best ways to make your users feel at home is to use System fonts.

Some of the recommended font stacks on the major platforms:

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

 

Additionally, some interesting present is offered by iOS7 that automatically set the proper font family, size and line height. Such fonts are easy using font: -apple-system-body for normal text and font: -apple-system-headline for headings.

This results into simplification of font declarations along with the improvement of accessibility through “dynamic type,” an Apple’s system-wide font-size setting.

An Icon Is Worth A Thousand Words

There is no doubt iconography is an essential part of user experience on all leading mobile platforms. One can easily use icons to target maximum audience with fabulous fonts. However, you should ensure that icons should be scalable.

One of the great ways to achieve is to implement them as a font through CSS’ @font-face rule. Additionally, it also enables you to change an icon’s appearance through CSS.
Below are some recommendations

  • Connect them with an icon font generator.
  • Search out various platforms icon fonts.

Optimize For Performance

The major disadvantage of hybrid mobile application is its performance. Such thing is true if the application contains heavy animations that contain scrolling lists and runs on old devices.

But, if you are comfortable with supporting newer platform versions (Android 4+, iOS 7+ and Windows Phone 8+), you must find satisfactory outcomes.

Now, the question arises how much efforts one need to optimize DOM and CSS selectors, reducing rendering time, writing performant JavaScript, minimizing the number of reflows and repaints.

Additionally, rendering engines and mobile hardware are also enhancing at the rapid pace with latest devices launched in the market every another day. The performance of a hybrid WebView app can be made by developers to differentiate from that of a fully native app on Android phones and on the iPhone 5 series comparable to Nexus 4 and 5.

Increase Perceived Speed

Creating a performant app is an important thing, but making it feel fast is another. No matter, your application requires some time for activities like client-server communication or heavy calculation, offering immediate feedback is important to deliver a responsive experience.

One of the most common techniques is to delay activities that user doesn’t require while preloading the steps the user might take next. Perceived speed can be very different from actual speed, so let’s use it in our courtesy.

Remove The Click Delay On Touch Devices

We will find a normal JavaScript click event handler on a touch-based device with a slight deferral between the click being fired and the touch start. Such features are developed into the browser for detecting, whether the user is performing a single- or double-tap.

One can easily remove such 300 milliseconds for getting a much more responsive tap behavior instead of the “double-tap to zoom. Here, the FastClick library solution is recommended and thus is used in everything except Internet Explorer:

if (‘ontouchstart’ in window) {
window.addEventListener(‘load’, function() {
FastClick.attach(document.body);
}, false);
}

One can require some CSS, as Internet Explorer 10+ is a bit easier.

html {
-ms-touch-action: manipulation; /* IE 10 */
touch-action: manipulation; /* IE 11+ */
}

Style The Active State

One can have some kind of feedback that the application has detected their actions once the user taps an actionable element like a link or a button. Additionally, one has to switch to: active or a JavaScript solution, while the CSS pseudo-class: hover works excellently for the desktop or a JavaScript solution for it to work on mobile.

Here, we have compared the three approaches to the active states on JSFiddle. When working on one or another way, one can easily judge what is best for you. Moreover, one can easily remove the default tap highlight when adjusting active states on mobile devices.

Furthermore, remove the default tap highlight while adjusting your active states on mobile. It is recommended to disable user selections on actionable elements, as the selection menu would be quite troublesome when the user taps the button for long.

iOS and Android

button {
outline: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Windows Phone 8+

Indicate Loading

An application will take some time to finish the action whenever the application is performing an action. You just have to consider adding a loading indicator for a second.

If you are not doing this, then the user will think that your application stops infrequently and they will click around when they should not. It is not a good idea to add animated GIFs in mobile browsers as it stops when loads on the CPU and lastly, defeating its whole purpose.

Spin.js is the most preferable due to its reconfigurability and ease of use. You can also check other JavaScript solutions and CSS loaders for more understanding.

If you are looking for some cross-platform tools, you can have PhoneGap and Trigger.io for accessing to native loaders that is best for displaying a full-screen loading animation.

Get the Scrolling Right

Scrolling is also an essential factor in the user experience of different mobile applications. As the success of its implementation depends on the scrolling niceties thus, it is considered both a blessing and curse.

We find scrollable content and a fixed header and/or footer bar are fixed to all applications. We find two common approaches getting this with CSS:
There are two common approaches to achieving this with CSS

  • Disabling scrolling on the body, and applying JavaScript custom scrolling to the content;
  • Enabling scrolling on the body, and applying position: fixed to the header;
  • Disabling scrolling on the body, and applying overflow: scroll to the content.

 

There is no doubt the first option is best to get numerous advantages, however, it is recommended to opt second option, overflow: scroll. One can find some issues with it, and has excellent browser support for modern platforms like Android 4+, iOS 5+ and Windows Phone 8+.

Instead, you could also replace overflow: scroll with a custom scrolling library like iScroll. Such type of JavaScript solutions enables more excellent features, as they are always penalized performance. It is quite difficult when we are using many DOM nodes and/or CSS3 effects in the content area.

Check out some basic scrolling features:

Momentum Effect

Users can be able to use the touch-friendly momentum effect to scroll, and view large content areas in natural ways. Such can be easily activated with some easy iOS5+ and CSS and in some versions of Chrome for Android.

In iOS, this can also allow the content to remove top and bottom edges.

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

Pull Down To Refresh

There are different types of solutions available on the web like Damien Antipa. Moreover, you can also find a solution for Windows Phone and iOS with the same look and feel while Android launched its own mechanism.

Here, we are implementing in CatchApp by using some CSS and javaScript keyframes.

Scroll To Top

Regrettably, if we are disabling scrolling on the body, it also becomes helpful for breaking iOS’ native feature, enabling users to get to the top of the page by tapping the status bar.

Some small script is written that can be added to any element which ensures scrolling to the top using JavaScript, although the content is presently in momentum. With a native plug-in, one can easily add to the header of your mobile website or to the status bar with a native plug-in.

There are various scrolling features that could be implemented on top of the native overflow: scroll like just infinite scrolling and snapping to a certain elements. One should look after at the JavaScript option for more advanced requirements.

Succeed Easy To Hit Stuff

Users will frequently miss their target when performing touch actions by a few pixels, particularly on small buttons. Developers can help users to keep design elegant by allowing an invisible touch area available around small targets:

<button>
   <div class="innerButton">Click me!</div>
</button>

One can also place the event handler on the button elements along with restricting the styles to div.innerButton. For a full example, including CSS, on JSFiddle, click here.

Using Touch Gestures

We all know that smart device is all about touching and gestures. When we are interacting with touch devices, we just swipe, zoom, pinch, drag and long-tap all the time.

So, you lack in offering users the same means of controlling your hybrid application? Here, we are recommending you two libraries that support all types of gestures. Those are QuoJS and Hammer.js.

Native Functionality

If you are developing your application with web technology doesn’t mean you can’t use native features. Actually, Inbuilt access is provided by all major cross-platform development tools to an essential functionality.

Such includes APIs for the network connection, device data, geolocation, the file system, the accelerometer, notifications (including push), etc. Even, developing custom plug-ins can extend development tools.

There are many features added at Hojoki that includes detecting the user’s time zone, reading the user’s setting for push notifications for our app, checking whether a third-party app has installed as well as launching it and so on.

We are looking for some simple examples for things that are fulfilled with native plug-in. First of all, we have to enable JavaScript focus() for input fields on iOS 6+:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) {
[YourWebView setKeyboardDisplayRequiresUserAction:NO];
}

Here, you will find the code to copy a given string to the device’s clipboard on iOS platform:

[[UIPasteboard generalPasteboard] setString:@”Your copied string”];

How to Conclude It?

If you are developing hybrid applications means you are using same processes and tools that we are using for developing websites.

Having said that, one thing I really like about the hybrid approach is that you can deploy HTML, CSS and JavaScript code as a mobile web app with relative ease.

Make sure to implement fallbacks for native features, or find elegant workarounds if they are not supported at all. There are many developers who prefer to keep users in a native application and even, you could promote your app to your mobile website’s users.

Here, you are thinking about native part, isn’t it? One can find mobile web application like HTML, CSS, and javaScript to be loaded in a WebView, an internal browser engine that decides the way a default browser on the device would minimize it.

Moreover, native “bridges” are utilized to represent device’s feature and operating system through an API for enabling them to be accessible with JavaScript. Access to the device’s camera, native events, address book, geolocation, etc. are added

Some cross-platform development tools deliver native bridge and simplify the whole process of concluding it.

In this ways, Hybrid mobile applications deliver native experience with web technologies. If you want to know more about hybrid app or want to develop application to enjoy native experience, then Contact Perception System.

Contact Us

Designed by Freepik

Leave a Reply

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

CAPTCHA

*