Telerik® UI for ASP.NET AJAX

Build Responsive Web Forms Apps
With Minimum Effort

Out-of-the-box responsive UI helps you deliver apps
tailored to any screen size in no time

AJAX Responsive Capabilities

The Importance of Being Responsive

mvc-content-is-like-water

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

Telerik + Bootstrap

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.

Touch Friendly UI

Gestures Support

Gestures

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.

Device Detection Framework

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 Web Forms
Telerik ASP.NET AJAX Adaptive Scheduler

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

Menu

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.

See demo

ASP.NET AJAX Adaptive Menu
Telerik Editor for ASP.NET AJAX - Adaptive Functionality

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

Responsive Demos

Mobile Demos
QR_MobileDemos

Demos

Test how the Telerik ASP.NET AJAX controls deliver optimal user experience on any device.

ImageGallery
QR_ImageGallery

Sample App

See a real-world example of the responsive capabilities of UI for ASP.NET AJAX.

Explore UI for ASP.NET AJAX

Learn more Download a free trial

Get Products
Solutions
Resources
Recognition
Company
CONTACTS
  • USA: +1 888 365 2779
  • UK: +44 20 7382 4450
  • India: +91 124 4300987
  • Germany: +49 89 2441642-70
  • Bulgaria: +359 2 8099850

Copyright © 2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.

Terms of UseSite FeedbackPrivacy Policy

Powered by Progress Sitefinity