Have you ever experienced difficulties with hitting a button on a touch screen because of the button’s small size? Haven’t you wished texts were larger so you don’t need to zoom-in to read?
No more troubles - our new MetroTouch skin for Telerik’s ASP.NET AJAX controls is coming on board with Q2 2012, expected in about a week!
The Dimensions
Fingertip - 11mm - 32px
Dimensions are the biggest difference introduced in the MetroTouch skin. Almost every UI element has its regions and boundaries adjusted to a touch-friendly size of around 11mm at 72dpi per clickable area.
Mean percentage of erroneous trials for each touch target size
Source: Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices
The Button has its height adjusted from 22px to 36px.
Yes :) I bet you see “breaking” changes on the horizon, but they should be considered breaking only with respect to applying the skin to an already developed application. Layout adjustments in this case will be needed more or less regarding the complexity of your application and the way RadControls are employed. The benefits of these adjustments, however, are huge as you will have your application mobile and touch device friendly.
The Icons
Common - Monochrome - Glyphs
Unlike other ASP.NET AJAX skins that consist of numerous image sprites, the MetroTouch skin will make use of one common sprite containing all cross-control images and icons with their different states. The icons, actually, are a set of glyphs following the Metro style line attaching the modern & minimalistic look and feel to your applications.
The Fonts
Segoe UI - Light - 15px
Segoe UI, of course - a very stylish contemporary font, the root of Metro UI. In case this font is unavailable on your device, fallback font families are used, namely: Arial, Helvetica, sans-serif.
A font size of 15px was chosen as it fits fine with the enlarged controls’ dimensions. In addition, the preselected, lighter weight helps the font render really well in the browsers and blend perfectly with Metro dogmas.
The Colors
White - Silver – Blue … and Black
Currently, we are preparing the default color scheme that is Blue accent color on white background with Light Grey for borders and other inactive UI elements. Black is also used as accent color that brings richness and helps controls like RadToolBar stand out. Based on your valuable feedback, we will later on ship other color variations, as we already did with the Metro skins in our Skin Sharing Portal.
RadFileExplorer including RadWindow, RadGrid, RadToolBar, RadInput, RadTreeView
The Shapes
Sharp - Rounded - Both
As 2 is more than 1, we decided to go further and ship additional style sheets that bring the rounded corners’ friendliness available to our MetroTouch skin. In other words, you actually get two Wow! MetroTouch skins – one with rounded corners and one without.
To enable roundedness you have to set the “radRoundedCorners” CSS class to the element that holds the RadControls. It’s easy as that. Pure CSS magic:
Stay Tuned
One - More - Week
Our front-end developers are pushing hard to get the MetroTouch skin for ASP.NET AJAX ready for touching with our official Q2 2012 release in the beginning of June. So, stay in touch! And don't forget to share your feedback wth us.
