14 DAY TRIAL // A few days ago, Google announced that it was swapping out the old WebView API in Android for a brand new Chrome-powered one. This means that app developers now have access to the latest Blink layout engine from Chrome and the latest V8 JavaScript engine.
That said, plenty of developers use WebView poorly, just to get their web apps in the Play store and be done with it. This results in apps that look bad are slow and buggy. This, in turn, contributes to the view that HTML5-based apps just can't be as good as native ones.
But it doesn't have to be that way. With some work, HTML5 apps can look just as good as native ones and, in fact, some types of apps may work and look better as well with HTML5 rather than written as an entirely native app.
To help developers achieve the pixel-perfect design they strive for with the new Chrome WebView, Google has put together a short but effective guide.
The guide on Google Developers goes through the most common problems and challenges with working with web content on mobile devices. While the guide is designed specifically for WebView users, plenty of the stuff in there applies to standard web pages as well.
For example, one of the first and most important things to do to get a pixel-perfect design on mobile devices is to use the "viewport" meta tag to force WebView to display the content at a natural size for the screen.
Beyond that, a very basic but still ignored trick is to use CSS media queries to specify different CSS rules for different conditions, i.e. screen size, pixel density or orientation.
Images are a common source of grief for mobile web developers, and it's just as true for those working inside the WebView. There are several ways you can fight the problem. For one, you can simply use as few images and relegate as many graphical elements to CSS as possible, keeping in mind performance.
Another option is to rely on vector graphics where possible. Finally, just make sure that you use the biggest images so that they get scaled down, which looks good, rather than scaled up, which doesn't.
As an alternative, you can keep multiple copies of an image at different sizes and serve the one that makes the most sense depending on the screen size. The Google guide goes into much deeper details. If you're at all interested in WebView or mobile web development in general, you should definitely check it out.