library: website design considerations
Author: Paul M. Allen

One of the challenges that complicates the job of the website designer is that he/she can't precisely control the appearance of the page as it is displayed on the visitor's computer screen.

Depending on the computer and the user's preferences, the screen resolution, the number of colors available, the brightness of the monitor, etc. can vary from computer to computer.

The increasing popularity of wide screen monitors and hand held devices that can access the Internet add yet another dimension to the challenge.

Cell phones add to the list of challenges due to their small screen sizes.

To further complicate the issue, different browsers (Microsoft Internet Explorer, Firefox, Google Chrome Opera, etc.) will display the same page content in slightly different ways, frequently resulting in pages that do not look or perform the way the author intended.

This website is designed to work with Microsoft Internet Explorer and othe popular browsers.

Many designers, especially those building business-to-business sites, use a similar approach.

When a designer lays out a page, he/she can specify either the width of the displayed page in pixels or as a percentage of the width of the screen on the user's monitor. The current generation of wide screen monitors typically for screen widths of up to 1920 pixels or even more. The height of a page is rarely specified.

Designers can opt use what is referred to as Responsive layouts that can automatically adjust to the type of device on which the page is being viewed. The approach offers the advantage of needing to build only a single version of a page at the expense of the ability to have the greatest possible control of the appearance of the page.

Sometimes less is better. The banners at the top and bottom of the pages on this site are 990 pixels wide to alow the pages to properly display on a standard 1024 pixel wide screen, the maximum width on the current generation of tablet computers and many cell phones. The 990 pixel dimension provides space for a scroll bar if the user must scroll down to view the lower portions of the page.

Why Not Use the Full Width of the Screen? - To assure that the content is readable without scrolling to the right on the greatest number of systems and to provide the most printer-friendly settings.

Readability is an additional consideration when designing content that can stretch to fill the full with of the screen. If a line of text becomes too long, it will become difficult to read because we are conditioned to the relatively narrow column widths of text appearing in books, magazines, and newspapers.

Web pages have traditionally been constructed using spreadsheet-like tables in which the graphics and text on the page are located in the columns, rows, and cells that make up the tables.

As the complexity of a page layout increases, the designer nests additional tables in cells of larger tables. In addition, the designer can specify the positioning of various elements at absolute or relative locations on the page. Relative positioning is used far more frequently than absolute positioning.

The text in this and the above paragraphs is located in a table consisting of a single row, column, and cell. The grid lines are hidden making the table "invisible" to anyone viewing the page.

The table is centered relative to the left and right edges of the browser window.

The text is positioned relative to the left edge of the cell in which it is located.

The table containing the text is nested in a cell in a larger table that holds the graphic elements that create the background.

The header, menu, and footer are located in additional tables positioned above and below that larger table.

You can see how a page is constructed by clicking on "View" at the top of your browser and then selecting "Source" from the drop down list. If you are using Internet Explorer 8, go to "View" and then select "Developer Tools".

Tableless Page Layout: As website design evolves, the current trends in site design place an increased emphasis on style sheets and the use of <div> elements to define page layouts. In such designs, tables would typically be used only to display tabular content.

Experienced designers will frequently use a combination of table-based and tableless layouts depending on the requirements of the page.


Copyright 2016-18(c)   PMA Technology Group     2003 Shoreline Drive,    Mesquite, TX 75149    Email: