5 Easy Ways to Make Your Mobile Web App Feel More Native
If you are developing a web application for a touch device, you probably want it to feel like a native app. Despite the fact that it’s almost impossible for a web app to achieve the same level of smoothness as a native one has, there are some ways that help you to trick your user by changing or removing some aspects of the web browser associated UX.
Here are some easy tools and tricks that we use in Timestripe. Keep in mind that some of these techniques come with a trade-off, so use them with care.
Add web app manifest
Web app manifests are part of PWAs — websites that can be installed to homescreen without an app store and run without a browser interface in it’s own “window”.
PWAs are awesome. Instant installation, device native features access, offline mode support, and so on… But
Turning your web app into a cutting-edge offline-first PWA is not easy. The good news is you don’t need to! Just adding a web app manifest allows your users to add your app on a homescreen and launch it without a browser interface. Later you can start adding other PWA features, more on it here.
More on web app manifests on MDN.
Here you can check out how small the Timestripe web manifest is.
Set transparent -webkit-tap-highlight-color
The -webkit-tap-highlight-color CSS property defines the color of those semi-transparent rectangles, that appear over interactive UI elements that you tap on. Every browser has this behavior as a backup plan for poorly designed websites that do not provide any evidence to the user that touch was successful or not.
So when your components have visual feedback for touch interactions it is absolutely safe to make tap highlight color transparent.
body {
-webkit-tap-highlight-color: transparent;
}Remove :hover styles
There is no such thing as “hover” on touch devices because there is no mouse pointer. But mobile browsers do show hover styles when a user touches an element. The problem is, the element is getting stuck in a hover state until the next touch.
The easiest way to avoid this is to remove hover styles at runtime. And there is a library that does this for you: https://github.com/kof/remove-hover
Disable pinch-to-zoom
Native apps don’t zoom in when you pinch them!
From Timestripe head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">Remove overscroll in Safari
By “overscroll” I mean the visual effect of elastic scrolling beyond the page in Safari. The effect itself is not a bad thing, but native apps use it only in a small number of interfaces, not for the whole app. Removing overscroll makes your app interface feel more “solid”.
There is a good article on the topic: https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/
Bonus: react-easy-swipe
If you are lucky to use React for your application, take a look at the awesome library called react-easy-swipe. This library helps you to make your custom components react to swipes, whether it’s a carousel or a sidebar menu.
https://github.com/leandrowd/react-easy-swipe
