Working with Images

In general, images are important to personalize a site, to break up text or white space and generally to make a site more appealing. The following guidelines will lead to more effective use of images.
  • The new design uses the top of the page for the BRYN MAWR image and global navigation elements. Given that, it doesn't work well to put a traditional departmental "banner" across the top of the content section.
  • Logos that are 100x100 can be used in line with the heading, or in the right-hand column up to 150 pixels tall.  Another option is to use an iconic image to create a duotone "embossing" in the left-hand navigation (as shown here),
  • If an image is used above the header (as it is on many of the college's main pages), it should be the full width (470 px) and one of two heights (225px or 100px). No text may be included in these images.
  • If you use both an image above the header and an image in the third column, it is preferable that these either be the same height (225px) or that the image in the third column be long enough to create an L shape (300 to 340px). 

Our layouts gallery demonstrates some different ways to display images with larger amounts of text:
A Flickr slideshow is an option used on some pages. This requires less technical knowledge to maintain than our Javascript slideshow options, and would make it easier for you to add photos submitted by multiple users, especially those who already use Flickr.
Javascript slideshows display a rotating series of images and don't require the use of a third-party tool to maintain. However, they require knowledge of HTML to update.