Knowledgebase

•Design Guidelines for friendly sites to touch navigation

Don't hide the content behind the focus

With the navigationenable to touch, there isn't anything like the mouse passage over an web pages element. Thats why all of actions and content activated by focus are potencially inacessible to uses tha use the touch navigation.  A commom scenery of this problems includes  a suspended menu activated by focus. To avoid this problem, don't use focus to hide a content that the user may handle. Consider the use of the onclick event to alter the visibility.

<style type="text/css">
    #subMenu {
        display: none;
    }
    #subMenu.showSubMenu {
        display: block;
    }
</style>
...
<script>
    function toggleMenu() {
        var subMenu = document.getElementById("subMenu");
        subMenu.classList.toggle("showSubMenu");
    }
</script>
...
<div id="menu" onclick="toggleMenu()">
    <a>JavaScript Hover Menu</a>
    <div id="subMenu">
        <div class="subMenuItem"> 
            <a>Sub menu item 1</a>
        </div>
        <div class="subMenuItem">
            <a>Sub menu item 2</a>
        </div>
    </div>
</div>

 As alternative, the Internet Explorer 10 add a new behavior to propriety aria-haspopup existing to simulate  focus in hidden interactive content elements of page:

<style type="text/css">
    #menu .cssSubMenu {
        display: none;
    }
    #menu:hover .cssSubMenu {
        display: block;
    }
</style>
...
<div id="menu">
    <a aria-haspopup="true">CSS Hover Menu</a>
    <div class="cssSubMenu">
        <a>Sub menu item 1</a>
    </div>
    <div class="cssSubMenu">
        <a>Sub menu item 2</a>
    </div>
    <div class="cssSubMenu">
        <a class="cssSubLink">Sub menu item 3</a>
    </div>
</div>

 Configure the browser to standart behaviors of touch that works well on your site

Its an users expectative be able to use panoramic and zoon in sites that use touch navigation. By standard, the browser use touch movement like,though not send these event manipulations. If the site needs to provide additional functionality to those manipulations, and if you need to listen to pointer events that constitute them, you can configure Internet Explorer 10 to provide only the desired default behavior, if it exists.

when user touch an event, the property CSS -ms-touch-action determins the default behavior to be provided by Internet Explorer 10. 

The following table describes the possible values​​.

 For example, a paint app on canvas may use:

canvas {
    -ms-touch-action: double-tap-zoom;
}

With this configuration, the user may touch double times to enlarge a canvas element, but slid a finger over the canvas element will send events to this element, insteand of move the page.

Using scrollable areas to implement panning experiments

Sometimes, the developers implement scrollable experiences using scripts and events to simulate a pan. However, this can result in a bad experience and that affects the performance. If, instead, you use the overflow to create scrollable areas, Internet Explorer 10 will accelerate in hardware panning and zooming, creating an experience immediate first touch. In addition, Internet Explorer 10 allows you customize the experience panning and zooming. For example, It's possible to create content paged through which users can swipe. You can then configure alignment points in CSS for identifying the limits of the pages to which Internet Explorer 10 will adjust the panning of users:

    <style>
        #imagePanner {
            -ms-scroll-snap-type: mandatory;
            -ms-scroll-snap-points-x: snapInterval(0%, 100%);
            overflow-x: auto;
            overflow-y: hidden;
            width: 480px;
            height: 270px;
        }
        .imageRow {
            width: 2400px;
            height: 270px;
        }
        img {
            width: 480px;
            height: 270px;
        }
    </style>
    …
    <div id="imagePanner">
        <div class="imageRow">
            <img alt="Cliff" src="images/Cliff.jpg" />
            <img alt="Grapes" src="images/Grapes.jpg" />
            <img alt="Rainier" src="images/Rainier.jpg" />
            <img alt="Sunset" src="images/Sunset.jpg" />
            <img alt="Valley" src="images/Valley.jpg" />
        </div>
    </div>

To know more about the use of alignment points, look Exemplo de rolagem, movimento panorâmico e zoom com entrada por toque.

Identify entry type using forms HTML5

The Internet Explorer 10 includes the support to input control HTML5, all of them optimized to touch. To text entry, is possible get better even more the navigation experience by user touch, identifying the kind of especific entry, when applicable. The Internet Explorer will display a virtual keyboard layout adapted to this type of input in Windows 8.

The touch keyboard displays buttons and @ for email addresses: 

<input type="email">

 The Keyboard shows a numeric keyboard to input of number and telephone.

<input type="tel">

The keyboard shows a "/" and the bottom ".com" to URLs:

<input type="url">

Provide enough space for user data

To creat an experience fisrt-touch from windows8, we made a search to formulate some Useful guidelinesto to the design of touch interaction. The average width of a finger is 11 mm. As touch areas increase, the percentage of accidentally lost touches greatly decreases.

Ideally, a target has at least 7 mm ² (about 40px) with a minimum of 2 mm (about 10px) of clavier around.

If  you want to adjust the space only to users with a touch hardware, use the resource detection. To detect if the user have touch hardware,use:

if (navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}

 Beyond te basic

When you ready to optimize your site to touch navigation and, at same time, keeping provide continuous support to mouse and keyboard, verify some of the resources o Internet Explorer 10 to handle the  adaptable input, wat includes the event model of pointer and event model of gesture.

Troubleshooting touch navigation

 How to do to menus suspension work with touch?

A mouse can pass over contenct (point to it) without activate it (Click on it). But, in touch navigatoin, the focus action and activation is the same one. So, the functionality that demand without activation won't work in navigation by touch. Insteand of it, consider all behaviors based on clicks (touch) using the event onclick to toggle visibility. To learn more, check out the design guideline content don't hide behind the focus.

 How to provide personalized experiences of double touch?

The Internet Explorer 10 provide a commom standard manipulation to basic manipulation by touch, like pan movement to scrollable areas for double touch. You can use the CSS property -ms-touch-action  to replace those standards and specify the enables behaviors to actions by touch. To provide your own double touch behavior at a determined element, you can disable the standard zoom by double touch simply hidding this value from rule. For example, this declaration about stile allows pan movement and zoon, but disable the zoon by double touch:

-ms-touch-action: manipulation;

 How todetect a slide action using touch navegation?

The Internet Explorer 10 doesn't offer support to the resource drag and drop o HTML5. To detect a drag action on your site, look the gesture events press and hold(MSGestureHold) and flicks (MSGestureStart,MSGestureChange, MSGestureEnd).