Web Style Guide

Please note: This style guide is for official University of Illinois Springfield website Editors and Authors and applies only to university websites that have the official University of Illinois Springfield website theme.

A Message from Web Services

The University of Illinois Springfield web presence is one of the most valuable assets we have. It showcases the entirety of our campus and as a result – our brand.

Every UIS website adds to the audience perception of the university. When an individual visits the UIS website, they take away with them an impression of the university and its departments.

Chancellor Koch has, in consultation with faculty, staff, and students, articulated three priorities for 2013-16:

a) Growth
b) Talent acquisition and retention
c) Facilities

To support these priorities, the Office of Web Services streamlined the online presence of the university and addressed the university’s digital reputation using a Content Management System and Official Website Themes for all official academic department and unit websites in 2013. The themes, standards and guidelines listed in this style guide reflect the changes in the redesigned UIS web pages.


Campus Web Policy

The UIS Campus Web Policy was established to ensure a high quality, marketing- and service-oriented web presence, including a coordinated presentation of accurate and important information, directed to a wide variety of constituents.

Campus Web Policy website, including:

The Office of Web Services

The UIS Office of Web Services oversees the UIS website, including the home page, the top-level pages, and department websites. This office monitors compliance with the UIS Web Policy and coordinates all matters related to official websites at UIS.

Office of Web Services website, including:


Guidelines

A) Naming Conventions:

  • Webpage URLs, files, images, etc. are named with short names, lower case, no spaces or special characters.
  • A title is placed on each web page.
  • Keywords are used in the web page Title and in the content to help search engines locate your website.

B) Text Content and Web Fonts:

  • Heading styles are used in a semantic structure in order to avoid web accessibility errors. Read more about Web Accessibility at UIS.
  • Heading styles are not used to style a paragraph or sentence. Heading styles are used for actual section headings in your content.
  • General and Long-Tail keywords are used in your text content. Bold, italicize, or place them in links to help search engines locate your website.
  • Text is moved into bulleted lists as often as possible. Web users are scanners. Bullet lists are much better than long passages of text on the web. Lists are created and phrases are turned into links, so users can click to go to another page and get details. More paragraphs are used than normally would be in a text document.
  • The Blockquote option is only applied to direct quotes from a person or quotes from another source.
  • Online Forms: For all feedback, registration, survey and other web-based forms, the WebTools Toolbox is used. A netID and password is used to access the tools.
  • Calendar: The WebTools Toolbox is also used to create department calendars. These are linked to on UIS websites, or the Office of Web Services can embed the calendar onto a web page.
  • Find more information about Web Fonts on the Creative Services website.

C) Links:

  • All links that point to external (outside UIS) websites, open in a new browser window or tab.

D) Images:

  • When a photo is uploaded to a UIS website, ALT text is entered in order to avoid web accessibility errors. Read more about Web Accessibility at UIS.
  • Generally, the jpg image format is for photographs, and the gif image format is for graphics. The format is created by an image-editing application, such as Photoshop.
  • As a general rule, web page images should have a resolution of 72 pixels per inch. This can be accomplished using a photo-editing tool, like Photoshop, and the file is saved “for the web”.
  • Large image files are kept under 200KB in size.
  • Images can be Right-Aligned or Left-Aligned to make the text flow around them. For no text wrap, the No-Alignment option is used.
  • Photos that will be used in a photo gallery are 1024 pixels in width.
  • At least one great photo is added to each of the main pages that are part of your site navigation.
  • Larger photos can be used that span the width of the web page content, but these images are kept short, so they don’t push content down on the web page.
  • The UIS Flickr account is used to locate photos for use on UIS websites or as the cover photo on homepages.
  • Model Release Forms are available for download (and can be printed out on department letterhead)

E) Logo and Brand:


F) Colors:


G) Writing for the Web:

Writing for the web is a specialized way of creating content that is both easy for an audience to understand and reflects the priorities of the university. In addition, a consistent approach to content serves as a foundation for search engine optimization.

  • Write for your Audience
    The audience is placed first and writing is done in a way they will understand.
  • Develop Visual Interest Through Photos and Infographics
    Information is laid out in a way that creates interest beyond just text.
  • Be Action-Oriented
    A response is encouraged from the audience through interactive elements.
  • Write Persuasively
    The “dots are connected” for the audience and engagement is driven.
  • Embrace Simplicity
    All content is short and concise.
  • Write for Search Engines
    Keywords are used to help search engines, but they are not overused. Content is organic.
  • Have a Goal
    Being strategic and having a purpose are of great importance.

Please refer to the UIS Writing Style Guide for additional writing guidelines.


H) General Content Guidelines:

  • Department/program/unit home pages are updated with something new every 2-3 weeks.
  • The Horizontal line button is used to create a full line to separate items on a web page. Other methods, like using the Shift key and the underline button on the keyboard, do not resize when the browser size becomes smaller and will repeat down the page on a mobile device.
  • Tables are used to show tabular data only, not to arrange content. The Column option is used to arrange content.
  • Faculty and Students are put in the spotlight on UIS websites. Did a faculty member publish a new book? Did a student graduate last semester and get a great job? Did a student receive an award or do something outstanding that can be featured?
  • Search Engine Optimization (SEO) Tips are used to make UIS websites more ‘findable’ by search engines.
  • On the web, less is more. Being brief, using lists, and providing phone and email info are important.

I) Responsive Web Design:

Websites built with responsive web design adjust their layout to make your site readable and easy to navigate on any device. Our websites use Responsive Web Design. This technology allows our websites to automatically respond to a user’s browsing environment: desktops, tablets, and mobile devices. Responsive Web Design eliminates the need for developing a different design for each browsing environment but use the same content for delivery.


More Help:

The Office of Web Services offers presentations, workshops, Web Help sessions and other opportunities for you to learn more and share knowledge with each other.