Mobile Web Development: Some Features and Tips

While developing a mobile application, I found a couple of things that I would have come to know about when I started. So I decided to write an article in the format of small tips. These tips are more focused on developing mobile applications for PhoneGap, Windows 8, and Firefox OS. But mobile website developers can come in handy too. At the end of the article I will give links to what ultimately happened

Do not trust media selectors.

Especially on Android. Media selectors work when using the keyboard and you have to handle this too. This begins to be a real hell if our application has a different look for Portrait and Landscape. The following example demonstrates this well: If we open our example on a phone with a resolution height of 800px or more, we will not see the color block, because a media selector is applied to it, but when we click on input to enter data, the keyboard opens and the block appears (the window height changes), which is a bit of a logical course of things. Decision:

Using Javascript to change orientation and change orientation based on screen.availWidth and screen.availHeight properties. Note that these properties do not work in FirefoxOS, as does the orientationchange event. Similar code can help us save some time and effort.

	var displayModeLandscape = false;
	var width = 0;
	var height = 0;
        var setPortrait = function() {
        $('html').addClass('portrait').removeClass('landscape');
		displayModeLandscape = false;
	};
	var setLandscape = function() {
		$('html').addClass('landscape').removeClass('portrait');
		displayModeLandscape = true;
	};
	var currentOrientation = function() {
		width = screen.availWidth || $(window).width();
		height = screen.availHeight || $(window).height();
		if(height > width) {
			setPortrait();
		} else {
			setLandscape();
		}
	};
	$(window).on(‘orientationchange’, currentOrientation);
	currentOrientation();

Extend reset.css

To the standard reset.css it will be useful to add a style that overrides the selection of elements with tapas. It doesn’t look pretty or neutral

*:not(html)
{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Use graphics acceleration.

To optimize the animations in your application, you will need properties that support graphic acceleration. These include: transform, opacity. Pay attention to the css transform property and try to use it as an alternative to left, top, right in case you are going to make transition of these properties. Transform is much faster.

Use tapes, not clicks.

I already wrote about a delay of 300ms when processing clicks in mobile browsers. Therefore, use tach and tap events to handle clicks on elements. More about gestures in the corresponding article. As you can see from the example, the difference between processing touch events and click events on the desktop is ~ 100 ms and ~ 400 on mobile browsers

LocalStorage and Caching

Use LocalStorage to cache user information, as well as to store information on the device. LocalStorage is a persistant repository and remains when the application is updated. But do not forget about restrictions, for example, the maximum size on iOs is 5MB or that the webkit version on Android <3.2 throws an exception when JSON.parse (null), all other browsers return null.

Use suitable tools.

Use a suitable browser to test applications. If you are developing an application for Android or iOS, use Chrome, under Firefox OS - Firefox, under Windows 8 - IE10. For developing games and applications with a lot of animation, the library https://github.com/mrdoob/stats.js/ will also be useful Or you can use the built-in Chrome FPS counter. You just need to go to chrome: // flags / and turn it on. Also, Chrome has emulation of tapes - this can be very useful in gesture debugging.

Prohibit scaling

By inserting the following tag in the head tag, you prohibit scaling and get the ability to track gestures.

Gesture optimization.

Run preventDefault () and stopPropagination () when you no longer need gesture processing to increase application performance.

Optimize your code.

All of the above will not make sense if your code runs insanely long. Use Profiler to find thin spots, try to update the DOM as little as possible, and always delete or hide (display: none) nodes that you don't use. The more DOM you have, the slower the operations with it.

Instead of an afterword

Well, in the end, you can look at the application live on Google Play