WebForms Mobile and Responsive Web Design Demo

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"
type="text/css" 
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.

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:


                            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; }
}

Conclusion

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.

UI for ASP.NET AJAX

Responsive Web Design

Percentage of People Accessing the Web From Mobile Devices

Content is like water

So what exactly constitutes a responsive web design?

Media Queries

Grid-Based Layouts

Flexible Images

Showing and Hiding Content

Conclusion