Responsive Features - ASP.NET AJAX Controls

The Importance of Being Responsive

Content is like water:

“ 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.

Save Time on Responsive Projects

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 help you build responsive page layouts quickly, the components integrate well with grid layout frameworks like Bootstrap and the specifically built for Web Forms developers Telerik Page Layout framework, enabling you to define layouts with C#
The components render larger clickable areas on small screens and scale proportionately to the container in which they’ve been placed
The components support touch gestures to provide native-like user experiences on mobile devices
The complex components such as Grid, Scheduler, Menu and Editor serve different rendering on small screens to provide an optimal user experience
Telerik Device Detection Framework enables you to serve different content on different devices by telling you what screen size is accessing your app

Quick Layout Building with Your Choice of Language—C# or CSS

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.

Telerik RadPageLayout helps you easily configure layouts using common device references for defining, sizing or hiding containers for your controls on the server-side. Using C# or the property editor you quickly add responsive capabilities to your pages and the PageLayout generates the markup for you.
Bootstrap provides you with a grid-layout framework, as well as dozens of custom HTML and CSS components to help you build layouts on the client-side with CSS. Telerik controls not only scale proportionately to the framework containers on different screen sizes, but come with a Bootstrap skin to help you achieve consistent look and feel when using both toolkits side-by-side.

Touch-Friendly UI

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.

Gestures Support

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.

Device Detection Framework

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.

Mobile-Optimized Rendering for Complex Controls

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”.

Grid

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.

See demo

Responsive Grid for Telerik ASP.NET Web Forms

Scheduler

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:

Renders the inputs and buttons it contains as native controls. This makes it lighter and better performing and also offers the native for the device experience
Is mobile-friendly and its touch zones are bigger and easier to select

See demo

Editor

The Editor offers exceptional usability on mobile devices, influenced by the leading native rich text editors, Microsoft Word Mobile and Google Docs Mobile:

Touch-optimized toolbar placed at the bottom of the screen
Touch-friendly dropdowns and dialogs that pop up and fit in the viewport
Interactive Full Screen mode to facilitate content creation and formatting and more

See demo