Responsive Design for Endeca eBusiness Facets Blog

Endeca is a search and business intelligence company whose focus is business on the web. When they wanted a new blog< that would focus on trends and insights for eBusiness, the team at Oomph decided it was time to use CSS3’s @media declarations for responsive template designs to optimize the site for multiple mobile and desktop devices.

The result was a super flexible theme, built on WordPress, that scales according to the user’s device size. One set of templates displays content in a few different ways, optimized for the iPhone, Android, iPad and desktop monitors of all sizes. Visit the site, grab the window corner to resize it, and watch what happens. Just one catch: current versions of Internet Explorer don’t yet support CSS3 (version 9, which is right around the corner, does add support).

Endeca eBusiness Facets with responsive CSS design

For the developers out there, read on for a quick run down of what we did and how it works.

Media queries ask the browser what the dimensions of the viewport are so the designer can adjust the layout accordingly. They are supported in newer versions of Firefox, Safari, Chrome, Opera and Internet Explorer 9 Beta. They are not supported by older versions of Internet Explorer, but we make sure that the site degrades gracefully.

1. First, pick a default size.

The eBusiness blog was designed with a default width of 960 pixels. 960 allows us to have a standard width that will work for monitors and devices that support a width of 1024px and above. And since we pass these dimensions without using a media query, they become the default for browsers (like IE) that won’t support them.

2. Decide which other dimensions to support

From there we came up with some extra rules. We decided to support a few common widths and came up with dimensions accordingly – 800, since it is the next smaller resolution (as well as a common size for e-readers, like the Kindle); 768, since it is one of the dimensions of the iPad; and finally, 600, as it covers any smaller device like the iPhone or the portrait view of the Kindle.

3. Set the Viewport size in a Meta tag

There is one important step before we get to the media queries. We need a meta tag in the head of the document that will let mobile browsers know that we do not want them to try and display the webpage like a desktop (by scaling it). Below is the meta tag we use.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0;">

The meta tag basically tells the browser that the width of the document is the same as the width of the device, sets the initial scale to 100%, and then tells the browser not to let users zoom in more than 200%.

4. Set up your cascade of Media Queries

The queries themselves are pretty simple. First, it starts with the @media declaration. After that, we can pass it a number of media features, but width and height are the most widely supported. The values I use below are ranges, and this allows us to have the site resize itself in a liquid way when viewing it on a desktop. Open the site, grab the corner to resize the window, and see what I mean. If the dimensions were off by a pixel, the layout will snap back to the default 960.

For each different wrapper width we change some of the interior containers, move some positioned items, or remove floats from elements. Below are the media queries we used and just the wrapper widths:

/* Get rid of the Horizontal scroll bar for Media Query enabled browsers... but don't just use "@media all" – most still understand that. This is really just a aesthetic thing for people on the desktop playing with the size of the viewport. */
@media all and (min-width: 310px) { html { overflow-x: hidden; } }

/* Target a range that accommodates 800 x 600 */
@media all and (max-width: 990px) and (min-width: 820px) {
    #wrapper { width: 800px; }
    [ etc... ]
}

/* Target a range that accommodates 768 – portrait iPad */
@media all and (max-width: 819px) and (min-width: 766px) {
    #wrapper { width: 750px; }
    [ etc... ]
}

/* Target a range that accomodates 600  */
@media all and (max-width: 765px) and (min-width: 600px) {
    #wrapper {
        width: 600px;
        box-shadow: none; /* remove the drop shadow */
    }
    [ etc... ]
}

/* Now for anything smaller... remove all widths and floats and let things stack up. This covers iPhones either in portrait or landscape mode. */
@media all and (max-width: 599px) {
    #wrapper {
        width: auto;
        box-shadow: none;
    }
    [ etc... ]
}

To review the entire stylesheet, click here. The structure and media queries start on line 176.

5. One last thing… play nice with WinMobile

The major caveat with Media Queries right now is that Windows 7 phone browsers do not understand them. Luckily, there is an old stand by – the conditional comment – that can come to our rescue.

<!--[if IEMobile]>
    <link rel="stylesheet" type="text/css" media="all" href="http://ebusinessfacets.endeca.com/wp-content/themes/eBusiness/css/winMobile.css">
<![endif]-->

In the winmobile.css we simply repeat the styles used in the last (smallest screen) media query. Since only Windows mobile browsers will understand it, and we know they are small screens, the rules for a 600px width – which are liquid, remember – will apply nicely. If we wanted to try and pass specific widths to these smaller screens, then there might have been more of a problem to deal with.

And that’s it… your site is now responsive (and Progressive, with graceful degradation)!

To learn more, start here with Ethan Marcotte’s article for AListApart.com. For a rebuttal and some useful insight into what media queries should be used to do, read Jason Grigsby’s article at CloudFour.com. Jason’s article basically makes the case that for large, complicated websites with lots of media, a fully developed Mobile version of the website is a much better solution than just hiding some elements and moving things around in a layout.