Standard Website Overview by College of Arts and Sciences at Ohio State

COLLEGE OF ARTS AND SCIENCES COMMUNICATIONS SERVICES Standard Website Overview

asccomm.osu.edu

INTRODUCTION TABLE OF CONTENTS Introduction

Web Accessibility and Usability

Process Overview: What to Expect 4 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

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

“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

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.

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.

WEB ACCESSIBILITY AND USABILITY 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 disabilityfriendly 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, navigation, and consistency. Audiences’ needs are at the center of our web strategy; 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

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-Off The 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 Training Training is required for content editing and management access. There are two basic levels of Drupal training: 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) Theming After 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 Framing To 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

Site Turnover When 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 managers) to add content. Checklist ❑ Tour the new site ❑ Develop a target timeline for site launch ❑ Receive access to pre-production site Adding Content Depending 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 Testing When 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. Confirmation When 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 Launch Once confirmation is received, the site is moved from pre-production to the live environment and the university webmaster is notified. Once live, you will begin maintaining content on the active site. Checklist ❑ Announce your new site!

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â&#x20AC;&#x201D;we can work with you to identify solutions, create new approaches, or suggest alternatives.

WEBSITE CUSTOMIZATION

WEBSITE CUSTOMIZATION Home Page Elements Ohio State Navigation Bar To comply with university guidelines, the Ohio State Navigation Bar sits at the top of each page. Header The Header of your site contains your unitâ&#x20AC;&#x2122;s word mark, the university logo, and the Primary Navigation for your site. Top Section The 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 Modules Each 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.

Footer The 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 CUSTOMIZATION

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

WEBSITE CUSTOMIZATION Headers

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â&#x20AC;&#x2122;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 visit asccomm.osu.edu/word-mark.

Word Mark

HOME PAGE CUSTOMIZATION Header Examples

WEBSITE CUSTOMIZATION Home Page Layout There are three Standard Site layout options.

Layout A Smaller image, in horizontal orientation

Stacked Feature Modules

Large text box

Layout B Larger image, in vertical orientation Smaller text box Side-by-side Feature Modules

Layout C Larger image, in vertical orientation No home page view of Feature Modules. Smaller text box

WEBSITE CUSTOMIZATION Feature Modules: Home Page View

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.

NEWS MODULE OPTIONS one column

two columns

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.

EVENTS MODULE OPTIONS one column

two columns

PEOPLE MODULE OPTIONS one column

two columns

WEBSITE CUSTOMIZATION Color Options LIGHT NEUTRAL (1)

There are seven Standard Site color options. Each belongs to the College of Arts and Sciencesâ&#x20AC;&#x2122; 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)

FIREBRICK (2)

PEACOCK (3)

SPRUCE (4)

MANDARIN (5)

LIME (6)

DARK NEUTRAL (7)

ARTS AND SCIENCES COLOR PALETTE

WEBSITE CUSTOMIZATION Color Options FIREBRICK (2)

PEACOCK (3)

SPRUCE (4)

MANDARIN (5)

LIME (6)

DARK NEUTRAL (7)

INSIDE PAGES Basic 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. Primary Navigation Primary 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 Bar This 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 Zone This 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 PAGES Basic Page

Creating A Page

Basic 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 PAGES News Module The News Module has three views: News Story, a home page view, and a news index page. News Story 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.

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â&#x20AC;&#x201D;the same as on basic inside pages.

INSIDE PAGES News Module

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

HOME PAGE NEWS two columns

one column

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

News Index From 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.

NEWS INDEX

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.

INSIDE PAGES Events Module The Events Module has three views: an Events Detail page (below), a home page view, and an events index page. Events Detail Page 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.

EVENTS DETAIL

INSIDE PAGES Events Module Home Page Events There is a one- and two-column design for flexibility.

HOME PAGE EVENTS two columns

one column

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â&#x20AC;&#x2122;s a good idea to add a couple of events far in the future to make sure that this does not happen. Events Index From 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.

EVENTS INDEX

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.

INSIDE PAGES People Module The People Module has three views: the People Bio page, home page view, and the People Directory. 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. PEOPLE BIO

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.

INSIDE PAGES People Module Home Page View The home page view of the People Module also comes in a one- or twocolumn design. This module is randomly populated with the images that are uploaded to the People Bio.

HOME PAGE PEOPLE two columns

one column

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. Directory The 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.