Make Web Page Fit All Screen Sizes / Resolutions

[Griffin54]

Greetings!

I have recently uploaded my web pages to a server and have been testing it in different screen sizes and resolutions. My web pages look good until I download to smaller resolutions such as 800 x 600, 640 x 480 and 240 x 320. Although, I haven't tested for these yet I also wonder how my web site would download on small portable hand-held devices.

To test my web pages I have tried changing the code of the body, experimenting with width, margin, padding, etc to no avail.

Can anyone tell me what code I should be using to make my web page scalable to all resolutions? I have gone online looking for ideas but haven't had any luck.

If anyone wants to help out with this you can take a look at my web site by going to: http://www.learnanddobooks.com

Looking forward to your ideas and input.

Thanks.

[Kraai]

Hi

To make your site scalable in all resolutions or screen size/browser sizes, make sure you define the width as 100% and not px in your css file or if you use tables, in your tables. Also remember, You may also want to be careful when dealing with images in fluid layouts. The images will not scale with the surrounding content and therefore care must be taken to minimize the size of the image.

I had a quick peek at your site, and noticed that the main content is set as an image. This will cause some seo problems, as the crawlers from search engines cannot read the content text on an image, they only read the image. Visual impared persons using screenreaders will also not be able to read those text on the images. The only time that it will be readable to robots and screenreaders, is in the cases where you used the main content image as a background, and placed link buttons and text over it. Your "about us" page is a good example of nothing to read by search engines.

[Griffin54]

Thanks, Kraai, for the excellent feedback. Much appreciated.

In your response you write, "You may also want to be careful when dealing with images in fluid layouts. The images will not scale with the surrounding content and therefore care must be taken to minimize the size of the image."

What do you suggest as a good way to scale the image with the surrounding content?

Thanks again.

[Kraai]

Different things work with different browsers to get images to be fluid as well, and it is always a problem to get images scaled correctly in fluid layout.

1. img {
   2.      max-width: 100%;
   3. }

or

1. img {
   2.      width: 100%;
   3. }

Above might work in most newer version browsers, but I found this interesting article with a suggested code that might work for your images. Please note, that I myself did not test anything as suggested in this article. See here: http://unstoppablerobotninja.com/entry/fluid-images/

[LutherVespers]

I tried this out in Firefox on my desktop as well as on my iPhone. The phone browser scaled it just fine, so it looked pretty much the same both on the desktop and hand held.

One thing I noticed on both devices is the large amount of empty space to the right of the content. There's a horizontal scroll bar, but it doesn't scroll to any content.

[Griffin54]

Thanks, Luther, this was good to hear especially since I don't have an iPhone to test with.

[afam4eva]

I once had the same problem so i had to switch from using pixels to percent.

[Griffin54]

Afam4eva - when you say that you had to switch from using pixels to percent do you mean that you changed all "px" in both the head and body of your code to "%" ??

For example, in the head of my document I have the following:

body { margin: 0px; padding: 0px; width: 100%; }
img { width: 100%; }

Then, as an example, in the body of my document I have the following:

<civ style="width: 1024px; etc. etc. etc.

Should I now be changing the "width" in the body to a "%" value as well?

Thanks :)

[joy remu]

ya just use percentage for main body it contain all menu,content,footer