Microsoft Releases Guidelines for Touch-Based Websites, Windows 8
Microsoft's next iteration of Windows is just around the corner. According to an announcement bythe company yesterday, Windows 8, which builds on the well-received Windows 7, will be releasing apreview in the first week of June. Windows 8 is shaping up to be the most significant overhaul in UI sinceWindows 95, although it remains to be seen whether the company's new Metro interface will be adoredby users.
IEBlog, a web development blog maintained by a team at Microsoft, released guidelines on Fridaythat should be of interest to web developers everywhere. When the aforementioned Win8 ConsumerPreview is released, IE10 will be included, which will represent quite a jump in what Internet Explorer iscapable of. According to IEBlog, the new browser "enables fast and fluid multi-touch experiences" whileallowing new input devices and touch screens to radically change the way web pages are consumed onWindows devices.
Like Us on Facebook
IEBlog points out 4 development guidelines that will be useful for web developers who want to ensurecompatibility with the latest generation of MS web browser:
Do not hide content behind hover
This one makes intuitive sense. If users are viewing your website from a touchscreen PC or from a tabletbrowser, there is no mouse-hover action. When you touch the screen, it registers as a click action, buthover actions will no longer be possible.
Do configure the browser for default touch behaviors
Users expect to be able to pan and zoom through websites, and web developers must use the right codeto ensure that the website responds to users as the user expects. Tags recommended by Microsoft willallow the web developer to define whether panning, pinch zooming, and swiping is allowed. Another tagwill define whether only double-tap zooming is allowed. Take a look at the blog post to understand thefull range of values you can define for your site.
Do identity input types using HTML5 forms
When you are creating input forms, use the rights tags to trigger the right input device for the user. Thetags allowed are shown below:
Using the right tag will ensure that when a user clicks on an input field, they will be shown the correctkeyboard: either the numeric or the qwerty keyboard.
Do provide ample room for user's fingers
This is sort of an interesting one. According to IEBlog, the average human index finger is 11mm wide.The guidelines provided by IEBlog for creating touch targets include 40px or wider target sizes, with10px between targets. For everyone who has ever attempted to click a button, and clicked on anadjacent button accidentally, this should be a welcome change.
Microsoft makes it clear that IE10 will be a universal browser, and most websites will continue to lookfine on it. However, there is a difference between looking fine and looking amazing, and for those webdevelopers who are looking to take their design to the next level, Microsoft's guidelines - which buildson a lot of the best practices introduced by iOS and Android - is as good a place as any to start.