Background

It is common to find in articles that images can’t expand with your layout. Well, i want to prove that wrong - !?. Yea, don’t go looking at me like am bad, I’ll show you.

Fact

Before I show you, I want you to know that when you zoom your page (text size only), your layout, if properly designed, will expand or contract along with the text. But any image you have on the page will remain intact in size. This is because the unit of measurement for images is the pixel. Every image you put on a webpage is measured in pixel, by default.

Now, sit up

Ok, you got the pixel point. You insert your image either in CSS or in (X)HTML and you specify its dimensions in pixel(width=720px height=450px). Go to your page and zoom. What do you get?

Faithful User Agents

That is what to expect, the image stays fixed in pixels. This is because User Agents believe you know what you are doing when you specify dimension for elements in pixels - don’t you?

So, because of their faithfulness to you, user agents keep your pixels in place as you zoom the page - that is why have use other ‘em’ and ‘%’ if you want to be elastically laid out.

No Trick, Seriously

Yes you’re smart and you’ve figured it out. To make an image expand you specify its dimensions in ‘em’.

An ‘em’ is 16px, by default again. 720px in em will be 42em - divide by value(720px) by 16.

Now, the ‘em’ value is what you use in your dimensions not the ‘px’. It can come in your css file - which is what I recommend.

If you want the dimension to be fixed whatever image gets inserted into the page then you will have to use the !important directive immediately after specifying the width in your selector. Like this:

.expandable img {

width:42em!important;

height:28.125em!important;

}

ZOOM

Now zoom the page to different levels and what do you see? Its that simple it can come in anywhere with any image. But you should consider what is possible with your intended users and make the right decision about the flexibility of your image.

Some stay, some go

Alright, most of the time you won’t need to worry yourself about zoomability of your image, but sometimes its worth the effort - which is no effort at all.

Use it if you must, it makes everything work together. If you don’t need to waste your time on the conversion, just skid away.

Questions?

Clue

Andy Clarke was saying something about designing in the browser a couple of days back, it turns out he’s not the only one who has experienced the flexibility and power and speed and the other countless advantages of designing in the browser.

Being Candid

There are lots of designers out there who do the same, but he swallowed the pill and was candid enough to admit its advantages in a world where people believe you have to spend countless hours mocking up in a graphics application, and spend uncount hours making sure those pages look the same in the client(s)’s browser(s), while you get migraine from worrying about accessibility.

The Experience

I experienced firsthand today how designing in a browser could make prototyping and feedbacks highly interactive and very gainful.

It all happened because I know and learnt to use the right tool for browser based designing. Yes, you work smarter and better when you have the right tool (in your browser).

Choice Tools

The browser of choice, of course, is firefox (anyone from version 3 and above). And you need to have the right tools available too, and again the tool of choice is firebug (and there is more to it).

You can have live development with these tools and all you’ll end up doing is copying and pasting codes between your firebug and your editor of choice -you will need to define your style.

Get Started

If you have not started browser based designing, start today. I’ve been doing it from day one and its better than the alternative.

That’s my style. Join the lot.