Two Design Challenges
There are two challenges that face all website designers, professional and otherwise. By making yourself aware of these potential obstacles, you can successfully maneuver over them as you use Website Builder to develop your website.
People who view your website use different...
Browsers are the program that people use to view different websites on the Internet. Internet Explorer, Firefox, Safari and Opera are names of some popular browsers. Although industry standards have improved over the years, individuals browsers don't always adhere exactly to the standards in rendering - interpreting and displaying - website pages. What this means is that sometimes a page will look different in two different browsers.
Monitors/Screens can be set to display at different resolution settings. You can be sure that those who visit your website will not all have the same screen resolution. The higher the resolution, the more that can be displayed on the monitor and the smaller individual elements become in relation to the monitor's physical size. Some of the more common current resolution settings are as follows:
Pixels are "picture elements" of your monitor. If you're old enough you may remember the monitors with green dots. Those dots were the pixels on those vintage monitors.
Where possible, you would like to avoid the necessity of horizontal scrolling on the part of people viewing your website. This is not always possible. Some of the reports from League Manager, Tournament Manager and Handicap System are very wide. If you use those reports for display on your website, it is inevitable that viewers will have to scroll horizontally.
You do not have to concern yourself with different browsers. We have built in as much browser-independence into Website Builder as we can. This means that your Website Builder created website will display correctly for most up-to-date browsers. If someone is using a very old browser, your web page(s) may not display as you intend.
It is important to keep in mind that the monitor resolution setting doesn't necessarily tell you what size a user's browser window is since the user can resize the browser window to anything (i.e., the user may not be using the entire display area for their browser window).
The recommended method to make sure that your website will minimize the necessity for horizontal scrolling by viewers is to design your website to be as resolution-independent as possible. This requires that you not specify widths in absolute units such as pixels. The two main instances in which you will encounter width problems are in the use of tables on your web pages and images/photographs that are too wide.
When you use tables on a web page, if at all possible, define the width(s) as a percentage of the display width available. If you set the table width to 1200 pixels and your display width is 1024 or 800, then you will have to scroll to the right to see all of the web page. When the table width is set to a percentage, the table will resize itself according to the available browser window size within the available display area.
Images that you import and display on your website are fixed width. Therefore, similar to the fixed-width tables, if the image width is wider than the available browser window width, then you will have to scroll to the right to see the right-most portion of the image. For this reason, it is recommended that you keep your image widths to 790 pixels total. That means that if you have two images side by side, their total width must be 790 pixels at most. This will ensure that a viewer with a display resolution of 1024 pixels will be able to capture the left hand navigation bar and your image in their full browser window without scrolling. If you are aiming to please only viewers with 1024 and wider display resolutions, the total width of your image(s) should be about 790 pixels or less. The left hand navigation bar takes up about 235 pixels.
Two Helpful Tools
There are two tools that are helpful with regard to display resolution.
A screen ruler will let you measure the width (and height) of items on your web pages as you design them. You can download a free screen ruler called, Jr Screen Ruler.
Screen Resolution Checker
This tool will allow you to "Quickly and easily view any website in various screen resolutions." If you are in Website Builder, open a second browser window. In the second browser window, go to Screen Resolution and view your website in 800, 1024 and 1280 and wider widths. You can use this tool as you create new pages, or edit existing ones, to make sure that they fit the needs of the widest possible audience. Find out what your screen resolution is. Find out what the majority of people's screen resolution is these days.