How To Make Your Site Look Good On Any Screen

UPDATE: The tips and tricks on this are to do with XSite Pro Version 1 only. Click here for news on XSite Pro Version 2.

Sometimes I wish websites were a little more like TV. This is because TV shows will show up properly, no matter if they're on an old TV or a new TV. Websites, however, can be a different story. You can have a website that looks great on a new monitor, but terrible on an old one. Let's take a look:

New screen		Old screen
"The Age" website on a new screen (1024 x 768 pixels). All content is visible on screen.		The same site on an old screen (800 x 600 pixels). The content on the right is not all visible. A horizontal scroll bar has to be used to get to the content.

Look and see how there is part of the content missing on the older monitor (the one on the left). You have to scroll across with the horizontal scroll bar to see it all.

So what's a better solution? Let's take a look: 

New screen		Old screen
The "XSite Pro" website on a new screen (1024 x 768 pixels).		The same site on an old screen (800 x 600 pixels).

All the content is visible on both screens. However, on the new screen, there are two margins that take up the extra space in a nice-looking way.

This is a good method, make no mistake about it. If you want to use it on your sites, set the total width of the Main Panel + Left Panel + Right Panel to 785 pixels (eg Main Panel = 585, Left Panel = 100, Right Panel = 100. Total = 785).

The reason we use 785 pixels and not 800 is because the vertical scroll bar and other borders in Internet Explorer take up 15 pixels on their own. So you are left with 785 pixels of usable space on older monitors. Choose a nice color for the margins in the Page Layout Tab and you are done!

However, many people on the XSite Pro forums want to make their websites look the same on any screen - without even the blue margins you saw earlier on the XSite Pro site. They want their sites to stretch to fit the screen used - just like Wheel Of Fortune did in the old days of TV.

Here's how you do that:

Copy and paste this code into the "Head" area of the "Scripts" section in the "Other" tab.

<style> TABLE.XSP_OUTLINE{HEIGHT: 100%;WIDTH: 100%;} TD.XSP_CENTER_PANEL{HEIGHT: 100%; WIDTH: 70%;} TD.XSP_LEFT_PANEL{HEIGHT: 100%; WIDTH: 15%;} TD.XSP_RIGHT_PANEL{HEIGHT: 100%; WIDTH: 15%;} TD.XSP_LEFT_PANEL_SPC{HEIGHT: 1px; WIDTH: 15%;} TD.XSP_RIGHT_PANEL_SPC{HEIGHT: 1px; WIDTH: 15%;} </style>

It should look like this:

Here's how it looks:

New screen		Old screen
The "Antique Bluegrass Harmonicas" website on a new screen (1024 x 768 pixels).		The same site on an old screen (800 x 600 pixels).

This code will override the widths you have specified for the Main Panel and the Left and Right Panels in the Page Layout Tab.

You'll get a website where the Main Panel is 70% of the width of the screen, and the Left Panel and Right Panel are both 15% of the width of the screen. (70% screen width for the Main Panel + 15% screen width for the Left Panel + 15% screen width for the Right Panel = 100% screen width).

Continued on page 2

The script in this article was originally posted by Hadrian from the XSite Pro Forum.

Click here to learn more about XSite Pro and what it can do for your business.