Web Development



Web site relativity

By colinabent ·
Wonderin if I might be able to get a little help from you guys...

I've heard that to traverse various screen sizes and resolutions, it's best to design things from a 600*800 res then it can be veiwed in differently sized windows without scroll bars and the like. Is there a way to do this in reverse? Would I be able to, in essense, scale material on the website, such as images, relatively?


This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

Collapse -

you can, but

by Jaqui In reply to Web site relativity

it would really slow the website down.

exactly how depends on the server os, and tools installed on it.

a typical linux server will have the gd lib and php will work with it to manipulate the images to the size you specify in the script.
you just need o get the client screen resolution to know what size to go for.
that is the problem part, not all browsers will report client settings reliably, which screws the scaling.

Collapse -

Well,.... sorta.... kinda....

by ThumbsUp2 In reply to Web site relativity

From a design standpoint, you should plan for 800x600, the lowest common denominator, IF your target audience is likely to be using that resolution or a multiple of it. Even larger monitors set at 1280x1024 will scale properly. (On a personal note, I figure the wide screen people are on their own as far as web design. They bought the thing, they can deal with the empty space! )

As for images being scaled, it doesn't necessarily work that way. Some browsers, such as IE, will auto-resize images to fit the screen IF that option is turned on. Not all browsers do that. So, you need to use graphic sizes that are going to fit into your design at the lowest common denominator resolution you plan for. In addition, larger sized graphics CAN mean larger file sizes, so you have to take total download time into account too when designing your pages.

And, of course, there are tricks you can use to fool people into thinking they're looking at an image that scales but they're really looking at CSS and pieces of images.

When all is said and done, your page should look good no matter what screen is used to view it, so LOTS and LOTS of testing is in order before you release it.

Collapse -

You can cheat somewhat

by Slayer_ In reply to Web site relativity

By using tables and using percentages for your sizes.

So if you wanted too, say insure your banner was always accross the full width of the screen

< img src="image.jpg" width="100%" />

Would be an example. Width and Height properties work for almost all HTML tags. You can also use styles (CSS) to do the exact same thing to any element. CSS is actually the recommended way, but image stretching and such never really looks good, so I suggest you make something simple to try it out first.

Collapse -


by colinabent In reply to You can cheat somewhat

Thanks for the tips! The cheat of using styles and percentages was a thought that occurred, but I wasn't quite sure if that'd work. It's worth a shot!

Collapse -

Another trick...

by ThumbsUp2 In reply to Thanks!

In addition to tables and/or CSS, you can dice the picture up and use background color to make it look like the image stretches.

For example, if a banner has some white space in certain places and your background color on the web page is white, dice the picture and put it in a 3 cell table that stretches with the page, aligning the 3 parts of the image left, center and right in the table cells. Then when the page stretches and the table stretches with it, the image appears to get wider when in all actuality they're only seeing the white background of the web page showing through.

Related Discussions

Related Forums