Responsive Web Design

In times when the sales of tablets and smartphones exceed the sales of desktop PCs, when people use all kinds of mobile devices to browse the web and are allowed to bring their own device to work, ASP.NET developers face the challenge of building web applications targeting all screen resolutions.

No surprise “responsive web design” has become such a buzzword—it’s what enables developers to build one website or app and deliver good user experience across all browsers and devices.

Percentage of People Accessing the Web From Mobile Devices
Percentage of People Accessing the Web From Mobile Devices Stats belong to eMarketer (January 2014)
Content is like water
Content is like water
“You put 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.“

The original illustration belongs to Stéphanie Walter

So what exactly constitutes a responsive web design?

The concept of responsive web design (RWD) suggests that the layout of the project needs to adapt to the media that renders it. The content of the application needs to be like water and make efficient use of the available space on the screen. Additionally, the content should be easily readable with appropriate font and image sizes.

Let’s take a look at what techniques you can use to achieve RWD.

Media Queries

Media queries are one of the cornerstones of Responsive Web Design. By adding some filter criteria around CSS definitions, we can control under which conditions those rules are applied to web pages. There are two places to define these criteria: using the media attribute of a link tag that references a CSS file or inline on a CSS file.

The inline definition of a CSS media query looks like a block of code, with a syntax similar to:

@media only screen and (max-width:400px) {
#navbar {
float: none;
width: 400px;

Anything inside of the @media block will only be formatted when the conditions defined next to the @media keyword are met by the browser. The same criteria can be used on the media attribute of a link tag, with syntax similar to the following:

<link href="css/phone.css" rel="stylesheet"
media="only screen and (max-width: 400px)">

The difference between these two techniques is that the browser may elect to skip loading a stylesheet referenced with a media attribute that it cannot satisfy. With inline media queries on a CSS stylesheet, the styles for all media types are always transmitted to the web site visitor.

For more information on media query support and features, the W3C has a great article that defines the media capabilities browsers should have.

Grid-Based Layouts

In CSS layouts, designers want to ensure that things line up appropriately in the browser. Columns of content should have a similar left or right boundary area. To assist in this standard definition of layout, many have embraced the concept of a 12-column grid layout.

The grid layout helps define the size of content on any screen and can be used to define layout on different screen sizes easily. The Bootstrap, Foundation, Telerik Page Layout and other frameworks provide various sizes for their grid columns based on the size of the browser.

By adding and removing CSS class assignments appropriately in the web pages, content can be moved, sized, and even hidden on various browser sizes. For more information about how to use grids effectively on your website, check out the the grid article in the Telerik documentation.

Grid-Based Layouts

Flexible Images

A common problem that occurs when mobile devices access websites is that images don’t fit on the screen appropriately. These images may be too small for the mobile device, or worse, too large and bleed off the side of the screen. In a worst-case scenario, some websites may display images so large that they don’t fit on the screen and cannot be accessed with pinch and zoom gestures. A solution that designers use to ensure that images fit on screen is called Flexible Images. On modern and mobile browsers, you can force images to fill their container appropriately by adding the following CSS to your pages:

Flexible Images
img { max-width: 100%; }

With this rule, images will not grow larger than their container. Conversely, you can add scroll-bars or crop those images that don’t fit on screen. Most browsers have very good proportional resizing capabilities, and images will be scaled and presented properly.

Others are trying interesting approaches with multiple sized images and some JavaScript to fetch, display and resize images appropriately. Check out this great article at the Filament Group about Context-Aware Image Sizing.

Showing and Hiding Content

Not all content is intended for all browsers.

Is your large 400-pixel-wide masthead image necessary on a phone? In responsive web design, this is the least technical design decision. What elements should appear on each of the page sizes? Not all devices need to display the entire website, nor should they. Don’t be afraid to add a link to the bottom of the page to allow your website visitors to turn off the media queries so they can see the full website.

@media only screen and (max-width: 400px) {
#reallyCoolMasthead { display: none; }


We reviewed a number of techniques to help you make your sites and apps responsive, but RWD is more than just a number of specific code snippets; it’s a way of thinking about how we build ASP.NET applications. Even more, it’s a way of predicting the future and thinking about flexibility, usability and spacing even for devices that are yet to be released.