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.
Respond.js uses JavaScript to provide basic media query support to browsers that don’t normally have it. It essentially takes the full styles that are wrapped in a media query and applies them as intended after the page has loaded. The advantage with Respond.js is that full featured browsers load a single stylesheet and aren’t really impacted, but the disadvantage for the less featured browsers is that the basic style loads initially, and then the full styles are applied only after the JavaScript loads and executes. This slows down the loading process, and it can also cause a jarring jump when the styles change.
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">
<![endif]-->
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.
One similar approach that loads multiple stylesheets is to use JavaScript and the Modernizr library to test and load full.css for browsers that don’t support media queries. This now gives the full layout to a wider range of browsers, but at the cost of performance, as the JavaScript needs to load and execute and then download the additional styles before the page can render.
There are a few other options involving CSS preprocessors, browser specific stylesheets, or other JavaScript solutions, but the general idea to force a layout is the same. There are no absolutes, and each situation deserves to have a tailored solution, but the decision process must start well before any code is ever written. Ultimately, there are a variety of technical implementations precisely because there are so many factors to consider. You’ll want to be sure to consider the target audience, any special circumstances, and which aspects of the layout, branding, and content are most important, ultimately deciding how your website should appear in a given situation, and not just which browser is being used.
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.
