Responsiveness
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.
Responsive web design targets
Recommendations
To empower your web visitors with responsive capabilities in your web project, it is recommended that you consider the ViewPort
and RenderMode
configuration settings.
Setting the ViewPort
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 max-width
CSS @media
queries which are often used to create responsive design.
Setting the RenderMode
When the 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.
When 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 AppSettings
:
<add key="Telerik.Web.UI.RenderMode" value="Auto"/>
For more information, refer to the article on controlling the render modes. For a list with the controls and the render modes they offer, refer to the list with render modes.
Page-Level Considerations
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 SpanForMobile
or 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.
Appearance and Theming
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.