Thank you.

2 answers

Ktash 1851
3
points
This was chosen as the best answer

Don't do it

Seriously. It's at best a huge pain. But if you don't believe me, I'll show you. First off, the biggest issue is not going to be the scaling of images (we'll get to that) but rather rounding. To ensure compatability with IE 7 and below, you will always need to add up to no more than 99% of your total width, otherwise you'll get issues where IE 7 will round up, and content will jump lines (view in IE 7 or below).

Don't do it (using percentages)

What I really mean by don't do it, is that you are on a dangerous and headache filled path using percents. What you are talking about, from what I'm understanding of your post, is responsive web design, which is becoming very popular. Well, at least, that's what I think you should be referring to if you are not. If you are referring to a single page that always is percentage based, no matter the browser size, and therefore is the same size of elements across the board, I think you're in for some surprises when your first user at 800x600 (or more realistically 1024x768) tries to view your page. And your mobile users aren't even going to be able to see it (if you have any*).

On the other hand, a responsive webpage that handles the users browser window in a sensible way is a very big thing. There is a lot to learn about this, and I can't cover it all here, but Smashing Magazine has a great article detailing what responsive web design is and how to use it and is a good place to start looking for getting your site displaying in a sensible manner no matter what the users resolution is.

*Key point

If you insist on doing it...

If you really do insist on doing it, then I'm going to point you to an article (on responsive web design, actually) to help you with responsive images. @danwellman tweeted it a while back (totally a plug to follow him, he's got some great links). You should be able to use this to scale up your images to higher resolutions as the page grows.

Also, as a side note, the goal of moving to more vector based images that will scale properly is certainly a good one, and if that is honestly a somewhat easy solution, especially for cross browser canvas support (which in my experience it never is, but more power to you if it is for you), then you might want to check your code for compatibility with explorercanvas, which aims to add canvas support to IE 6 & 7 using their proprietary VML drawing tools.

Answered over 7 years ago by Ktash
1
point

The idea was to have the site look the same regardless of browser and/or resolution size;

That's not what responsive design is about, which is why you're probably struggling.

Responsive design is about changing your design for different browsers and different viewing sizes.

I'm beginning to think, also, that when taken to extremes, it's a bit of a fad.

Some smartphone users prefer to see the full size site and use tap and zoom.

So if you do go responsive, make sure you give the user a choice as well.

Answered over 7 years ago by Tony Crockford
  • Tony, are you able to delete comments made by spammers? And how many reputation points do you need to be able to do that? Abinadi Ayerdis over 7 years ago
  • Not sure how many points, you need, but I *can* delete spam answers... Tony Crockford over 7 years ago
  • @Abinadi Ayerdis, you can do that at 1000 pts. You can check the unofficial FAQ http://doctype.com/l9F And @Tony, I must have gone right over that line when reading. Yes, that would not be responsive design, you are correct. And I do think for some sites its a bit extreme, but I also feel that it has a lot of uses too. For example, when viewing a site from a smart phone, you may care about different information, so that may need to be brought to the front. Just a thought though, and not all sites will be this way. Ktash over 7 years ago
  • @Ktash, I agree, true responsive design has it's place - as with all design, design for the audience. If your audience is predominantly information seekers then paring down the site for mobile users makes great sense. If not, then the extra effort isn't useful and can irritate users on small screens that get a *different* website, when they wanted to see the whole thing. Tony Crockford over 7 years ago