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.

About the Author

Vasil Yordanov

is a Senior Graphic and Interaction Designer interested in everything related to design, functionality and visualization. He describes his daily responsibilities at Telerik as processes of transforming pure data into beautiful, valuable and meaningful information. For better insight into his impact on RadControls for ASP.NET AJAX, you should know he is the person behind the design of their skins, sample apps and demos.

Related Posts


Comments are disabled in preview mode.