MUSC Web Style Guide - Medical Center Intranet

MUSC Web Style Guide
January 2012
The MUSC Web Style Guide is intended for campus-wide use to create a consistent
style for the MUSC websites. The information contained in this document should be
adhered to by anyone creating Web pages for MUSC. Many of the styles outlined at
the end of this guide are defined specifically for use with the Site Executive Content
Management System, which is the only approved method of creating Web pages for
MUSC.
By following the standards outlined in this guide and by using Site Executive,
employees will be contributing to a site that has been nationally recognized for its
content and style. A common look and feel to the site allows for easier navigation
for our visitors and provides consistency, so that when the visitor goes from one
page on the site to another, they still know that they are on an MUSC website.
Purpose of MUSChealth.com and MUSC.edu
The purpose of MUSChealth.com is to bring patients in to our hospitals and clinics
and to provide information to patients, visitors, prospective patients and referring
physicians about MUSC Health and its offerings. The website serves as the primary
source of consumer information and the target audience is:
• Family healthcare decision-makers
• Families with children
• New residents
• Seniors (age 65+)
• Prospective employees
• Prospective volunteers
• Prospective employer groups
• News media
• Specialty and primary care patients
• Referring physicians
MUSChealth.com is not intended to provide information about the university and its
programs, such as research and learning. That is the goal of MUSC.edu. However,
we do want to ensure that we have standard links to MUSC.edu so that those visitors
who are looking for that information can easily find it.
The target audience for MUSC.edu is:
Education
• Visiting, current, future and past students
• Prospective residents, fellows and faculty
• Healthcare professionals (CE)
• Teachers and community educators
• Health professional advisors in colleges statewide
• Professional colleagues
Research
• Prospective and current fellows, graduate students and faculty
• Funding agencies
• Regulators
• Care providers and healthcare professionals
• Patients seeking clinical trials
MUSC Web Style Guide January 2012 –revised March 2013 1

MUSC Web Style Guide
January 2012
• High school students doing research
• Media
As you write for an MUSC website, please keep in mind the audience and the
purpose of the website. Write in a style that is accessible and provides the
information that the site visitor would need.
Designing for Users
Whether you are creating a new section of an MUSC site or just a new page, it’s
important to consider the needs of the visitor. Keep the following points in mind.
What is the goal of your page/section Are you providing information about a
procedure or service or are you providing information about how to find a
clinic Keep the goal in mind as you create the page.
Who is your audience Put yourself in your visitor’s position and imagine how
they will want to use the site. Make it easy for them.
Consider how much content you really need online to achieve your goals and
how much you can realistically maintain over time. Visitors are not likely to
spend much time on a page. Studies have shown that most visitors tend to
scan pages quickly and move on. Give users important information upfront.
Assume visitors are doing one of two things: searching for something specific
or browsing to find out what is available.
Be consistent.
Responsibilities of Departmental Web Managers
Publishers of pages on MUSC’s servers are responsible for the following:
Ensuring the accuracy and timeliness of the information presented
Offering readers pages that represent professional design and quality
presentation
Regularly updating and keeping published information current
Understanding and complying with copyright, privacy, intellectual property
and libel laws
Ensuring that pages comply with Web accessibility requirements (for more
information visit www.section508.gov)
Responding in a timely fashion to inquiries and comments directed at one’s
published material
Ensuring that pages are search engine optimized by providing keyword-rich
titles, meta-data and content
Writing for the Web
Some general rules of thumb when writing for the Web:
Write succinctly – Web content should be concise and economically written.
A common suggestion is to write 50% less text for the Web than for other
media types.
Write for scan-ability - “Chunk” information beneath prominent, descriptive
headlines. Use bulleted lists to maximize quick retrieval of information. If
you must present a long page, try to minimize the amount of scrolling needed
to find information by creating a table of contents with appropriate anchor
links to subheadings within the document.
MUSC Web Style Guide January 2012 –revised March 2013 2

MUSC Web Style Guide
January 2012
Context – Make each page understandable on its own, i.e., if someone were
to print it or enter the site on this page via a search engine, make sure the
context can still be identified.
Write with appropriate tone – Write in a tone reflective of the
professionalism of MUSC.
Write language understandable to your audiences – Avoid using
terminology unless appropriate or required for the site. Avoid the use of
internal jargon, acronyms, and abbreviations that may not be obvious to
outside visitors.
Write keyword-rich text and titles – Keep the keywords for which you
want your page to be optimized in mind as you write your page copy and the
browser titles. Also, include a succinct page summary that will be used on
Search Engine Results Pages (SERPs).
Update content regularly – To maximize the effectiveness of your site keep
content fresh and accurate and to enhance search engine optimization.
Check your pages – Spell check and proofread your pages before putting
them up on your site, and verify that the information is factually accurate and
current. The Site Executive editor includes a spell check feature.
Web Accessibility
MUSC is committed to ensuring its websites are accessible, and, in coordination with
the State of South Carolina, will follow guidelines set out by Section 508 of
the Rehabilitation Act of 1973, amended 1998 by the Work Force Investment Act
(Section 1194.22 and its subsequent amendments) as its minimal requirements for
Web accessibility. Section 508 has been interpreted to also include accessibility to
websites for the blind, the hard of hearing, and those with mobility impairment. The
act requires that the information contained in a website be accessible to those with
special needs. Detailed information on Web accessibility can be found at
www.section508.gov.
Site Design for MUSC
The MUSC sites were completely redesigned in the winter of 2012 to create a new
look that expressed the needs of MUSC, and provided a consistent look for both
MUSC.edu and MUSChealth.com. From the home page to every page that is linked,
new templates were created. Every effort was made to consider search engine
optimization (SEO) in the new design, and all pages on MUSC will benefit as a result.
We are trying to increase the traffic to all of our pages.
A primary means to facilitate the adoption of Web design standards is through the
use of a predefined Web page template. MUSC uses templates to assure that certain
elements of the design, such as branding, navigation, contact information and
content, are all included on each web page and located in a similar location for easy
identification by website visitors. These important standards help website users to
effectively navigate and use the content of MUSC’s collective Web resources.
The templates were created using a “responsive design.” This allows them to be
viewed on multiple devices, including computers, iPads and other tablets, and mobile
devices such as cell phones.
MUSC Web Style Guide January 2012 –revised March 2013 3

MUSC Web Style Guide
January 2012
Use of Images
Images can add to the presentation of your pages, but they can also be distracting
or overused. When considering the use of images, keep in mind the audience and
that there are already graphical elements built in to the templates for the secondary
pages, i.e., the text you create on the edit page in Site Executive will be wrapped in
a template and may not require further graphics to make it appealing.
If you do use images, please remember to keep the file size to a minimum (under
50K per image) to allow the pages to load faster. Also, make sure that you have the
rights to publish the image. Stock images can be purchased on the Web at sites
such as iStock.com and jupiterimages.com. Remember that it is not legal to copy an
image off of someone else’s Web site.
For Web accessibility reasons, each image MUST have alt text. Images need to be
accessible to all users. Some visitors may have images turned off in their browsers,
or they may be using screen readers. Some may have slow connections or are on
mobile browsers, which might have trouble loading images. By providing textual
information about the images, images will not only be accessible through search
engines but all visitors will be able to tell what’s on the page. When an image is
added to a page in Site Executive, there is a field to add Alt Text. This text should
be as descriptive as possible and should contain keywords whenever those keywords
would make sense, since the Alt Text is frequently used by search engines to rank
your pages.
The recommended size for photos in the main content section is 200 pixels wide.
If you are placing images within a table, make sure that the cell width is defined for
the cell containing the image, or the image will not display properly in Internet
Explorer. For example, define a cell width of 30%. Never define a cell or table width
as a fixed pixel amount; widths should always be defined as percentages.
File Sizes in Site Executive
With Site Executive, any files, such as PDFs or PowerPoint presentations that you
want to link to, must be uploaded into the Site Executive database before they can
be linked. Please be aware, however, that file sizes must be less than 30 MB.
Larger files will cause trouble in the upload process and will slow down the speed of
the system. If you must link to files that are larger, it is recommended that you use
SharePoint to store the document.
MUSC Web Style Guide January 2012 –revised March 2013 4

MUSC Web Style Guide
January 2012
MUSC Web Standards
The following standards should be used when creating pages for MUSC.
Academic degrees
Bullets
Use periods for M.D. and Ph.D., do not use periods for
other academic degrees (MSW, FRCP).
Never use special character for bullets, instead use the
bulleting feature available through Site Executive on the
button bar:
Don’t use the arrow in the following line:
Or Request an Appointment Online
Capitalization
Capitalize Web. Website is one word, and Web page is
two words.
Use MUSC Health, but MUSChealth.com when
referring to the Website. Do not include “www” before
URLs.
Email should be capitalized only if it’s at the beginning
of a sentence, otherwise use email (it is one word, do
not use a hyphen).
Captions For captions under images, use a format of Heading 6.
Colors
Headings
Hyperlinks
Images
For highlight colors (i.e., on tables) use E7E0D6 for tan
and ECF6F8 for blue.
Use a Format of Heading 2 for headings in the main
body of the page. Use Heading 3 for headings in the
callout on the right side of the page.
For accessibility and search engine optimization, never
use “click here” or “click the link at the right” for
example.
Describe the destination of hyperlinks to manage
expectations users may have when clicking on a link:
“Register for this event,” “View a map.”
Typically you will not assign a Class to a link; it will
automatically be blue and underlined.
Do assign a Title – this works like an Alt Tag for the
link.
Open PDFs and Word Documents in a new window and
include a navigation bar.
Remember that the width of the page is approximately
685 pixels, so plan your image widths accordingly.
MUSC Web Style Guide January 2012 –revised March 2013 5

MUSC Web Style Guide
January 2012
The recommended size for photos in the main content
section is 200 pixels wide.
Create an images folder in your site’s main folder to
store the images for your site.
If you are placing an image within a table cell, always
define a width for that table cell, such as 30%. If you
don’t define a width, the image will not display correctly
in Internet Explorer. Never define the widths of cells or
tables as fixed pixel amounts; always define them as
percentages.
Whenever an image will be a link on your page, be sure
to set the border equal to 0 on the image properties to
avoid a blue line from displaying around the image in
certain browsers.
Index pages
Naming of folders
Naming of pages
Justification
The main page in any folder should be named
index.html.
Do not use capitals or spaces in the names of folders.
The folder titles should have correct capitalization and
spacing. You can use an dash (-) if needed, in the
folder name. For example, sports-neurology.
Do not use capitals or spaces in the names of pages.
Each page name should end in “.html” (e.g., index.html
or contact.html). If you have a multi-word name, then
use dashes to separate the words: family-centeredcare.html.
All pages and gutter boxes are left-justified, not
centered.
MUSC Web Style Guide January 2012 –revised March 2013 6

MUSC Web Style Guide
January 2012
Maps
When linking to a map, use the pages found in
muschealth.com/maps - they are named by street
address. If you can’t find the map you are looking for,
please contact MUSC Business Development and
Marketing Services at brandmgr@musc.edu.
Phone numbers Phone numbers should be written out as 999-999-9999.
Do not use parentheses for the area code and always
include the 843. Do not use letters for phone numbers,
since some smart phones do not have the letters
available. (Example, 792-BONE should not be used.
Use the numerals instead.)
Tables
Titles of pages
Tables should be avoided, if at all possible, except when
presenting tabular data. If you do have need to create a
table, make sure to make the width a percentage, rather
than a fixed pixel width. That allows the table to shrink
and expand when viewed on a PC or mobile device.
The browser title on each page is used for search
engine optimization and on search engine results pages;
therefore, it should contain appropriate keywords
whenever possible. If a browser title it not defined, the
regular page Title field is used.
The browser titles of pages should not repeat, so it’s
better to have “Contact the Radiology Department”
instead of “Contact Us,” which could be used by other
departments.
Within the title, used the ampersand (&) instead of the
word ‘and’ when appropriate.
Underline
Do not use underline to emphasize a point – underline is
reserved for links – use bold or some other method for
emphasis.
MUSC Web Style Guide January 2012 –revised March 2013 7