BEREA COLLEGE WEBGUIDE
BEREA.EDU 2016
(MS Word file format)
CONTENTS
(review ver. 1/20/2017)
Preface 2
Roles and Responsibilities 4
Web Communications Terminology 5
Designing and Developing Berea.edu 2016 10
Accessibility 11
Search Engine Optimization 16
Content Guidelines 18
Planning and Re-planning Web Content 18
Text 18
Photographs 20
Infographics 22
Video 22
Persistent Components 24
Navigation 25
Graphics, Interface and Typography 27
_________________________
Appendix A: Online Learning Opportunities (WordPress, Visual Composer)
Appendix B: Recommended Photo and Video sizes 35
Photo sizes 35
Sizing for Video 38
34
WEBGUIDE BEREA.EDU 2016
PAGE 2
PREFACE
Berea.edu usually contains between 70 and 110 subsites. These are “owned by” administrative
offices (e.g., Human Resources, Office of the President), service offices (e.g., student services,
public safety), Centers (e.g., Center for Transformative Learning, Center for Excellence in
Learning through Service), facilities (e.g., Seabury Gym, Jelkyl Drama Center) and academic
programs (30 programs of study). Page count for Berea.edu oscillates between 3,500 and 4,500.
The audiences we want Berea.edu to attract include:






Current and prospective students and their families
Current and prospective faculty
Current and prospective donors
Everyone interested in and thinking about Appalachia
Everyone interested in and thinking about private non-profit Colleges that charge no tuition
Those interested in the first integrated and co-educational college in the South (founded
in 1855)
Berea College aspires toward a web presence that is as excellent and distinctive as the institution
itself. The college is perennially ranked at or near the top of lists that weigh








affordability
academic excellence
faculty/student ratios
rates of graduation
quality of residential life
sustainability
diversity
regional impact
Understanding what makes the Web Work
Compelling content that is easily discovered are the keys to a successful web site.
Web professionals have studied successful content and usability and identified perspectives within
which “best practices” can be demonstrated, verified and widely applied. Some examples:

The Internet’s oldest and still most prevalent mode of communication is text. However,
usability studies demonstrate repeatedly that text on the Internet is NOT read the same
as printed text. Far more visitors scan text on the web rather than read word-for-word.
The concept of providing text so it works for people who scan has introduced and
continues to introduce new kinds of best practices for web authors.

With the advent of widespread broadband Internet service, the world of so-called rich
media has come of age on the web. And—similar to the early years of desktop
2
WEBGUIDE BEREA.EDU 2016
PAGE 3
publishing—the proliferation of low quality multimedia has been explosive on the web.
Hence more best practices.

Search engines—Google, Yahoo, Bing and others—provide THE essential service to the
public web. It is not an overstatement to say, “Without them, we wouldn’t find much.”
Search engines have become the most obvious source of horsepower behind effective
public information technology. That makes Search Engine Optimization—SEO—an
essential skill for web-based communicators. That skill is growing its own set of best
practices.

In 1990, the Americans with Disabilities Act set about redressing the way we
accommodate those among us with disabilities. Initially that act called for curbs
negotiable to those in wheelchairs, telephones that accommodated text exchange, closed
captioning of videos and films and now it’s caught up with the web. Augmented with
stricter coding guidelines and a growing number of assistive technologies, the web can be
accessed by the blind, the deaf and those with reading and learning disabilities. Becoming
compliant with the guidelines for making web sites accessible is becoming mandatory
and means another set of best practices.
These perspectives motivated the web communications office at Berea College to mount a
comprehensive web content audit (CWCA) in 2014.
When we moved to our first Web Content Management System (WCMS) in 2012, we were in a
hurry. The challenge was to move everything into the WCMS as fast as possible and get it working
on line. Only after that would we take a deep breath and start thinking about cleanup and
content improvements.
With the conversion behind us, we commenced an 18-month series of “web boot camps” for
web content managers. Every Berea.edu subsite WCM or web administrator was invited to
attend a training session. We naively thought training these personnel on WordPress would
initiate a do-it-yourself frenzy of updating and improving 3,800 pages of Berea.edu. A close look
at many of our subsites today reveals countless pages that were last updated in the summer
months of 2012—in other words, when we moved everything to the first version of our web
content management system. Clean up and improvements never happened on hundreds of our
pages.
So, in addition to all those new perspectives discussed above—and all the “best practices”
associated with them—we still face the task of clean up and updating content.
3
WEBGUIDE BEREA.EDU 2016
PAGE 4
ROLES AND RESPONSIBILITIES
WEB TEAM is part of the Marketing & Communications Group in the Alumni & College
Relations Division.
The web team is responsible for the design, development and on-going functionality of
Berea.edu and all its components. Specific responsibilities include:
 Work with site host WPEngine to ensure full-time functionality of Berea.edu.
 Ensure Berea.edu complies with web content accessibility guidelines set forth in the
World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.0 levels
“A” and “AA.”1
 Ensure Berea.edu’s most important pages2 are optimized for search engines (SEO).
SUBSITES are parts of Berea.edu that cover a subject, activity, service or program. Subsites
have their own “home pages,” their own assortment of landing and attendant pages, a media
library and staff to manage content.
SUBSITE “OWNERS” are staff and/or faculty in the programs, offices, centers and other
college organizations that “own” subsites in Berea.edu 2016.
Subsite owners are responsible for the content in their subsite. To that end, subsite owners are
required to designate one member of their staff or faculty to be “Web Content Manager”
(WCM). Some WCM’s are trained by the web team to make their own edits online. In other
cases, the WCM has another staff member or a student laborer trained to work on their subsite.
Some specific responsibilities for “owners” and WCMs:
 Check regularly for out-of-date information. When you find out-of-date information,
update it if applicable, or archive it or purge it.
 Replace photographs periodically. (Exceptions are illustrative photos or graphics that
pertain to the text.) Banner photos are those that can typically be replaced regularly.
 Ensure that text is free of typographical errors or misspellings, and the sentences are
readable at Grade level 10. (Use the Hemingway App3 or a comparable tool to review
your readability level and make adjustments.)
1Also see page 10 “Accessibility Guidelines.”
2Berea.edu’s “most important pages” will be determined by analytic performance history, objectives and key
results (OKRs) and key performance indicators (KPIs).
3You can use the Hemingway App for free on line here: http://www.hemingwayapp.com/ . Or, you can
purchase a desktop version of the app here ($9.99): http://www.hemingwayapp.com/desktop.html .
4
WEBGUIDE BEREA.EDU 2016
PAGE 5
WEB COMMUNICATIONS TERMINOLOGY
BEREA.EDU is the name and the web address for Berea College’s web site. Beyond the
homepage and its immediate off-shoot pages (“News,” “About Berea College,” “Consumer
Information and Student Right to Know” etc.) Berea.edu also consists of about 110 subsites.
These subsites contain information from Administrative Offices, Admissions, Student Life,
Centers, Service Units on campus, Academic Programs and Facilities.
WEB COMMUNICATIONS is the name of the office with principle responsibility for
content. Content is managed in these ways:
 Currency (up to date information)
 Readability (Flesch Kincaid Reading Ease and Grade level test—goal is grade level 10)
 Accessibility (WCAG 2.0 Levels “A” and “AA
 Search Engine Optimization
WEB COMMUNICATIONS ADVISORY COMMITTEE consists of a subordinate staff
member reporting directly to each member of the college’s Administrative Committee (i.e., a
direct report to each Vice President and CIO). The Advisory Committee will meet at least biannually (Fall and Spring term), and address issues of web content, web design and
development. Members of the committee will be polled on matters of interest for meeting
agendas. (This committee has not been formalized.)
WEB CONTENT AUTHORS (WCA) are writers, bloggers, photographers and
videographers—staff, faculty or students—who are credentialed to upload content on one or
more subsites. They become the responsibility of the WCM for the subsite(s) they service. The
Web Communications office issues credentials for this role upon written instruction from the
subsite WCM.
WEB CONTENT EDITORS (WCE) are either college staff or student labor with access to a
specific subsite’s content for editorial and maintenance purposes.
WEB CONTENT MANAGERS (WCM) are college staff or faculty charged with supervision
of content on one or more subsites inside Berea.edu. The name of the WCM and an office email
address [e.g. [email protected]] appears in the page content of the subsite(s) they service. At
least one annual meeting per year for web content managers is arranged and hosted by the Web
Communications office. (This annual meeting has not been formalized.)
WEB MATERIALS are electronic documents made available via HTTP or other web protocol
and accessed through a web browser (either a standalone browser, or as a component of another
application). Web materials may be further described using these terms:
1. Official: Web material by or for a unit or employee of the college.
2. Public: Official web material that is publicly accessible.
3. Internal: Official web material with restricted access, either by password or
network/server security.
5
WEBGUIDE BEREA.EDU 2016
PAGE 6
4. Off-site: Official web material that is served from computers that do not belong to Berea
College
5. Hosted: Web material created for an entity other than Berea College that is served from
computers belonging to the college.
WEB TEAM is a work group in the Marketing & Communications Department of the Alumni
& College Relations Division.
Administration:
VP Alumni & College Relations—Bernadine Douglas
AVP Marketing & Communications—Currently Vacant
Web team Staff
Director of Web Design & Development—Charlie Campbell
Senior Developer—Daniel Adams
Developer—Joseph Carrick
Web Content Manager—Doug Widner
WordPress Administrator—Zack Thompson
Student Labor
Web Services Assistant (WLS 1, 2)—Currently Vacant
Web Services Associate (WLS 3, 4)—Logan Holbert, Jose Ixcoy,
Jaimah Pyburn, China Ibuakaeze
Web Services Manager (WLS 5)—Job Limo
6
WEBGUIDE BEREA.EDU 2016
PAGE 7
Check out the evolution of Berea.edu since its first version in 1998
7
WEBGUIDE BEREA.EDU 2016
PAGE 8
Circa 2012: First web content management system (WCMS) built
with WordPress Multisite
8
WEBGUIDE BEREA.EDU 2016
PAGE 9
Berea.edu 2016: WCMS Ver. 2, still WordPress Multisite
9
WEBGUIDE BEREA.EDU 2016
PAGE 10
DESIGNING AND DEVELOPING BEREA.EDU 2016
Our first web content management system (WCMS) was Berea.edu 2012. It was designed and
developed using WordPress Multisite. The 2012 design was identical to a design originally created
in 2009 and very slowly unrolled to a few subsites. It wasn’t until the 2012 transition to
WordPress Multisite that we applied the 2012 design to all subsites. For the first time all the
parts of Berea.edu looked like they belonged to a single web entity. Unfortunately, the 2012
design was already growing stale by that time. The boxy, one-dimensional quality of Berea.edu
2012 had lost favor.
We acquired a web designer in 2014. Folks from all corners of the campus have been eager to
point to other college and university websites they liked better than Berea.edu 2012. A brand
new design for Berea.edu made its appearance in mid-2015 and received approval from the
Administrative Committee in late 2015. Berea.edu 2016 wears this new design.
The most distinctive differences between the new design and the old are:



A responsive theme. This means pages are reassembled automatically to present the
most usable organization based on the size of the visitor’s screen.
The design employs “layers” that lend it a 3-dimensional quality that is both
contemporary and aesthetically pleasing.
Multiple modes of navigating the site are built in:
o So called “persistent navigation” is available on every page
o Subsite-specific navigation is tabular and located on the right side of most pages
o “Search” is always available
In short, Berea.edu 2016 has been designed for usability.
10
WEBGUIDE BEREA.EDU 2016
PAGE 11
ACCESSIBILITY
Berea College will offer a World Wide Web presence that meets the accessibility guidelines set
forth in the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 Levels
“A” and “AA.” The college’s website must comply with these guidelines to be considered an
accessible web site. To make the whole set of guidelines easier to comprehend, W3C has divided
the 11 guidelines containing 34 compliance points between 4 overriding “Principles.”
Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can
perceive.
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so
that it can be changed into other forms people need, such as large print, braille, speech,
symbols or simpler language.

1.1.1 (A) Non-text Content: text alternatives are provided for all non-text
content.
Guideline 1.2 Time-based Media: Provide alternatives for time-based media.

1.2.1 (A) Audio-only and Video-only (Prerecorded): An alternative for timebased media is provided for prerecorded audio-only or video-only content.

1.2.2 (A) Captions (prerecorded): Captions are provided for all prerecorded audio
content.

1.2.3 (A) Audio Description or Media Alternative (Prerecorded): An alternative
for time-based media or audio description of the prerecorded video content is
provided.

1.2.4 (AA) Captions (Live): Captions are provided for all live video content.

1.2.5. (AA) Audio Description (Prerecorded): Audio description is provided for
all prerecorded video content.
Guideline 1.3 Adaptable: Create content that can be presented in different ways (for
example: simpler layout) without losing information or structure.

1.3.1 (A) Info and Relationships: Information, structure, and relationships can be
programmatically determined or are available in text.

1.3.2 (A) Meaningful Sequence: When sequence affects meaning, a correct
reading sequence can be programmatically determined.
11
WEBGUIDE BEREA.EDU 2016

PAGE 12
1.3.3 (A) Sensory Characteristics: Instructions do not rely solely on sensory
characteristics (shape, size, visuals, orientation, sound).
Guideline 1.4 Distinguishable: Make it easier for users to see and hear content,
including separating foreground from background.

1.4.1 (A) Use of Color: Color is not used as the only visual means of conveying
information.

1.4.2 (A) Audio Control: A mechanism is available to pause or control the
volume of audio that plays automatically.

1.4.3 (AA) Contrast (Minimum): Visual presentation of text/images of text
(which should be avoided) has a contrast ratio of at least 4.5:1.

1.4.4 (AA) Resize Text: Text can be resized without assistive technology and
without loss of content/functionality.

1.4.5 (AA) Images of Text: Avoid using images of text in all instances with these
exceptions: Brand logos (classified as essential), purely decorative text or if the
effect cannot be achieved with plain text.
Principle 2: Operable – User interface components and navigation must be operable.
Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard
interface.

2.1.1 (A) Keyboard: All functionality of the content is operable through a
keyboard Interface.

2.1.2 (A) No Keyboard Trap: Focus can be moved to or from a component of
the page using only a keyboard interface.
Guideline 2.2 Enough Time: Provide users enough time to read and use content.

2.2.1 (A) Timing Adjustable: User can turn off, adjust, or extend time limits set
by the content.

2.2.2 (A) Pause, Stop, Hide: There is a mechanism for the user to pause, stop or
hide any moving, blinking, scrolling or auto-updating information.
Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.
12
WEBGUIDE BEREA.EDU 2016

PAGE 13
2.3.1 (A) Three Flashes or Below Threshold: Web pages do not contain anything
that flashes more than three times in any one second period.
Guideline 2.4 Navigable: Provide ways to help users navigate, find content and
determine where they are.

2.4.1 (A) Bypass blocks: A mechanism is available to bypass blocks of content
that are repeated.

2.4.2 (A) Page Titled: Web pages have titles that describe the topic or purpose.

2.4.3 (A) Focus Order: If a web page can be navigated sequentially and the
navigation sequences affect meaning or operation, focusable components receive
focus in an order that preserves meaning and operability.

2.4.4 (A) Link Purpose (In Context): The purpose of each link can be determined
from the link text alone.

2.4.5 (AA) Multiple Ways: More than one way is available to locate a web page
within a set of web pages.

2.4.6 (AA) Headings and Labels: Headings and labels describe topic or purpose.

2.4.7 (AA) Focus Visible: Any keyboard operable user interface has a mode of
operation where the keyboard focus indicator is visible.
Principle 3: Understandable – Information and the operation of user interface must be understandable.
Guideline 3.1 Readable: Make text content readable and understandable.

3.1.1 (A) Language of Page: The default human language of each web page can
be programmatically determined.

3.1.2 (AA) Language of Parts: The human language of each passage or phrase in
the content can be programmatically determined.
Guideline 3.2 Predictable: Make web pages appear and operate in predictable ways.

3.2.1 (A) On Focus: When any component receives focus, it does not initiate a
change of context. Examples of this: a form submitting automatically when a
component receives focus, launching new windows when component receives
focus.
13
WEBGUIDE BEREA.EDU 2016
PAGE 14

3.2.2 (A) On Input: Changing the setting of any user interface component does
not automatically cause a change of context.

3.2.3 (AA) Consistent Navigation: Repeated navigational mechanisms occur in
the same relative order each time they are repeated.

3.2.4 (AA) Consistent Identification: Components that have the same
functionality within a set of web pages are identified consistently.
Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.

3.3.1 (A) Error Identification: If an input error is automatically detected, the item
is identified and the error is described to the user in text.

3.3.2 (A) Labels of Instructions: Labels or instructions are provided when
content requires user input.

3.3.3 (AA) Error Suggestion: If suggestions for correcting an input error are
known, then the suggestions are provided to the user.

3.3.4 (AA) Error Prevention (Legal, Financial, Data): For web pages with legal
commitments or financial transactions, submissions should be reversible, data
should be checked for errors, and a mechanism should be available for
reviewing, confirming, and correcting before finalizing submission.
Principle 4: Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user
agents, including assistive technologies.
Guideline 4.1 Compatible: Maximize compatibility with current and future user agents,
including assistive technologies.

4.1.1 (A) Parsing: In content implemented using markup languages, elements
have complete start and end tags, are nested according to specifications, do not
contain duplicate attributes, and IDs are unique.

4.1.2 (A) Name, Role, Value: For all user interface components, the name and
role can be programmatically determined and set.1
The process of implementing these accessibility compliance points requires four kinds of labor.
1. Web development at the coding level to make web pages behave in accordance with
accessibility guidelines. Over time, many of the compliance points will have “canned”
solutions (mostly built into Berea.edu 2016 templates).
14
WEBGUIDE BEREA.EDU 2016
PAGE 15
a. For example: Rules governing the appearance of fonts so that contrast between
font color and background always meets or exceeds a contrast ratio of 4.5:1
(compliance point 1.4.3).
2. On-going content analysis to:
a. Ensure readability (Guideline 3.1)
b. Ensure text-alternatives exist for all non-text content (Guideline 1.1)
3. Standardize and secure components of content so they are readily understood wherever
in the website they are applied.
a. For example: A button labeled “Give to Berea” can be applied on many pages
within many subsites of Berea.edu--and typically this button will always hyperlink
to the same page in the Give to Berea subsite. This button should have the same
label, be the same size and same color wherever it appears (Compliance point
3.2.4).
4. Routinely conduct usability tests and upgrade Berea.edu accordingly. Ensure that
Berea.edu performs with current and future assistive technologies.
15
WEBGUIDE BEREA.EDU 2016
PAGE 16
SEARCH ENGINE OPTIMIZATION (SEO)
At its base level, SEO involves assigning key words and phrases to content components in a
website using code that is searched by the search engines. When search engine users enter those
words in the search field, sites and pages with those words in their text or their code are
earmarked, prioritized and presented to the user as one “hit” in a “list of hits.” The catch is,
where on that list might your site be positioned? Obviously, number 5 on the list is much more
likely to draw a visitor than is number 55 or 500. To engage in search engine optimization is an effort
to bring your website pages as close as possible to the top of lists produced by the search
engines.
Of course, key words or phrases aren’t the only criteria for ranking a site’s position in a list. The
perceived importance of the site is a factor—determined by the popularity of the site, the
number of other sites who have hyperlinks to the site in question, and many other factors.
Starting with Berea.edu 2016, the college will apply this short list of “SEO best practices.”
1. Using Google Analytics we will select our most popular pages in Berea.edu 2016. We will
do some key word and phrase investigations.
2. Derive key words and phrases from the college’s mission and Great Commitments, and
then determine the usage of these words and phrases in online searches. Such
investigation might include the following prospective key words and phrases:
a. Liberal arts college based on Christian values (and southern liberal arts college
based on Christian values)
b. College with full tuition scholarships for all students
c. College with history of interracial education
d. College with history of co-education
e. College with focus on southern Appalachian territory
f. College with focus on sustainability and plain living
g. College with focus on student crafts industries
h. College with focus on balance between work, learning and service
i.
Derive key words and phrases for selected high-performance pages
16
WEBGUIDE BEREA.EDU 2016
PAGE 17
The validity of chosen key words and phrases is determined through research and investigation.
Essentially, this means entering the key words and phrases into the search engines and assessing
the results:

Do the results constitute a list in which Berea College belongs? If Berea.edu does not
“belong” among the sites that are on the list the key word or phrase is probably not a
good choice.

Do the results themselves suggest alternatives? For example, the key phrase “college with
focus on balance between work, learning and service” may return a list of trade schools
with apprenticeship opportunities. Perhaps we would change our phrase to: “liberal arts
college with balance between work, learning and service.”
The key to success in determining good key words and phrases requires an outcome that is a
commonly used search word or phrase by our desired visitors (prospective students and their
families, prospective faculty and staff, prospective donors, general media, higher education
media and philanthropy media). We will use Google Analytics to baseline and then compare and
contrast site performance when we are visited as a result of keyword searches. The results of
these analyses will be shared with the web advisory committee.
17
WEBGUIDE BEREA.EDU 2016
PAGE 18
CONTENT GUIDELINES
PLANNING AND RE-PLANNING WEB CONTENT

Your readers scan more than read

Your readers have used search or a navigation menu, breadcrumbs trail, a bookmark or a
hyperlink to get to this page

Now that they’re here, they are looking for a pay-off.
Web guru Ginny Redish, in her book Letting Go of the Words4, says that before we start writing we
should finish this question:
I’m writing this so that (who?) (can do what?)
In other words,

Know your audience

Know your mission
Now, write simply and expediently. Keep sentences short. Use subtitles to break up your text
and pepper those subtitles with your key words and phrases.
TEXT
We are now well into our third decade of user studies that illuminate visitors scanning web text
but not reading it word-for-word.
The largest demographic of web users knows what they want to read and they will scan
everything and anything that stands between them and their prize. So what are the prizes they
seek?
Their prizes are facts, answers, instructions, processes, products, diversions and terse (not
verbose) news, about every imaginable topic. And the search engines serve this stuff up with
breathtaking precision.
4Letting Go of the Words,
©2014(2nd Edition) by Redish & Associates, Published by Elsevier, Inc. All rights
reserved.
18
WEBGUIDE BEREA.EDU 2016
PAGE 19
Takeaways:
Use key words/phrases from your SEO research in your page. They are in the SEO code, but
also use them—sparingly—in the page title and in sub-titles. Remember: these expressions
brought some of these people to your page from a search engine. Your excited visitors
are optimistic about finding what they want. They may slow down and read a little.
1. Draft your text without thinking about its scan-ability and readability. Later,
use the Hemingway Readability App5 to “draw down” your text’s point score
to at least Grade 10, but preferably into single digits.6
a. You will need to revise sentences identified as “hard to read.”
b. You will need to revise sentences identified as “very hard to read.”
c. You will need to simplify some phrases (alternatives provided).
d. You will need to dispose of adverbs (where possible).
e. You will need to dispose of passive voice (where possible).
2. Break up your large blocks of single paragraph text into several smaller blocks
and where possible insert subtitles that suggest text is changing from one
subject to another. People scanning will read subtitles and, if they contain
words they used in a search engine, they will scan the following text, too.
3. Keep your online text projects “light.” Consider 1,000 words the outer edge
of what’s doable.
4. Do not let sentences containing lists exist as long lines of coma-separated
words … change them into structured lists, which are scannable. For example:
“She said washing day involved collecting clothes, separating them into types
requiring a certain temperature of wash water and different kinds of detergent,
then dry some in the electric dryer and dry some on an outside line, then
separate them by who wears them, fold them and put them away in the right
rooms.” Here’s the better web version of this sentence:
She said washing day involved:
5Hemingway Readability App: www.hemingwayapp.com
6The Hemingway App is based on a customization of the Flesch
Kincaid Reading Ease and Grade Level test.
The app’s scale goes well beyond the 12 grades of “common education,” and it uses particularly disturbing
non-numerical scores like “post collegiate” when the text is extraordinarily dense.
19
WEBGUIDE BEREA.EDU 2016

collecting clothes

separating them into types requiring
PAGE 20
o a certain temperature of wash water and
o different kinds of detergent

then dry them
o some in the electric dryer
o and dry some on an outside line

then separate them by who wears them

fold them and

put them away in the right rooms
PHOTOGRAPHS
Photos are an expected component of virtually all web sites. It is dangerously easy to add a
photo to a web page. Working with photos involves the following steps:
1. Understanding ownership, copyright and use
2. Picking or correcting to the right size and resolution for Berea.edu 2016
3. Using photo editing software to provide necessary “finishing touches.”
Understanding ownership, copyright and use
Photography constitutes a type of intellectual property and most photographs that you see on
the web are copyrighted by someone. While it seems easy to copy a photograph and use it in
your web site, if it’s copyrighted and you are caught using a photo without permission, you may
have to pay.
(Note: Sometimes copyright can be quite complex, especially if models and other professionals
were involved with creating the photo.)
20
WEBGUIDE BEREA.EDU 2016
PAGE 21
Berea College Marketing & Communications has some “stock” photography on Fileshare. Staff
and Faculty of Berea College may use these images on their Berea.edu 2016 subsites:
//fileshare/PR/multimedia/photography/ (available only to those with my.berea access).
Size and resolution for Berea.edu 2016
See Appendix B (page 33) for photo size recommendations. Your photo resolution for the web
should be 72 pixels per inch (ppi). This is the lowest resolution that resolves well on the screen
and it speeds downloading photos to the web page.
Finishing
Many photos can be significantly improved by applying some digital darkroom touch-up. The
most common “fixes” include:

Adjusting contrast and brightness. There are various ways to do this depending on the
editing software you use.

Sharpen or blur. Many photos appear “soft.” This happens when edges of elements in
the image are not well defined. Sharpening helps define the edges. Blur does the
opposite; it purposely softens the edges. This is one way of subduing a busy background
and/or making the primary subject stand out. (Note: Pictures that are “soft” because of
“camera shake” are often impossible to sharpen.)

Hue and saturation. Some photos appear “washed out” and this can often be repaired by
adjusting the hue and adding just a dab more saturation to the colors.

Cropping is typically done for one or the other of these reasons: (a) reshape the image—
make it wider or narrower, make it taller or shorter; or (b) adjust the position of
important subjects in the photo—e.g. take out empty space to the right of the subject to
“center him up.” For whatever reason cropping occurs, it always means removing
portions of the image. And because you are altering the original image you should always
save the original image, then rename and save your cropped version.
REQUIRED TEXT WITH IMAGE
There are three kinds of text associated with images that we use as policy in Berea.edu.
1. Title — Use the exact same text in the “Alt Text” field (see #2, below).
21
WEBGUIDE BEREA.EDU 2016
PAGE 22
2. Alternative text, a.k.a. Alt Text – This is a sentence required by our accessibility
guidelines. It is text that can be machine-read aloud to visitors with visual disabilities.
3. Captions – Captions can be more than one sentence and are intended to help people
understand the significance of the image and how it applies to the subject of the page.
Captions are also another good place to use your key words and phrases.
All three of these text elements can be added to the image when it is uploaded to the WordPress
media library.
There are lots of photo editing software programs that you can find by Googling “photo
editing software.” My favorite is Adobe Photoshop Elements (now up to version 15).
Available for $60 by itself or, if bundled with Adobe Premier Elements (for editing video) pay
$100.
INFOGRAPHICS
Infographics are typically a combination of sketch and text to impart a message, describe a
process, or motivate a call to action. Sometimes photos are also a part of the graphic and video
can be used, too. Infographics pose accessibility problems and “responsivity” problems—
meaning their utility on large screens and posters may be much more apparent than their utility
on pocket-sized smart phones.
It is still true that a well-crafted infographic is a powerful communications tool. In the case of
infographics it may be best to allow them to flourish in the big screen environment but provide
alternatives for small-screen users.
Whenever possible, duplicate the text in the infographic as “text only.” Place it conspicuously on
the page, title it appropriately, add text where necessary to replace graphic elements.
VIDEO
Video has become a common media in all kinds of web sites. The following practices generally
apply to video within Berea.edu 2016.
22
WEBGUIDE BEREA.EDU 2016
PAGE 23

Videos on the web are large files. For this reason, we don’t store video files in Beea.edu
2016. Media Libraries. Instead, we warehouse our videos in a Berea College channel on
YouTube or Vimeo.

Embeds on Berea.edu 2016 pages are usually limited to productions running no longer
than 15 minutes. Longer productions (e.g., performances) may be hyperlinked from
Berea.edu 2016 page to a Berea College channel on YouTube or Vimeo.

All videos displayed on Berea.edu 2016 pages are to be closed captioned (with on or off
capabilities)

We are sensitive to production value and will always favor meritable videos.
In addition to closed captioning—which is necessary for Berea.edu 2016 to be compliant with
current minimum accessibility guidelines for online video—we would also like a full audio
transcript and a succinct written description of the video. Transcripts (published as text content)
and descriptions of the video that contain key words will collectively help SEO and accessibility
as well as attract visitors to your video.
There are lots of video editing software programs that you can find by Googling “video
editing software.” My favorite is Adobe Premiere Elements (now up to version 15). Available
for $60 by itself or, if bundled with Adobe Photoshop Elements pay $100.
23
WEBGUIDE BEREA.EDU 2016
PAGE 24
PERSISTENT COMPONENTS
Many persistent components are elements of Berea College’s “brand.” For example, this logo:
The Berea College logo (in some authorized version) appears on every page of Berea.edu. No
part of the college has more brand equity than the College logo. All official web materials
should be readily identified as being from Berea College.
In Berea.edu 2016 branding is “built in” to the WordPress theme and templates. Each page
header and footer contain our branding and identity elements.
Requirements
All web pages must include the Berea College official logo.
24
WEBGUIDE BEREA.EDU 2016
PAGE 25
NAVIGATION
Search
The search feature on every page of Berea.edu works like a search engine that’s focused on the
content of Berea.edu. The SEO applied to each page assists in Berea search just as it does webwide search engines. When the search feature on a Berea.edu page has completed its scan of
Berea.edu it will provide a list of the pages it has discovered.
The search feature is accessed by selecting the magnifying glass icon in the upper right area of
the page.
Menus
Menus are lists of hyperlinks designed to make finding specific information as intuitive as
possible.
The most persistent menu in Berea.edu 2016 is the horizontal menu above the banner on
every page using a 2016 template. (While conversion is in progress, unfinished sites and pages
will still be in the 2009 design, which does not support this persistent horizontal menu.)
This menu, located on top of and toward the bottom of the banner image adds icons to some
of our most important subsites and focuses on “action” rather than subsite titles. “Apply” takes
visitors to the Admissions subsite. “Give” takes visitors to the Give to Berea subsite. “Visit”
takes visitors to a “Visit Our Campus” page in the Admissions subsite.
25
WEBGUIDE BEREA.EDU 2016
PAGE 26
Right nav is the most prevalent menu location for all Berea.edu 2016 subsites. This “table of
contents” is persistent throughout its subsite.
26
WEBGUIDE BEREA.EDU 2016
PAGE 27
Graphics and Interface
A.
Official Logo Policy - Level System
Any logo intended to represent Berea College is the property of the College and must
adhere to all guidelines here and elsewhere in the official Graphics Style Guide. The
three-level system addresses current logos and logos that will need to be revised or
created in the future. Please refer to the guidelines below for proper use at all levels.
Contact the Associate Vice President for Marketing & Communication to initiate design
of all logos.
Level One
These brand symbols are the strongest visible symbols of the College. They are
strong enough to identify Berea in the marketplace by themselves. These logos can
be used non-commercially by anyone at the College. See Section 2 for rules regarding
the College Seal. Level one examples:
Level Two
Level two logos pair Berea College with a department or functional unit name in a
graphic file. The importance of this approach is to provide a valuable customer
navigation tool and build unity across all College units. The unit name must be set in
Open Sans, below the College name set in Adobe Jenson Pro (examples at right).
These logos are created exclusively by Marketing & Communications and Printing
Services. They are available upon request. Level two examples:
27
WEBGUIDE BEREA.EDU 2016
PAGE 28
Level Three
Level three marks represent a broad group of diverse sub-brands such as alumni
groups, funded student clubs and organizations, special projects, and externally
facing programs.
Level three logos preferably use level one logos (brand symbols), brand fonts (see
Section 4: Typography) and Berea Blue in their design. If the design does not
incorporate a brand symbol, then the words “Berea College” must be part of the
mark (see level three example, below). If, because of an agreement with other
institutions, Berea College is not part of the group’s official name, the words “Berea
College” need to be used as part of the logo’s design when appearing in Berea
College promotional, communication, or event materials. Level three example:
Continued use of logos and marks created prior to April 2015 is generally permitted. Any
exceptions will be identified and evaluated by the AVP for Marketing &
Communications.
New level three logos require the approval of the AVP for Marketing & Communication.
The AVP will consult with senior graphic designers in evaluating proposals.
28
WEBGUIDE BEREA.EDU 2016
PAGE 29
B. Official Logo Policy - Student Organizations
All recognized student organizations are permitted to create and use their own logos.
Student groups can include existing level one logos to mark their affiliation with the
college, but they are not permitted to alter those logos in any way.
However, student organizations are not permitted to use the College Seal for any
purpose.
a. Student organizations are permitted to identify their affiliation with the college
through the proper use of official Berea logos and trademarks on all products,
publications, flyers, and documents. Please see Section 3: Publication Policies for
clarification.
b. Requests for permission to use any college logo or mark must be initiated by a
student from the requesting organization. Requests from a national organization
or other non-Berea entity affiliated with the student organization will not be
granted.
c. Student organization logos are not allowed to contain words and images that
conflict with the values expressed in the Student Handbook and The Eight Great
Commitments. The following is a partial list of themes, topics, and actions to be
avoided:
i. Contain no material advocating, inciting, or producing lawless action or
lewd behavior.
ii. Contain no words or images suggesting threats, intimidation, or
discrimination of any kind.
iii. Contain no words or images suggesting alcoholic beverages, illegal drugs,
or drug paraphernalia.
C. Official College Seal Policy
The Berea College seal is reserved for official documents and selected uses approved by
the Office of the President. The official Berea College Seal is distinct from the official
Berea College logo. The college logo should serve as the predominant mark on any form
of day-to-day college communication with external audiences.
The intent of this policy is to preserve the use of the Berea College Seal as a distinct and
dignified mark reserved for formal representation of the college.
Official documents which utilize the seal may include diplomas and graduation collateral
(e.g. invitations, etc.), transcripts, legal documents, contracts, and official reports such as
the Berea College Strategic Plan.
29
WEBGUIDE BEREA.EDU 2016
PAGE 30
At the discretion of the Office of the President, the seal may also appear on products
sold by the Berea College bookstore or its affiliates including items such as cufflinks,
lapel pins, plaques, etc.






These items
Must not conflict with existing college policy or codes of conduct.
Must not promote the use of regulated goods and services (e.g. alcohol, gambling, etc.).
Must not include weaponry.
Must not appear on household items (e.g. cleaning implements, appliances, etc.).
Must not appear on or be included as a part of any toy or game item (e.g. playing cards,
balls, etc.).
Must not appear on consumable items of any kind (e.g. packaging, food items, etc.).
The Office of the President may, at its discretion, veto the production or sale of any item
utilizing the Berea College Seal. Items produced without approval of the Office of the
President will be discarded at the expense of the department, program, or individual
responsible. Please consult with the Associate Vice President for Marketing &
Communication before beginning production of any item utilizing the Berea College
Seal.
D. Color
Graphic designers at Berea College tend to employ a palette utilizing primarily blue and
white with a sparing use of orange.
However, there are additional “accent” colors which may also be used sparingly to
support design. The specifications for these colors are as follows:
30
WEBGUIDE BEREA.EDU 2016
PAGE 31
31
WEBGUIDE BEREA.EDU 2016
PAGE 32
E. Typography
The following typefaces are recommended for their legibility, integration with the
College identity and brand consistency. The online Graphics Style Guide (at
www.berea.edu/imc/graphic-style-guide) includes entire font families for download
(different weights and characters) of these typefaces. These font families can be
downloaded and installed on any College computer.
32
WEBGUIDE BEREA.EDU 2016
PAGE 33
This list of WCAG 2.0 Level AA Principles, Guidelines and Compliance Points is
excerpted from “Solving Web Accessibility: Leaving No One Behind,” Copyright 2015 by
David Berman and contained in a White Paper by 3PlayMedia, Inc.
1
33
PAGE 34
WEBGUIDE BEREA.EDU 2016
APPENDIX A: On line learning opportunities
1. Lynda.com
https://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/3725422.html?srchtrk=index%3a0%0alinktypeid%3a2%0aq%3awordpress+essential%0apage%3a1%0as%3arelevance%0a
sa%3atrue%0aproducttypeid%3a2
Berea College has an institutional arrangement with Lynda.com that lets us take
online courses without subscribing individually.
Lynda.com’s “WordPress-Essential Training” is very comprehensive and those I
know who have used this track to learn WordPress have been very pleased.
2. WordPress101
https://www.wp101.com/
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
$29 for 12-month access to these video tutorials
The Dashboard
Post vs. Pages
The editor
Creating a new post
Post formats
Edit an existing post
Categories and tags
Creating and editing pages
Adding images
How to embed video
11. Using the media library
12. Managing comments
13. Creating links
14. Changing the theme
15. Adding widgets
16. Custom menus
17. Installing plugins
18. Adding new users
19. Useful tools
20. Settings and configuration
3. Visual Composer Video Tutorials Academy
https://vc.wpbakery.com/video-tutorials/
Free!
1. Visual Composer Installation Guide
11. Visual Composer Activation and
2. Visual Composer Navigation Interface
3. Start Building Page or Use Templates
4. Drag and Drop in Visual Composer
5. Clone Elements in Visual Composer
6. Add Visual Composer Row and Column
7. Add and Edit Text
8. Add and Edit Images
9. Add and Edit Image Gallery
10. Image Filters
12. Image Source Controls
13. Create and Reuse Templates
14. Inner Row Structure
15. Custom Heading Element
16. Tabs, Tours and Accordions
17. Add Background Color or Image
18. Full Width Row
19. Front End Editor Guide Modes
20. Element Design Options
License
When more online learning opportunities are discovered, Appendix A will be updated.
APPENDIX B: Photo sizes (recommendations)
34
WEBGUIDE BEREA.EDU 2016
PAGE 35
Digital photographs are measured in pixels. For web purposes, we make the “density” of the
photo 72 pixels per inch (ppi). While this results in “low resolution” photos, the download time
is very fast and most monitors and browsers resolve good images at 72 ppi. (While 72 ppi works
well for computer monitor resolution, it does NOT work well for print applications. This is one
of the many reasons we recommend you set aside your original version of a photo and create a
72 ppi version just for web use.)
Thumbnails are small and usually square photos. Typical sizes include:
100x100, 150x150 and 200x200. (Remember, all width and height pixel measurements imply a 72
dpi resolution.) Thumbnails are frequently used in subsites that have a “staff totem” page with
thumbnail-sized photos alongside names and titles.
Visit this page to view a “staff totem” page, using traditionally square thumbnails:
https://primary.berea.edu/avp/staff/
Visit this staff totem page that uses thumbnails that are slightly taller than their width:
https://primary.berea.edu/pfe/leadership-team/
Staff portraits: Usually, staff totem pages also contain a hyperlink to each staff or faculty profile
page. (On the totem page you just get the thumbnail, name and title. You typically click on the
individual’s name to link to his or her profile page.) On the profile page, the picture of the
individual is around 250 px wide and 350 px tall. This is good for a typical waist-up portrait. See
this profile as example: https://primary.berea.edu/avp/dr-linda-strong-leek/.
Content photo at top of 2-column template: A photo shot in landscape orientation can often
be cropped to fit nicely in the left column—the “content column”—of a 2-column template
page:
https://primary.berea.edu/mus/performance-ensembles/black-music-ensemble/
35
WEBGUIDE BEREA.EDU 2016
PAGE 36
960 px is the full available width of the content column. This means you can start with any
photo that is already 960 px wide or wider. Don’t try to increase the size of a photo so it will use
up all available space. Inevitably 72 ppi photos will become soft if they are enlarged.
Slideshows and Sliders: At one time slideshows and sliders at the top of pages were quite
common. Unfortunately, as we become more accessible to visitors with disabilities, the use of
these animated photo bundles is counterproductive. Most of the time sliders and slideshows
have associated text (even if it’s just “alt text”). This means, each time an image comes around
that text will be read anew by the visitor’s screen reading software. Very problematic if the
visitor is trying to hear the rest of the text on the page! So, in the rare case where there may be
good reason to mount a slideshow or slider, we will disable its auto-rotate feature. (A setting
adjustment.) We recommend people then use the navigation icons to step through the photo
array at their own pace.
Photos Embedded in Text: It is common to embed relatively small photos in text. Embedded
photos should take up no more than 45% of the content column width (approximately 470 px
wide). If you are starting with a 6x4” photograph, after you set your resolution to 72 ppi adjust
the size by selecting the half-page width—470 px—and select “constrain proportions” in your
photo editing software. In whatever words your software uses, this means “I am dictating the
width of the image but want the height to be calculated by the software so the resulting image
has the same width/height proportions as the original.” Constraining proportions prevents the
image from getting “fat” or “skinny,” “tall” or “short.” It will be smaller than the original, but
nothing will be squished or stretched.
When you select photos to embed in text
you can position them flush against the
left margin, flush against the right margin,
or in the center. Note: Centering a photo
in a paragraph of text is problematic in
WordPress. You will have white space
gaps to the left and the right of the photo
because the text doesn’t wrap around
both sides of the picture.
Banner photos at the very top of pages carry one or two of our persistent navigation menus and
occasionally some integrated text.
36
WEBGUIDE BEREA.EDU 2016
PAGE 37
The above design is limited to the Berea.edu home page; however, banner images are available
for subsite use on their home page and secondary pages as well. To place correctly in Visual
Composer, banners must be 1024 px wide and 192 px tall. The persistent menu at the very top
of the home page—“About / Admissions / Academics ….”—also appears above subsite
banners. Here are three subsite banner samples:
The above banners are smaller on this page.
37
WEBGUIDE BEREA.EDU 2016
PAGE 38
SIZING FOR VIDEO
All or most Berea College videos over the past three years have been recorded in High
Definition. This gives us the 16:9 widescreen format. Also, recall that we store actual video files
on extraneous commercial servers—YouTube and Vimeo and probably others. One of Visual
Composer’s really handy tools is the video player element. Install the video player in a row
and/or column on your page, then copy the URL where your video lives. The video player
element has a field for this URL. Other things you can adjust in the element’s dashboard are size
of the player screen (100% meaning all available space down to 10% in 10% increments). You
can also select your alignment option: left, center or right.
One thing to remember about online videos. Both YouTube and Vimeo have “full screen”
setting capability. This means you can make your video window as small as necessary to fit
available space. Users know from the icons at the bottom of the video player window that they
can always go to full screen mode.
38