Radiology Website Guide

The department website guide is a set of standards to maintain consistency and uniformity throughout the website in order to best support clear and concise communication.

TYPOGRAPHY

Header 1 - (H1) Primary Header

Header 2 - (H2) Secondary Header

Header 3 - (H3) Tertiery Header with Built-in Line

Header 4 - (H4) Quadrary Header

 

Body Text

Example of Body Text

Normal - (P) paragraph body text. Words or phrases can have links. There will also be bold, italic and underline styling options. You will also have the ability to have superscript1, useful for references, yay!

Text Styles

Bold text (B)

Italic (I)

Underline (U)

Superscript1

Lists

Bulleted List - Unordered List

  • one
  • two
  • three
  • four
  • five
  • six

Numbered List - Ordered List

  1. one
  2. two
  3. three
  4. four
  5. five
  6. six

Horizontal Rule

Links

Links to words or phrases should be clearly relevant.  Here are examples of link types:

Email address:

Should be all in lowercase.
[email protected]

 

 

*If possible link to the direct url to source for doc, pdf files if not an original file.

*Documents (doc, xls, pdf or ppt files):

Highlight the title of the document and add the file type in parenthesis. 
Link to Word document files (doc).
Link to Excel files (xls).
Link to Adobe Acrobate files (pdf).
Link to PowerPoint files (ppt).

Avoid using "Link here".

External sites outside of radiology.ucsf.edu: 

Should clearly state name of the website.

For more information about the university's visual standards, visit the UCSF Visual Identity website.

Images

Resizing Images

Double click onto your image or open it using Preview.  Select Tools, Adjust Size, and Save.

Recommended Image Size

*Image use

Width x Height in pixels

In body text...

450 x 300

Image spanning in body text...

570 x 320

Two column text with image

570 x 420

Headshots**

70 x 100
100 x 135
150 x 200

*Respect the copyright, licensing, and attribution requirements of any image you use.  Patient-sensitive information should be removed before posting.
**Avoid mugshots, use as much natural light as possible.

Compress Image File Size

To avoid slow load time, compress high resolution images before posting.  You can use this link for compressing your images:  https://tinyjpg.com/.  Drop your .jpg or .png files onto the page and download.  

Directory File System

Images should be uploaded to appropriate folders.  Please make sure that image uploads go into their proper folders.  For example, uploads to research labs should follow this directory structure, wysiwyg>research>labs>lab_name.  For clinical sections, follow this directory, wysiwyg>sections>section_name.

Example of Image Right Justified

To aligned the image to the right of the text, first place the cursor at the beginning of the paragragh. Then upload the image. Select the image by clicking on it once. Then press the Right Align paragraph alignment icon.  To give the image a little spacing around it so it does not butt up against the text, add HSpace 15 and VSpace 5 to its image property.

Content Layout

  • Descriptive lab name
  • Overview paragraph
  • Research image
  • People:  name, title, email, and headshot (in accordion box)
  • Research directions (in accordion boxes)
  • PI at the bottome (use related people field.
  • Right side callout box:  Contact info, lab name, address, phone and email.

Accordion Box Use

Accordion boxes are useful for listing Research Directions.

Move accordion boxes by grabbing the upper left corner of box and drag.

Accordion Box Limitations

​What does not work in accordion boxes:

  • Image captions
  • Anchors
  • Columns

Related People Field

Type in Faculty name and it will pull up their headshot, name, and title linking to their bio page.  Note:  It will only show up at the bottom of page.