Talking Point: EM-based grids and max-width
February 1, 2008 at 2:11 AM
Dan “Bulletproof” Cederholm launched a re-align of his blog and portfolio site, SimpleBits, this week — you can read his write-up here. It’s an elastic layout, meaning that the dimensions of the columns are specified in EMs and grow wider and narrower as the text is resized.
What is interesting is that Dan has not set a max-width on the site as a whole. Without max-width, an EM-based layout will simply keep on expanding as you bump up the text size — at /files/includes/10.css24×768, SimpleBits will display a horizontal scrollbar at just one notch above the /files/includes/default.css font-size (on my machine anyway, YMMV). Dan says, “That’s OK. Wide is the new drop shadow.” but what do you think?
Should an EM-based layout sacrifice positioning to avoid overflowing the browser viewport? Or should the grid be maintained at all costs? Comments are open.
When I kicked the text size up a notch at /files/includes/10.css24*768 I noticed that the only important thing that I lost in the viewport was half of the contact link. I’d like to see that stay in the viewport, but otherwise I say if you want to go elastic, go for it.
Artistically it works quite nice. Usability-wise you’re still asking the user to potentially scroll left to right in addition to up and down which is more work. So while wide may be the new drop shadow that doesn’t mean everybody will notice the content off the screen. For Dan’s audience it’s probably not an issue but anyone else considering this design choice may want to consider it.
Just a question of knowing your audience.
I think it works beautifully. I am fortunate enough to have a 24” Apple screen at work, and increasing the text size and the layout at the same time means I can fully take advantage of my sprawling screen estate.
A sightly different idea (which I have never seen done before but it must have because it is so simple) is what I call the scaleable layout. A layout where both the structure and text size are set in proportion to the screen size. Expand your browser window, and the site gets bigger, contract it and the site gets smaller.
A quick mok up of the concept can be seen at http://www.webalon.com/topgear/scaleable.php
OPen the page and then try resizing the browser window.
I’ve actually been using this in a website layout for quite sometime. A site I redesigned about 1 year ago (www.plagiarism.org) is all em base, even the flash (logo if you have flash, image if you don’t) sizes with the page. It’s a really neat effect because the whole page gets bigger/smaller with the text. However, since building this a year ago I have been doing some serious thinking about this approach.
My initial thought was that the whole page including graphics would enlarge making it highly accessible for those who have a hard time seeing smaller images and text, it appeared at first like the best thing to do.
However, this is not a matter of accessibility, it comes down to a matter of preference. The last year I have visited many blogs and news sites and have found myself increasing the font size often to read articles more easily. The truth is that in almost all cases I just need the text to enlarge but nothing else. In fact I’m happy that the navigation, and sub navigation column don’t suddenly increase and force me to side scroll. More recently I have gotten over the em layout effect and set my column width in pixels but my text with % based on the pages set font size. This allows users to increase the size of the text without increasing the width of the columns as well. Again does either way make the content inaccessible? Absolutely not.
The best way to use the great elastic effect is to use in on images when you suspect users may want them to scale with the text they are reading. But from my own experience, making everything elastic is overkill.
What bothers me, and I’m not sure wether this is a Safari bug or global, is that the background does not stretch fully, when content starts overlapping the browser window. It just stays as wide as the window is, even though the content is wider.
Dusan, that’s not a glitch. The thing about pure em layouts, is that background images don’t size relatively. Background images will always keep there actual size. So if you want the whole layout to expand with the text, you will need to place more actual images in the html so they scale along with the page. However, you can be creative about this and just give the background-color a color that will look good even if the background-image doesn’t expand. This is the approach I took for the navbar for plagiarism.org.