Imperial Home Page -> Standards -> Page layout and image guidelines
The pages in general should have a white background. Pages should be divided into 3 parts. The header, the body and the footer. Pages should have a consistent header and footer, and the body is more free form though it is a Good Thing for like pages to resemble each other. For example the article pages should all be similar, the Yearly pages should all be similar etc.
Header:
We use a consistant header across all pages (view page source to see the code for the header). Pages should have the imperialclub banner at the top. They should link to /images/row-of-imperials-small.gif--don't make a local copy of it, we don't need 10,000 copies of the same graphic. Below the banner should be the title of the page in size H2 and centered. Below that should be a set of lines (<HR>). Between the lines should be the path to get to the page:
Imperial Home Page -> Literature -> Articles, with all the pages being hyperlinked to the appropriate location (except the end page, which should be where you are). The header ends with the second line,
The page tiles should be appropriate for the pages. The title should contain 19XX (Chrysler) Imperial, this helps immensly in rankings in the search engines (along with what ever else is appropriate). The <head> section should also include the meta tags description and keywords. These should be filled in with appropriate description and keywords to facilitate searching. I generally copy the keywords from one page to the next, making changes as appropriate. I usually end up doing the same with the description, though I am more likely to change that.
Body:
This is free form, but try to make it consistant with other pages of similar types.
Footer:
The footer is somewhat like a reverse of the header (view page source to see the footer). It should start with a line, then have the date the page was last modified, and a link to send feed back (use a mailto, going to either iml.webmonster@gmail.com or iml.webmonster@gmail.com, they both go to the same place), and set the subject to be appropriate to the page. We regularly get people emailing us from these links and some of the subjects are so generic it is impossible to tell where they have come from, which sometimes makes it difficult to answer the questions. The final part of this text is a link to join the mailing list. This ends with another line. Below the line is the graphic to contribute to the imperial club (use the image at /images/donationbanner.gif, and link to /OIC-specific/donations.htm).
Links:
All links that point to pages within our website should be relative (../../page.htm or /page.htm). Only use absolute links (http://www.yahoo.com/index.htm) for linking to offsite things. Relative links makes browsing faster. Everytime an absolute link is followed the address must be resolved, so there are extra steps that need to be taken. Relative links don't need that, and are therefore faster. Links should only open in a new window when we link to another website, or for graphics files that take a while to load and are a "dead end". (That way, a person can still be browsing while a large ad, for example, loads on their computer.)
The "How to" button on the Yearly pages should link to the repair home page unless there is something specific to link to.
Use correct grammar, punctuation and spelling.
Images: Images should have a hieght and width attribute in the html that matches the actual size. Browsers generally do a really bad job of resizing images, so don't rely on them to do it. If you want a smaller image, make a smaller image. If you want it larger, make it larger. It is better to have 2-3 images, rather than one that looks really bad. Images should also use the alt attribute.
"Beauty" items like brochures, factory ads and others should be given care. Colors should be matched within reason to the original (though I think it's OK in most cases if anyone wants to "punch" up the color a bit), pages should be oriented vertical, white spaces should be made white, and stray crap, hairs, dirt or writing on the page, etc., should be electronically doctored (i.e., erased or cloned). Items that are larger than the scanning bed should not just be cropped, but scanned in pieces and carefully matched for size, rotation, color, brightness, and contrast before "flattening". This goes beyond what I can write in a few sentences here.
Scan at high resolution, usually 300 dpi, then do your manipulating and shrinking with a graphics program. This will allow you to get smoother color gradations AND smaller file sizes in the end.
Pages of black and white text and simple graphics, such as service manuals, can actually do better when saved as gif's, but they still should be scanned first in color, at 300 dpi. For the MTSC manuals, file sizes end up being 40-70 K on average, and you don't have to squint to read them. The larger full-size FSMs will be proportionally larger than that in file size:
Steps for good clean images with small file sizes
1. Scan item at 300 dpi, true color. It seems obvious, but make sure the item is good and flat on the scanner bed. Use a magazine of the appropriate size, followed by a heavy book or two, if necessary, to minimize wrinkles or out-of-focus areas.
2. Save as either a .bmp, or a maximum quality "10" jpg.
3. Open the image in your graphics editor. the Gimp is a good open source image editer if you don't want to spend the big bucks for something like PhotoShop
4. Rotate image manually for perfect vertical alignment, if necessary.
5. Crop the edges. Usually easier to crop one edge at a time, especially for something critical. For pages with big white space borders, obviously it doesn't matter.
6. Since this was a purely b & w image, you can now desaturate. I know it seems goofy to scan in color and then take it away, but the resulting image will be sharper. Really only noticeable for very high res. "beauty" items, but not a bad habit to get into.
7. You can use image/auto levels as a first pass of the brightness/contrast, or manually adjust these to get a sharper image while eliminating most of the paper/background crap (again, this is only for pages on white backgrounds). Don't overdo the contrast, or the text, etc. will begin to look like a bad photocopy.
8. Tedium. Manually select only the areas that are non-white, choose selection/invert to get all the remaining white space, and fill this with pure white. This will make for a much cleaner page with smaller resulting file size.
9. More tedium. Get as picky as you want to, and as the page merits, by manually erasing crap that should be white, cloning out scratches, printing screw-ups, places where people have marked on the page, etc. Cloning is a whole subject unto itself, but this particular page (and certainly FSM pages) does not really require it.
10. Do a final brightness/contrast adjustment to get the text the way you want. Many times you will want to "deselect" the image(s) so as not to overdo them, and only apply more contrast to the text areas.
11. Save the image at this point as a .PSD (or .BMP).
12. Blur the image using normal "blur". This smoothes out printer dots and restores more natural, smooth edges to your text.
13. Save your "printable version", as a .jpg with a compression of about a "6".
14. Change your image size to 980 pixels wide for ads, 1960 pixels wide for two-page ads, or whatever size is appropriate for other pages.
15. Save your "viewable version", as a .jpg with a compression of about a "4".
16. Create thumbnail (150x200), etc.
This page was last updated 22 March, 2005. Send us your feedback, and join the Imperial Mailing List online car club today!
