Resolution nightmare!

[LadyJane]

I'm new to web design so apologies in advance if this is a no brainer ...
basically I've got a macbook pro, and having finished my first website using adobe s/w, I checked it on a friend's pc, everything was ok in terms of image quality but the page appeared magnified and slightly distorted. I then checked it on a their mac and again it appeared larger/distorted.

Could it be the resolution? My laptop is 1440x900 and their's is working at 1024x680...if so...when I turn my laptop to 1024x680 it makes me feel a bit dizzy as it's out of focus and therefore not a longterm option!!

Please help me!

A distressed Lady Jane

[TheBearMay]

Resolution difference could definitely account for what you are seeing, but you might want to develop at the lower resolution, and see if it scales better to the higher, as I believe currently there will be more people at the lower end.

[LadyJane]

working out focus, surely other designers are using macbooks and don't have to flip between resolutions ?

[dtm32236]

The most widely used resolution is 1024x768, so I always make sure my pages look good with that res. Then, I make sure that it can scale down to 800x600 (if minor things break, i'm not too concerned because the number of people with 800x600 is low and decreasing). Then, make sure that you can scale up. But, in general, if it looks good at 1024x768 and 800x600, it should look good on larger res screens.

[LadyJane]

so how do i get around working without the resolution affecting my eyes as my laptop is only in focus when at 1440x900???

[felgall]

A lot of people these days use devices with resolutions below 400 as larger resolution screens are too big to fit in their pockets.

[dtm32236]

so how do i get around working without the resolution affecting my eyes as my laptop is only in focus when at 1440x900???

really?

well, the Firefox webdeveloper plugin allows for a quick resize, so you're able to see how the page will look at different resolutions. That just changes the size of the browser, but if you write valid code (http://validator.w3.org/) your page should be fine cross-res.

Then take notice of your site on different computers, and make mental note of any things that seem off.

Also, make sure you test with different browsers. I check all my pages with Firefox, IE6, IE7, and Safari.

[LadyJane]

thanks for the advice re-firefox plugin re-size page tool.

Still have the same problem though...the images are perfect on my screen at 1440x900 but look larger on other computers and looks distorted on my laptop at lower res...

I had a few errors in my code but none to do with the images, so can I discard the code influencing the size/distortion?

[dtm32236]

The way images look will usually have nothing to do with correct or incorrect coding. I didn't even think that resolution would have anything to do with it either though.

Have you defined the width and height of the image?

<img src="picture.jpg" alt="my image" width="xxx" height="xxx">

[LadyJane]

yip, all the images fit exactly their designated spaces on the page...

does the fact that 1440x900 have different proportions to 1024x768 have anything to do with it? I'm just wondering if I've touched something that is fixing the whole page and then getting distorted when opened in different resolution dimensions...a bit like if a photo 100x75 pixels was put into a box 100x85 pixels and stretched out to fill it.

[dtm32236]

If you defined the width and height of the image, it shouldn't stretch or distort at all. Are you sure the image is actually distorting (it could just be the fact that you're used to seeing it in a differently proportioned resolution).

I don't really know... I've never heard of that before.

You don't have a link to the page, do you?

[WebJoel]

You aren't by any chance declaring a percentage-based width on image WIDTH or HEIGHT are you? If say, the "header" or "banner" DIV is fluid (95%, auto;, etc) and the IMG in it is set to be "width:100%", if the "header" or "banner" is allowed to expand or contract, it takes the image with it...

Declaring the actual width/height of the image cures this.

Screen-resolution should not affect image clarity or quality. If it did and viewing upon a larger screen damages the image, -viewing upon a smaller-than-optimal viewscreen should improve the image... pretty sure that this is not the case. Compressed interpolation won't work that way... :o

[tracknut]

yip, all the images fit exactly their designated spaces on the page...

does the fact that 1440x900 have different proportions to 1024x768 have anything to do with it? I'm just wondering if I've touched something that is fixing the whole page and then getting distorted when opened in different resolution dimensions...a bit like if a photo 100x75 pixels was put into a box 100x85 pixels and stretched out to fill it.

I haven't even seen a Mac in over 10 years, but are you saying that your monitor will display either at 1440x900 or 1024x768 - and in both cases it will use the entire physical area of the screen? If so, then I agree completely, everything will be distorted in the 1024 setup. Your PPI (pixels per inch) would not be the same horizontally as it is vertically - an assumption all of us make when we put images on a site. Not only your web page, but all text displayed would be squashed, etc. Not sure why the OS would even give you that option.

If I've completely missed some Mac-specific issue here, my apologies :)

Dave

[LadyJane]

If you defined the width and height of the image, it shouldn't stretch or distort at all. Are you sure the image is actually distorting (it could just be the fact that you're used to seeing it in a differently proportioned resolution).

You don't have a link to the page, do you?

Hi there,

Wish the site was active, but afraid not yet...

What exactly do you mean by being used to seeing in a differently proportioned res?

The reason I ask, is I would naturally like to be view/create sites at the proportion that the majority of viewers use, so what can I do to alter this as the only res in my system preferences that I can view for more than 2 minutes without getting a headache is 1440x900?

In answer to anyone else that may be able to help, the images have all been set in pixels according to the size in which I created them - so no probs there.

Cheers

LJ

[WebJoel]

-Is there any possibilty that it isn't the fault of the images, but a setting on your computer that isn't right? I don't know about MACs, but on pc if you right-click the desktop and choose "settings", you can specify either 16-bit color, or 32-bit color. The latter, being the best of course.

And the images: were they made in PhotoShop as saved as "for the web'? Anyone more familiar with how photoshop saves images 'in web format'? That might be an issue and worthy of posting over on GRAPHICS or at least, -pointing some of the talent there, to this thread...

[tracknut]

Photoshop "save for web" strips out exif information and assumes greater jpeg compression. It doesn't make any changes that would affect the aspect ratio or make the user "dizzy" :)

I'm still waiting for the answer to my question, it would be quite telling as to what's going on.

Dave