Skip to Content - Skip to Navigation

Formatting Content for the Web: Helpful Hints

These guidelines are intended to help you follow the standard formats for the IUP website.

Following the standard formats will increase consistency and usability across the website and maximize Google searchability.

Introduction/Headings

Use them according to the guidelines below. They are not interchangeable.

Introduction

Use the introduction style when highlighting the first paragraph of your content (see sample below). Here is how to apply the introduction style.

Indiana University of Pennsylvania was founded as Indiana Normal School in 1875, with 225 students and one building, John Sutton Hall.

In 1920, the school was awarded the right to grant degrees. Its name changed to the State Teachers College at Indiana, Pa., and its ownership changed to the Commonwealth of Pennsylvania.

The point of the introductory style is twofold:

  1. It shows people where to start reading. This is particularly important on a busy webpage that includes many navigational elements.
  2. It encourages writers to have a strong lead sentence for the webpage. That first sentence should always tell you the one most important thing a visitor to that page needs to know. Many visitors won’t get any further. So if the first sentence isn’t a good introduction to the page—it should be.

Note: The introduction style is for the first paragraph only. Do not use the introduction style in place of headings.

Headings

Use headings for side heads within your content. They should be used in descending order: The title/headline uses Heading 1, the primary side heads use Heading 2 (red), side heads within the primary Heading 2 side heads use Heading 3, etc.

Grants (Heading 2)

Following is information about grants offered through the office.

Grant A (Heading 3)

This grant provides funding to eligible undergraduates ...

Grant B (Heading 3)

This grant provides funding to eligible undergraduates ...

Scholarships (Heading 2)

Following is information about scholarships offered through the office.

Scholarship A (Heading 3)

This scholarship provides funding to eligible undergraduates ...

Scholarship B (Heading 3)

This scholarship provides funding to eligible undergraduates ...

Please note the following:

  • Heading styles are not to be used for sentences, just for headings.
  • Headings are not to be confused with the introduction style.
  • Use of headings helps with Google searchability.

Mixing the Two

Do not use introduction and a heading style. This alters the heading appearance and consistency.

Showing Emphasis

Italics

Use italics to show emphasis. However, overusing italic type detracts from its ability to show emphasis.

Bold

Reserve bold for when you really need it. Overusing bold detracts from its ability to show emphasis. Using bold in text also detracts from the ability of headings to stand out on a page.

All Capitals

Do not use all capitals. They make text more difficult to read, and some people interpret them as yelling.

Note: Organizing text with the appropriate headings, ordered lists, and other styles may be a more effective way of showing emphasis.

Links

Define the Link

The linked text should tell a person what is on the other side.

Do

Learn more about the American Psychological Association.

Don't

  • Click here to learn more about the American Psychological Association.
  • Learn more about the American Psychological Association ... More.

URLs in Text

Do not use URLs in text.

Do

See American Psychological Association for more information.

Don't

See American Psychological Association, http://www.apa.org/, for more information.

E-mail

Do not link a person's name to an e-mail address. Link a person’s name to a page with more information about the person, but write out an e-mail address.

Questions may be directed to Mike Powers, mpowers@iup.edu.

Quicklinks vs. Hyperlinks

For links to other sites/pages within the content management system, use quicklinks rather than hyperlinks. When content moves, hyperlinks break. If you don't know where to find content in the CMS, please ask!

Other Points

  • Do not make surrounding punctuation—such as periods, commas, or quotes—part of the link.
  • It is not necessary to make links bold.

Customized Formatting

Please use the standard formatting styles provided on the toolbars within the CMS editor. Centered and underlined text, for example, are not used on the website.

Also, use the ordered-list styles—bullet points and numbered lists—provided by the CMS, rather than creating them by hand.

Tables

Avoid use of tables when possible. There is a growing focus on making websites more accessible to people with disabilities, and tables are not easily translated for those who use screen readers on the Web.

Images

Photos and other graphics should be sized appropriately before being uploaded into the CMS. Do not resize images within the CMS; uploading oversized images is an inefficient use of storage space on the central server.

Standard photo sizes for the IUP website are as follows:

  Width Height DPI
Main Image (Spans 2 Columns, or Width of Page) 553 pixels 200 – 318 pixels 72
Inline Image (Spans 1 Column, or Half of Page Width) 271 pixels 203 – 360 pixels 72
Inline Image (Spans ½ Column, or a Quarter of Page Width) 130 pixels 98 – 173 pixels 72
Image in News Post 200 pixels Follow aspect ratio 72
Image in Photo Gallery 640 pixels Follow aspect ratio 72

Divisions in Text

Do not use lines or combinations of symbols to make divisions in text. Proper use of headings should suffice.

Examples of what not to do:

______________

~~~~~~~~~~~

-------------------------

  • Web Team
  • Sutton Hall, Room 316
    1011 South Drive
    Indiana, PA 15705
  • Phone: 724-357-3062
  • Fax: 724-357-5512
  • Office Hours
  • Monday through Friday
  • 8:00 a.m. – 12:00 p.m.
  • 1:00 p.m. – 4:30 p.m.