skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Page Style

February 6th, 2009 by Erick Beck

Valid HTML

Developers are encouraged to create standards-compliant X/HTML websites and applications. You can determine if your site/application is compliant with W3C standards using their CSS Validator and their HTML Validation Service (also available locally at Texas A&M.)

  • Excellent free tutorials are available from W3Schools and W3C.

CSS: Separation of Content From Presentation

Cascading Style Sheets (CSS), allows a developer to separate content from design or presentation. In other words, you no longer have to redesign your Web pages when you change the content, or vice versa. The X/HTML controls the semantic information and the CSS controls the presentation information. In other words, X/HTML should mark up what the page means, while CSS determines what it will look like. This then lets you make changes to either without touching the other.

Using separate style sheets, rather than inline styles or style blocks in the page’s header, allows authors to change the way a whole site looks just by editing one style sheet.  A well-structured Web page will include mark-ups for paragraphs and divisions (content), but all style mark-ups, such as font and color (presentation), will be contained in one or more separate style sheets. This technique greatly reduces the amount of time spent on site maintenance and redesign. If a site is well structured, the same content can be styled in any number of ways to make it look infinitely different.  See CSS Zen Garden as an example of this concept taken to the extreme.

Fonts

Official fonts are set down for print designs in the University Brand Guide. Print publications, however, give a designer more control the fonts used and how they render, whereas there is less control on the web. That being the case, it’s important to provide a number of possibilities if a specific font is not available on the end-user’s device.

Serif fonts

For printing, the serif font choice is New Baskerville. Since New Baskerville may not be on every device, an acceptable substitution would be either Georgia or Times New Roman. For coding, we recommend the following “font-family” list:

  • “New Baskerville”, Georgia, “Times New Roman”, Times, serif

Sans-Serif fonts

For printing, the officially sanctioned sans serif font is Frutiger. While we put Frutiger into our font-family, Microsoft’s Segoe UI is a really close substitute system font. However, in case Segoe is not there, the default Arial and Helvetica are acceptable replacements. Verdana can also be used, but be aware that Verdana by design is larger than other similar fonts at the same size. The font-family order and list for sans serif fonts is:

  • Frutiger, “Segoe UI”, Arial, Helvetica, Verdana, sans-serif

Typography – font size/legibility

These days, most Web sites are published with a sans-serif rather than a serif primary font, to make smaller letters more legible. The choice of font family directly affects the size of the text display on the screen. This, then, makes selection of your primary font vitally important. Many designers want to decrease the size of the text on the screen, saying that, “smaller looks better” or is “more readable” or simply “takes up less space.” However, your site visitors should be allowed to control their display, and may prefer larger text (or may need it). If you do set a lower-than-default font size, do so through CSS in such a way that users can increase it again if necessary (i.e. use % or em rather than pt or px.)

Say it the right way

The Texas A&M System does have a set of editorial style guidelines. Please be familiar with them and use them in your content so that all of the Web sites at Texas A&M present a consistent message.

Use of logos/seals

The most effective way to brand your site, to identify it as part of Texas A&M University, is to use the primary mark. Use of the university seal is expressly limited to the President’s Office and the Texas A&M University System.

Use of Color

Color palette:

On a Web page, our primary color, Aggie Maroon, is defined as HEX 500000. The primary support color is Cool Gray 11, which is HEX 332C2C.

With the Brand Guide/Visual Identity Guide and site going through a complete overhaul, we have been working to get updated RGB/Hex code versions of the color palette brought in line with the print palette. There have been some modifications of colors from the Print side and they are now echoed on the electronic/Web side as well.

Color on screen vs. in print:

Do not get caught up in trying to replicate an exact color on the Web. In print, inks are physically the same from printer to printer. However, color looks different when it’s created on a computer screen. Like your TV set, color is composed of red, green, and blue pixels interacting with one another. However, the interpretation of each color varies from monitor to monitor. A digital input will look different from a standard VGA input; an LCD screen will look different from a CRT. Even identical monitors adjusted slightly differently (even at different angles) can interpret colors completely differently. Designers must therefore understand that the viewer might not be seeing exactly the same shade (or in some cases even the same color!) as they expect.

Templates vs. “the Aggie family of looks”

Many universities have enforced a set of officially sanctioned common templates in order to keep a consistency of look on all of their pages. While we accept that consistency is a good thing, we do not agree that absolute uniformity is the proper way to achieve it. Also, we want the Texas A&M home page to stand out from college and department sites across campus – it has a unique design and we don’t necessarily want every campus webmaster to imitate it. We therefore do not publish official templates, but instead encourage offices across campus to adopt the principles of the Brand Guide and this Style Guide in creating a common “family of looks.” We want you to bring your uniqueness to your own websites, while at the same time creating sites that can easily be identified as belonging to Texas A&M, using the Primary Mark and the set of common web colors. A set of templates is provided as a sample of what these might look like.

Categories

Archives