Thankfully, it’s fixable.īut first, the bad news: as far as I can tell, we have to write off Firefox 2 and below. Specifically, if you’re on any version of Internet Explorer (prior to version IE8) or on a version of Firefox older than 3.0 on Windows, things look decidedly janky: the text gets painfully artifacted as the image resizes, beyond the point of maintaining any semblance of legibility.
#SEMPLICE FLUID IMAGE WINDOWS#
The challenging bit is that this isn’t a browser-specific problem, but a platform-specific one: native image scaling on Windows just, well, kind of sucks.
If you’ve been looking at the little test case on Windows, there’s a good chance that the image quality, well, looks awful as it scales down. In Which a Particular Platform Causes Issues, and While I Don’t Want to Call Anybody Out or Anything, Its Name Rhymes With “Blindows” Hooray, right?Īs it turns out, not quite. With that, the larger issue was basically sorted: namely, that a non-fixed page’s layout won’t break if images or stupid Youtube movies were dropped into the markup. So for especially large images, I’ve been relying on a simple width: 100% rule in an IE-specific stylesheet, like so: As you may well know, older versions of Internet Explorer would rather smear poo in their hair than render a proper stylesheet don’t support max-width. So while this is shaping up nicely, we’re not quite done. Try resizing your browser window-looks great, right? Modern browsers are intelligent enough to keep the image’s proportions intact, even as the page scales up or down accordingly.Īnd as it turns out, this works just fine for most embedded videos, too:
Here’s a quick test case I tossed together, using the text from one of my old blog entries as the image. Instead of just rendering at its native width and overflowing its containing box, the image would render at its native dimensions as long as its width didn’t exceed the width of its container. Ultimately, I decided to use the approach from his third example, which was to set a max-width of 100% on all images on my website:
#SEMPLICE FLUID IMAGE SERIES#
His 62.5% technique was one I used for ages, and his work on sizing em-based text really provided the inspiration for cracking the whole “fluid grid” problem.Ī few years back, Richard published a brilliant series of experiments with max-width and images, which I pored over when I was first working on this blog. Since I started mucking around with this whole “stylesheets” thing, Richard Rutter has been one of those CSS giants on whose shoulders I frequently stand. What’s a designer to do? In Which “Looking Across the Pond for Help” Is a Pretty Decent Answer, As It Turns Out
By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. As a result, they all more or less ignored the issue I raised at the end of the essay: that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them.
One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. But that doesn’t mean you stop thinking about the article, what you could’ve done differently, and what you wished you’d included. At some point, you just accept what’s on the page, tousle its hair a bit, and send it off into the world at large to be judged, poked, and prodded. Hitting “print,” sending an email, pressing that “Publish” button on the CMS: at some point, you relinquish your ability to smooth down some of the sharper edges, fill in the holes of your argument, and just generally fix whatever’s broken. (Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.)
0 kommentar(er)
