Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
Page Design Width
A common question for newbies is, what page-size should I design my site for? Arising from this question there are a few other considerations that I'll cover here:
Screen Resolution -- how much can I display on my screen?
Target Resolution -- how much can your visitor display on their screen?
Horizontal Page Centering -- easy to do and gives nice results
Editor Work Space Size -- setting the width and height of your workpage
Huge page -- I didn't do that!! -- why does my page scroll a long way?
My suggestion on page design width
I suggest use 800x600 -- the default setting. That is in pixels. 800 pixels wide by 600 pixels high. The width is important. Height doesn't matter, but will often be more than the default 600px high.
Then horizontally center your pages -- Page Editor > Special Effects tab.
Why this fairly low width setting? To explain, let's start by looking at screen resolution.
Screen Resolution -- how much can I display on my screen?
Target Resolution -- how much can your visitor display on their screen?
Horizontal Page Centering -- easy to do and gives nice results
Editor Work Space Size -- setting the width and height of your workpage
Huge page -- I didn't do that!! -- why does my page scroll a long way?
My suggestion on page design width
I suggest use 800x600 -- the default setting. That is in pixels. 800 pixels wide by 600 pixels high. The width is important. Height doesn't matter, but will often be more than the default 600px high.
Then horizontally center your pages -- Page Editor > Special Effects tab.
Why this fairly low width setting? To explain, let's start by looking at screen resolution.
Screen Resolution
If you right-click your Windows desktop, then click 'Properties', you should see a Settings tab, and that shows the screen resolution you currently have set. Similar to the image just above. That's very much determined by how modern your computer is, what video card it has installed, and how good your screen (and eyesight!) is. You can change it (on the slider in this case) to suit what you like -- a lower resolution setting means a bigger picture on your screen.
Better screens with more display area will do a better job of handling the higher resolutions. So if you have a good screen -- and good eyesight -- you can set a higher resolution. That gives a smaller picture on your screen, but more of it.
Many users do not have good screen so tend to run 800x600. Higher resolutions are too fuzzy for them. There are not many users running 640x480 nowadays so we don't worry about them.
A common setting is 1024x768, the one I am using.
Target Resolution
Screen resolution is the total screen space you have available in pixels. Your visitor will have a screen resolution set, just as you have. His or her screen resolution is your target resolution.
If you look in Options > Project Options, you will see several choices for Target Resolution. By strange co-incidence, an image of this option is just below
If you right-click your Windows desktop, then click 'Properties', you should see a Settings tab, and that shows the screen resolution you currently have set. Similar to the image just above. That's very much determined by how modern your computer is, what video card it has installed, and how good your screen (and eyesight!) is. You can change it (on the slider in this case) to suit what you like -- a lower resolution setting means a bigger picture on your screen.
Better screens with more display area will do a better job of handling the higher resolutions. So if you have a good screen -- and good eyesight -- you can set a higher resolution. That gives a smaller picture on your screen, but more of it.
Many users do not have good screen so tend to run 800x600. Higher resolutions are too fuzzy for them. There are not many users running 640x480 nowadays so we don't worry about them.
A common setting is 1024x768, the one I am using. Target Resolution
Screen resolution is the total screen space you have available in pixels. Your visitor will have a screen resolution set, just as you have. His or her screen resolution is your target resolution.
If you look in Options > Project Options, you will see several choices for Target Resolution. By strange co-incidence, an image of this option is just below
If you create a web-page that is bigger than your visitor's screen resolution, (in terms of pixels) their browser will put scroll bars on the browser window, both horizontal and vertical, if required.
The width of your final web-page is determined by where you place objects on your workpage. In particular, if you place something 1000 pixels from the left margin, you will see a horizontal scroll bar when you view that finished page at 800x600. As will your visitor.
You might look at your site statistics and see that most of your visitors are 1024x768, so you might be tempted to use that. But not so fast! Are your visitors browsing full screen or at somewhat less than full screen? I am in the latter category, so even though my screen resolution is 1024x768, I am quite happy to view an 800x600 page -- in fact it nicely fits the window I normally use.
Even at 800x600, I think it a good idea to keep inside the 800 by 50 to 100px on each side. The reason is that a window in an 800 screen actually has somewhat less than 800 actual width. There are the window borders, the space for the vertical scroll bar, any windows docked to the left-hand side of the browser window (like favorites) and even the Window task bar (the one with the start button). Even though the default is for it to be along the bottom of the screen, you can drag it to place it up the edge of the screen.
So I suggest even if you conclude that your visitors are mostly using greater than 800x600, that is still a good resolution to use.
The width of your final web-page is determined by where you place objects on your workpage. In particular, if you place something 1000 pixels from the left margin, you will see a horizontal scroll bar when you view that finished page at 800x600. As will your visitor.
You might look at your site statistics and see that most of your visitors are 1024x768, so you might be tempted to use that. But not so fast! Are your visitors browsing full screen or at somewhat less than full screen? I am in the latter category, so even though my screen resolution is 1024x768, I am quite happy to view an 800x600 page -- in fact it nicely fits the window I normally use.
Even at 800x600, I think it a good idea to keep inside the 800 by 50 to 100px on each side. The reason is that a window in an 800 screen actually has somewhat less than 800 actual width. There are the window borders, the space for the vertical scroll bar, any windows docked to the left-hand side of the browser window (like favorites) and even the Window task bar (the one with the start button). Even though the default is for it to be along the bottom of the screen, you can drag it to place it up the edge of the screen.
So I suggest even if you conclude that your visitors are mostly using greater than 800x600, that is still a good resolution to use.
Horizontal Page Centering
Your page measurements are in pixels (dots on the screen). So if you set a target resolution of 1024 pixels wide, it will appear 1024px wide on all screens.
However in terms of actual centimeters or inches, that 1024px can vary widely in length -- depending entirely on the viewer's screen. Some viewers won't see it all at once -- they will have a horizontal scroll bar. Viewers with screens set at high resolutions will see a gap between the right hand end of your page and the right hand edge of their screen -- your page will show on the left-hand side of their window.
For those high resolution visitors, I suggest you center your page horizontally. This won't affect visitors running at your target resolution or lower. The setting is in the Page Editor > Special Effects tab.
Your page measurements are in pixels (dots on the screen). So if you set a target resolution of 1024 pixels wide, it will appear 1024px wide on all screens.
However in terms of actual centimeters or inches, that 1024px can vary widely in length -- depending entirely on the viewer's screen. Some viewers won't see it all at once -- they will have a horizontal scroll bar. Viewers with screens set at high resolutions will see a gap between the right hand end of your page and the right hand edge of their screen -- your page will show on the left-hand side of their window.
For those high resolution visitors, I suggest you center your page horizontally. This won't affect visitors running at your target resolution or lower. The setting is in the Page Editor > Special Effects tab.
You can see the effect in preview by setting your browser to almost full width then dragging in the right-hand border of your browser. If your screen resolution is high enough, you will see the white margins at the edge of the page change in size. If your resolution is 1024x768 or better, you can see the effect by resizing this page.
For this centering to work properly, your workpage contents should to be centered around the center line of your design width.
If you put extra objects asymmetrically outside the design width, you will upset the centering. To help you center things exactly, don't forget the center button on the bottom toolbar.
I suggest don't worry about trying to eliminate a vertical scrollbar -- much depends on the visitor's computer and browser settings -- e.g. how big the taskbar and toolbars are.
Horizontal Positioning and Sizing
Using horizontal positioning and sizing is incompatible with the horizontal page centering that I recommend, so I suggest you don't use it. It's rather tricky to get right in any case -- so why make things more difficult? For more on this, see the tutorials that are included with SiteSpinner.
For this centering to work properly, your workpage contents should to be centered around the center line of your design width.
If you put extra objects asymmetrically outside the design width, you will upset the centering. To help you center things exactly, don't forget the center button on the bottom toolbar.
I suggest don't worry about trying to eliminate a vertical scrollbar -- much depends on the visitor's computer and browser settings -- e.g. how big the taskbar and toolbars are.
Horizontal Positioning and Sizing
Using horizontal positioning and sizing is incompatible with the horizontal page centering that I recommend, so I suggest you don't use it. It's rather tricky to get right in any case -- so why make things more difficult? For more on this, see the tutorials that are included with SiteSpinner.
Workpage width
Setting the work space width in the project options does not determine the width of your final page. So there's no particular advantage in reducing your workpage width below the default 2047 pixels. Don't build a page out to here without very good reason, Your visitors will need a horizontal scroll bar to see it all and probably won't thank you for it.
Workpage Height
The default height is set for 6143. The usual recommendation is not to make long pages. But I often exceed that, for tutorials like these, in which case I just increase the workpage height as required. While a horizontal scrollbar is something to be avoided, a vertical one is quite acceptable to nearly all visitors. If you make a long page, consider using bookmarks to help your visitor navigate around -- as I have done on this page.
Huge page -- I didn't do that!!
Occasionally, you will get a very long or wide page, without any obvious reasons. The page will have one or both scrollbars showing, and you sometimes have to scroll a very long way to get to the end. At the end, you may be able to identify the offending object, in which case you can move it or delete it.
It gets more difficult if the offending object is invisible on your finished page. If you are sure there should be nothing out there, right-click the page, then from the context menu, choose 'Select All Below', or one of the other 'Select All' options. Check the status bar at the bottom right of your workpage -- this will give the name of the object you have selected if just one, or something like 'Selection: 2 Items', if more than one. If it just says 'Object' there is nothing selected.
Then if you have snared object(s), press the 'Delete key', to eliminate them
You may decide that 'Delete' is a little drastic and you may wish to see the object first. If so, open the Quick Editor > Object tab, then click on an empty space on your workpage. This de-selects any object that might have been selected, but leaves the Quick Editor open. Watch the X and Y fields in the Quick Editor as you repeatedly press the 'Tab' key. This selects each object on your page in turn, and displays its details in the Quick Editor -- watch for any abnormally high values of X or Y. These will likely belong to your rogue objects.
Don't be alarmed by negative values -- this may be a rogue, or it may be just that the object is a member of a permanent group.
If you don't mind looking at the preview code, you can also see any abnormal X or Y values showing in there, and identify the object that way.
As to why objects get those sometimes hugely wrong X and Y values, I suspect mouse glitches may cause the wrong drop co-ordinates to be fed into the program. Desirably the program should warn you if this happens, but currently it doesn't.
Setting the work space width in the project options does not determine the width of your final page. So there's no particular advantage in reducing your workpage width below the default 2047 pixels. Don't build a page out to here without very good reason, Your visitors will need a horizontal scroll bar to see it all and probably won't thank you for it.
Workpage Height
The default height is set for 6143. The usual recommendation is not to make long pages. But I often exceed that, for tutorials like these, in which case I just increase the workpage height as required. While a horizontal scrollbar is something to be avoided, a vertical one is quite acceptable to nearly all visitors. If you make a long page, consider using bookmarks to help your visitor navigate around -- as I have done on this page.
Huge page -- I didn't do that!!
Occasionally, you will get a very long or wide page, without any obvious reasons. The page will have one or both scrollbars showing, and you sometimes have to scroll a very long way to get to the end. At the end, you may be able to identify the offending object, in which case you can move it or delete it.
It gets more difficult if the offending object is invisible on your finished page. If you are sure there should be nothing out there, right-click the page, then from the context menu, choose 'Select All Below', or one of the other 'Select All' options. Check the status bar at the bottom right of your workpage -- this will give the name of the object you have selected if just one, or something like 'Selection: 2 Items', if more than one. If it just says 'Object' there is nothing selected.
Then if you have snared object(s), press the 'Delete key', to eliminate them
You may decide that 'Delete' is a little drastic and you may wish to see the object first. If so, open the Quick Editor > Object tab, then click on an empty space on your workpage. This de-selects any object that might have been selected, but leaves the Quick Editor open. Watch the X and Y fields in the Quick Editor as you repeatedly press the 'Tab' key. This selects each object on your page in turn, and displays its details in the Quick Editor -- watch for any abnormally high values of X or Y. These will likely belong to your rogue objects.
Don't be alarmed by negative values -- this may be a rogue, or it may be just that the object is a member of a permanent group.
If you don't mind looking at the preview code, you can also see any abnormal X or Y values showing in there, and identify the object that way.
As to why objects get those sometimes hugely wrong X and Y values, I suspect mouse glitches may cause the wrong drop co-ordinates to be fed into the program. Desirably the program should warn you if this happens, but currently it doesn't.
site map
site map
site map