If you are developing a web site, one question that is very prevalent in today is, "Is it Responsive?" Pretty much any web developer you ask would rate this as a top priority when developing a modern web site. So what is responsive anyway?
Well it turns out that the meaning is pretty simple. A Responsive Web Page/app is one which has the capability to adapt itself to the client device. When I say client device, I am talking about the three main screens or form factors we know: the desktop browser; the mobile browser; and the tablet browser.
First question about being responsive is how we do it. Well there are two primary ways you can make an element on a web page responsive: resize the content placeholder or hide it. For example, assume a layout with a header, content, two sidebars and a footer. It might make sense to show all these parts when viewed on a desktop browser, but on a mobile or tablet browser, you may hide the sidebars and resize the content. Typically, this is done on the client side using CSS Media Queries to alter the vidual display properties of HTML elements.
Most of the CSS frameworks that are there work on the concept of hiding the content. But it is important to emphasize that you push everything irrespective of the device - the content of the page is sent in full and the portions are hidden on the client.
What’s the problem you ask? Well we are unnecessarily pushing down content to a mobile browser that will eventually be hidden, meaning we are forcing users to download bytes that they will likely never need.
So why send the content in the first place? If we send only that portion of the content which will eventually be shown on the browser, we can cut down on the bandwidth that will be used to load the content on the mobile device or the tablet device.
While there is no control in the vanilla ASP.NET AJAX controls toolkit, as part of our "UI for ASP.NET AJAX" product line, Telerik has released a brand new control called RadPageLayout that is designed to help you achieve the server-side responsive web pages with ease.
Let's take a closer look at this control.
RadPageLayout is a simple and lightweight server-side control that can help you create a page layout based upon an intuitive grid system. Since this is a server side control, we can configure the page layout completely on the server unlike other layout systems like Bootstrap which do it on the client side.
The grid system has only two elements: rows and columns. Rows are containers for columns and columns are containers for the content to be shown.
Let’s take a look a RadPageLayout in action. Here is a code snippet to create a simple layout:
<telerik:RadPageLayout runat="server" GridType="Fluid">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="8" >
<div class="col">
Main Content
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" >
<div class="col">
Side Bar 1
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2">
<div class="col">
Side Bar 2
</div>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
The created layout would look like the screenshot below:
The RadPageLayout control is basically composed of 3 things: a container, rows and columns. Let’s take a look at each one of them closely.
This is the outermost element that the page layout control will be rendered within. By default this is rendered as HTML div
element. The properties supported by the container are as follows:
GridType
- This is the layout type being either Static
, Fixed
or Fluid
.ShowGrid
- This property is used to display or hide visual grid guides.Below is the mark up with all the properties set on the container:
<telerik:RadPageLayout ID="RadPageLayout1" runat="server"
ShowGrid="true"
GridType="Fluid">
</telerik:RadPageLayout>
As mentioned earlier, Rows
are simple containers for columns and each row is represented by the LayoutRow
object within the markup. Here is a code snippet that shows the usage of rows:
<telerik:RadPageLayout ID="RadPageLayout1" runat="server" GridType="Fluid">
<Rows>
<telerik:LayoutRow>
<Content>
<div class="header">Header</div>
</Content>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
A Column is a structural unit of the layout design and where you will show your content that needs to be rendered. Each column is represented as a LayoutColumn
within the markup, which is analogous to a table cell in the HTML world. Here is a code snippet which shows the usage:
<telerik:RadPageLayout ID="RadPageLayout2" runat="server">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="8">
Main content here
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
Sidebar here
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
The RadPageLayout control, having being modelled around the grid-based layout system, supports three layout types:
RadPageLayout being a server side control give you one great flexibility feature: we can actually control the content we intend to send to client based on things like the screen size. If we see that a request came from a small screen size (i.e. less than 600 pixels), we can hide the sidebars and send only the main content.
In order to detect the screen size, we use a framework called the Device Detection Framework (DDF). DDF is part of the "UI for ASP.NET AJAX" product suite, which includes a Device Detection Framework API. The DDF API can inform you of the screen size of the user making the request. Out of the box, DDF includes a set of default screen sizes:
The following code snippet illustrates how to hide content by making use of Device Detection Framework:
protected void Page_Load(object sender, EventArgs e)
{
DeviceScreenSize screenSize = Detector.GetScreenSize(Request.UserAgent);
if (screenSize == DeviceScreenSize.Small)
{
//Hide Sidebar if it is a mobile device
SideBar1.Visible = false;
SideBar2.Visible = false;
}
}
You can read more on Device Detection Framework here.
Modern web sites must be consider responsive design, but, as we've discussed, some techniques for responsive design overload the user with content that they will never see. However, through the usage of RadPageLayout, you can quickly create a responsive layout for your WebForms without any hassle and with only simple steps. Since it is a service side control, you can program against it on the server side before response is sent to the client. RadPageLayout coupled with the Device Detection Framework will help you reduce your bandwidth while serving a mobile browser.