At Diagram, we’ve written before about Progressive Enhancement and Graceful Degradation as techniques to ensure that users with less capable browsers can view content while providing a richer experience for those with more capable browsers. We’ve also talked about Responsive Design as a technique to enable the same website to be viewed in different ways on a wide range of devices.
Responsive Design mirrors Progressive Enhancement in that it starts from the smallest and most basic styles and builds up from there as you go. That is to say, the most basic layout and styles are applied to small mobile devices or browsers that don’t support media queries. Then, if the browser supports and satisfies the conditions of the media query (typically a page width greater than a predetermined size), the next layer of styles are applied, and so on. However, with this approach, less capable browsers that don’t support media queries will get the most basic layout and styles, even if they are desktop browsers.
Ideally, a truly Responsive Design should render all relevant content and have all of the essential functionality on even the most basic of browsers. In most cases, this is perfectly acceptable, but there are a few options available to force the “full desktop” layout in browsers that wouldn’t get it otherwise. As an example, let’s consider an Intranet site that is going to be primarily accessed from a locked-down corporate network where IE 7 is the only choice of browser, and we want to make sure the “full” layout will be forced to render.
First off, let’s assume that our site has only two different layouts, the most basic layout and the full layout. Normally, we would have one stylesheet with all of the full layout styles contained within a media query. However, if we want to force the full layout in some cases, we have to do things a little differently, and there are multiple techniques that can be used to force the “full” layout to render, each with its own advantages and disadvantages.
If we put all of our styles for the two layouts in their own stylesheets, basic.css and full.css, we can include them as needed. In the example scenario above, we want the full layout to render in IE 7 specifically. The easiest way to do that would be to include the stylesheets with media queries for full featured browsers to use, and then use conditional comments to load both stylesheets for IE 8 and earlier.
That would look like this:
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="screen and (min-width: 48em)" href="full.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="full.css">
The advantage of this method is that the full layout is rendered immediately for IE 7 as the two stylesheets are loaded natively. However, the disadvantage is that all browsers must now download multiple stylesheets, and each request will slow down the loading of the page, especially on mobile devices. Also, for browsers that don’t support media queries and aren’t targeted by the conditional comments, only the basic layout will render.
Do you have any questions about how to style your website to provide the best experience for your users? Please contact us to chat with a WSOL solutions engineer, and we can help you determine the best approach for your specific situation.