General Web Style Guide

An Emerson.edu General Page

Left promos: The purple and magenta boxes on the left side Photos with caption: The main image, in this case the trolley Right promos: The right column promotion, in this case an aerial shot of the main campus

Fonts

To ensure a consistent look throughout the website, there should not be any font changes: font, font color, or font size. Do not change the font in any way in the formatted text block window without using the Style dropdown.

Formatted Text Block Styles

Several styles are available to you in the input screen in Drupal for Generic Pages (if you prefer to use a Generic Wide page for your content, contact Web Services). Use only these tools to help make your content look more visually dynamic and interesting.

Under Generic Page:

Templates:

Read More buttons (two sizes)
Pull Quote
Useful Links
Photo with Caption

Styles:

Headings (use in sequential order)
Listing Page Headline
Body Text
Listing Page Intro Text
Form Section
Landing Page Section
Gray Serif Italicized (to emphasize a paragraph)

Under Promo - Right Column only:

Useful Links Promo
Pull Quote Promo
Gray Header Promo
Photo Promo
Purple Header Promo

Photo Sizes

To keep a consistent look on Emerson.edu, use one of the following sizes to display your photo:

Generic Page:

Photo with Caption: 450px x 300px

Promo - Right Column:

Photo Promo or Video Screenshot: 200px x 150px

News Article for Department News:

Photo: 150px x 110px

For these photos, download templates on the Web Services site under Guides & Templates.

To use the templates:

1. Open the template file in Photoshop.
2. Open your photo in Photoshop.
3. Drag your photo to the template.
4. Use Free Transform and drag a corner of your photo in or out while holding down Shift to maintain the photo's aspect ratio to fill the template with your photo. Drag each corner one at a time and then move the photo until you achieve the cropping you desire.
5. Save your photo as a .jpg using "Save for the Web" in medium quality and at 72 dpi and upload to Drupal. Since Photoshop remembers settings, check these settings each time you General Style Guide save for the web.

For help or if you do not have Photoshop, contact Deb Falzoi, Web Designer/Media Developer, Web Services at debra_falzoi@emerson.edu.

Piecing Your Page Together: Content-Types

Before you create your generic page, build your left and right column promos that you will then enter into your generic page:

Promo - Left Column

Your left column promos are the simplest to create:
Line 1 should always be a teaser or superheader and will appear in white above the green header.
Line 2, which appears as the green, bold text, should always be your main call to action or headline.
Line 3 is a description of the link that the user will click on.
URL is the actual URL that the user will go to.

Drupal automatically chooses the background color of the left promo—purple or magenta. You cannot select the color.

Promo - Right Column

Right promos give you more options, coming in five different styles:

Useful Links Promo

Use the Useful Links Promo to highlight helpful links for the user. Use as a right promo rather than at the end of your text only when you have no other right promo to use. Otherwise, use the Useful Links template in the body of your text.

Gray Header and Purple Header Promos

Use the Gray Header and Purple Header Promos to highlight dates, deadlines, facts, services, and more. The two promos are interchangeable—use whichever style you prefer.

Pull Quote Promo

The Pull Quote Promo brings attention to a quote that summarizes long, complex, and/or meaningful text.

Photo Promo

The Photo Promo also highlights information and can be used in the following ways:

1. Help the user visualize. Use the photo and caption only to show what goes on in your area.
2. Explain what's happening in your area. Use the photo (linked or not linked), caption (optional), headline (linked or not linked), and description to bring attention to a project, event, or other information in your area.
3. Show what's happening through a Flickr set. Web Services promotes your events using Flickr sets throughout Emerson.edu. To use a Flickr right promo using your professional photos, contact Deb Falzoi, Web Designer/Media Developer, Web Services at debra_falzoi@emerson.edu. She will get your photos on Flickr and make a custom right promo linked to your Flickr set for you.
4. Show what's happening through a video. Use a video screenshot for the photo (linked to the video page), caption, headline (linked to the video page), and description. To use a video right promo, contact Deb Falzoi, Web Designer/Media Developer, Web Services at debra_falzoi@emerson.edu. She will make a custom right promo with a play button linked to your video for you.

*Remember to link both the image and the title plus any appropriate text in the teaser. Delete the caption if it does not make sense to use it for your content.

Generic Page: Putting It All Together

To make your pages more visually dynamic, Drupal offers you several options to enhance your pages:

Video Reference. You may add a video to the top of your page. The video must already exist on Emerson.edu.

Text styles. Text may be styled using the options outlined above:
Headings (use in sequential order)
Gray Serif Italicized (to emphasize a paragraph)
Pull quote (under Templates)
Useful links (under Templates) at the bottom of your page
Other styles under the Style tab where appropriate
Read More buttons (under Templates; use sparingly)

Photos. For all photos, use the Photo with Caption option under Templates. All photos must be professional and may be removed from your page if they do not meet Emerson.edu photo standards. Review the Photography Guidelines for more information.

Left Promos. You may add up to two left promos to your pages. If you do not add a left promo, your page will inherit the promos of the next highest level in that section. These promos are inherited, meaning that any promo you add will also appear on any pages under your page.

Right Promos. Add one to three right promos to your page. Like left promos, if you do not add a right promo, your page will inherit the promos of the next highest level in that section. These promos are also inherited, meaning that any promo you add will also appear on any pages under your page.

Section dividers. Use horizontal lines to break up sections of long pages.

Styles to Code

You may work on the Source screen to define:

Learn more links. At the end of text, add a link using text and a double arrow (using » in your source code). Example:
Link »

Other Tools

Several other tools exist in Drupal to help you promote your area:
Emerson Live video
Event Listing
Feature promotions on landing pages
News articles (department news)*
Slideshows
Syndicated content
Video Page
Video Listing Page

*Add pull quotes under the Templates dropdown as well as right promos that correspond to your content in your news articles. 

CommonSpot Users

Use header 2-header 5 tags, horizontal lines, and photos in the outlined sizes to ease your transition to Drupal.

Questions?

Need help with the design of your specific pages? Contact Deb Falzoi, Web Designer/Media Developer, Web Services at debra_falzoi@emerson.edu.