Style Guide

This is my first style guide for robertbucker.com. After deep pondering and thinking what would be the best for this site, this is the best that I could come with.

Navigation

The navigation bar will be located directly under the header horizontally. The height will .25 inches and the width will be 150 px.

There will be a sub navigation panel to follow with the parent folders. The sub nav will be a hidden drop-down box that will be under the parent folder.

An additional sub-nav will be flush left of the page directly under the navigation bar vertically. It will be 150 px wide and the height will vary on the content. This sub navigation bar will not be hidden and visable in all of the children pages. (e.g. if TV Spots, the child of My Portfolio is the current page, a sub nav will show all of My Portfolio's children.

Typography

The font that will be used in all the website sections will be Calibri. If the browser site does not support Calibri, the backup font will be sans serif. All headers will remain default features but in Calibri/sans-serif font.

Color

The colors will be as the following:

  • Header/Nav Background Color #0099CC
  • Header Bottom Border Color #000000
  • Content Background Color #FFFFFF
  • Text Color #000066
  • Centerbox Color #333333
  • Centerbox Bottom Border Color #0099CC
  • Footer Background Color #000000
  • Footer Text Color #FFFFFF
  • Hover Link (Side Menu/Footer) Color #009933
  • Hover Link (Nav) Color #333333

Logos

The header logo will be the same on every page. The logo will be an original creation of Robert Bucker, or anyone orignally paid by Robert Bucker or from the Robert Bucker Association. The FAVICON will be a siplified version of the Header Logo produced by Robert Bucker or anyone originally paid by Robert Bucker or from the Robert Bucker Association.

Graphics

The background graphic/image will vary on the design of Robert Bucker. Any alteration of the background graphic/image will have to be first approved by Robert Bucker or any associates of Robert Bucker or the Robert Bucker Association. Each graphic will contain a simple alt description and must have at the end 'robertbucker.com'.

Any animation graphics will only be located in the header or any portfolio examples.

Content

The content rules will apply to the following parent folders.

Portfolio

With every portfolio piece there will be a short discription called 'Discription/Explanation'. This will have an <H3> header. At maximum the discription will only have 3 paragraphs. The first paragraph will share what the piece is and what the company/client is. The second paragraph is optional and may consist of background information about the piece(e.g. client, classroom assignment, for fun, and so on).

The third paragraph is optional as well and may contain information of what I was attempting to achieve. It may also discuss the purpose of the advertisement and why I decided to use this method or idea. If desired I may discuss the results of the project, what I learned from it, or my overall feeling about the project.

Blog

If I decided to maintain a blog it will be used from an external blog recorder (e.g. Blogspot, blogger) and the tab will link to this particular blog.

If the blog does not use na external website, the blog will follow the same style layout.

About Me

The about me page will only be a maximum of 1 page. One page is constituted as no scrolling at a resolution of 1024x768.

If there will be any photos they will only contain ¼ of the page in the top-right corner of the content box.

Best Practices

All pages must be written in transitional xhtml coding. All pages must be able to validae by W3 validator.

All images will be uploaded at a minimum size as possible. All images will be a .png file. All JPEG will need to be converted to a .png unless the .png file exceeds 40KB. Actual photos may remain in JPEG format.