COLLEGE OF ARTS AND SCIENCESCOMMUNICATIONS SERVICES

asccomm.osu.edu

Standard Website Overview

2

INTRODUCTION

TABLE OF CONTENTS

Introduction

Web Accessibility and Usability

Process Overview: What to Expect

Website Customization Home Page Elements Headers Home Page Layout Feature Modules Color Options

Inside Pages Basic Page News Module Events Module People Module

Next Steps

Websites are an important tool for all of our audiences and are often the first face of the university that people encounter. The need for a high-quality web presence with up-to-date content has never been so great and the stakes never higher. No matter how big or small your area, we have created a web solution to showcase and promote your people and programs.

A quarter of prospective students decide not to apply to a college because of a bad experience on the college’s website. Chronicle of Higher Education, April 2011

Websites not only represent your unit but are a continuation of the College of Arts and Sciences (ASC) story, and an extension of The Ohio State University.

In alignment with university standards, we have developed college web standards that create a comprehensive foundation for College of Arts and Sciences web communications. These standards improve the user experience, web accessibility, maintenance efficiency, and performance.

Built using Drupal, a Content Management System (CMS), Standard Sites allow you to manage your own content. Drupal was chosen, in part, because of its flexibility and modular design. Standard Sites are only the beginning; we will continue to develop new features, themes, and site offerings. This is, and will continue to be, a work in progress.

ASC Communications will support you through the entire process. We can prepare your group for your site’s launch—from content review and training through design customization and site launch.

“64% of students and 73% of parents said a bad college website experience would negatively affect their perception of the school or cause them to eliminate the school from their list of choices.” Noel Levitz, higher education consulting

2

3

4

6

16

24

3

We want our sites to be accessible for the widest possible audience. We feel that a primary role of the academic community is to provide opportunities to the most diverse populations that we are able to serve.

What is Web Accessibility?Web accessibility refers to the creation of disability-friendly websites. Most people have heard about the use of screen readers—tools for the visually impaired.

Many of the accessibility tasks we undertake when creating web pages are simply to make them more useful when read by a screen reader.

However, there is more to building an accessible website than optimizing for a screenreader. Web accessibility also takes visual, auditory, physical, speech, cognitive, and neurological disabilities into consideration.

What is Web Usability?Web usability refers to the user experience and the ability to locate and identify key information. It refers to visual design, organization, content, color, naviga-tion, and consistency.

Audiences’ needs are at the center of our web strat-egy; we want to make sure visitors can quickly find the information most important to them, and that it is up to date and clearly conveyed.

Relish simplicity, and focus on the users’ goals rather than glitzy design.Jakob Nielsen from Designing Web Usability: The Practice of Simplicity

WEB ACCESSIBILITY AND USABILITY

4

PROCESS OVERVIEW: What to Expect

How long does it take?It typically takes about three months from the kick-off meeting until the launch of a new site. However, there are innumerable factors that affect this timeline, including availability for training and the amount of new content that needs to be added. If you have a specific target date, please let us know.

Kick-OffThe first step in designing your new website is to meet with members of ASC Communications Services. We will introduce you to our processes, review your options, and outline next steps. In addition, you will have the opportunity to discuss any specific needs for your unit.

Checklist❑Choose a URL if you don’t already have one (it will be subject to approval by the OSU Webmaster)❑Identify your content editors and content managers❑ Prepare a content outline❑ Choose theme customization elements: layout, color, header, and feature modules

TrainingTraining is required for content editing and management access. There are two basic levels of Drupal train-ing: content editor and content manager. Both editors and managers are able to add and edit content on pages already in existence. Content managers can create new pages and manage site navigation. More information can be found at asccomm.osu.edu/training.

Checklist❑ Schedule and complete content editor training❑ Schedule and complete content manager training (if appropriate)

ThemingAfter the pre-production site is activated, we apply a customized header, color palette, and layout, and configure feature modules.

Checklist❑ Approve customized header❑ Approve color and layout

FramingTo help jump start the process, we will create pages and navigation before we turn the site over to you.

Checklist❑ This step of the process is collaborative; we will work together to create the site framework

5

Site TurnoverWhen the new site has been themed and framed, and appropriate training has been completed, we’ll meet with you and provide a tour of your new site, provide additional training as necessary, and discuss a timeline for site launch. The pre-production site is then turned over to you (trained content editors and content manag-ers) to add content.

Checklist❑ Tour the new site❑ Develop a target timeline for site launch❑ Receive access to pre-production site

Adding ContentDepending on the size of your site, adding content can take anywhere from days to months. Each unit is responsible for the management of its own content; we are available to consult on content, navigation, and technical issues.

Checklist❑ Coordinate content updates with your content editors and managers❑ Double check web accessibility❑ Complete our Site Readiness Checklist

Review and TestingWhen you are comfortable with your site's content and have completed the Site Readiness Checklist, we will begin site testing. Once testing begins, you will no longer be able to access your pre-production site. We use software that scans for broken links, web accessibility issues, missing files, and other technical problems. Generally, this step takes approximately two weeks; however, if many issues are present, it can extend the timeframe and/or the site might be returned to the owner to resolve these issues.

ConfirmationWhen testing is completed, we will notify you that the site is ready to launch. This will give you a chance to prepare announcements or other marketing materials to coincide with the site launch.

Checklist❑ Make sure you are ready to announce your new site❑ Inform your content managers and editors that the site is going to launch

Site LaunchOnce confirmation is received, the site is moved from pre-production to the live environment and the univer-sity webmaster is notified. Once live, you will begin maintaining content on the active site.

Checklist❑ Announce your new site!

6

WEBSITE CUSTOMIZATION

Standard Sites are customized to provide distinction and differentiation for each individual website.

Website customization elements (headers, color, layout, and feature modules) offer countless options, while providing brand alignment and a consistent user experience.

With the creative application of images and video to the inside pages, you can create a dynamic website throughout.

The following pages detail options and include examples chosen by various units within the College of Arts and Sciences.

If you have any questions, ideas, or needs that you feel cannot be accommodated by this design, please feel free to discuss them with us—we can work with you to identify solutions, create new approaches, or suggest alternatives.

7

WEBSITE CUSTOMIZATION

8

Ohio State Navigation BarTo comply with university guidelines, the Ohio State Navigation Bar sits at the top of each page.

HeaderThe Header of your site contains your unit’s word mark, the university logo, and the Primary Navigation for your site.

Top SectionThe Top Section of the site contains a prominent image that you can change, an optional introductory statement, up to five Quick Links, and a flag image that links to the main College of Arts and Sciences website.

Feature ModulesEach site is equipped with three Feature Module options: News, Events, and People. To keep your website fresh, these modules highlight current news, upcoming events, and a random selection from the people directory.

FooterThe footer contains contact information, a link to the College of Arts and Sciences privacy policy, web accessibility information, a search bar that searches within your website, social media icons of your choice, and a link to the College of Arts and Sciences website.

WEBSITE CUSTOMIZATIONHome Page Elements

9

Home Page ContentEach home page has an editable content area for text, images, or video.

WEBSITE CUSTOMIZATION

10

WEBSITE CUSTOMIZATION

Headers can be customized with color, imagery, illustration, patterns, or texture to differentiate your site. These headers are clear, consistent, and highly legible on a variety of devices, including smart phones and tablets.

Some elements of the header have been standardized for university and college brand alignment. A custom wordmark has been created for each unit within the College of Arts and Sciences and is always presented to the left of the Ohio State logo. The university’s official logo is the only one that can be used in the header of the Standard Site.

For more information on word marks please visitasccomm.osu.edu/word-mark.

Headers

Word Mark

11

HOME PAGE CUSTOMIZATIONHeader Examples

12

WEBSITE CUSTOMIZATIONHome Page Layout

There are three Standard Site layout options.

Smaller image, in horizontal orientation

Stacked Feature Modules

Larger image, in vertical orientation

Side-by-side Feature Modules

Larger image, in vertical orientation

No home page view of Feature Modules.

Largetext box

Smallertext box

Smallertext box

Layout A

Layout B

Layout C

one column

one column

one column

NEWS MODULE OPTIONS

two columns

EVENTS MODULE OPTIONS

two columns

PEOPLE MODULE OPTIONS

two columns

Standard Sites come equipped with three Feature Modules: News, Events, and People. A variety of module combinations are possible, based on what you want to communicate to your key audiences.

For each Feature Module, the home page view has two layout options: one column and two columns.

Each Feature Module has three views: the home page view, an index page, and a full story page.

13

WEBSITE CUSTOMIZATIONFeature Modules: Home Page View

14

WEBSITE CUSTOMIZATION

There are seven Standard Site color options. Each belongs to the College of Arts and Sciences’ complementary color palette, and has been tested for high contrast using white text to meet web accessibility standards.

On the home page you will see your selected color displayed in the Top Section, in the top of the Feature Modules, and in the footer.

To see the entire color palette visit asccomm.osu.edu/color-palette.

LIGHT NEUTRAL (1)

Color Options

LIGHT NEUTRAL (1)

SPRUCE (4)

FIREBRICK (2)

MANDARIN (5)

PEACOCK (3)

LIME (6)

DARK NEUTRAL (7)

ARTS AND SCIENCES COLOR PALETTE

15

FIREBRICK (2) PEACOCK (3) SPRUCE (4)

MANDARIN (5) LIME (6) DARK NEUTRAL (7)

Color Options

WEBSITE CUSTOMIZATION

16

Primary NavigationPrimary navigation appears in your header and is displayed on all pages within the site. This navigation represents the main topic areas or big ideas of your site. These would typically include Undergraduate Students, Graduate Students, Programs, etc.

Breadcrumb BarThis string of linked page titles serves as a site navigation map indicating what page you are currently viewing, what menu it’s linked to, and the “breadcrumbs” to find your way back home.

Content ZoneThis area displays basic page content, including title, main body content, images, video, links, etc. In addition to text it can also host images and video. Text can link internally to other pages within the site, externally to other sites, and to documents.

Secondary Navigation This navigation works with the primary navigation to create nested content areas within the site for clean organization and simplified navigation. Secondary navigation allows you to navigate within your primary topic areas.

INSIDE PAGESBasic Page

Just as the home page of your site is the face of your unit or area, the collection of interior pages within your site represents the organization of your story.

17

Creating A PageBasic interior pages are all created the same way. The Title field becomes the title of the page. Content including text, images, links, and video is added in the Body area. Formatting is done with the icons along the top, similar to Microsoft Word.

INSIDE PAGESBasic Page

18

From the home page and index page views of the News Module, you can click on the story title to navigate directly to the News Story.

The story page shows the title, date, a large image, story detail, and thumbnail links in the right sidebar that display the seven most recently published stories.

In the body text of the news story, you may include links, images, slideshows, and video—the same as on basic inside pages.

News Story

INSIDE PAGES

NEWS STORY

News Module

The News Module has three views: News Story, a home page view, and a news index page.

19

Home Page NewsThere is a one- and two-column design for flexibility.

News items populate the home page based on date, although it is possible to force an item to the home page.

News IndexFrom the home page you can navigate to the News Index either by clicking on the top bar of the Feature Module or the Recent News link.

The News Index shows the seven most recent stories with a thumbnail and teaser text, and has Previous/Next links at the bottom to view a listing of all published stories. Stories are not automatically deleted from your site, but you may choose to delete or unpublish them.

two columns

NEWS INDEX

HOME PAGE NEWS

one column

INSIDE PAGESNews Module

From the home page and index page views of the Events Module, you can click on the event title to navigate directly to the Events Detail Page.

The Events Detail page has the same sort of content area as a News Story. Each Events Detail page has a calendar element in the right sidebar, allowing navigation through your events by date or month, with an option to See All Events.

Dates with events scheduled on them show as red and are linked to the Events Detail.

20

INSIDE PAGESEvents Module

Events Detail Page

The Events Module has three views: an Events Detail page (below), a home page view, and an events index page.

EVENTS DETAIL

21

INSIDE PAGESEvents Module

Home Page EventsThere is a one- and two-column design for flexibility.

Events populate the home page based on date; once the end date has passed, the event no longer shows on the home page.

If there are no current or upcoming events, this module will not be activated on the home page, leaving a blank space. It’s a good idea to add a couple of events far in the future to make sure that this does not happen.

Events IndexFrom the home page, you can navigate to the Events Index by either clicking on the top bar of the module or on the calendar icon. Like the News Index, it shows the seven most recent events. You can also view past events by navigating to their date.

Additionally, it has a calendar element allowing you to view specific dates and months. Dates with events scheduled on them show as red and are linked to the Events Detail.

two columns one column

EVENTS INDEX

HOME PAGE EVENTS

22

INSIDE PAGESPeople Module

The People Module has three views: the People Bio page, home page view, and the People Directory.

PEOPLE BIO

Bio Page

The Bio Page displays general information about the individual including: name, appointment, title, a short bio, areas of expertise (up to five entries), educational experience (up to five entries), contact information, and a link to his or her website for more information.

NOTE: We have plans to expand this module to include some information from OSU:pro. We also are exploring options for a comprehensive professional site solution for all faculty and staff.

23

INSIDE PAGESPeople Module

DIRECTORY

two columns one columnHome Page ViewThe home page view of the People Module also comes in a one- or two-column design. This module is randomly populated with the images that are uploaded to the People Bio.

NOTE: Listings without an uploaded image will have an image of University Hall as the default (see left) and will not display on the home page.

DirectoryThe Directory displays a complete listing of all the bios that have been entered on your site, with a thumbnail image, name and title, areas of expertise, phone, and email address.

FiltersEach People Module is equipped with two types of filters to help sort the directory listing:

1) alphabetical, which is automatically applied 2) appointments that can be tailored for each site to further categorize the listing. Examples include faculty, staff, graduate assistants, and emeritus

HOME PAGE PEOPLE

24

In developing the Standard Sites package for the College of Arts and Sciences, our goal has been to balance the need for rapid delivery of quality websites and opportunities for customization. The more customization that is required, the longer a website takes to design and develop. Standard Sites provide the flexibility to personalize your site for your unit, while ensuring that it can be launched in a timely manner and meets Ohio State and Arts and Sciences communications standards. We are continually refining the Standard Sites framework with more functionality and plan to offer more op-tions in the coming year. We would appreciate your suggestions on ways that we can improve your experi-ence in maintaining your website. Feel free to submit your feedback to asccomm.osu.edu/contact. We want to provide you with the best possible customer service. To this end, an ASC Communications Ser-vices team member will be assigned to your website project as your single point of contact. Please direct your questions to this person, and he or she will be more than happy to assist.

______________________ will be helping you with your website project.

We look forward to working with you to deliver a high-quality website to support your recruitment, engage-ment, and educational needs.

If you have any additional concerns, feel free to contact me directly.

Sincerely,

Libby EckhardtChief Communications OfficerCollege of Arts and Scienceseckhardt.12@osu.edu(614) 688-5687

Next Steps

Please send the following information to your ASCCOMM contact:You may want to consult our portfolio for ideas at: asccomm.osu.edu/site-work

� Identify who needs to be trained to maintain your site:

Content Editors: ______________________________________________________________

Content Managers: ____________________________________________________________

� Choose your site’s theme color: Light Neutral Firebrick Peacock Spruce Mandarin Lime Dark Neutral

� Choose your site’s home page layout: Layout A Layout B Layout C

� Decide what you would like a as customized header for your unit. Feel free to send your ideas (imagery, textures, backgrounds, photos) to your ASCCOMM contact.

� If Layout A or Layout B, choose one or more home page feature modules:

News Events People

� Develop a content outline for your new site.

NEXT STEPS

COLLEGE OF ARTS AND SCIENCESCOMMUNICATIONS SERVICES

1010 Derby Hallasccomm@osu.edu

(614) 292-8686asccomm.osu.edu

version: 11152011