Draft AFRE Website Style Manual

Notes on best practices to enhance website accessibility and readability on multiple size browsing devices

by MT Weber Sept 2016

1

• This note briefly documents a set of recommended and

implemented best practices for the AFRE website.

• Motivation

• Assists AFRE to meet essential MSU/CANR website

accessibility standards, and

• Improve AFRE’s website content readability,

regardless of browsing device.

• Draws on suggested best practices/learning tutorials at:

MSU Web accessibility guidelines - Basic Checklist:

Online Content Accessibility see key hints on slide 3

• Rutgers University – Communications and Marketing

(Writing for Websites)

• Hampshire College – Web Writing Style Guide

• 9 Simple Tips for Writing Persuasive Web Content by

Henneke – Enchanted Marketing

2

Basic Logic of AFRE Proposed Website Style Guide

Web readers don’t sit in front of their computer screens (or gaze

into their mobile phones) and read webpages word-by-word.

Instead, they scan pages for useful information.

To provide easily scannable content, use these techniques in

web writing:

Break information into “chunks” that can be easily accessed

and comprehended.

(Website Top Level Tabs and corresponding Subtabs)

Depending on amount of information to present in a given

subtab, consistently partition and label the contents of

subtabs

Consistently use different size headers to denote the

partitioning of content.

Use bulleted lists to present content detail. 3

AFRE Website Content Map By Tabs and Subtabs

About

Department Leadership

Biweekly Announcements

Advancing Economics, Transforming Lives

Statement of Values

Publications

Giving

History of AFRE

News

Contact Us

People

Faculty

Emeritus/Former Faculty

Staff

Current Graduate Students

Completed Graduate Students

Undergraduate Study

Agribusiness Management

Environmental Economics & Management

Food Industry Management

MSU Admissions

Undergraduate Scholarships

Undergraduate Academic Advising Office

Degree Requirements

Minor Requirements

Career Exploration

Study Abroad

Graduate Study

M.S. Degree

Ph.D. Degree

Graduate Courses

Dual Major

Graduate Specializations

Applying and Visiting

Financial Aid

Grad Student Organization

Costs

Thesis/Dissertation Award Winners

Program Strengths

Job Placements

Events

AFRE Weekly Seminars

AFRE Brown-Bag Seminars

AFRE Graduate Symposium

Development Brown Bag Seminars

AFRE/FSG Seminars

Economics Dept Seminars

CANR/Other MSU Seminars

News

Projects

Domestic Research & Outreach

International Research & Outreach

AFRE Faculty Specialization

Past Projects

Centers & Services

AFRE's Expanding Horizons

Ag Credit Conference

Center for Economic Analysis

Economic Analysis of Sustainable

Ag. & Food Systems

Extension/Outreach Programs

Food Security Group - FSG

Elton R. Smith Endowment

Morris Chair in State and Local

Government Finance and Policy

MSU Income Tax School

North Central Regional Center for

Rural Development

State and Local Government

The Food SCENE

The Product Center

Telfarm

Food Security Policy (FSP)

Innovation Lab

Connect With Us - Quick Links

Additional Connect With Us - Quick Links

4

Examples – Chunks of Information, Consistent Tab and Subtab Headers, and Presentation of Basic Content via Bullets of Information

5

Examples – Chunks of Information, Consistent Tab and Subtab Headers, and Presentation of Basic Content via Bullets of Information

6

Examples – Chunks of Information, Consistent Tab and Subtab Headers, and Presentation of Basic Content via Bullets of Information

7

Examples – Chunks of Information, Consistent Tab and Subtab Headers, and Presentation of Basic Content via Bullets of Information

8

Implementing Consistent Headers For Titles, Tabs and Subtabs

Title of Website [ <h1> header assigned by EE software] White on Green Background

“About” Top Level Tab [ <h2> header assigned by EE software] Green and Bold

“Department Leadership” Subtab [<h2> header assigned by EE software) Green and Bold ]

• Subtab partitioning – sublabel a [<h3> header assigned by user] Black & Bold

• Subtab partitioning – sublabel b <h3> header (assigned by user) Black & Bold

• Subtab partitioning – sublabel c <h3> header (assigned by user) Black & Bold

“Biweekly Announcements” Subtab [<h2> header assigned by EE software) Green and Bold ]

9

1. Heading where EE controls size of font : <h1> white and <h2> green and bolded. 2. Headings where users have control <3> and below: Use only one color in text – black . 3. Heading <h3> is automatically bolded by EE. Consistently use <h3> on all sublabels on

a given page 4. Text entered below sub-headers is organized by bullets and is the EE default font size

<h1> EE

<h2>

EE

<h3>

Sublabel b H

EE

<h3>

Sublabel a

10

1. Heading where EE controls size of font : <h1> white and <h2> green and bolded. 2. Headings where users have control <3> and below: Use only one color in text – black . 3. Heading <h3> is automatically bolded by EE. Consistently use <h3> on all sublabels on

a given page 4. Text entered below sub-headers is organized by bullets and is the EE default font size

<h1> EE

<h2>

EE

<h3>

Subcontent a H

EE

<h3> Subcontent cH

EE

<h3>

Subcontent b H

EE

11

Example of selecting ,<h3> (Heading 3) when posting text on a given page in EE. Generally, let EE set defaults for “Font Family” and for “Font Size”

12

Key hints on editing AFRE’s site in EE 1. Use black text on white background

& use bolding carefully and sparingly.

2. Don’t use colored fonts to get attention . Avoid All CAPS.

3. EE defaults for <h1> and <h2>. User selects <h3>

4. Use bullets for text rather than numbers. Avoid paragraphs of text

5. Insert alternative text as meta data on all images.

6. When uploading AFRE videos, use captioning. Links to outside videos w/out captioning ok

7. Don’t use “click here”. Use “view xxxxxx” so users know what information appears at this link.

8. Don’t use tables to present info – Not workable in responsive mode

13

Why Does the Style Include a “Menu – XXXX” Subheader on Each Top-Level Tab Short Answer – This is a short-term fix waiting for a longer-term ANR/Tec fix.

14

“Menu – XXXX” Subheader on Each Top-Level Tab is Redundant When Viewing The AFRE Website on a Desktop or Larger Screen. Menu Options are Seen on the Left

15

On Cell Phone Viewing of AFRE Website, No First Hand View of Navigating to Subtabs ANR/TEC May Setup CANR Websites Similar to the MSU Website

Adding Menu- People Allows Easy Onward Navigation 16

How The MSU Main Website Facilitates Navigation in Responsive Mode

Down Marks Allow Clicking To View Subtab Contents

17

Going Forward:

Who is Responsible for Website Posting of Materials Developed by Selected Faculty in Different Sections of

the AFRE Website?

o Home - News (Taylor Logan and others? Helped by Ellen

o People - Current and Emeritus Faculty, and Staff - Taylor Logan

Retiring/Departing Faculty need to be move from Current to Emeritus Section

o People - Students - Debbie Conway

o Undergraduate - Ellen Schueller

o Graduate - Debbie Conway – also maintains the graduate thesis/dissertation data base

o Events - Nancy Creed and others?

o News - Taylor Logan and others? Helped by Ellen

o Projects - Domestic - Michael Graff

Completed Projects need to be archived instead of removed.

o Projects - International - To be determined given Weber’s move to Florida?

Completed Projects need to be archived instead of removed.

o Centers and Services - Taylor Logan

o Getting Good Pictures – How to do this more systematically?

o AFRE Newsletter: Advancing Economics, Transforming Lives – AFRE drafts, Eileen

Gianiodis and Fran Adelaja process this for CANR and AFRE news items and put it into the

AFRE Newsletter format. But Constant Contact, the version of the software used is not

responsive - the newsletter cannot be read on a cell phone. According to Eileen Gianiodis,

CANR is in the process of updating this over the next couple of months. Need to follow up on

this. Food Security Group could also use this new version of the software for their newsletter.

Who is Responsible for Overall Website Coordination and Oversite, and News Story Writing? -Possible new

AFRE communication staff position? 18