Download pdf - UPDEN StyleGuide 060108dental.pacific.edu/Documents/departments/pr/UPDEN... · • Flash Quote This element provides the link to the Quote Rotator, which uses the Flash rotator and

Web Site Template & Style Guide

zehnoCross MediaCommunications

Table of Contents Last updated: 6/30/08 | page 2

Table of Contents

TABLE OF CONTENTS .................................................................................................................................... 2

1.0 INTRODUCTION.......................................................................................................................................... 4

2.0 SITE CONVENTIONS.................................................................................................................................. 5

2.1 Quick Links............................................................................................................................................. 52.2 Action Items............................................................................................................................................ 52.3 Downloads.............................................................................................................................................. 52.4 See Also .................................................................................................................................................. 52.5 Profile Component ................................................................................................................................. 52.6 Wildcard Component ............................................................................................................................. 62.7 News & Events Navigation .................................................................................................................... 62.8 Footer ..................................................................................................................................................... 6

3.0 SCHOOL OF DENTISTRY TEMPLATES............................................................................................... 7

3.1 Home....................................................................................................................................................... 83.2 Section Front ........................................................................................................................................ 113.3 Microsite Front .................................................................................................................................... 133.4 Gateway Page ...................................................................................................................................... 153.5 Detail/Flex Page .................................................................................................................................. 173.6 Site Map/A-Z Index .............................................................................................................................. 203.7 Printer Friendly ................................................................................................................................... 223.8 Profile Page.......................................................................................................................................... 233.9 Profile Index......................................................................................................................................... 263.10 Insert Page (ASP/Form Functionality Wrap Page).......................................................................... 283.11 Dental Services Landing Page .......................................................................................................... 293.12 Dental Services Index ........................................................................................................................ 313.13 Dental Services Detail Page.............................................................................................................. 333.14 Virtual Tour........................................................................................................................................ 363.15 News & Events Front......................................................................................................................... 383.16 News Index ........................................................................................................................................ 403.17 News Archive...................................................................................................................................... 423.18 News Story.......................................................................................................................................... 443.19 Calendar............................................................................................................................................. 473.20 Calendar with Category View ........................................................................................................... 493.21 Calendar with Text-Only View .......................................................................................................... 513.22 Event Page.......................................................................................................................................... 533.23 Email This Page ................................................................................................................................. 55

4.0 COLOR GUIDE AND USAGE.................................................................................................................. 56

5.0 TYPOGRAPHY ........................................................................................................................................... 57

6.0 PHOTOGRAPHY........................................................................................................................................ 58

7.0 SITE ASSETS............................................................................................................................................... 59

8.0 PHOTOSHOP FILES.................................................................................................................................. 60

9.0 NAMING & ORGANIZING YOUR FILES ............................................................................................ 63

10.0 GENERAL ACCESSIBILITY GUIDANCE.......................................................................................... 66

Table of Contents Last updated: 6/30/08 | page 3

10.1 Recommended Guidelines.................................................................................................................. 6610.2 Key Content Contributor Considerations ......................................................................................... 6610.3 XHTML - Validation .......................................................................................................................... 6710.4 Formatting Tables ............................................................................................................................. 67

11.0 WRITING FOR THE WEB ..................................................................................................................... 69

11.1 Acronyms............................................................................................................................................ 7211.2 Capitalization..................................................................................................................................... 7311.3 Contact Information........................................................................................................................... 7311.4 Degrees............................................................................................................................................... 7411.5 Dates & Times.................................................................................................................................... 7411.6 Commonly Used Terms...................................................................................................................... 7411.7 Numbers.............................................................................................................................................. 7411.8 Puncutation & Typographical Symbols ............................................................................................ 7511.9 Titles ................................................................................................................................................... 7511.11 References ........................................................................................................................................ 7611.11 Internet Terms & References........................................................................................................... 76

12.0 RESOURCES ............................................................................................................................................. 77

1.0 Introduction Last updated: 6/30/08 | page 4

1.0 Introduction

The School of Dentistry Web Site Template & Style Guide was created to provide context andtips for the effective addition of information to the available Web templates.

It is not meant to provide training or guidance on using the Ingeniux Content ManagementSystem (CMS) tool. A separate training guide is available for the CMS.

This guide may also serve as a reference for additions to the template set to ensure thatvisual identity and coding practices remain consistent.

If you have questions about the School of Dentistry Web site or how to use the templateswithin the CMS, please contact Kara Sanchez.

2.0 Site Conventions Last updated: 6/30/08 | page 5

2.0 Site Conventions

2.1 Quick LinksThe Quick Links component is located in the Internal Components folder, which contains the datadisplay on the page. Defaults to master Quick Links, but may be trumped with editorially selectedQuick Links. Quick Links can be used to provide links to key topics and subject areas related to aspecific page.

2.2 Action ItemsUse to link pages and documents that could be considered as “next steps.” (ex. Start a project.Contact our staff.)

4 links max recommended, 6 words per link recommended. Linked documents must be placed inthe document folder of the site’s folder tree. (See 9.0: Naming and Organizing Your Files.) Werecommend putting file type in parenthesis (ex: (PDF)).

2.3 Downloads4 links max recommended, 6 words per link recommended. Use for linking to related video, PDF,Word files, etc. Linked documents must be placed in the document folder of the site’s folder tree.(See 9.0: Naming and Organizing Your Files.) We recommend putting file type in parenthesis (ex:(PDF)).

2.4 See AlsoUse to link related pages from other sections.

4 links max recommended, 6 words per link recommended

Note: The Ingeniux CMS allows for internal and external links. Internal links are automaticallygenerated to match their page name. If you wish to create a link to an internal page but have thelink text use words other than the linked page’s title, then choose external link and enter the URLin absolute format.

2.5 Profile ComponentUsed for Profile Rotators on Homepage and Gateway Front pages.

Labeling Prehead: 1-5 world recommended copy countTitle: 1-5 word recommended copy countTitle Image: size varies (MAX 200px wide) x 16pxThumbnail Image: 90px x 90pxAbstract: 10-20 word recommended copy countIndividual: Name, Class of xxxx (student), Name, Year Graduated (alumni, donors, etc.)Link Label: Read MoreTarget Link: Link to Profile page

2.0 Site Conventions Last updated: 6/30/08 | page 6

2.6 Wildcard ComponentThis editorially selected element can be used to promote anything. Pages that use this elementinclude: Detail/Flex, Gateway Fronts and the Homepage.

Wildcard Labeling Prehead: 1-5 world recommended copy countTitle: 1-5 word recommended copy countSubhead: 3-7 word recommended copy countAbstract: 10-20 word recommended copy countRelated Images

Title Image: size varies (MAX 200px wide) x 16pxPromo Image: 200px x 140pxThumbnail Image: 90px x 90px; displays on homepageLink to Promo: Link to related page

2.7 News & Events NavigationPulls in up to three relevant news/upcoming events tagged by category (for specific program,etc.). To appear, a news story or event must be marked by the category under which the pagelives. The returns can be modified by entering a query. Can be turned off by selecting disablecheckbox.

2.8 FooterTo format into columns, use <div> tags.

Example:<div>2155 Webster Street<br>San Francisco, CA 94115<br>415.929.6400</div><div>SF MainClinic Phone:<br>415.929.6501</div>

3.0 School of Dentistry Templates Last updated: 6/30/08 | page 7

3.0 School of Dentistry Templates

The redesigned School of Dentistry Web site offers a rich selection of templates andinformation design. Select members of the School of Dentistry’s faculty and staff have access toadd and edit information within their portion(s) of the School of Dentistry site. The site makesuse of Content Management System (CMS) so that site authors and editors do not have to beexperienced Web programmers to maintain information.

In these pages, we’ve defined each template with

• The field name within the CMS of where to add content

• Any basic formatting required

• Editorial guidance

• Suggested or restricted word counts

• Image dimensions


3.1 Home


• Flash Quote

This element provides the link to the Quote Rotator, which uses the Flash rotatorand rotates on reload.

Text for the quotes can be entered into the CMS, along with a link to a page ifappropriate.

Quotes should focus on strategic and experiential messages that highlight theSchool’s points of difference. A variety of voices is ideal—students, faculty,administration and alumni can find a place here. In addition, great quotes can beadded to the mix.

Note: Once Featured Flash Story has been created in the Flash Media Data Sourcefolder, content contributors must submit a request to University of the Pacific IT(Randall Ogans) to copy and rename files.

• Flash Media Data Source

This element houses the media file used for the large flash rotator sectionunderneath Top Navigation.

Images should be carefully selected for content, contrast and cropping. Only the verybest photos should be included here.

Note: Once Featured Flash Story has been created in the Flash Media Data Sourcefolder, content contributors must submit a request to University of the Pacific IT(Randall Ogans) to copy and rename files.

Left Column

• Profile Rotator

This element provides the link to the Home Profile Rotator, located in the RotatorComponents folder, which contains the data display on the page. See 2.5: ProfileComponent.

• Virtual Tour

This static image is editorially selected. The tour pops up in a new window.

• Wild Card Rotator

This element provides the link to the Home Page Wildcard Rotator. See 2.6:Wildcard Component. Click the checkbox to move this item to the top of the column.

Center Column

• News Navigation

This element provides the News title, thumbnail, abstract and link to two editoriallyselected stories. The hard coded RSS Subscribe link goes directly to the feed.

• Event Navigation

This element provides the News title, thumbnail, abstract and link to two editoriallyselected stories. The Event Calendar link is hard coded.


Right Column

• Quick Links

This element provides the link to the Quick Links component, which is located in theInternal Components folder, which contains the data display on the page. See 2.1:Quick Links.

• Vision Statement

This element is a static graphic. (225px x 225px)

• Emergency Communications

This element may be activated in case of an emergency. To turn on, select the Turnon Emergency Communications checkbox under Site Control.


3.2 Section Front


These pages serve as hubs – collections of links and overview descriptions across the section.

• Title

• Abstract: This field is optional and fills in descriptive lines for the main textdisplay. It also populates the meta description field.

• Body copy: 75-150 word recommended copy count

• Promotion Components: Recommended for promoting content within thecurrent section, not for linking to other sections.4 components max

Promo Image: 200px x 140pxTitle Image: varies x 16px, 3-5 word recommended copy countAbstract: 10-30 word recommended copy countLink to Promo

Center Column

• Action Items: Use to link pages and documents that could be considered as “nextsteps.” (ex. Start a project. Contact our staff.)See 2.2: Action Items.

• See Also: Use to link related pages from other sections.See 2.4: See Also.

Right Column

• Quick LinksSee 2.1: Quick Links.

• WildcardSee 2.6: Wildcard Component.

• News and Event NavigationSee 2.7: News & Events Navigation


3.3 Microsite Front

The Microsite Index is a shared template that can be used by Departments, Centers, etc.


• Title



• Section Image: size varies x 35px. Image used to label section.

• Main Image: 620px x 220px

Left Column Links


• DownloadsSee 2.3: Downloads.

• See Also: Use to link pages from other sections.See 2.4: See Also.

• Announcements: Use to link to newsworthy pages (ex. award wins, facultyrecognized) and announce deadlines, program changes, etc.4 announcements max recommended5-15 word copy count recommendedNote: Use bullet points for each announcement

• Resources & Services: Use to highlight and link to related pages or documentsthat provide guidance or more information (ex. Identity and editorial guidelines,logo and school name usage, scope of services, etc.)4 links max recommended5-15 word copy count recommendedNote: Use bullet points for each Resource & Services link

Right Column



• News and Events NavigationSee 2.7: News & Events Navigation


3.4 Gateway Page

These pages serve as hubs—collections of links and overview descriptions across the site-at-large that act as a guide.

• Title: Appears in the title bar in the browser.





• Main Image: 230px x 160px

• Left Column Link Group5-10 links recommended: 1-10 word recommended copy count. Titles of linkgroups are editable.

- Note: The Ingeniux CMS allows for internal and external links. Internal linksare automatically generated to match their page name. If you wish to create a linkto an internal page but have the link text use words other than the linked page’stitle, then choose external link and enter the URL in absolute format.

• Right Column Link Group5-10 links recommended: 1-10 word recommended copy count. Titles of linkgroups are editable.

• Action Items: Use to link pages and documents that could be considered as “nextsteps.” (ex. Start a project. Contact our staff.). This element is optional.See 2.2: Action Items.

• Profile RotatorThis optional element provides the link to the Gateway Profile Rotator, which islocated in the Rotator Components folder, which contains the data display on thepage. See 2.5: Profile Component.

• Wildcard RotatorThis optional element provides the link to the Gateway Wildcard Rotator, whichis located in the Rotator Components folder, which contains the data display onthe page. See 2.6: Wildcard Component.

Right Column


• Wild CardSee 2.6: Wildcard Component.



3.5 Detail/Flex Page


The majority of the pages within the School of Dentistry Web site will use the Detail/Flex pagetype. The page has been designed to flexibly display the maximum number of elements. However,it is not recommended that all elements be used on every single page.

• Title


• Body copy: 500 word recommended copy countStyles are available for links, two levels subheadings (heading two <h2> andheading three <h3>), bullet points/unordered lists (<ul>), numbered lists (<ol>)and data table formatting (<table>). These can be formatted within theWYSIWYG editor. Additional images may also be included in this area.

• Form Builder: This optional element allows users to create simple forms (ex.Request More Information) and display them on the page.

• Photo: 230px x 160px. This element is optional.

• Photo Caption: 5-15 word recommended copy count. This element is optional.

Left Column Links

• Action Items: Use to link pages and documents that could be considered as “nextsteps.” (ex. Start a project. Contact our staff.)


See 2.2: Action Items.


See Also: Use to link pages from other sections.See 2.4: See Also.

• ProfileThis element is editorially selected. Pulls in Promo Image, Title, Abstract Title, andlink to Profile. See 3.8 Profile page.

• Wildcard CenterSee 2.6: Wildcard Component.

• Virtual TourUse to promote a tour. Pulls in

Right Column





3.6 A – Z Index

This page is auto-generated through CMS logic. The introductory copy is editable.

• Title


• Body copy: 50 word recommended copy count



3.6 Site Map

This page is auto-generated through CMS logic. The introductory copy is editable.

• Title





3.7 Print-Friendly Page

This page is auto-generated through CMS logic.


3.8 Profile Page


Profiles should be used to highlight members of the School of Dentistry community and tellstories that connect back to the key differentiators of the institution. Profiles should not seek to beall-encompassing histories or surveys, but should instead focus and expand in a way that createssite-visitor engagement. Profile stories live in one location, but can be distributed across the siteusing teasers.

• Title (Profile Name)

• Abstract Title: 10-30 word recommended copy count

• Abstract: 15-25 word recommended copy countAppears in all teasers for the profiles.

• Body Copy: 300-500 word recommended copy countinclude projects, selected publications, honors, consulting, media mentions, etc.Styles are available for links, two levels subheadings (heading two <h2> andheading three <h3>), bullet points/unordered lists (<ul>), numbered lists (<ol>)and data table formatting (<table>). These can be formatted within theWYSIWYG editor. Additional images may also be included in this area.

• Quote: 30-50 word recommended copy count

• Related ImagesProfile Name: size varies x 16pxMain Image: 230px x 160px. Appears on Profile Page.Promo Image: 200px x 140px. Appears on pages where Profile Rotators areselected.Thumbnail Image: 90px x 90px. Appears on Profile Index.

• Affiliation

• DetailsStudent

Title

Department/Location (Degree, Major, Year to Graduate)

Freeform (10-15 words per bullet)

Hometown, State

Reason for choosing University of the Pacific

Reason for studying dentistry/selecting major

Extracurricular Activities

Alumni

Title

Department/Location (Year Graduated, Location)


Specialization of Practice

Faculty

Title

Department/Location


Teaching and Research Interests

Academic and Professional Activities


Favorite aspect of teaching at University of the Pacific

Recent Publications

Administration

Title

Department/Location


Biography

Staff

Title

Department/Location


Biography

Donors

Title

Location


Biography

Left Column Links



• CategorizeUse to filter profiles on other pages and display only those profiles(Administration, Alumni, Donors, Faculty, Staff, Students).


3.9 Profile Index


• Title (Profile Name)


• Body Copy: 75-150 word recommended copy count

• Profile NavigationPulls back thumbnail, title, position/department location, quote and link for allavailable profiles

Left Column Links





3.10 Insert Page (ASP/Form Functionality Wrap Page)

• Title



• Form Insert: Inserts existing application functionality into page templates. Formore information, contact Kara Sanchez.


3.11 Dental Services Landing Page

• Title


• Body Copy: 100 word recommended copy countRecommended that key services and pages be highlighted here.

• Positioning Statement: 880px x 110px

• Testimonial

This element provides the link to the Testimonial Rotator, which is located in theRotator Components folder, which contains the data display on the page.Promo Image: 200px x 140pxTitle Image: size varies x 16pxAbstract: 15-25 word recommended copy countBy Line


• Dental Tip

This element provides the link to the Dental Tip Rotator, which is located in theRotator Components folder, which contains the data display on the page.Promo Image: 200px x 140pxTitle Image: size varies x 16pxAbstract: 15-25 word recommended copy count

• Wildcard

This element provides the link to the Wildcard components, which are located inthe Wildcards on Dental Services Landing Page folder, which contains the datadisplay on the page.See 2.6: Wildcard Component.

• Translation Links: This element is a link list that points to one page translationpages.


3.12 Dental Services Index Page


• Title



• Clinic NavigationAutomatically pulls back thumbnail, title, overview and link for all clinics.Categorized by location.

Left Column

• Translation Links


• Downloads2.3: Downloads.




3.13 Dental Services Detail Page


The majority of the pages within the Dental Services Web site will use the Detail page type.This page can be used as a Clinic Overview page or as a Clinic Detail page, but shouldn’t be usedfor both. The page has been designed to flexibly display the maximum number of elements.However, it is not recommended that all elements be used on every single page.

• Title

• Abstract: 10-15 word recommended copy count. This field is appears on theDental Services Index Page and fills in descriptive lines for the main text display.It also populates the meta description field.

• Clinic Page Group- Check the box to include page on Clinic index- Thumbnail: 100px x 100px- Location Categorization: Select a city.- Overview Intro: 50-75 word recommended copy count


- Overview Link- Services Intro: 50-75 word recommended copy count- Services Link- Fees & Payment Plans Intro: 50-75 word recommended copy count- Fees & Payment Link- Location Intro: 50-75 word recommended copy count- Location Link- How to Become a Patient Intro: 50-75 word recommended copy count- How to Become a Patient Link- What to Expect at Your First Visit Intro: 50-75 word recommended copy count- What to Expect at Your First Visit Link

• Body Copy: 500 word recommended copy countStyles are available for links, two levels subheadings (heading two <h2> andheading three <h3>), bullet points/unordered lists (<ul>), numbered lists (<ol>)and data table formatting (<table>). These can be formatted within theWYSIWYG editor. Additional images may also be included in this area.

• Form Builder: This optional element creates simple forms (ex. Contact our staff).

• Photo: 230px x 160px

• Photo Caption: 5-15 word recommended copy count

• Form

• TestimonialThis element provides the link to the Testimonial Rotator, which is located in theRotator Components folder, which contains the data display on the page.

• Dental TipThis element provides the link to the Dental Tip Rotator, which is located in theRotator Components folder, which contains the data display on the page.

Right Column Links




Left Column Links

• Translation Links

• Wildcard PromotionSee 2.6: Wildcard Component.



3.14 Virtual Tour

The Virtual Tour can be used to highlight buildings, events, groups, etc. This page pops up ina new window.

• Title


• Body Copy: 10-20 word recommended copy countThis field appears on the Homepage.

• Image: 480px x 280px


• Promo Image: 200px x 140px

• Thumbnail Image: 90px x90px; displays on Homepage


Gallery ComponentNote: There is a maximum of 14 Gallery Components per Virtual Tour.

• Title

• Caption: 40-50 word recommended copy count

• Image: 58px x 58px

• Image Thumbnail On: 58px x 58px

• Image Thumbnail Off: 58px x 58px

• Image Thumbnail Hover: 58px x 58px

• Video


3.15 News & Events Front

• Title


• Banner Image (same as Section Image): size varies x 35px.

• Events: Auto populated

• News: Auto populated




3.16 News Index

This page type uses the centralized repository of news within the CMS, and pulls in theappropriate articles that have been tagged by category name.

• Title


• News Navigation: Pulls back thumbnail, title, date, abstract, and URL


5 per page minimum



3.17 News Archive

This page type uses the centralized repository of news within the CMS, and pulls inthe appropriate information organized by content date.

• Title


• Body Copy


• News Navigation: Pulls back title and date


2.0 Last updated: 6/30/08 | page 44

3.18 News Story


Beyond cataloging press releases, News Story pages showcase features that can: coverrelevant academic news; survey breaking research around a policy point or trend in the news;frame a curriculum in ways that engage non-student audiences; publicize recent books, articlesand media mentions by faculty members; and more. Stories can also promote upcoming events aswell as provide event coverage.

More important than the feature article type is the relevance of each to the key messagingpoints the school has identified. Features should be strategically targeted, rather than focused onthose who are the most eager or available. Each piece of content should not only state the facts,but also draw clear lines of connection to their relevance and importance.

Photography or illustration to support the stories is key. Informative and engaging headlinesare important. And abstracts should intrigue visitors, making them want to learn more.

• Title: 5-15 word recommended copy count

• Abstract: 15-20 word recommended copy countThis field displays on the Homepage, News Index and meta description.Note: To accommodate the display of the Homepage on Mac IE5, the length ofthe copy must be a minimum of 3 lines.

• Date

• Contact

• Body Copy: 500 word recommended copy countStyles are available for links, two levels subheadings (heading two <h2> andheading three <h3>), bullet points/unordered lists (<ul>), numbered lists (<ol>)and data table formatting (<table>). These can be formatted within theWYSIWYG editor. Additional images may also be included in this area.

• Photo: 230px x 160px

• Photo Caption: 5-15 word recommended copy count

• Thumbnail Image: 100px x 100pxAppears on teasers, indexes and archives

Left Column Links





• Center Column WildcardSee 2.6: Wildcard Component.

• Right Column WildcardSee 2.6: Wildcard Component.

• Categorize- Category Type- Highlight on Site: for Homepage and News Front


3.19 Calendar

The Events Calendar pulls events from the Event Component folder in the CMS.

• Title

• Abstract: This field is optional and fills in descriptive lines for the main text display.It also populates the meta description field.




3.20 Calendar with Category View

This page type uses the centralized repository of events within the CMS, and pulls in theappropriate events tagged by that category name.

• Title


• Abstract: This field is optional and fills in descriptive lines for the main text display.It also populates the meta description field.



3.21 Calendar with Text-Only View

This page allows a 508/accessibility compliant view of the calendar. It is auto-generatedthrough CMS logic.

• Title

• Abstract: This field is optional and fills in descriptive lines for the main text display.It also populates the meta description field.\




3.22 Event Page

• Event DescriptionTitle: 3-10 word recommended copy countAbstract: 15-20 word recommended copy countThis field displays on the Homepage, News Index and meta description.Note: To accommodate Mac IE5, the length of the copy must be a minimum of 3lines.

• Event LocationMain Image: 230px x 160pxThumbnail Image: 100px x 100px


Body Copy: 30-500 word recommended copy countStyles are available for links, two levels subheadings (heading two <h2> and headingthree <h3>), bullet points/unordered lists (<ul>), numbered lists (<ol>) and datatable formatting (<table>). These can be formatted within the WYSIWYG editor.Additional images may also be included in this area.More Info

• Event Date & TimeEvent Start DateEvent End DateEvent Start TimeEvent End TimeRecurrenceRecurrence End Date

• CategorizeCategory TypeHighlight on Site: on Homepage and News Front



3.23 Email This Page

• Title

• Body Copy

4.0 Color Guide and Usage Last updated: 6/30/08 | page 56

4.0 Color Guide and Usage

Color is intentionally used throughout the Web site to provide emphasis and appropriateinformation hierarchy. All colors are specified within the Cascading Style Sheets (CSS) ashexadecimal values. We have provided recommended corresponding CMYK values here for thosewho wish to create matching print materials.

• PACIFIC ORANGE• School of Dentistry identity• Left navigation, breadcrumbs• Headings• Text

• PACIFIC GREY• Section navigation• Left navigation• Footer background• Text

• STONE• Background

• BLACK• School of Dentistry identity

• WHITE• Text

YELLOW• Dental Services background

5.0 Typography Last updated: 6/30/08 | page 57

5.0 Typography

A restricted set of typefaces has been chosen for use on the School of Dentistry’s Web site.Type set within the XHTML is specified in “ems”—a relative sizing technique. This allows sitevisitors to change the size of type on the screen using their Web browsing devices.

6.0 Photography Last updated: 6/30/08 | page 58

6.0 PhotographyImages included on the School of Dentistry’s Web pages should enhance the information

being provided or the messaging intended. When selecting photography, look to the high qualityof images already placed on the Web site. Compositions should use the same color palette toestablish a consistent theme.

The system of Web templates includes many areas for imagery. When including images onWeb pages, please ensure that they are sized appropriately and are at the correct resolution forthe Web: 72dpi/ppi. Use photos that are sharp and in focus.

7.0 Site Assets Last updated: 6/30/08 | page 59

7.0 Site Assets

Cascading Style SheetsThe School of Dentistry’s site uses Cascading Style Sheets (CSS) to control the appearance of

all content, including layout.

Multiple style sheets are used to work around display differences in some of the major Webbrowsers. Logic within the XSLT and CSS code identifies the type of browser being used andserves up the appropriate CSS.

A print CSS is used for document printing. This CSS hides repetitive page elements likeheaders and section navigation. It also reformats the layout to make efficient use of a typical8.5x11 sheet of paper. Finally, it orders elements in an approximation of their importance on thelayout.

If a Web visitor has CSS turned off or uses a device that does not support CSS, code andcontent is marked up in way that preserves hierarchy.

8.0 Naming & Organizing Your Files Last updated: 6/6/08 | page 60

8.0 Image Files

Image Types – By SizeAll sizes are listed in pixels, width x height

Titles, headlines or other text saved as images• Size varies (NO WIDER THAN 180px) x 16px:

o Dental Services Landing Page – Testimonial/Dental Tip/Wildcard Title Imageo Profile Page – Profile Nameo Detail/Flex – Wildcard/Promo Title

• Size varies (NO WIDER THAN 400px) x 16px:o Section Front – Title Image

• Size varies (NO WIDER THAN 240px) x 35px:o News & Events Front

• 880px x 110px:o Dental Services Landing Page – Positioning Statement

Photos – banner images, thumbnails, headshots, etc.• 58px x 58px:

o Virtual Tour – Image Thumbnail On/Off/Hover• 90px x 90px:

o Profile Page – Thumbnail Imageo Virtual Tour – Thumbnail Image

• 100px x 100px:o Dental Services Detail Page – Clinic Thumbnailo Event Page – Thumbnail Imageo News Story – Thumbnail Imageo Wildcard – Thumbnail Image

• 200px x 140px:o Dental Services Landing Page – Testimonial/Dental Tip/Wildcard Promo Imageo Gateway Page – Profile Imageo Gateway Page – Wildcard Rotator Related Imageo Profile Page – Promo Imageo Section Front – Promo Imageo Detail/Flex – Wildcard/Promo Photoo Virtual Tour – Promo Image

• 230px x 160px:o Dental Services Detail Page – Photoo Detail/Flex Page – Photoo Event Page – Main Imageo Gateway Page – Main Imageo News Story – Photoo Profile Page – Main Image

• 420px x 280px:o Virtual Tour – Main Image

• 620px x 220px:o Microsite Index – Main Image


Flash images• 620px x 160px:

o Home page – Flash Quote• 715px x 160px:

o Home page – Flash Quote

Image Types – By CategoryAll sizes are listed in pixels, width x height

• Dental Serviceso Landing Page

Positioning Statement 880px x 110px Testimonial/Dental Top/Wildcard Promo Image 200 x 140px Testimonial/Dental Top/Wildcard Title Image size varies

(MAX 200px wide) x 16pxo Detail Page

Main Photo 230px x 160px Clinic Thumbnail 100px x 100px Testimonial/Dental Top/Wildcard Promo Image 200 x 140px Testimonial/Dental Top/Wildcard Title Image size varies

(MAX 200px wide) x 16px• Event Page

o Main Photo 230px x 160pxo Thumbnail Image 100px x 100pxo Secondary Photo 200px x whatever

• Detail/Flex Pageso Main Photo 230px x 160pxo Promo/Wildcard Photo 200px x 140pxo Promo/Wildcard Title size varies (MAX 200px wide) x 16pxo Secondary Photo 200px x whatever

• Gateway Pageo Main Photo 230px x 160pxo Profile Photo 200px x 140pxo Wildcard Rotator Related Image 200px x 140px

• Home Pageo Flash Image Rotator 715px x 160pxo Flash Quote 620px x 160px

• Microsite Indexo Main Photo 620px x 220px

• News and Eventso News and Events Front

Banner Title Image size varies (240px wide MAX) x 35px Thumbnail Photo 100px x 100px

o News Story Main Photo 230px x 160px Secondary Photo 200px x whatever Promo/Wildcard Photo 200px x 140px


• Profile Pageso Profile Thumb 90px x 90pxo Profile Title size varies (200px wide MAX) x 16pxo Main Photo 230px x 160pxo Promo Image 200px x 140pxo Secondary Photo 200px x

whatever• Section Front

o Promo Image 200px x 140pxo Title Image size varies (400px wide MAX) x 16px

• Virtual Touro Main Image 480px x 280pxo Image Thumbnail On/Off/Hover 58px x 58pxo Promo Image 200px x 140pxo Thumbnail Image 90px x 90px


9.0 Naming & Organizing Your FilesThe CMS uses a basic directory organization for the upload of files. You should select the

appropriate folder to place your file.

• Documents—PDFs, Word files, etc.

• Images—gifs, pngs, jpegs

• Media—audio, video, flash, should be each placed in their named subfolders. Other filescan be placed in the media/other folder.

In addition, the images and documents folders contain subfolders that individualdepartments, centers and offices can use to contain their files. Content contributors areencouraged to restrict their image uploads to the following subfolders.

• banners

• dental_svcs

• detail_flex

• events

• gateway

• microsites

• nav

• news

• not_used

• profiles

• promo_comps

• text_images

• virtual_tour

• wildcard_promos

Content contributors are encouraged to restrict their document and PDF uploads to thefollowing subfolders of documents.

• academic_progs

• alumni

• community

• cont_edu

• dental_prof

• dental_svcs

• faculty_research

• microsites

• public_rel

• students

• support_school

9.0 Naming and Organizing Your Files Last updated: 6/30/08 | page 64

If you require an additional folder to be created, contact Kara Sanchez.

Why file naming matters:

• Ease of browsing – when CMS users need to add a picture to a page, they need tobrowse a long list of images – we need to make it as easy as possible to find thecontent they’re looking for.

• Findability – file names need to make sense and clearly indicate the subjectmatter so that people can find them again later.

• Avoiding error – if we all agree on a set of naming conventions, there’s less riskof confusion or accidentally overwriting somebody else’s files.

Guidelines

• Keep filenames lowercase. Don’t use capitalization.

• Don’t use spaces, periods or any characters or punctuation other than numbers,letters, dashes (-) and underscores (_)

• Try to pick descriptive names that make sense to others.

Not useful: joes_document_v3.doc

Better: annualreport_2008.doc

• File names should be 100 characters or fewer in length – no reason for them to belonger than 25 characters, generally

• No need to repeat the name of the directory where the file or image is beingstored, but DO pick a good descriptive keyword or two to describe file/imagecontents.

• Image file names should go from most general category to most specific detail –that is, the first part of the name should tell you the subject matter, the part afterthat should tell you which image category it is.

Examples:

• dugoni_main.jpg

• dugoni_thumb.jpg

• dugoni_promo.jpg

• dugoni_second.jpg

If material being uploaded is time-sensitive (i.e., a PDF of a newsletter) then date should beincluded in the filename. For example: alumni_news_2008-2-1.pdf

Linking to documents

• Don’t repeat the document name; give it a descriptive title, then follow it with thefile type and file size in parentheses.

Examples:

• Alumni News, Spring 2008 (PDF, 3.2 megabytes)<a href=”alumni_news_3-2008.pdf”>Alumni News, Spring 2008 (PDF, 3.2

9.0 Naming and Organizing Your Files Last updated: 6/30/08 | page 65

megabytes)</a>

• Financial Aid Application Form (Word, 1.2 megabytes)<a href=”financialaid_app_2008.doc”>Financial Aid Application Form (Word,1.2 megabytes)</a>

10.0 General Accessibility Guidance Last updated: 6/30/08 | page 66

10.0 General Accessibility GuidanceThe School of Dentistry has a commitment to keeping its Web site accessible to all, including

the blind or otherwise physically impaired.

Beyond this commitment, the federal government requires that institutions andorganizations that accept grant money maintain accessible Web site.

The new Web site design contains features and formatting geared toward accessibility andthe use of coding practices that allows a variety of Web devices to read and understand thecontent on our pages.

Content contributors should not have to worry too much about accessibility, as the pagetemplates within the CMS are designed to automatically format added content in ways thatremain accessible.

Some notes follow regarding areas of special importance.

10.1 Recommended GuidelinesAll pages on the School of Dentistry’s Web site should meet Priority 1 accessibility

recommendations as dictated by the WC3. Priority 2 and 3 are highly recommended.

The complete checklist of priorities can be found at:

http://www.w3.org/TR/WAI-WEBCONTENT/checkpoint-list.html

10.2 Key Content Contributor ConsiderationsSome areas that content contributors must pay attention to:

• All images must have “alt” (alternate) tags. In most cases, the alt tag is an editablefield within the CMS. Alt tag content should describe the information and/ormeaning of an image or graphic so that those using text-only browsers or otherassistive devices can interpret.

• Tables should not be used for formatting the visual display of information otherthan true tabular data such as a chart with program admission deadlines. To beconsidered accessible, headers of columns and rows must be labeled with a tableheader tag (<th>). This allows text-only browsers and other assistive devices tomake sense of the organization of the information.

• Do not copy and paste content directly from Microsoft Word, your email programor other formatted text into the CMS. It will retain formatting instructions thatwill trump the specified style within the CMS. Instead, copy and paste contentinto the PC’s Notepad or the Mac’s Simpletext applications. Then paste into theCMS.

• Do not add your own color or size formatting when adding content into the sitevia the CMS. If your content requires special formatting, contact Kara Sanchez forassistance.

Web styles & formatting

• Use the styles/Cascading Style Sheets (CSS) that have been created for the newWeb site. Focus on your content; let the system control its appearance.

• If you need a style that’s not already there, PR and IT should discuss and agreebefore adding it.


• When creating tables, set cellspacing to 0, cellpadding to 0, and border to 0.

• Avoid excessive spacing and use of break tags.

• Use standard HTML headers, paragraphs, and ordered/unordered list tags asmuch as possible. For example, the “Heading 3” /<h3> style will look the same asif you hit return, typed your headline, made it bold, and hit return again, but itwill be more structurally correct.

• CONTACT - <h2>Contact</h2> vs. Contact: - <h3>Contact:</h3>

• Don’t use color in your text. Again, stick to the CSS.

• Headings and subheadings should be capitalized. In hyphenated words, eachword should start with a capital letter. Example: “Community-Based Resources”

10.3 XHTML – ValidationThe School of Dentistry’s Web site is written in XHTML 1.0. All templates within the CMS

validate against both XHTML and CSS Web standards.

Content contributors should be able to use the WYSIWYG editor to do the majority of theirformatting. The WYSIWYG editor generates valid code.

If editing of the HTML is necessary, ensure that all tags are closed appropriately.

Examples:<p>This is a paragraph. It must open with tag and close with a tag.</p><p>If you want to force a line break,<br />you can add a tag where you want to break<br />but make sure you use a trailing slash!</p><p><img src=”/images/example.gif” alt=”An example of an image” width=”100”height=”100” border=”0” align=”left” /> This image is formatted to appear withina paragraph, aligned left. Images tags require a trailing slash at the end of atag.</p>

Content contributors and editors who apply formatting to text should check to ensure thatany code they’ve added also validates.

For more information about Web standards and XHTML requirements, see the Resourcessection at the end of this document.


10.4 Formatting TablesThe base CSS provides basic table formats to style the table within the page. For optimum

appearance, do not add a border, cellspacing or cellpadding to your table code. To alternatebetween beige and white rows, add <tr class=”beige”> to your table code.

<h2>Table Headline </h2>

<table width="100%" border="0" cellspacing="0">

<tr class="beige">

<td class="sideborder">Table Column 1</td>

<td class="sideborder">Table Column 2</td>

</tr>

<tr>

<td class="sideborder">Row 2 Column 1 </td>


</tr>

<tr class="beige">



</tr>

</table>

11.0 Writing for the Web Last updated: 6/30/08 | page 69

11.0 Writing for the Web

Identify your audience

EXTERNAL

• Prospective Students

• College Pre-Dental and Health Career Advisors

• Parents/Family (of both Prospective and Current Students)

• Alumni

• Non-Alumni Donors (including Foundations and Corporations)

• Academic Community and Deans of other Dental Schools

• Community/Neighborhood

• Greater San Francisco

• Potential Patients (Three Clinic Locations)

• Referrers of Potential Patients (Three Clinic Locations)

• Current Patients (Three Clinic Locations)

• Practitioners (including Potential Employers of School of Dentistry Grads)

• Media/Opinion Leaders

INTERNAL

• Current Students

• Faculty

• Staff & Administration

It is important to identify your main and secondary audiences, so that you know who yourpages need to address.


Understand your audienceKnow your audiences’ motivations, habits and preferences.

• Why are they likely to be visiting your site?

• What information or resources are they most interested in?

• How often do they visit?

• Do they prefer to search rather than browse?

Is your audience local or international?

• What cultural differences and sensitivities must be kept in mind?

• Do you use imagery, icons or terminology (jargon) that might not be widelyunderstood outside your culture?

Determine the GoalWhen thinking about the page that you are creating, what is the purpose? What do you want

the visitor to do?

• Search for information (e.g. a page of links)

• Scan general, introductory information (e.g. a program or department homepage)

• Read or print detailed information

Organize the ContentOnce you determine what the goal of your page is, you can create your content accordingly.

Details are best left to detail pages. You can link to as many pages as you want in order to fill ininformation for those who need it, without cluttering up the page for those who don’t.

• Break information up into multiple, linked pages because people do not like toread long pages.

• Make every page independent and explain its topic without assumptions aboutany previous pages.

• Link to background or explanatory information to help people who do not havethe necessary knowledge to understand or use the page.


Edit for ScannabilityBe clear and concise. Assume that, regardless of your content or the intended purpose,

everyone will scan it. Put the important information at the top of the page and compose as if youwere writing news articles with pertinent information first, and details following.

• Briefly summarize the text at the top, and include key points.

• Use informative titles to divide major sections. Use terms in these titles that youraudience is likely to enter into a search engine.

• Use informative headings to sub-divide a major section.

• Divide text body into paragraphs, and only present one idea per paragraph.

• Use short sentences.

• Edit down to bulleted lists whenever possible.

• Apply bolding to emphasize key points/words.

• Create pullquotes and call outs to emphasize key points.

Edit for ToneThe Web is an informal and immediate medium, compared to print, so a somewhat informal

writing style and small amounts of humor are expected. However, it is easy to go overboard andalienate your audience.

Be action-oriented, using action verbs and pointing your visitor to the next step. Viewadditional information and learn more about our program. (not “Additional informationavailable”)

Write personal angles, not just factual text. Portray the personality of your program ordepartment. "Judy Garber is one of the top faculty who are researching depression in childrenand adolescents. I specifically came to Vanderbilt to work with her," says predoctoral candidateJocelyn Carter. Working on Garber's research projects, Carter has seen her skills grow inresearch methodology, interviewing and statistics. (not “Peabody develops talent”)

Use simple sentence structures: convoluted writing and complex words are even harder tounderstand online. Do not alienate your visitor. Use basic words and minimal punctuation.Stick to one subject and one verb. (not “Figuratively, writing long complex structures istantamount to alienating your visitor—especially if the sentence structure is complex, includinglots of punctuation marks: like this.”)

Use active voice- The dog bit the boy (not “The boy was bitten by the dog”)

Use informational headings, not clever or cute ones- Faculty Information (not More ThanYou Want to Know)


Sample of converting text for Web purposes:

ORIGINAL TEXT

The Web is a sea of users floating around and waiting for you to grab them and tell themwhat they want to know. As you can see from this sentence, using metaphors can be confusingbecause you do not know if the reader is taking you literally. With a book, it doesn’t matter asmuch because someone has already paid the asking price. With a Web site, you theoretically havenot yet achieved your goal with a certain visitor—so it is important to not alienate them. The sametheory applies to puns, because puns require a point of reference that is generally relevant toparticular demographics. Everyone knows that it is incredibly important to avoid exaggeratedclaims and overly boastful language, especially uniquely intelligent and amazing writers likemyself. And using technical specifications relating to small percentages of statistically analyzedgroups of readers is unnecessary.

CONVERTED TEXT

Avoid:

• Metaphors, because people might take you literally.

• Puns. They do not work for international audiences.

• Exaggerated claims or overly boastful language.

• Unnecessary tech-talk or jargon. Write for your audience.

[All of the first paragraph can be condensed to four easily scannable bullet points.]

11.1 AcronymsThe following should be spelled out upon first reference, with the acronym following in

parentheses. Thereafter, they may be referred to by the acronym.

• American Dental Association (ADA)

• California Dental Association (CDA)

• American Dental Education Association (ADEA)

• Federation Dentaire Internationale – FDI World Dental Federation (FDI)

• American Student Dental Association (ASDA)

• International College of Dentists (ICD)

• American College of Dentists (ACD)

• Academy of General Dentistry (AGD)

• American Association of Orthodontists (AAO)

• Journal of the American Dental Association (JADA)

• Omicron Kappa Upsilon National Dental Honor Society (OKU)

• Tau Kappa Omega Dental Society (TKO)

• Introduction to Comprehensive Patient Care (ICPC)


• Dental Faculty Council (DFC)

• Oral Diagnosis & Treatment Planning (ODTP)

• Physicians & Surgeons (P&S)

• Doctor of Dental Surgery (DDS)

• International Dental Studies (IDS)

• Advanced Education in General Dentistry (AEGD)

11.2 Capitalization

• Proper names of organizations and groups capitalized (Arthur A. Dugoni Schoolof Dentistry, Department of Periodontics, Board of Regents, Alumni Association)

• References to organizations and groups not capitalized (dental school,periodontics, the board, our association)

• Titles are not capitalized (the dean, department chairs) unless a title precedes aname

• (i.e. Dean Patrick J. Ferrillo, Jr.)

• Capitalize the initial letters of all words other than conjunctions and prepositionsin titles, headings, and tables; Class of 2010

• a.m. (lowercase with periods)

• Lowercase spring, summer, fall, winter (when used in a sentence)

11.3 Contact InformationUse the following format. Note that there is no need to preface phone numbers with a label

unless it’s a fax machine or other special number, nor do email or web addresses need “Email” or“Web.”

Main Clinic

University of the Pacific, Arthur A. Dugoni School of Dentistry

2155 Webster St. , Level C

San Francisco, CA 94115

415.929.6400

Fax: 415.929.6654

Main clinic phone: 415.929.6501

[email protected]

dental.pacific.edu


11.4 DegreesSpell out first reference and put acronym in parentheses; acronym may be used in

subsequent references.

Doctor of Dental Surgery (DDS)

International Dental Studies (IDS)

Advanced Education in General Dentistry (AEGD)

11.5 Dates & TimesDates

Spell out month names and include year. Example: December 3, 2008

Times

• Times on the hour: 3:00 p.m. / 5:00 p.m.

• Times not on the hour: 3:30 p.m. / 5:45 p.m.

• There should be a space between the time and “a.m.” or “p.m.”

• a.m. and p.m. should be lower-case and include periods.

11.6 Commonly Used TermsNon-profit: As compound adjective

Example: non-profit organization

Nonprofit: as noun

Example: We started this nonprofit in 1999…

Affect versus effect: You have an effect. You can affect the outcome.

11.7 Numbers

• Numbers should be spelled in full at beginning of sentences

• Spell out whole numbers one through nine; use numerals for 10 and higher

• Percentages within sentences written as numeral and symbol (37%)

• Phone numbers are set off with periods (i.e. 415.929.6434); dates: June 14, 2007

• Use numerals and $ sign – no hyphen ($1 million, $100,000, $25, $4)

• For dollar amounts more than $1 million, use the $ and numerals and up to twodecimal places (i.e. $4.35 million, $4,351,242. or $300 billion)


11.8 Punctuation & Typographical SymbolsPunctuation

Spell out month names and include year. Example: December 3, 2008

• In a series, delete the comma before “and”. Example: “His shirt had red, orangeand yellow stripes.”

• Punctuation within quotations (except colons) Example: Dr. Smith commented,“I’ve never seen a case this complex.”

• Period following titles (Dr.), but not degrees (DDS) or schools or agencies (UCSF)

• No apostrophe when indicating a time period (i.e. 1980s)

• When abbreviating decades, use ’80s (not ‘80s or 80’s)

• Use a hyphen for compound modifiers (i.e. first-year student, second-yearresident)

• When listing a series of items, you may use a colon to precede them. Example:“The school offers a number of advantages, including: an intensive programallowing students to complete their degree in three years, a humanistic approachto instruction, a technologically advanced training laboratory…”

Typography

Use “curly quotes” — not foot and inch marks.

Use m-dashes — not double dashes (--)

Common symbols and how to type them in HTML

Entering these symbols requires switching into the HTML editor.

Em-dash — —

Left curly quote “ “

Right curly quote ” ”

Apostrophe ’ ’

Copyright © ©

Registered ® ®

Trademark ™ ™

11.9 Titles (of Creative Works)Titles of journal articles, short stories, articles, and T.V. episodes should be in quotes. Titles

of journals, newspapers, books and films should be italicized.


11.10 ReferencesTo the School

• The first reference to the school should be written out in full: University of thePacific, Arthur A. Dugoni School of Dentistry.

• Subsequent references should be to “the school”, “the dental school” or “ourschool”. You can also use “we” or “our.”

• Try to avoid: “The School of Dentistry” or “Pacific”. Avoid: “The University of thePacific”. (It’s just “University of the Pacific”)

To individuals

• Individuals with doctoral degrees referred to as Dr. on first reference

• Individuals without doctoral degrees - use first and last name and title/positionwhen appropriate

• Graduates referred to by “Dr.” and class year on first reference (Dr. Smith ’88, Dr.Jones Ortho ’00, Dr. Nelson IDS ’99)

• Subsequent references for doctors and non-doctors should use last name only(Ferrillo)

• Title and degree should not be used at the same time (not Dr. Ferrillo, DDS)

• The terms “chairperson” or “chairman” are not used (The chair presented a plan.)

• Third-person singular pronouns are avoided by writing in the plural (or “he andshe”)

When talking about clinics, don’t list Oakland as one of our clinics. Technically, we run it, butit is actually housed at Highland Hospital and owned by Alameda County.

11.11 Internet Terms and ReferencesInternet (uppercase)

Web site (Two words; “Web” is uppercase)

e-mail (lowercase)

URLS are listed without “http://” preceding them.

12.0 Resources Last updated: 6/30/08 | page 77

12.0 Resources

Basic HTML and CSS

• W3 Schoolshttp://www.w3schools.com/

• Lynda.comwww.lynda.com

Web Accessibility Web Accessibility Initiative

http://www.w3.org/WAI/gettingstarted/Overview.html

• The Web Standards Projecthttp://www.webstandards.org/

Meta Data

• How to Use HTML Meta Tagshttp://searchenginewatch.com/showPage.html?page=2167931

• Death of a Meta Taghttp://searchenginewatch.com/showPage.html?page=2165061