EM and EMs

Gunther P., who got me going on the NN4/IE4 3-column support on skidoo, has brought up an interesting point that I wanted to toss out for your consumption.

The left and right columns in the skidoo layout have their widths defined in pixels. Gunther suggests defining them in EMs. That way, as the user alters the base font size, the columns would increase (or decrease) in width as well. (1em = the width of the letter ‘m’ of the currect character set… this ties anything sized in ems to the base font size of the layout.)

I can see some big pluses with this, most notably being on users on hand-held devices which have a very small base-font size. A 200px wide box might be the width of the entire screen on a PDA. If set at, say, 16em, then perhaps that box takes up only a small portion of the screen size, and the layout scales better.

This approach also solves the IE issue brought up by another person in which long words in the left-hand column can cause layout breaks in IE if the base font size is set to larger or largest.

The only downside I can see right now is that users who have a large base font size, and are using a small screen resolution (think 640×480 or even 320×200) may wind up in a position where the left-hand column is wider than the width of the screen. In a different layout this would be fine because the content column would just wrap below the left-hand nav area. With skidoo you have the area for the left-hand column space reserved via a border (or margin) that spans the full height of the content columns. The result is that the main (and right hand) columns would appear offscreen. The user would either have to horizontally scroll to see the content, or the content may be completely unavailable.

I dunno. There are so many extremes one can find to break any layout. At what point do you allow yourself to ignore them?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s