Web Style Guide

Anatomy of a Web Page

The look and function of our website is based on layers of design and content.  Design styles are applied to each page automatically through a design template.  Then, local editors select predefined styles through a content management interface, and workarounds are applied by directly editing the source HTML by advanced users.  First, let's get acquainted with the elements of a standard page as shown in the example below:

The three main sections of a page, vertically, are the header, body, and footer. The header and footer are designed in conjunction with the USFSP web group. At the bottom of the header is a library-specific navigational pulldown menu, which is managed by the library's web committee. The footer is also an area where both library and USFSP sections reside. The system footer at the very bottom under the yellow line, and the USFSP quicklinks at the very top of the header are institution-wide standards. The library footer, directly above the yellow line in the footer is also managed by the library and we can add/remove links as necessary.

Horizontally, our pages either contain a single box with all content, or more frequently have two sets of content boxes, with the left 25% as one column, and the remaining 75% as the right column.  Page navigation can be selected to be at the top of the page or on the right. As you can see from the example below, content managers can edit all of the horizontal sections, add a 100% section across the top or bottom (below the header or above the footer) as well as add profiles, page navigation, and content in the right box:

Using the Web Page Editor for Existing Pages

In order to edit a page, you must first be able to log on through the link at the bottom of any managed page, Login to LibApps, which signs you into the library's web instance.  Next, enter the Graphical User Interface (GUI) editor for the content box associated with your content.  In the example above, you would click on the bottom right of the content box, and then choose if you want to edit through the GUI or edit HTML directly (blue box on right of example, above).

Once inside the editor, there are predefined styles for you to choose from to format the headings, paragraphs, and other items of the page.  Some styles are selected automatically, such as the Title font, the profile items, and the breadcrumb navigational elements.

In this example, the main heading item is being edited, which should be Heading 4 paragraph Format, which creates an <H4> tag surrounding it in the HTML code:

Below is a listing of each of the editable areas and the fonts and sizes to be used:

Note that the editor is unlocked, and so you should only use the styles mentioned above and not from the Font List, or the pages will have conflicting styles.  Also notice that while in the GUI, some items may not reflect their actual size.  Always view the end result through the browser to see how the fonts will look on the finished, published page.

USF Web Color Palette and Font Styles

The USFSP library website uses a collection of colors and styles are are a subset of the styles approved for use by USF Marketing & Communications.  Note that Library Research & Instruction LibGuides predate the web site and use different standard colors recognized within the library LibGuides community.

Text/Font Styles

• Text must adhere to brand standards at https://www.usfsp.edu/logo
• Goudy Old Style for USFSP
• Univers or Open Sans Condensed for headlines / call-outs
• Arial for Web text that is not a major headline
• Text that is not a link will not be underlined.

USFSP Library Style Guidelines

Library guidelines for use of icons, items to appear on pages, Departmental Landing Pages vs. Standard Web Pages vs. LibGuides, are found in the listings below.

Content Guidelines

• Reusable content should be centralized through Master Link Lists.
• Document files should be posted as PDF formatted documents only for usability.
• Forms will not allow for uploading of restricted documents and should use all measures to prevent content hacking or robot attacks (CAPTCHA)
• Pages should not be published while under construction, or without content.

Image Guidelines

• All images must contain an ALT tag.
• Imagery will follow the visual direction as set by Digital Communications and adhere to the USFSP brand.
• Imagery must be optimized for the web in RGB, 72 dpi and < 250k maximum per image.
• Icons will be of the hover enabled variety, and are selected from the site font-awesome.io so color, size can be controlled easily.

Links and Navigation

• Links will not contain the words click here.  Linked text will be the exact description of the referenced content.
• Links will be underlined within text, underlined on mouseover or hover when part of a link list or associated with an icon, and be of a standardized color as set by Digital Communications throughout the entire site, with the exception of specialized content areas on the main page and Department Landing Pages (to match Icons)
• Links to external destinations will open in a new browser window.
• Links to internal pages will open in the same browser window with the exception of linked files such as .PDF formatted documents.
• Short URLs can be established with the library web developer for the purposes of communicating memorable addresses within print or spoken formats.
• URLs should indicate the group, or functional element type ( Service, Resource, Space, etc) within the URL body.

Data Usage & Gathering

Data will not be obtained for any usage beyond that of the intent of the collection point, and will adhere to the USF System privacy policy statement (forthcoming from Patrick Baxter)

• Google Analytics and associated software, as well as SpringShare software will be used to track the site and will be present on every page.
• Data gathering of personal information, such as social security numbers or credit card information, is strictly prohibited with exception to those USF System applications for that intended use.
• Forms should be through SpringShare or through Google Forms for MyUSF signon if necessary.

Layout

Web page navigational styles are selected by the content manager, and consist of either a tab layout on the top of the page, or as a sidebar with buttons.  Which method is best should be based on how many related subpages exist and how they should be organized.  To select a navigational style, open the GUI for the page in question and select Guide Navigation Layout from the Navigation Icon (highlighted in yellow in the following example below:

Layouts are predetermined, and consist of the following types:  Top Navigation, Side Navigation, and sizes of 25%:75%, or 100%.

Below is a listing of all of the existing Layout Styles Available to select:

• Tabs Layout Style: System Default: Tab Layout
• Tabs Layout Style: People Page Layout (Special Use)
• Tabs Layout Style: Web Groups Minimal Design Page: Top Navigation, with title only without Search Bar
• Sidebar Navigation Layout: System Default (LibGuide format)
• Sidebar Navigation Layout: USFSP Side-Nav Layout, with title only without Search Bar
• Sidebar Navigation Layout: Web Groups Minimal Design Page: Side Navigation, with title only without Search Bar

Exceptions to these layouts are the main page and the Departmental Landing Pages, which have Icons to promote areas and varied navigation.

All pages should have the following minimal informational elements, dictated by a design template.

Departmental Landing pages should have the following minimal elements, in the same locations:

• Standard Elements (Header, Footer, Page Navigation)
• Department Contact
• Group Pages Search Box
• Icon Groups for Main Department Sections
• Last Updated Information

Training, Tutorials & Help

• Create A Web Page
  The process of creating a new web page or course guide, step by step.

• https://usffl.service-now.com   (Select Nelson Poynter Library from Location dropdown)
  Submit a USFSP library helpdesk ticket to request training through Systems for one-to-one introductions for content managers.  Content Managers may also submit a ticket to the USFSP library helpdesk to answer questions related to web tasks. Systems can help be sure pages are editable by content managers, and assist in any design issues.

• https://support.springshare.com/libguides
  SpringShare's LibGuides v2 Training Section on their website reviews all of the major functions of page building.

• http://libguides.northwestern.edu/libguidestoolkit/home
  Northwestern has a set of handy, limited topic tutorials that are specifically written for use by content managers.