Making a page look the same in any resolution

[gerrizzo]

Help fast please! I am new here!

I have had a client complain that the site I designed doesn't look the same on her laptop as it does on my computer or her other table top computer.

I told her it's the resolution of her laptop but she is still "miffed".

Is there a code that will resolve this?

Thanks so much...

[speed]

You can rebuild the site so that everything is proportional, a fluid design, e.g. www.cut4cloth.co.uk to do this you use percentages for the dimensions. The page will then grow and shrink to the size of the browser window (within limits).

The only thing that won't change size is images, although you can set their dimensions using percentages as the image is scaled it tends to look a little ugly.

Alternatively you can build the page to be narrower so that it fits within the dimensions of the laptop.

Seeing the site in question might help with ideas.

[gerrizzo]

Thank you for your quick reply.

I usually use percentages instead of pixels inside the tables, is that what you mean? I have used them for height, not for width (of the table).

Would doing that make the difference?

I am using Front Page. Thanks! :)

[speed]

Yes, use percentages for the widths then the page will scale to fit the browser.

[rocky1]

If you're using Front Page, one thing you want to be extremely careful of is resizing the tables in WYSIWYG view. Any time you grab the table border and rezise it, it will have a tendency to reset all of your dimensions to pixel based widths rather than percentage.

Likewise, you'll have to reset all table widths to effect this change as any width or combination of widths that exceed the maximum resolution width will cause you problems. i.e. If you have a table that consists of three columns, and you set the overall table width to 99% but leave the column widths at 300 pixels each, you'll have a 100 pixel side scroll in 800x600 resolution. Pixel width is absolute, no matter where it's found, and will override percentages in other settings. The same holds true in CSS layout also.

And, in both, one has to factor in all content across the page... borders, margins, image width, column width, etc. They all add up if comprised of pixel settings.

[hotwired]

Hi
I do something a little different with almost all my sites. First of all I use ALL .shtml extensions so I have a separate menu file, header and footer. THEN I have a javascript that detects browser resolution and uses one of TWO stylesheets I have. One for 800, one for 1024. THEN if I happen to have a banner type top that is all image and it needs to be a certain width for each resolution I make two of the banners, one say 930 pixels wide and one 800 plus wide and then have ANOTHER javascript that detects screen resolution and selects the proper pic. If I need different images for differnt resolutions on different parts of the site, I might specify that in the style sheet as a background image. I have all these files that I would gladly share with you if you email me at ken@centralmaineweb.com

[speed]

Originally Posted by hotwired

THEN I have a javascript that detects browser resolution and uses one of TWO stylesheets I have.

The danger with using JavaScript in this way, and I see it quite often on site I review, is that if the visitor has JavaScript disabled they can see the site completely unstyled, obviously this depends on the exact way you implement it but it is something you need to consider.

[hotwired]

Now I hadn't thought of that! I wonder if there's a "tag" that you can put in the head that inserts a default style sheet if they have javascript disabled??

[speed]

Style sheets inherit from each other therefore make the 800x600 the default hard coded one, then use JS to include the 1024x768 sheet after the hard coded one.

Then in the 1024x768 sheet just override the bits you need to.

[ukeyoc]

¿Something like this?

<style type="text/css" media="all">
@import "style_800.css";
</style>
<script type="text/JavaScript" language="JavaScript" src="catchresolution.js"></script>

[mtheory]

Design in Flash. You will not only have the advantage of site consistency at all resolutions but you will have the best cross-browser compatability.

The Flash player, in 98% of all PCs(more than java) becomes a "least common denominator" independant of browser discrepencies.

Combine that with the most progressive and proactive approach to future technology and end-user trends, Flash is a tough to beat.

[Weedy Lady]

This person says they are using Front Page. That usually means they don't know much about coding, or why would they use it????

Now you guys are advising using Flash, custom java scripts, and css.

What ever happened to the KISS method?

The advice to use percentages is the best if you don't know how to do the heavier coding stuff.

Also, do NOT use height designations in your <table.....> line. That does not validate. Use height designations in your <td......> line.

[DrTandem1]

Do not design a site completely in Flash. Flash was not meant to do this and it is difficult for search engines to index your content. Also, it requires a plug-in. Most have it, but not all.

On top of that, it requires that you purchase an expensive software and spend a lot of time learning how to use it.

In HTML just build your pages in tables with the width expressed as a percentage rather than a fixed dimension. The page will size itself to fit most resolutions.

You can also use a fixed width much like the news sites of CNN and Fox.

If you use CSS, you can also control the font sizes better.

[mtheory]

Originally Posted by DrTandem1

Do not design a site completely in Flash. Flash was not meant to do this and it is difficult for search engines to index your content. Also, it requires a plug-in. Most have it, but not all.

On top of that, it requires that you purchase an expensive software and spend a lot of time learning how to use it.

In HTML just build your pages in tables with the width expressed as a percentage rather than a fixed dimension. The page will size itself to fit most resolutions.

You can also use a fixed width much like the news sites of CNN and Fox.

If you use CSS, you can also control the font sizes better.

Your reasons for not designing in Flash are very rudimentary. It's like saying don't make your television show in color because it requires a color television and the process is more expensive or don't put your movies on DVD because everyone still uses VHS. Technology changes, you either embrace it or get left behind.

Flash is used on most of the big boys sites more and more. The demand for streaming media is going to make traditional brochure style websites obsolete. I choose Flash as a way of "future-proofing" a site.

The plugin issue? A 5-30 second one time installation is pretty painless considering the potential benefits of viewing such dynamic material.

The search engine dilema? Google readily reads and indexes Flash now and new search protocols (like XML site maps)are making it much easier to properly have your site indexed.

I've had Flash sites indexed and ranking well in less than a month on Google.

Sorry DrTandem, but were you the person that told us not to get windows 95 and stick with DOS

[DrTandem1]

Originally Posted by Mtheory

Your reasons for not designing in Flash are very rudimentary. It's like saying don't make your television show in color because it requires a color television and the process is more expensive or don't put your movies on DVD because everyone still uses VHS. Technology changes, you either embrace it or get left behind.

Flash is used on most of the big boys sites more and more. The demand for streaming media is going to make traditional brochure style websites obsolete. I choose Flash as a way of "future-proofing" a site.

The plugin issue? A 5-30 second one time installation is pretty painless considering the potential benefits of viewing such dynamic material.

The search engine dilema? Google readily reads and indexes Flash now and new search protocols (like XML site maps)are making it much easier to properly have your site indexed.

I've had Flash sites indexed and ranking well in less than a month on Google.

Sorry DrTandem, but were you the person that told us not to get windows 95 and stick with DOS

Actually, your analogy to color television is incorrect. The FCC mandated that (the then new)color broadcasts must still be viewable (in B&W) by people using black and white TVs.

Does that mean I am not for technological progress? Not at all. The person asking the original (and frequent) question simply wants to understand browser and resolution compatibility, not learn a new technology.

The reality is that Flash-only sites do not perform as well as more traditional sites. If you want evidence of this, please feel free to visit the creators of Flash at their site:

http://www.macromedia.com

You'll notice that their site is not anywhere close to 100% Flash driven.

When you state that Flash is used on most of the "big boy sites" you mislead the novice. The "big boy" sites are advertising much like a television commercial, but with some interactivity. However, people already know the "big boys," so they aren't hampered by Flash's inherent limitations.

A case in point would not be "big boys" that use the internet as a secondary marketing tool, but for sites such as Amazon.com that expect actual on-line sales.

Regarding the download of a plug-in: Virtually no one (average visitor) is willing to download anything to view a site.

Please, tell us all you know about Google. I'm sure we'll all be enthralled.

[pmhb]

I agree with DrTandem, an all Flash site can have a negative impact on viewers. Having said that, I have designed some sites doing just that because of certain (insisted) client requirements and only after they have been told the facts of life regarding Flash, SEO issues, updating complexities, etc.

My basic philosophy towards web site design is always to use the Lowest Common Denominator, that is the smallest common monitor size, resolution, connection speed as your benchmark. If it works on these, the laptops and bigger, faster set-ups will be a breeze. As a matter of course, you should always test your designs on different set-ups, browsers and platforms, you won't succeed on all but you must succeed on most and the most commonly used.

You need to diplomatically educate your client as to these issues, the web site is not for him but for, I assume, his clients & potential clients. I have made friends of many clients by showing them the down & dirty on web site issues, it makes for a way better relationship, and they tend to pay on time as well!

There ya go, my 2c worth, good luck.

pmhb

[Nox]

Originally Posted by pmhb

I agree with DrTandem, an all Flash site can have a negative impact on viewers. Having said that, I have designed some sites doing just that because of certain (insisted) client requirements and only after they have been told the facts of life regarding Flash, SEO issues, updating complexities, etc.

My basic philosophy towards web site design is always to use the Lowest Common Denominator, that is the smallest common monitor size, resolution, connection speed as your benchmark. If it works on these, the laptops and bigger, faster set-ups will be a breeze. As a matter of course, you should always test your designs on different set-ups, browsers and platforms, you won't succeed on all but you must succeed on most and the most commonly used.

You need to diplomatically educate your client as to these issues, the web site is not for him but for, I assume, his clients & potential clients. I have made friends of many clients by showing them the down & dirty on web site issues, it makes for a way better relationship, and they tend to pay on time as well!

There ya go, my 2c worth, good luck.

pmhb

This is my philosophy as well. And you can never go wrong with the KISS method which doesn't mean sacrificing creativity and design.

Balance and keeping yourself up to date in trends and new techniques is vital for a long term career. Learn how to choose and incorporate new things in a realistic, balanced manner and for the right reasons.

[bj]

The Flash player, in 98% of all PCs

Where did you come up with THAT statistic? The Macromedia site?

If you look at a site you know to be done in flash on EVERY computer you can possibly access (I've done this at all my friends' houses, at internet cafes, at hotels, etc.) you will find that number is a total fiction.

[khurramali]

I use Dreamweaver, you can try it out, it is a good program with lots of options

Use this table tag for example, using percentage instead of hard coding pixels helps.

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20%"></td>
    <td width="80%"></td>
  </tr>
</table>

[MarcieZoob]

I'm personally put off by "all Flash" sites, especially when I'm staring at a loading screen for however long. I know I have a need for speed, as do most surfers on the 'net.

Back to the original subject: use percentages like speed stated in his first post. The only tricky part is your body text - try to format that so it doesn't span a whole page, which is very hard to read for a web site visitor. That's where the 3-column format helps.