Magnified Pages in Different resolutions

Different computers present the site in different sizes

[New_Alex]

I develop my webpages using Dreamweaver 4 but for some reason their size depends on the resolution of the Screen.

How can I make them look consistent in every PC?

For example this site:

www.microlabs.co.uk

was supposed to fit in one screen, but it fits only in screens where the resolution is 725x1024 or somthing.

Thanks
Alex

[Andrew Thomas]

A quick suggestion is to put everything into a table at 100%, this then resizes automatically to fit the screen..

[pat_s]

Dreamweaver is great, but you still have to make the decisions about how your page is put together. Right now, your table width is 880 pixels. Dreamweaver will assign a width if you let it, but it's not the best judge of these things. You can assign a percentage of the page, so that it will stretch and shrink depending on the resolution of the users screen or you can assign a number of pixels for a fixed width. Either solution has its up and downsides and it usually depends on the rest of the design of the page.

[chiyo]

the poblem with putting everything into one table is that it slows down loading. The browser has to read all before it starts rendering. Best to split the content into multiple tables following each other, but not nested. They will be the same width if you use the same atts eg: width=100%, width="750" etc.

Then again I guess if you are using Dreamweaver, you are using some advanced stuff like layers etc.. cant help there...

[Eric_Jarvis]

you CAN'T make a site appear consistent in all circumstances...display size, default font size, dpi, monitor gamma etc can, and will, vary...the web isn't print

it is like the difference between film and stage...you can exactly control a film...put actors live on a stage and it is out of your control...they are different media...so they are created in a different way

like a stage play a web page has a narrative structure...the content...it must all be held together by that...after that is there you can build some broad brush stroke design, colours and the like...but only at the end can you begin to deal with anything detailed and you have to leave room for that detail to "breathe"

[New_Alex]

PLease people. This couldn't be possible. I mean there are so many different Screen resolutions out there!!!
It should be a consistent way to show all these people the same think!!

What about resolutions that reach up to 2000x... pixels compare to 600x....???

Alex.

[rcjordan]

>couldn't be

Welcome to your latest webmare Alex... Now here's a real chiller; you know a 120x60 graphic looks pretty good on a 800x600, right? Jack the resolution up to 1200 and take a look. Not good. Run a real estate site? Think about having what you thought was detailed jpg of a property scaled down to the size of a thumbnail. Not much discernable other than the outline of the roof. Definitely not good.

(edited by: rcjordan at 10:45 pm (utc) on Mar. 12, 2002)

[pageoneresults]

Best to split the content into multiple tables following each other, but not nested.

Hey chiyo, I had some problems with the above mentioned technique and I believe they were in NN4.7. Anything that was not within the encompassing table ended up splitting unusally down the page. I mean, there were unusual gaps between each table. And NN4.7 was the only browser that I saw this problem in. From that point forward, I've always used one encompassing table and then worked the design within that table.

[New_Alex]

Thanks very much for your replies people, they are really appreciable, and useful for someone so desperate to learn like me. But I still can't believe that it is impossible to resize a picture to fit the pixels of a given screen even if there is a loss of the picture's quality.

Obvioulsy tables don't resize the pictures.

[IanTurner]

You can use javascript to identify height and width in pixcels of the browser window.

Use a redirect to pass the size as a parameter to a server side procesing (asp/php) page which can set image sizes at run time.

[Marcia]

Alex, to keep life easy for yourself if you're just learning, the pictures are most easily resized in a graphics program - which would not be a bad idea anyway to allow for smaller screen resolutions. Besides the JS solution there are server-side scripts that dynamically resize graphics, but especially if you're starting out it's best to keep it as simple as possible, just like you're doing.

There's a free utility called Browsersizer that can show how web pages will look in a few browsers at different resolutions, including Web-TV, without having to make any monitor adjustments. You might want to check it out.

Some pages still look good designed for 640x480 resolution, but the most common is still 800x600 and if you're having a problem with a percentage layout, then do it fixed either for 640x480 or 800x600 - probably better. Better too much white space on the sides than a lot of scrolling sideways.

Another couple of things: in addition to re-sizing the graphics down a bit for a slightly different proportion design-wise, you've now got text incorporated into the graphics. For search engines, you'll want to have HTML text on the pages, so it would be a good idea to make a second test graphic and do a sample page with HTML text. You might want to modify the design just slightly for that reason. Design is never set in stone, little changes are alway necessary.

Also, when you have a graphic with a color that needs to match the page background, open it up your graphics program and make a 50x50 plain background tile the same color to use as background on the pages, saved at the same resolution and compression. Then it's seamless and invisible.

[rcjordan]

>impossible

Not impossible, just not often done. For my own project, I'd already worked out css stylesheet swapping based on 800x600 resolution being the target. My stylesheet increases the font size for 1024 and higher res. I was planning to do the same for the pictures, so I went ahead and coded it. Both are in the handy javascript thread [webmasterworld.com].