MINOS Web Guide - Basic Page Design

Why a new Page Design?

Why not? Aren't you tired of the old pages?

THIS page represents a new Template from Cat. The FNAL Public Information Office (PIO) also gave us their proposed redesign. At the time the PIO gave us their redesign, they were hot and heavy to get something new up for the NuMI Dedication. So even though we didn't like everything they did, we put it up. And at present the home entry page is still what they gave us. But the inner pages combined Cat's then-current template with some features of the PIO redesign, notably the blue map underlying the sidebar menu, and the color of links. But THIS page design is more Cat's than the PIO's - just so you know who to blame.

The Practical Reasons for Page Redesign:

Regardless of the NuMI Dedication, we needed a new page design. Because - - -

  • Real Estate: the graphics of the header - the logo, the menu buttons, the page title - all took up too much vertical space, both in actual inches and in terms of visual dominance. As a result the actual content of the page was pushed down. The links in the header, for the main sections, were not enough. Many pages contained a "table of contents" of links piled up just after the page title bar - taking up more vertical space and pushing the content down further. The POINT of a page is it's CONTENT, not the header.
  • Text Size: we have always had issues with the size of the text looking too large or too teeny on some platform/browser or other, specifically text sizes that look OK on a PC platform look teeny on a Linux platform (any browser). Using a detection script to serve up platform-specific style sheets has been only moderately successful - some people want to be able to make the text as large or small as THEY need it, not the size which the page designer thinks looks nice.
  • Maintenence: the old pages kept text blocks "corraled" by using html tables - the table code surrounds all content. This style of HTML coding goes back to 1998 and Netscape 4.7, which was a popular but highly non-W3C-standards compliant browser. Many "hacks" were developed to make pages look "nice", the major hack being this use of tables to control the layout of the page. But all that table code also made for a lot of "gobbletigook" html that buried the actual Content and, for many, made editing these pages confusing. In addition, deleting any of the table code by accident "broke" the page. Browsers released since 2002 are much more W3C-standards compliant, and there is no need to persist in the use of these hacks developed for Netscape 4.7.
  • Flexibility: browsers allow you to resize text - so you could solve the text size issue mentioned above on your own - except that using table-controlled layouts to corral the text results in larger text getting squeezed in the same size box, which makes the page look funny. So sometimes other hacks were used to make sure that the visitor could NOT resize the text, and you just had to put up with text that might be hard to read. Wouldn't it be better to design a page layout that scales to whatever size the visitor makes his window, and lets him choose his own text size? Pages are made for visitors, after all.

Practical Solutions

To make a longer story short - the set of coding practices known as Web Standards offers solutions to most of the above list - text sizing issues, simpler code, flexible layouts - and a lot more. The Guide chapter on Web Standards holds more information for those interested in the details. There is also in that chapter a link to a seminar on Web Standards given to web professionals a few years back - it's really quite entertaining while also being informative.

The main emphasis of Web Standards is to separate the code that defines a page's structure and holds the page content from the code that creates the visual appearance. Looking at the source code for this particular page will give you very little information on how it is made to appear the way it does - you don't see code for background images or for text color. You have to look at the style sheet for that. There are sufficient "hooks" in this page's code structure that the visual appearance of this page can be radically altered by using a different style sheet - and none of the code in this page would have to be modified. That's the beauty of Web Standards - the html file holds structure and content - all visual directives come from the style sheet. As a result, the html file - the thing you edit to create new content - is much, much simpler.

Features of this Page Design

There are reasons behind most details. Some items, like the choice of fonts, can be debated endlessly. But there are reasons behind the choices that were made in creating this page layout. Features which have to do with Web Standards are noted; other features are simply visual design issues or for improved site navigation.

  • Reduced header/logo graphics - so they take up less physical space and are also less visually dominating
  • Color Logo - even though things get smaller and made simpler, you still want them to BE there. The mono-chromatic logo tended to fade into the background. Using color gives the page a bit of zing. This logo was remade using official FNAL colors for the base blue, orange and green.
  • The Page Title is made to sit right at the top of the page, not pushed down below header graphics. Knowing what page you are on helps you navigate around the site. The page title sits within <h1> tags, not bold, enlarged <p> tags. A Web Standards feature
  • Top Navigation bar - still have this, although much reduced in size, in keeping with the overall reduction of the header. This Nav bar is the same for every page, and the links go to the entry page for each major section of the site. A Navigation improvement.
  • The Navigation Bar coding is no longer made from graphic buttons, but is simply a text unordered list, styled to look like a graphic menu bar. A Web Standards feature
  • Side Navigation menu - the links here can be customized to suit the page or the site section the page sits in. Gives a method of adding more "quick links" without piling them at the top of the page or scattering them among the page content. You can also have a page with no side navigation bar, if you want. A Navigation improvement.
  • Side Navigation code - regardless of where the navigation sidebar is located (left-side, right-side, or bottom), the CODE for it comes AFTER the code for the main content. This is to keep the page content prominent in older browsers which don't understand the style sheets (called non-CSS browsers: pre-1999 browser versions, text-based browsers, the browser used by my cellphone). Non-CSS browsers render the page identical to the way the code is ordered. If the sidebar links came before the content, the links would come first and the content would get pushed down. On a cellphone, that can be annoying. We assume a visitor comes to a page for the content first, and the sidebar navigation links second. So the sidebar navigation code comes AFTER the content code. But thanks to CSS-2 and standards-compliant browsers, we can make this navigation sidebar appear anywhere on the page we want, regardless of where it's code appears in the page.
  • Page within a Page - the white portion holding the content sits in a box within the darker background of the browser window. This isn't just frills. It's an effort to emulate a magazine page and enhance the readability of the text. The width of the text content is what's important - it has a maximum width of approximately 80 characters, no matter how large you make the browser window. Very long lines of text get hard to read. The width of the page is scaled to the text size - so if you resize the text to be larger or smaller, the width of the page resizes accordingly. Large images (like root plots) can also push the page out larger, but the text lines stay at about 80 characters. This is part of what's called "liquid layout".
  • Font style - "studies have shown" that sans-serif is easier to read on screen, while serif is easier to read in print. So that's what is done here.
  • Font type - I do specify certain fonts and in a certain order. The CSS directive is font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif; and the order makes a difference:
    • Lucida Grande is a MAC font, first in the list so MACs stop here and don't pick up any of the other fonts listed, which may also be installed on MACs but don't look as good. Other systems typically do not have this font, and procede down the list
    • Verdana is a PC font created specifically for readability in browsers - most PCs stop here
    • Lucida is a Linux/Unix font. Over 90% of these systems have this font, and it looks better than their version of Arial or Helvetica
    • Arial and Helvetica after the others - this is for Unix/Linux which don't have Lucida, and is better than an unknown default
    • sans-serif - the unknown default, selected because a system had none of the others
  • Font Size - specifying sizes in pixels is the source of mis-matching size issues between MAC/PC and Linux systems - Linux defines pixels differently from the others. Using the above font-family helps, as 12px Verdana on a PC looks more like 12px Lucida on Linux, while 12px Arial looks fairly different on the two systems. But another method is to use % scaling and the "em" unit, instead of pixels. Using pixels to specify sizes - of images, table cells, etc, not just fonts - prevents those items from being made larger or smaller by some browsers (IE for the most part). Using the "em" unit allows the text to be scaled by the visitor, via their browser, so they are not stuck with fixed size type.
  • Page scaling - the widths of various page elements are also specified using the "em" unit, so when a visitor increases the text size, the page width scales accordingly. This is called "liquid layout".
  • Printing - one of the features of "full" CSS is the ability to specify the medium a style sheet is used for. This page actually uses two style sheets - one tells it how to display stuff on the screen, and the other how to make the page appear in print. Try it. Look at your browser's Print Preview, and you'll see that for printing, the text is in a Times-style serif font. And the navigation is gone - it's useless on a printed page, after all.

More Information

I could write more on how the page layout actually works, and maybe that will appear someday. But for now interested parties should just ask Cat and she'll be happy to discuss the details. Or fetch a page, and the style sheet, and puzzle it out.

Comments always Welcome

The overall layout of this page - Logo in the upper left, main navigation bar across the top, a secondary navigation bar down the side - this type of layout is used by MANY sites on the Web. And many sites use this layout because it has been proven to function well. Is the layout boring and conventional? To some degree, yes. But widely accepted conventions need no explanation on their use.

Your comments are welcome.

Fermi National Accelerator Laboratory Magnet Logo