Users access your web project through a variety of devices and from a range of screen sizes which require you to apply responsive web design strategy.
Responsive web design is an approach for formatting your content so that it provides an optimal viewing experience on a wide range of devices with a minimum of resizing, panning, or scrolling. As of the Q1 2014 release, Telerik UI for AJAX provides significant support for responsive web design.
To empower your web visitors with responsive capabilities in your web project, it is recommended that you consider the
RenderMode configuration settings.
To force your content to appear at a maximum width of the device within the browser viewport and prevent horizontal scrolling on a full-screen browser, add the meta-viewport tag to the header of your pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This code snippet also defines the initial scale of your content as 100% and prevents the need for your viewers to zoom.
Last, but not least, it lets browsers honor
@media queries which are often used to create responsive design.
RenderMode is set to
Mobile in controls that implement adaptive behavior, the HTML markup and styles that are used to present the control will be optimized for presentation on a smaller mobile device. All features of the control will be present.
RenderMode is set to
Auto, the controls will detect what type of device and browser is requesting content, and deliver
Mobile optimized markup to mobile devices,
Lightweight markup to modern browsers, and
Classic markup to older browsers that do not support the full HTML5 recommendation.
To configure the
RenderMode setting across the entire web application in
web.config, use the following entry in
<add key="Telerik.Web.UI.RenderMode" value="Auto"/>
On a page-level, you need to be able to choose the layout of your page, the positioning and rendering of the controls for various device sizes, and so on.
Telerik UI for ASP.NET AJAX provides the Page Layout Framework. It allows you to configure your layout server-side by using common device references when sizing the containers for your controls. The framework provides layout definitions such as
SpanForTablet with which define layouts that will properly fit on those devices.
Also, Telerik UI for ASP.NET AJAX provides the Device Detection Framework which allows you to detect and identify the exact size of the device that is requesting content from your web application.
The Telerik UI for ASP.NET AJAX suite comes with a set of themes that can be applied to every control. Some of these themes have been optimized for use on smaller devices with a "touch-first" philosophy for the controls.
If your project is being constructed with mobile considerations, it is recommended that you select the MetroTouch, BlackMetroTouch, Silk, or Glow theme.
To review the appearance of these themes for each control, select the skin on the top navbar next to the ask a question button on the demos website.