That’s More Like It
December 14, 2005
Funny how a few days of a bare-bones web site will get one motivated. The design is back, and while it looks mostly the same, all of the underlying CSS has changed. With the assistance of Clagnut and Position is Everything’s The Search for the One True Layout I’ve gone full-steam with ems, a unit of measurement I have heretofore shunned as unreliable. While I still have some questions, I’ve read enough, and now understand enough, to embrace them wholeheartedly.
The benefit to you, my loyal reader, is that the site’s layout is now elastic, rather than fixed. My anal-retentive nature when it comes to typography still prevents me from embracing the liquid layout trend. I feel like ems and elastic layouts are a perfect compromise to the epic struggle of design integrity vs. user choice.
You should find, if you’re browsing with a semi-modern browser (Safari, Firefox, IE 6—yes, IE 6!) that you can use your browser’s text sizing controls to resize the whole layout. Go ahead; give it a shot. You may find a few bits of weirdness in the masthead while I fully wrap my brain around this new concept, but on the whole, you should find that the whole page sizes up or down pretty beautifully.
So, here we have it, the first major change to this site’s architecture since its first foray into standards-based design in early 2004. Here’s hoping that this much-improved method works for me equally as long.
Sweet.
Very attractive. I’m terribly jealous. =-)
At my day job, I worry about elastic/em layouts. I find that people who size their text up really big (because of macular degeneration or any number of other vision problems) also tend to run their monitors at really low resolutions in order to force Windows to scale up the size of their icons and whatnots. So sizing by ems just makes it so they do more horizontal scrolling and see less of the page at one time.
The last em-based design I tried bombed out under protests from one of our leaders that she couldn’t find the navigation. She was running 800×600 with her fonts scaled way up. I ended up switching back to pixels just so that she could see the whole page, even if it did look a little screwy.
Of course, none of that applies to your personal page. But have you any thoughts on the matter?
Good points.
This is pretty much what it’s all about for me. Because I know substantially less about this than a great number of people (a fact which I readily admit), like a child emulating his father, I watch what they do and see how they handle a situation I’m trying to figure out.
There’s a designer who I really think is fantastic. His personal site is fluid, and with a 1440×900 display, I keep my browser windows fairly wide. The measure of his article text usually seems a bit too long, but when sized up in Safari, it’s absolutely gorgeous. No matter how big you make the text, it sings.
This same designer created a fixed-width layout that looks sublime. When fonts are sized up substantially, on this site you end up with 4–6 words per line, making the rhythm of articles read not unlike Hop on Pop.
So what’s my point? That each method—fixed, liquid, and elastic—has flaws. With each project and the audience it brings, the designer and client have to decide which drawbacks they are willing to live with.
That is to say that I have no idea, I know nothing, and purely chose an elastic layout because it seemed right for me, as a designer who loves working with type. The sites I design in my day job, which are primarily for schools, are generally designed with the assumption that readability, at all costs, is the number one priority.
Great layout. I’m wondering if it would be possible to size images by ems. Assuming that by using the 67% trick from Clagnut, 1em = 10px, then an image that is say, 235 pixels wide could be set to 2.35em right? I’m just thinking out loud here, but I think that’d be cool, to keep inline article images resizing correctly, relative to text size. I of course haven’t bothered testing this theory.-
Looks absolutely fabulous! It’s subtle, excelent and fantasticly clear.
The way around this (and what I’d recommend to add to this site) is to add a max-width to the wrapper div. (of the content & side/navbar)
Well, what I wrote in my previous comment got me to thinking that I should actually put my theory to the test. And, whadda ya know, badda-bing, it works! Here’s a little demo page showing Em sizing for images…
http://sonspring.com/journal/em-image-sizing
Nice work with the ems-based photos, Nathan. Here’s looking forward to the day when we’ve got the bandwidth to really make use of it.
The max-width issue is really one of personal preference. While it would prevent horizontal scrolling from being an issue, it would also break the layout at very large sizes—the very thing I was going for.
I’m sure there’s plenty of designers and usability experts who would disagree with me here, but as pixel density continue to rise with the introduction of new hardware, those still stuck using anything less than 1024×768 are going to have to join their 640×480-lovin’ peers in accepting horizontal scrolling as a fact of life.
I agree. By my Mint stats, 1024×768 and 1280×1024 comprise nearly 70% of my site visitors. 800×600 makes up only 4%, and as of yet, I’ve not had a single visitor using 640×480.
I like the em-width images demo.
It’s too bad that we don’t have better resizing code in the browser.
As for stats: can Mint tell you what the width of the user’s browser window was? I know I never browse full screen…
You guys speak in big words that I don’t know.
MT – The Birthday Bash Trio Celebration (BBTC) is on! It will be during this time that our foray against one another with weapons of alcoholic liquids shall commence. When? Not sure. Where? Only the gods know the answer to that one. But get ready buddy…I’ve been laid up for a few weeks so I’ve gotten my weight up, its go time!
OSP, my old nemesis. How funny I should log on to see your comment, as I just returned from Whole Foods with a pack full of some hippie yuppie luxury bacon. The good stuff. As it was Whole Foods, it was all I could afford, so the next few days will see me subsisting solely off of Makers Mark and bacon. Not to make you jealous or anything.
I’m leaving on Friday to spend ten days in Alabama on a farm with my fat family and their southern fried everything. When I return, I will weigh 500 lbs and we shall drink car bombs and speak as men do. Stick that in your blackberry.
Yes. Speaking of Alabama. I’m waiting, and hot bacon’s not the only thing you’ll be sucking down this christmas. The blind boys of Alabama are wanting to make a very merry christmas for one talented young graphic designer. We’ll be Ho Ho Hoing under the mistle toe and drinking eggnog (the preferred nog) til we vomit on eachothers peacoats.