Telerik blogs

lifting (noun)

  1. Face-lifting or face-lift is the plastic surgery for tightening facial tissues and improving the facial appearance.

Q1 2009 Beta. RadControls just underwent a serious “surgical” intervention, cutting deep into the skin – removing excess CSS, streamlining look & feel across controls, adding transparent .PNG to replace .GIFs, you name it. For a taste of things to come, here is a link to our new Web Mail demo, and its source. You can also check the screenshots below.

 Vista skin

Two complete skins were rolled out for the beta – namely a brand new (and color neutral) Default skin, as well as Vista. Another ten updated skins are coming soon with the official release, so there is no skin left behind, and no skin untouched. Information on what extra new stuff is coming out in the Q1 2009 can be found here.

In the last three quarters since the official release of the ASP.NET AJAX suite (formerly know as Prometheus) the focus was on performance, adding new products and completing the feature set. Currently the AJAX product line features a consistent client and server-side API based on the ASP.NET AJAX conventions, as well as a solid client-side framework foundation. To fully complete the transformation of the suite (from Classic to AJAX), it was essential that skins undergo the same process – streamline naming conventions used, apply uniform skinning approach across all 20+ skinnable controls, and deliver a much more consistent look of the controls along the way.

 

These changes were born out of customer feedback and we worked closely with a group of customers to find the optimal solution. Even the color scheme for the new Default skin was chosen using customer feedback – it is neutral (shades of Gray are mostly used), and looks great in a wide range of web pages and color schemes. It also ensures a good contrast between the controls’ “front” elements and “background” elements. Two additional common customer requests (apart from ensuring consistency when using multiple controls on the same page) were taken into consideration:

-          Change a skin – keep your application’s layout! With the introduction of the RadSkinManager control in Q3 2008, and its making the skin-changing process a snap the number of such requests simply skyrocketed. Up until now changing the skin would often result in breaking the layout and extra scrollbars appearing where one would not expect them to.

-          Nesting controls in other controls seamlessly. So far, with the current not fully consistent naming conventions across controls, some CSS propagation was possible from one control to another (e.g. from RadGrid to RadEditor used as an edit form). Such cases will now be greatly reduced (and we plan to eliminate them completely).

 

 Default skin

 

As far as improved consistency and look and feel are concerned – elements such as arrows, buttons, headers, selected states, disabled states of items now have similar look and feel across products. Below is just one of the 10+ images illustrating commonality between various controls which was taken into consideration:
Telerik RadControls Skins Facelift

 Note – the new Default skin comes to replace the Default2006 and Gray (both of which used a gray color scheme), so if you are still using any of those, you will need to update your ASPX pages.


Making such a significant change was necessary and now, once the suite is complete, the CSS rules will be “set in stone”. It is clear, however, that all custom skins will not work anymore and will need to be updated. To ease this process, we have a nice offer for you – but please, before considering taking advantage of it, give it a good thought whether you still need your custom skin, provided the products look much better together now. Yet, if you still feel you must retain the former look of your app, and you cannot go through the process of updating the skin yourself, then – hand it over to us! All you need to do is send us a working project with your old skin, and we will update it for you using the new CSS conventions and send it back. As simple as that.

 
Oh, and one last thing related to skinning. Did you read about the new Telerik tool coming in a couple of months from now? Enters the Visual Style Builder (codenamed RadSkinBuilder :) To quote the roadmap – “We have started working on a project that aims to make skinning the Telerik components a breeze. Ultimately, we are trying to provide a way to fully customize the look of the RadControls components through a visual interface, without the need to know the front-end structure of the components.”. And to get a taste of things to come, here are a some screenshots from the current inhouse version under development:

Visual Style Builder 

If my post does not answer it all, your comments and questions are most welcome! Looking forward to hearing from you, and we all hope you like the skins! 


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.