Yes! Ninety-five percent of Web design is typography. That’s why that other five percent — images and video — is so important. If your design goes screwy with images or video, it’s like a turd floating on the Web page. How can you read the text with that turd floating in the sidebar?!
Since I began working with the Thesis theme, one thing has bothered me: the scaling of images in an em-based design. Along with that, I have one other note about effectively displaying images in your Web designs.
Of course, Thesis isn’t the only theme scaling images in an em-based design, but I’m going to use this as an example. Actually, other than two minor issues, I’m a huge fan of Thesis. Hey, not everything is perfect.
Here’s the problem: if you’re working with an em-based design and you’ve got images that are supposed to 100% span a column or header, then you need to also scale those images with an em-based formula, otherwise the images won’t span 100%. There’s no way around it.
Let’s look at this example from the Copyblogger sidebar. The right hand sidebar includes some image links that are scaled to the width of the column using ems. The images are 260 pixels wide, as you can see with the image to the right.
But, look at the image to the left, which is from a screen grab of the site in default size on Safari for Mac OS X. (The same thing happens to a lesser degree using Firefox for Mac OS X.) See the difference? That’s what I see every time I go to Copyblogger. Notice the quality degradation of the image, how the edges are blurry? That’s what happens when images are scaled using ems (or any relative measure for that matter).
How did they scale those sidebar images? Using this rule in the CSS:
li.widget_premium a img {
display: block;
width: 26em;
height: 12.5em;
background: #d4d2c3;
}
Hey, it’s not my site. They can do what they want, but I think because most Web sites are typographically intense, images that are used should have pop.
What are some other options besides scaling images relationally? You can go with a fixed width layout, then using images that don’t need scaling isn’t a problem. You might also try creating images without scaling and centering them in the column. The only problem is that there might be a lot of space around the images because they aren’t filling the column. Other than that, do you know any other solutions that don’t require em-based image scaling?
Don’t scale images with HTML
I have one last similar note about using images in your Web designs.
Believe it or not, people still use HTML to scale images instead of using an image editing program. At least a half dozen times a week I see HTML scaling of images on Web sites, which then slows down entire pages from loading quickly. You’ve seen what I’m talking about: the page is completely loaded except for some images that seem to be churning away, loading slowly from top to bottom.
I did this on purpose with the image to the right, which is really 1024 pixels wide, though using HTML it’s scaled down to 206 pixels wide using width="206" in the <img> tag (right mouse click and “view image” to see what I mean). The image might look fine, but it’s slowing down this page when it loads. Also, sometimes the image might not look so fine if you haven’t figured out the correct height/width ratio before doing your HTML scaling.
Those are just two issues I see with using images in Web design. Do you have any others? Please leave them in the comments for everybody to learn from.
Photo by thebudman84 and republished here under a Creative Commons license.