IRIS 4-2 Style Manual & Design Notes
Guidelines for creating consistency
Common words
- Web sites (two words)
- site name is IRIS 4-2 (pronounced four-two)
- emphasize words: bold, not italics.
File naming conventions
- use all lowercase letters and connect words with an underscore, like this: credibility_home.html
- spell out words when practical; abbreviations are confusing
- Use the format above for additional pages: credibility_p2.html, credibility_p3.html
Module File Structure
- The file structure is set up to allow people to add or remove modules without having "orphaned" images and media left behind
- The site-wide image folder holds only images that are shared across each page or used in several modules. Images in the main image folder include the header, the left bar image, "Librarian Secret" icon, "Time-Saving Tip" icon, etc.
- Each topic is in its own folder (directory)
- each topic directory contains sub-directories for images and media for that specific topic. Put all images for this topic in the image folder; put all media (Camtasia clips, flash files, etc) in the media folder.
Rules-of-thumb for lessons
- each module/lesson has a maximum of nine pages
- Each page has no more than 300 words.
- modules requiring more than nine pages can be divided into introduction, Intermediate, Advanced, or whatever is appropriate for the topic. Make navigation links from the main menu page.
- Since all lessons are intended to be stand-alone, they do not refer to each other or link to each other. Librarians can add these links as needed.
- All lessons link from the main menu page for that topic
- each module/lesson includes a progress bar.
Image Styles
Three basic fonts for image text and captions: Eras Demi ITC (captions, headers) , Verdana (text), Rockwell (text that is mimicking typing, as in a student's work).
Navigation links
Breadcrumb Trail: on final page of each module, the last item in breadcrumb trail changes from NEXT to START and MENU.
- START goes to the first page of the same tutorial
- MENU goes to the main menu for that section, i.e., Finding Info, Using Info, etc. (corresponding to the left nav bar)
- The bottom nav on the final page of each tutorial changes from NEXT to MENU, with menu being the same list of tutorial options as the final element in the breadcrumb trail.
Graphics
- graphics and images are .jpg or .gif.
- Original source files for images/graphics (mostly .png or .ps) are in the Source Files directory. If using Dreamweaver, use the "Edit In" button, then navigate to the Source Files directory to access the editable versions of the images.
Video Clips
We used Camtasia Studio to record screen shots. To get the clearest image in the final produce, I set the screen to the finished size before recording. I used a useful tool called Sizer to set and maintain the window size. Sizer also maintains the screen size when you click from one screen to another. It takes about 2 seconds to download Sizer. Once installed, you can set up favorite window sizes to select.
Favorite setting is 530x400. It really depends on how far down I can squish the screen and still see the content. Make the most of the recording size by closing all the unneeded top toolbars.
Settings for Camtasia/Video Clips:
Camtasia Production settings: custom production -->Flash --> One Video --> Classic Theme; Flash Options: FLV, Video Quality 50%, Background white --> Change dimensions --> custom; 530 (keep aspect ratio) (530 provides enough space to add Halo Skin 3 in Dreamweaver, and still keep the total width small enough to fit in the content area.
Dreaweaver Import media settings (shown below)
- max width: 550; quality 50% format :.flv
- Use import media feature – Haloskin 3
General formatting using Styles
- All formatting for content and layout is through the style sheet: iris_styles.css, located in the assets directory
- Formatting for the main contant area of all the tutorials is controlled in the #content div in the style sheet
- If using Dreamweaver, do not let DW create new styles. i.e. do NOT change the font type, font weight, font color, etc. using the properties menu. Doing so will create generic page-level styles, such as "style 1" "style 2" etc. Create a new style instead. Add a local (page-specific) style for styles that only one or two pages will use. Page-specific styles are currently used for table formatting and background changes. If a style will be shared across several pages, add the style to iris_styles.css
- All of the main format settings: <strong> <em> <p> <h1> <h2> etc are formatted in the style sheet
- Those amiliar with style sheets may notice many areas where it was left long, or where the shorthand techniques could be used. This formatting is deliberate; those unfamiliar with style sheets shold find it easier to make modifications when each item is lined out on separate lines rather than combined.
About the Box Model
IRIS 42 is designed using the "box model" layout style, rather than table-based layout. The box model is the preferred format for accessibilty, and also provides many more options for formatting.