Mobile websites require touch-friendly UI elements and a layout that arranges content to fit a mobile browser window. DevExpress ASP.NET controls and MVC extensions provide features that transform a standard control's UI into a mobile-optimized version on demand. These capabilities allow you to create a page layout that is tailored to desktop and mobile devices.
This topic provides basic information about mobile website development using DevExpress ASP.NET controls and consists of the following sections:
The following practices and concepts can help you develop mobile web applications:
A mobile-friendly layout should fit a page's content to the width of a browser's window that can have any size and orientation. This means layouts should be flexible and adapt content to different devices. Two general approaches are used to create these layouts:
Responsive web design - A common layout that resizes or reorders certain elements to fit the current window size.
Adaptive web design - Different page layouts that are displayed depending on the current window size.
You can create adaptive or responsive page layouts or combine them using DevExpress ASP.NET controls and MVC extensions.
A viewport is a web page's visible part within a browser. Some web pages do not fit a mobile browser's window, so it scales pages down to display them entirely within the viewport and enable end-users to scale up them. However, the mobile-friendly layouts are designed to display all content without scaling, so it is required to specify the viewport settings that prevent this.
You can configure the viewport using the meta tag that should be placed in the HTML document's head section. We recommend using the following viewport settings:
Media queries allow you to apply CSS styles depending on the viewport size. Use media queries to rearrange or display/hide elements when the viewport's width (or height) is more or less than a specified value.
The code below is a simple media query applied to the CSS class:
Most DevExpress ASP.NET Controls can be transformed to their mobile-friendly version by enabling built-in adaptivity modes. These modes make the control's UI (or its part) touch-friendly and rearrange the control's layout to fit the mobile browser window. In the following example, the Grid View control changes its UI when the browser's window becomes too narrow to display content in the default mode:
The DevExpress ASP.NET subscription includes additional tools and resources that can help you develop a mobile-friendly web application.
The DevExpress ASP.NET Template Gallery provides a Responsive Web Application project template that you can use to create responsive web applications. This project template is available for MVC and WebForms.