Intelligently Filling a Website to Screen Space with just CSS

Monday, May 9, 2011

I just read Jakob Nielsen's article on screen space, after spending some time recently on this very issue. I'm thrilled with the result I was able to achieve, and here's why.

Let me start by saying I vastly prefer liquid layouts whenever possible. The idea is that people can size their browser windows however they like, and the web page flows to fit. From small screens to large screens, and any variation of window size in between, the site remains visible without horizontal scrolling. The downsides to liquid layout are lack of control over line lengths (can make for more difficult reading) and in layout design.

Really Big, Really Small

These days, despite seeing more and more fixed-width sites, I see a greater need for very fluid sites. Not just fluid, but very fluid. Designs need to incorporate very small (i.e. phone) screen sizes, and very large (huge and/or multiple monitors) screens. In these extreme cases, a fixed-width site will make the user scroll horizontally (or zoom in and out, as the case may be) on the small end, or waste all sorts of space with a site in the middle of lots of empty area on the large end.

A normal fluid layout also has trouble in these cases. When things get really small, content either starts to get unuseably narrow or overlaps each other - also unuseable. When the page gets really wide, content can get stretched out so wide as to be unrecognizable and also difficult to read.

@media

Enter CSS media selectors. Media selectors allow the designer to target CSS rules for specific physical characteristics - regardless of what the browser or operating system actually is. These selectors are well-supported in modern browsers, and the base design will be used by old browsers that don't support the selectors. Ethan Marcotte wrote a great article on this subject over at A List Apart.

Normal

In my case, I have this site's "normal" design, as it currently stands. I have a header, a menu down the left, a center main content area, and more links in another section down the right side. The sidebars and header are positioned absolutely, and the main content has margins to fill up the remaining area. I use absolute positioning, so the source can provide the main content first, then the extra links. This order in the source really helps me out later on when I reflow the site!

The large image you seen in the center is set to a 100% width, so it'll scale as well as the page width varies. This helps the site shrink really well (up to a point), but doesn't really scale up, as the image quickly gets really large.

Here is the relevant portion of CSS:

	.menu { position:absolute; width:12%; padding:2px 10px; left:0px; top:53px;}
	.contentmain { margin:53px 22% 5px 14%;}
	.navLink { display:none;}
 

Small

Once the screen dimensions are small enough, the site changes layout. The sidebars "disappear" and the main content window has the entire browser width to display, which allows the site to shrink almost to nothing. I make this work by turning off the absolute positioning of the sidebars and removing the margins on the main content area. Since the source HTML content is provided in Main - Menu - Sidebar order, the sidebars move themselves down below the main content. However, since this is likely a small device like a phone, if there is any significant amount of content, those menus are a long way down the screen, with lots of scrolling necessary! Here I use another accepted standard, and provide a "navigation" link in the header for the user to jump to the menu links - but only in this narrow design.

Here's how it works; you'll see I've set the threshold arbitrarily at 640px:

@media screen and (max-width: 640px){
	.menu, contentSecondary { position:inherit; width:100%; padding:0px; margin:0px;}
	.contentmain { margin-left:0px; margin-right:0px;}
	.navLink { display:inherit}
}

Large

Now, let's go the other direction, and work with a really wide space. There are two things I need to fix going really wide. Since I've used percentages to define the sidebar content, they start looking unbalanced. As I said earlier, the second issue is that the main content stretches to an unwieldly width.

I've decided to set the sidebars to a fixed width, and flow the articles in the main content as floating fixed-width sections. This keeps the content readable, and takes great advantage of an extra wide screen. I've also chosen to start using em's as my units, to better handle DPI or user font size variations.

Here are the changes I make, once we go beyond 1280px:

@media screen and ( min-width: 1280px){
	.menu { width: 10em;}
	.contentSecondary { width: 16em;}
	.contentmain { margin-left:11em; margin-right:17em;}
	.newsday { width:23em; float:left;}
}

 Conclusion

By adding just a few simple lines of CSS and one new bit of HTML (the nav link), I was able to reflow my site without touching the HTML structure at all. This solution is browser-independent, doesn't use browser or mobile detection scripts, and works great! I'm thrilled with the result, and would love to to see this concept implemented on lots of sites I visit.

0 Comments