“ You put a water into a cup, it becomes the cup.
You put water into a bottle, it becomes the bottle,
You put it in a teapot, it becomes the teapot.”
There are many reasons why responsive web design has gone from being called a trend to being synonymous with web best practices. It’s a fast and cost-effective way to serve a tailored experience to both desktop and mobile web users. You can use your existing skill set and have one code base, one set of URLs and one design language.
Recognizing the need for developers to build apps tailored for any screen size quickly, we have been hard at work to make our ASP.NET AJAX controls do most of the work for you. Here’s how.
UI for ASP.NET AJAX saves you time and effort when implementing responsive design practices, since the controls take care of them out-of-the-box or with the change of a single property:
To give you maximum flexibility when building responsive websites and apps, Telerik ASP.NET AJAX controls integrate well with third-party grid-layout frameworks like Bootstrap and Zurb, as well as the specifically built for Web Forms developers Telerik Page Layout framework.
Mobile-friendly sites provide larger clickable areas to accommodate for the finger sizes of visitors. Leveraging Microsoft’s recommendation for touch areas of 40 pixels or wider with at least 10 pixels between targets, Telerik ASP.NET AJAX controls come with four ready-to-use skins built with touch in mind: MetroTouch, BlackMetroTouch, Silk and Glow.
Telerik controls react to gestures to provide native user experiences on phones and tablets regardless of their operating system. Along with popular gestures such as tap and drag to scroll, some of the tools support more advanced touch commands like pinch, spread, swipe, tap and hold and double tap and drag. Learn more about the controls’ specific gestures in the help article Gestures Support.
When someone accesses your site or application, get information about their device screen dimensions in CSS pixels. Telerik Device Detection Framework tells you whether the screen is small, medium, large or extra large, enabling you to serve different content for each.
Not only have we optimized the rendering of the most complex UI components such as Grid and Scheduler
for use on small screen sizes, we’ve also made them smart enough to detect when to serve each type of rendering.
All you have to do to leverage this is set one property: RenderMode=”Auto”.
The Grid’s amazing advantage is its two types of rendering – one for desktop and one for mobile devices. To facilitate data operations on small screen sizes, the mobile rendering moves the behavior of editing, filtering and column operations to different views to provide users with a mobile optimized look and feel. The selection, column reordering and column resizing also happen in a mobile and touch-friendly way.
In addition, the Grid enables you to hide specific columns on mobile devices to help users monitor only what’s important.
As with the Grid, the Scheduler features a mobile-optimized rendering presenting the appointment editing functionality in a separate view for more user-friendly manipulation. When loaded on a mobile device, the scheduler:
When accessed via a mobile device, the menu changes its appearance to the well-known hamburger button to create a user experience tailored to the device screen size. In this mode, the control is mobile-friendly and its touch zones are bigger and easier to select.
The Editor offers exceptional usability on mobile devices, influenced by the leading native rich text editors, Microsoft Word Mobile and Google Docs Mobile: