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.

Page 2 (Continued from page 1)

Changing The Panel Widths

To change the percentages of each panel, simply delete the existing values and enter your desired values. For example, let's increase our Main Panel to 80% of screen width and decrease our Left Panel to 10% of screen width and our Right Panel to 10% of screen width. We have still used 100% of our screen width (80% + 10% = 10%), only the proportions of each panel have changed.

Here's how the code would look:

And here's how our website would look:

Example

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).

Changing The Panel Widths: A Final Point

A final point: XSite Pro uses a Left Panel Spacer (LEFT_PANEL_SPC) and a Right Panel Spacer (RIGHT_PANEL_SPC) for SEO purposes. When changing the percentage width of the Left Panel, make the Left Panel Spacer the same width. For example, if you had a Left Panel at 10% of screen width, make the Left Panel Spacer also equal to 10%.

The Right Panel's width should also be equal to the width of the Right Panel Spacer. For example, if you had a Right Panel at 20% of screen width, the Right Panel Spacer should be 20% of screen width as well. Have a look at the example below:

Test Your Site

Here's how to easily test how your site looks on different computers, without leaving the comfort of home. Right-click on your desktop and select "Properties". Select the "Settings" tab and use the slider to select either "800 x 600 pixels" or "1024 x 768 pixels". (These are the two most common types of computer screens). Press "OK" and view your website as it would look on that type of screen.  

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