Philadelphia Standards Organization

Eric Meyer on EM-Based Layouts

December 5th, 2005 by Martin Lambert

Try this sometime: build a webpage, specifying all lengths in ems. All of them.

Getting the math right might take some work. But once you have the kinks worked out at the default font size, you’ll get to perform a fun party trick: when you zoom your text size up or down, the entire page will zoom with it. Widths and heights of boxes, foreground images, borders, everything. It’s akin to Opera’s page zoom.

Of course, browsers aren’t the best at zooming things like images. So maybe this isn’t a technique that works for image-heavy sites. On the other hand, background images don’t scale, so imagine a large background image centered in a (comparatively) small container, and then that container being able to grow to reveal more of the image.

This was the first ‘free-form’ presentation of the day, with no slides, just a demo and a bunch of questions from the audience. I believe it will be like this from here on out today, and this (they say) is what will make every Event Apart unique.

One Response to “Eric Meyer on EM-Based Layouts”

  1. Posted: December 5th, 2005 at 2:53 pm
    Matthom Says:

    Cool. I was waiting for a post on the "em based layouts" segment. Interesting ideas...

Leave a Comment

You must be logged in to post a comment.