HTML5 has a great deal to offer to the website designers when it comes to catering to the mobile phone users. With the number of people using a mobile device to access the internet on the constant rise it is necessary for just about every web developer to advice their clients that a mobile website is a must.

There use to be a time when having a website was optional; not any more. Thus if you still do not have one, you are missing out on some big share of the customer base. However the mobile web development scene is very complicated.

There are simply so many different devices with different browsers, versions, screen sizes and undocumented features, bugs and problems that it is making a mobile website is not the easiest task. Hence there are times when you need to go beyond the usual borders to achieve the impossible.

Here is a short list of tips, from which you are likely to be able to use at least  2 – 3 depending on the nature of your project.

Having it full screen: 

• The default browser on Android up to 4.3 if you require a full screen the only solution is to have a document with a height at least equal to the device’s height and you can use the following snippet to hide the URL bar.

window.addEventListner(“load”,function() (window.scrollTo(0,0););

• A good example of a similar full screen experience on this browser is used by Google Maps. As far as Google Chrome, Firefox OS, Firefox for Android an Blackberry OS 10 are concerned the standard full screen API can be used. Here is a good example of the code:

var body = document.documentElement;

if(body.requestFullscreen){

body.requestFullScreen();

} else if (body.webkitRequestFullScreen) {

body.webkitRequestFullScreen();

} else if (body.mozRequestFullScreen())

body.mozRequestFullScreen();

} else if (body.msRequestFullScreen) {

body.msRequestFullScreen();

}

• There is one restriction being that the it should be used only after interaction, for example after touch operation. There is a special solution for this in iPhones since iOS 7.1, using a special attribute of the viewport meta tag requesting a minimal UI from Safari on portrait and no UI what so ever on a landscape. This mode is however limited only to the iPhone device and is not available on iPad. The minimal UI mode can be enabled using the following code:

<meta name=”viewport” content=”width=device-width, minimal-ul”>

• You can check if the minimal UI mode is enabled by using the code below:

@media {device-height:568px} and {height:529px} {device-height:480px} and {height:441px} { /*minimal UI is active */ }

Web App on the Home Screen: 

• With the iOS devices like the iPhone and the iPads and even the Android device (Chrome browser) it is possible to have a full screen experience after the user has installed an icon on the home screen. The way it works is that the web app will run external to the browser. This can be achieved in the following manner:

<!– for iOS 7 style, multi-resolution icon of 152×152 –>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style” con tent=”black-translucent”>

<link ref=”apple-touch-icon” href=”icon-152.png”>

<!– for chrome on Android, multi-resolution icon of 196×196 –>

<meta name”mobile-web-app-capable” content=”yes”>

<link rel=”shortcut icon” sizes=”196×196″ href=”icon-196.png”>

Canvas of high resolution: 

• As per the canvas API it is a bitmap based drawing interface that works when an image is loaded from a file. What this means that if you create a canvas having width of 200 pixels it will create an image with 200 real pixels. This will be drawn on the document using 200 CSS pixel width and will be independent of the resolution.

• But there can be an issue here because as far as the iPhone 5S is concerned, the 200 pixel image will be resized to 400 device pixels and it will have a similar effect on the Nexus 5 too, where it will be resized to 600 device pixels. This will result in loss of proper resolution of the image.

• However there is a work around. If you do require high resolution images, the following trick can be implemented.

<canvas width=”400″ height=”400″ style=”width:200px; height:200px”></canvas>

<script> document.querySelector{“canvas”}.getContext(“2d”).scale(2.2); </script>

One thing to make a note of is that this should be done only when dealing with high resolution device, since increasing the size of the canvas will also increase the amount of memory being used as well as the CPU power required.

The perfect numeric text field:

• HTML5 has introduced many new elements as I am sure you may be well aware off. One such new element is the input element features like new types. For example it is now possible to use the following with an input element  “type=email”. What this does is it triggers a virtual keyboard on touch devices. Another such type is the number like “type=number”.  This type works in a different manner on different devices. For example on the Android and the Windows Phone it will generate a fully numeric keypad but the same is not true for an iOS device. But you can force the same by defining a pattern in the following way “pattern='(0-9)'”. A similar rule applies to the password type as well, the code for both is as below:

<input type=”number” pattern=”(0-9)*” >

<input type=”password” pattern=”(0-9)*” >

Responsive Web Design and the new Windows 8 features:

• Responsive Web Design is one of the best things to happen to a web designer. It is a foolproof solution to making a site viewable in a good manner on multiple devices. All that is required is that you need to define a few breakpoints with CSS media queries and you are set. You may be surprised to learn that responsive web design is a very successful solution but there is one exception. In fact it is likely that you may have even come across the issue and wondering if there is a work around or a quick solution.  The problem is with Windows 8.x using the Internet explorer that works on a full screen mode also known as Metro mode.

• The feature in Windows 8.x where you can share a website opened in a browser with other full screen apps is where the issue begins. It is interesting to note that when you do share you screen with another app the width of the browser will be less than 1024 pixels. Thus IE will apply the mobile behaviour resulting in zooming out the website but will not apply the responsive code to go with that.

• There is solution though as shown here:

Use the CSS viewport declaration on a media query like this:

 @media only screen and (max-width:400px) { @-ms-viewport { width:320px; }

Missing date and time picker:

• There is an option for the input  like ‘datetime’ which is used to get a date and time picker. This is true for most of the browsers and can be achieved like this :

<input type=”datetime”>

• This also works on many mobile devices as well. But things have changed. Since the iOS 7 release for the MAC devices and the new chrome on the Android this is not true. These operating systems and platforms no longer support the above mentioned format. All is not lost though, you can make some changes to code to make it look like what is mentioned below to get that functionality back.

<input type=”dateime-local” >

The Rich Editor: 

• HTML5 has a new boolean attribute for HTML elements which is ‘ContentEditable’. This attribute can be used with several different HTML elements like a <div>, a <table>, a <ul>.

• The way this works is when the users tap on the elements with that attribute a virtual keyboard will appear and the user is able to edit it. The user will be able to edit it  even if it includes rich HTML like adding a new list item using a virtual key. The updates can be saved by clicking on the innerHTML attribute of the element.

The Tint (in Safari): 

• The Safari browsers include a tint colour as of iOS7 (for iPhone and iPad) that goes behind a semi  transparent Safari UI. Safari dynamically defines the tint when it loads which depends on the background colour set on t page. As you may have guessed the tint cannot defined programmatically or via any meta tags. But like many other things there is a work around to chose a different colour for the tint and the background like below:

body {

background-color: blue;

background-image: linear-gradient {to bottom, red 0%, red 100%}

}

Icon name (Home Screen): 

• It is possible to add a website to the home screen on iOS, Chrome and even pin  website to a tile on a Wnidows Phone. When you do this the icon name is automatically selected for you and the name is in fact the title of the website, that which appears in the <title> tag. However the title tag may not be the best way to name the icon, at least not for all the website and this is especially true if the website is search engine optimised. Here too meta tags come to the rescue as shown below:

On the Apple device:

<meta nae=”apple-mobile-web-app-title” content”MyName”>

On the Windows Phone and Windows 8.x tablets:

<meta name=”application-name” content=”MyName” >

As far as the Android device s concerned, it is not programmatically possible to do the same.

Live tiles on Windows Phone:

• Windows 8.x has a feature where it is possible to pin websites from IE to the start screen. This is a very handy feature that not many are aware of as yet. This same feature has been introduced to the Windows Phone. This tile can be converted on the home screen to a Live Tile. A live tile as you well all know constantly updates itself with live information. The icon can be left alive even when the website is not open. And this how it can be achieved:

<meta name=”msapplication-TileImage” content=”tile-background.png”>

<meta name=”msapplication-TileColor” content=”#FF0000″ >

<meta name=”msapplication-badge” content=”frequency=60:polling-ur=http://host.badge.xml”>

The badge code above makes sure that the tile remains alive.

Summary:

There are many good features and hacks discussed here. They can come in handy in more ways than one. A mobile presence is pretty much vital in addition to having a web presence. But looking at this from a different perspective, since mobile and web presence are now in such great demand just about everyone is going to get one at some stage. This article has revealed several design and functional elements that are not very well known and widely implemented. Using such features and thus introducing such subtle differences in your website is what may make the difference when it really comes down to it.

That is where Alakmalak comes in. This is one company that has realised the importance for each website to be different and each mobile application development to be different. But that is not all, the website or mobile applications (website) needs to convey the desired message of the respective company in their unique method. By choosing Alakmalak, you can be sure that you are in save hands since you would be opting for a company with a lot of experience. A company that has successfully completed more than 2000 web development projects with clients from all around the world.

 

• HTML5 mobile app development
• HTML5 Mobile tips