 |
 |
 |
 |
 |
 |
 |
SUPER SECRET STYLE GUIDE
Welcome to the Charlotte Gray website’s Super Secret Style Guide. You are a special person!
THE GRID
The site is set on a centered grid 600 pixels wide, containing six navigational menu items, each of which is 100 x 25 pixels. In the Style Sheet, body text leading (line-height) is set to 25px to match the height of the menu items.
A 600 x 200px JPEG or Flash movie anchors each page. CONTENT (like the stuff you’re reading now) appears below the anchor image in a 400px wide column at right.
SUB–NAVIGATION appears below the anchor image in a 100px column at left, with a 100px “blank” column between the Sub-Nav and Content areas. Sub–Nav menu items are the same size and typeface as primary Nav menu items, but are upper–and–lowercased. (PRIMARY NAVIGATION is uppercase only.)
Copyright indicia occurs at the bottom of every 400-pixel-wide Content area in a special DIV that generates a 1px top border in CSS to match the graphic borders in the Nav, Sub-Nav, and surrounding the anchor images/Flash movies. (This border does not appear in Netscape 4 but that does not impact the overall design effect, nor the spacing; the vertical margins are the same.)
NAVIGATION
Nav and Sub-Nav feature “snapping” DHTML rollovers: the visitor’s location in the site hierarchy is highlighted via a color change (see above left), but reverts to neutral when the visitor mouses over a different navigational menu item.
For instance, in PLAYERS, the “Players” menu item is highlighted until the viewer mouses over THE BOOK, at which point THE BOOK is highlighted. When the viewer lets go of the mouse, the original highlighted states are restored, re–establishing the viewer’s position in the site hierarchy.
In addition, the top Navigation features DHTML text blurbs that change per–page (or as the viewer mouses over relevant top Nav menu items).
COLOR
“Gray on Grey.” The background is web–safe dark grey (#ccc), all border elements and inactive menu items are web–safe medium grey (#666), and Flash movies have either medium grey (#666) or black (#000) backgrounds, depending on which works best for each movie.
Links are a pale teal (#9cc); active links and mouseover “hover” effects are a slightly brighter teal (#9ff). Visited links are medium dark grey (#999), causing them to recede slightly so as not to distract the reader once the pages to which they link have been viewed.
All colors are set via Style Sheets, but important colors are also reinforced by HTML 4 Transitional attributes to the <body> tag, so that the color scheme will work in old, non–CSS–compliant browsers.
TYPOGRAPHY & STYLE SHEETS
The Charlotte Gray movie title and all navigational graphics are set in Akzidenz-Grotesk Condensed, a simple gothic font. Body text is set via CSS at 11px/25px Verdana, with alternate sans–serifs specified for non-Mac/non-PC operating systems.
“Smart” (i.e. typographically correct) single and double quotation marks, apostrophes, en and em dashes) are encoded throughout the site via standard decimal entity notation in HTML.
HTML body headlines (<h1> etc.) are set via CSS to Arial Narrow to approximate the look and feel of the graphic Akzidenz-Grotesk Condensed graphic headlines while preserving HTML document structure. Upper and lower margins surrounding these headlines are also controlled via CSS. (If the visitor’s operating system does not contain Arial Narrow, a suitable sans–serif is substituted.)
HTML body text paragraphs are indented via CSS–2 in IE5/Mac, IE6/Windows, Netscape 6.x, Mozilla, and Opera 5/6. In IE 4/5 Windows, paragraphs are not indented because the browser does not support this CSS feature, but the design is otherwise identical.
In Netscape 4 (Windows, Macs, Linux) there is a negligible amount of extra vertical white space (grey space, actually) around <h2> and other HTML headlines because of Netscape 4’s anemic support for Style Sheets. This does not significantly impact the overall feeling of the design in that browser.
In IE4/IE4.5 Macintosh, HTML headlines and body text will be exactly the same size as in all other browsers. In Opera 5 beta for Macintosh, headlines and text may be slightly smaller than normal, depending on user preference settings.
BANDWIDTH
Per client research, Warner Bros. movie site fans tend to enjoy faster access than the average — plenty of DSL, cable modem, and T1 users in this crowd. Nevertheless, care has taken to minimize bandwidth and deliver a good experience even at 56K.
All navigational graphics are preloaded on the index page via JavaScript (they download to the visitor’s cache while s/he is watching the introductory Flash movie), and all JavaScripts are also cached.
Large (600 x 200) anchor JPEG images tend to be 20K or less in file size, though a few are slightly “heavier.”
All Flash movies are set to stream comfortably at 56K dialup or better. File sizes are small for cinematic (non-Raster) Flash movies.
The Charlotte portrait Flash file is 28K, the intro 52K, and the cinematic pans in THE TIME section weigh in at 116K. The slideshow–plus–soundtrack in THE SCORE is a heavier file owing to the non–looped music (272K), but it also plays for several minutes and should stream comfortably on most systems.