The following people in each department have undergone CMS training and are able/authorized to make changes to the library website. Feel free to reach out to these folks, or if the change you desire is something more complicated, you can always contact webmaster@gettysburg.edu for a consultation.
Have other questions? Email them to libweb@gettysburg.edu.
When creating links for pages, use lowercase and hyphens for spaces. Keep page names short.
Example: /library/circulation-policies.dot
When creating a new content block, put the department name, description of the content, and the month and year you created it.
Example: Library – web style guide – September 2020
If an existing content block is edited, change the month and year to reflect the date it was updated.
When naming images, use a descriptive name. Use hyphens for spaces and use lowercase letters.
Example: library-main-floor.jpg
Images should be created larger than needed and cropped using Photoshop or another program prior to being uploaded to the CMS; this will help when images are resized on a responsive device.
Use .jpg or .png formats for images whenever possible. Avoid .gif and .bmp.
When placing images on a page, do not try to be too “creative” with the layout. Keep images centered or left-aligned. Too much movement back and forth of images on a page, as well as text wrapping around images, makes responsive viewing more difficult. On smaller screens, images and text will stack on top of each other anyway.
Images should be uploaded to the /library/images/YEAR folder in the CMS, where YEAR is the current calendar year.
Images should be responsive instead of static width and height attributes, using the style attribute to assign a percentage width to the image. Images should include the alt and title attributes to apply descriptive text for use with screen readers, or if there is a problem loading the image. In the CMS, the alt attribute corresponds to the Image Description field.
Example: <img src=”/library/images/2017/library-main-floor.jpg” alt=”The main floor of the Library” title=”Library Main Floor” style=”width: 50%;”> will display “Library Main Floor” when mousing over an image (title attribute), and if the image does not load, will display “The main floor of the Library” (alt attribute). The alt attribute is what screen readers use to describe an image. The image will also be as wide as 50% of the usable space on the webpage (style attribute).
Headings should be used to identify hierarchy on a webpage, not for emphasis. For emphasis, use bold/strong text instead. The first heading (h1) should not be used as it will often be used by the college’s templates.
Do not use bold/strong or italics on headings.
Headings should be in order, so do not go from h2 to h4 (meaning you would be leaving out h3).
Example: <h2>Section 1</h2>
<h3>Section 1.1</h3>
<h3>Section 1.2</h3>
<h4>Section 1.2.1</h4>
<h3>Section 2.1</h3>
<h2>Section 2</h2>
Bold/strong can be used to emphasize text. Use sparingly.
Italics should be reserved for citation purposes. If you have to use italics for emphasis, consider bold/strong as well.
Never use underline for emphasis or as part of a citation, as it can be confused with a link.
Sub or superscript and strikethrough should be used sparingly.
When creating a list of items, use the unordered (bullets, <ul>) or ordered (numbers, <ol>) list tags. Ordered lists should be used if sequence matters.
Use the indent function if you need to offset something from the main body instead of a bullet.
Do not change text size or color.
Keep text left-aligned.
Avoid using the </br> tag to create line breaks.
Using bold/strong for links will provide an additional cue for readers scanning the page.
Link text should indicate a specific destination and usually be a phrase, not a single word. Do not use “Click here” or similar directions to indicate a link. “More information” or “Read more” may be used as long as there is context prior to the link.
Example: The new web style guide is now available to review.
Email addresses should be spelled out in addition to linked.
Example: Email rmiessle@gettysburg.edu for more information.
Phone numbers can be linked so they are easily clickable on a mobile device. This is optional but can be useful. This has to be done in the HTML/Source editor.
Example: Contact R.C. Miessler at <strong><a href=”tel:+17173377020”>717-337-7020 </a> </strong> will create Contact R.C. Miessler at 717-337-7020
If using an image as a link, include the destination in the alt attribute for the img tag.
Avoid using the “open link in a new window attribute” for links. Web users are used to having new pages open in the same window or tab, and there are ways for users to force a link to open in a new tab if that is their desired outcome.
Avoid using tables. See a member of the WAC if you need help organizing information in a tabular way to rethink your approach. Tables do not work well with responsive web design.
Avoid using forms. Use email addresses and create CNAV aliases when appropriate. If a form is required, use a Google Form or other technology. If you absolutely need a CMS form, talk to the WAC.