This page will document the web style guidelines for creating and maintaining web pages on [1]?'s site. The intent of these guidelines is to make it easier to promote a consistent look-and-feel among DNR pages, and to reduce the amount of decision making that web page programmers and authors have to do in order to create or update a page. In that respect, these are supposed to be guidelines, which means that it's okay to violate them if there's an important reason for doing so.
CBI-DNR web pages have a standard display width of 640 pixels. Note that this is 640 pixels for the page contents, not that the page has to fit on a 640x400 monitor. For most web page designers, discussions of page width tend to revolve around the typical screen size that users can be expected to have, and as technology has improved there has been a tendency among sites to grow to larger page widths (e.g., sites such as CNN, Expedia, NPR, and PBS are all using display sizes around 740-780 pixels in width). However, for DNR pages the principle limiting factor is the width of the printed page, not the displayed page, since many of our users will want to have hardcopy printouts of the information we publish. For this reason, we will stick to a 640-pixel horizontal width for page contents, since many browsers tend to chop-off the right side of pages that are much larger than this when printing.
Since we can expect many of our visitors to want to print information from our site, this also drives the decision to make everything look good when displayed on a white background.
Every DNR page should have contact information available, links to the DNR and University home pages, and a time and date indicating the date of the information. Having accurate time and date on pages is especially important to DNR, since many of our page contents change over time and we may need to know when a particular page was obtained by a visitor.
Pm has attempted to organize the layout of the various DNR pages so the components of the page fall into a regular grid of eight cells. For example, here's an excerpt of an overview page slightly modified to eat less vertical space and with the grid lines overlaid on top:
Notice how the elements of the page are horizontally aligned to the grid. If a margin of whitespace is needed between an element and a grid line, the distance is always five pixels. Notice also the horizontal alignment among "NAVAL", "87754211", and "Bench Marks" in the folder tab area with the labels in the Station Information section. Station photographs are always sized to be 150 pixels wide, since that is what will fit in two horizontal cells with the requisite 5-pixel margin on either side. If you look at the larger image, you'll see that the other elements of the Latest Observations and Station Maps are also aligned to the grid.
Of course, sometimes we have to violate the grid in order for things to look okay; thus the values "Naval Air Station", "001", location, etc. are aligned into at the middle of one of the grid cells, as the nearest grid lines provide too little or too much space for the labels. This alignment is extended into the "English" units section of the Latest Observations, for similar reasons.
In addition to the eight-column grid there is also a five-column grid defined if we ever need it, but I don't think we've developed any pages that make use of it yet.
Having the grids makes it much easier in deciding how much room images, table cells, and other elements of the page should take--just size things to fit on the grid. Thus, station photographs in the overview page are 150 pixels wide (two columns less margins). In the example below, the table cells (shown in blue) of the "Latest Observations" section are 160, 120, 80, and 150 pixels wide (2 cells, 1.5 cells, 1 cell, and 1.5 cells less margin). Note that it's not necessary to align the table cells directly onto the grid and then add margins--we just let the 5-pixel margin already being provided by the WebFolder? give us the 5-pixel offset needed for the elements of the table.
Texas A&M University-Corpus Christi