Guidelines for Building Touch friendly Websites

The User Interface has been redefined with the evolution of touch screens. Now we have touch screen monitors, smart phones and tablets. Given all these types of computing devices, it is important for a web designer/developer to design their web pages that can be rendered by browsers on touch screen devices. Talking about the touch interface and web pages there are certain key elements that has to be taken care of in order to build touch friendly websites.

DO NOT Hide Content Behind Hover

The hover event fires when the mouse is moved over the division/button/section and so on. The point of hovering is to make some information available to the user about an element without triggering some primary action. Same is not the case with touch screens. Consider making all behaviors click (tap) based. Hover has no effect on touch screens. If you are in need to provide secondary information using hover then you can go for touch and hold techniques.

DO Configure the Browser for the Default Touch Behaviors That Work Well For Your Site

The browser consumes touch moves, pinches, and double-taps by default and does not send events for these interactions. If your site needs to provide special functionality for these interactions, you must configure IE10 to provide only the default behavior you want, if any.

-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

This CSS property on IE(Internet Explorer) Gets or sets a value that indicates whether and how a given region can be manipulated by the user.

DO Identify Input Types Using HTML5 Forms

HTML5 brings some big improvements, both for the developers creating them and for the users filling them out. It includes client side validation, Pattern matching and some new attributes. It is necessary to use this HTML5 form attributes for websites on IE10. Internet Explorer 10 optimizes touch experience by indentifying the specific input type.

Internet Explorer will show a tailored touch keyboard layout for that input type on Windows 8:

  1. <input type=”email”>
  2. <input type=”tel”>
  3. <input type=”url”>

While <input type = “email”> The IE will display a inbuilt key board to the user to enter “email address” just like the image shown below. And when the tag <input type = “tel”> is used then the IE will display a number pad for telephone numbers on Windows 8.

 

DO Provide Ample Room for Users’ Fingers (Fat Fingers)

When working for touch screen devices make sure you provide enough room for buttons. If the targets are too small and closely placed to each other, then there may result accidental miss and tap drops which eventually degrades user experience.

Other Alternatives for iPAd:

If you are looking towards building mobile version of your website for multiple platforms such as iOS, Android, Symbion and so on, then it is recommended you try out the jQuery Mobile which is a unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement. It has a flexible, easily themeable design. You can try its drag and drop UI builder on its website.

Using UI Builder is simple, all you need to do is drag and drop the controls on the iPad simulator and when you are done with the layout, click the “Download HTML” button. It downloads the zip file containing markup and CSS for your mobile UI.

If you know basic HTML then you can get started with jQuery mobile. However the complete documentation and tutorials are available on jQueryMobile.com

If you have liked this post, you might want to check out some more, on topics like  Entertainment and Websites

One comment

Leave a Reply

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