Download Web Guidelines 1.0 - Villanova University

Web Guidelines
UNIT Web Services and Technologies
This document applies to Web pages located in CQ on servers within the villanova.edu domain or using Villanova internet protocol
ranges affiliated with University.
To ensure that all websites representing Villanova convey a consistent and accurate message and image, any
new sites and all sites involved in a redesign must be reviewed by Web Services and Technologies prior to golive. WST will review sites based on the guidelines found in this policy. Audits to check for compliance,
consistency and accurate messages will be performed on an ongoing basis.
For any questions about what is appropriate for your website, please contact WST or the Office of University
Communication.
Contents
Introduction ............................................................................................................................................................................................... 3
Advantages of Guidelines ...................................................................................................................................................................... 3
Goals of the Guidelines.......................................................................................................................................................................... 3
Guideline Violations .............................................................................................................................................................................. 3
Technical Specifications ............................................................................................................................................................................. 4
Why Switch to Responsive Design? ....................................................................................................................................................... 4
Using the Bootstrap Grid Framework .................................................................................................................................................... 5
Branding ................................................................................................................................................................................................ 5
User-Centric Content ........................................................................................................................................................................ 5
Brand Consistency ............................................................................................................................................................................. 6
Strong Content .................................................................................................................................................................................. 6
Usability ............................................................................................................................................................................................. 6
Accessibility ........................................................................................................................................................................................... 6
Section 508 Compliance .................................................................................................................................................................... 7
Naming Conventions ............................................................................................................................................................................. 7
Templates Used ..................................................................................................................................................................................... 7
Homepage Template ......................................................................................................................................................................... 7
Landing Page Template ..................................................................................................................................................................... 9
Content Page Template ................................................................................................................................................................... 10
Global Site Requirements .................................................................................................................................................................... 11
Villanova University Logo and Website Header .............................................................................................................................. 11
Search and Action Items ................................................................................................................................................................. 12
Global Navigation Bar...................................................................................................................................................................... 12
Global Footer................................................................................................................................................................................... 12
Logo ..................................................................................................................................................................................................... 12
Variations of logo usage .................................................................................................................................................................. 13
Sizes for Each Variation ................................................................................................................................................................... 13
Web Colors .......................................................................................................................................................................................... 13
Accent Colors (Secondary Colors) ................................................................................................................................................... 13
Web Guidelines 2013
1
*Villanova Blue (Primary Color) ...................................................................................................................................................... 13
*Font colors (styles) available: ....................................................................................................................................................... 13
*Heading colors (styles) available: .................................................................................................................................................. 13
Typography .......................................................................................................................................................................................... 13
Fonts ................................................................................................................................................................................................ 14
Typography Readability ................................................................................................................................................................... 14
Contrast ........................................................................................................................................................................................... 14
Imagery ................................................................................................................................................................................................ 14
Images NOT to Use .......................................................................................................................................................................... 14
Image Sizing..................................................................................................................................................................................... 15
Optimize images .............................................................................................................................................................................. 15
Photography .................................................................................................................................................................................... 15
Icons ................................................................................................................................................................................................ 15
Content ................................................................................................................................................................................................ 16
Text Optimization ............................................................................................................................................................................ 16
Relevance ........................................................................................................................................................................................ 16
Content Accuracy ............................................................................................................................................................................ 16
Editorial Guidelines .................................................................................................................................................................................. 17
How Does Responsive Design Impact Your Content?.......................................................................................................................... 17
The Content Shifts ........................................................................................................................................................................... 17
The Content Gets Hidden ................................................................................................................................................................ 17
The Content Gets Removed ............................................................................................................................................................ 17
Why Should Content Owners Care? ................................................................................................................................................ 17
Formatting Your Content ..................................................................................................................................................................... 19
How Can I Format My Content So It Will Look Good on a Variety of Screens? .............................................................................. 19
Web Guidelines 2013
2
Introduction
Web standards are guidelines that give us flexibility to create web content that is consistent, browser and platform-independent,
and accessible by everyone.
Advantages of Guidelines
The advantages of using standards are:

Universal access to information, including access by people with special needs or using assistive devices.

Platform independence for a broad spectrum of output from hand-held devices to high-end workstations.

Better indexing by search engines.

Design that is easy to maintain and to re-purpose for future emerging technologies.

Less labor intensive and more cost effective.
Goals of the Guidelines
Keeping your site fresh and accurate with consistent updates, revisions and modifications allows your site visitors to get the
information that they seek and keeps them interested in returning back to your site. The guidelines presented here will:

Help to build a strong, unified image for the University.

Ensure that the content provided on University websites is relevant and appropriate.

Ensure that all relevant content is accessible on all devices.

Assist in making the user experience pleasant.

Allow campus websites to communicate more effectively with their target audiences (prospective and current students).
In an effort to meet these goals, Web Services and Technologies and the Office of University Communications will follow the
principle of creating Responsive Web Design.
Guideline Violations
If it comes to the University's attention that a web page violates University policy (see policies in resources section), then the page's
webmaster or author will be notified and asked to remedy the problem. If the problem is not remedied, the University will sever the
link between the problem page and the Villanova main pages. In some instances, this may entail severing the complete unit link.
Web Guidelines 2013
3
Technical Specifications
The following guidelines are more of a technical nature and describe the specifications behind the various elements that make up
our website templates.
Why Switch to Responsive Design?
The increase of mobile device usage brought about the need for websites to be more adaptive and viewable regardless of the device
being used. This need developed into a practice called Responsive Web Design, which creates websites that have a fluid layout that
reshapes to best fit the screen size of the device on which it is viewed. The aim of RWD is to ensure that the site will be just as easy
to view, use, and navigate on a smartphone as it would on a desktop computer and any sized screen in-between and beyond. It also
eliminates the need to create a separate site for mobile users.
RWD is now becoming an industry standard. Our users are more mobile now. Website navigation is being done on devices other
than a desktop or laptop. It is no longer feasible to be tied to a desktop or laptop in order to obtain large chunks of information from
a website. With the varying sizes of resolutions being used by our site visitors, it is very important that our site is adaptable to their
uses and needs as well.
Web Guidelines 2013
4
This initiative will help us to achieve one of our strategic goals by allowing us to more effectively share our story. We believe that the
work invested now in providing a more useable and valuable website will pay great dividends by reaching a larger audience. Getting
to the ‘finish line’ will require a campus-wide acceptance and agreement of the goals of this project and the work that will be
needed to accomplish them.
Using the Bootstrap Grid Framework
As part of the Responsive Web Design initiative, we are following best practices by using the Twitter Bootstrap grid framework to
create the layout of all of Villanova’s templates, using a three-column structure as the base with the ability to convert to a two
column structure if needed.
The horizontal grid structure forms the basis of our template, and is a flexible device designed to add structure to the layout of
images, text and other graphic elements.
By setting up the layout in the grid structure, we are allowing the content to flow and stack accordingly once the resolution is
changed from desktop version to mobile version.
Branding
At the heart of any brand is a big idea. For Villanova University, this big idea is Ignite Change. Go Nova. Just like our printed
communications, our online information should be quickly accessible and visually consistent with the Villanova brand, allowing our
website visitors to return to the site if it is intuitive and simply organized. Websites should be able to stand alone and give visitors a
sense of the brand with every click. All the design elements, including text, images and tone, can be used to help advance the brand
and a consistent message.
Although much of branding principles involves graphical elements such as logos, it also involves content and the way it is displayed.
Villanova University websites should be consistent with the following principles in mind:
User-Centric Content
Consider the needs, goals and expectations of your site’s users. Clearly define and prioritize your audiences. Then add content,
organization, and navigation for those audiences. An example of this is our audience buttons found on the Villanova homepage:
Web Guidelines 2013
5
Brand Consistency
Make sure your users know your site is part of Villanova. Ensure that every element of the site supports the university brand. For
specifics guiding your content creation process, please see the University Communication’s website for the Brand/Logo Guidelines.
An example of this is the Villanova logo:
Strong Content
Create content that is engaging, interesting, up-to-date, accurate, on-brand and most importantly, relevant and valuable to your
audiences.
Usability
Think about what your users want from your site, how they expect it to function, what resonates and is most important to them.
Make your content understandable and intuitive for your audience.
Accessibility
Primarily, we want our websites accessible by all visitors. Accessible digital communication material needs to be visually interesting
to draw a site visitor to it and legible for people with visual or physical impairments. Villanova is committed to providing effective
access to information contained within its website, as with all other mediums.
To accomplish this, please remember to follow expected norms and behaviors and use familiar terminology/navigation labels. The
following are some helpful hints:

Use ALT tags. It is very important to include ALT tags as a text alternative for images and other media so that text readers
will be able to identify visual objects on a site.

Write clear, concise content. Write content in a format that encourages ease of scanning for the site visitor. Use short
paragraphs, with bulleted text and lots of sub-headings. Write clear, concise page titles, headlines and body copy.
Navigation titles should be short enough that it doesn’t break more than two lines.

Use meaningful titles. Use meaningful page titles to summarize your page content. Keep titles under 75 characters. These
are the descriptions that will be used to bookmark your pages.

Always left-justify text. When writing text, it should always be left justified. This improves readability and therefore,
increases usability. Centered text should not be used on the web.

Avoid using ALL CAPS. When writing text, avoid using all caps. Much as left justified text is easier to read, your visitors find
it easiest to read text that is in the standard upper and lower case format.

Know the purpose of your site. Home pages should answer the question: "What is this site all about?"

Only post content that is complete. Do not post pages marked “under construction.” Visitors come to your site to see what
information is available in hopes of finding the information they seek. They do not want to click a link only to find that there
is no valuable content there.

Avoid using ‘click here’. Do not use words like ‘click here’ for hyperlinks. Hyperlinks should be created on descriptive words
that allow the visitor to know what they are clicking on or navigating to, especially visitors that are scanning your page using
a text reader.
Web Guidelines 2013
6

Open external links in a new window. Hyperlinks directed outside the University website should open in a new tab so the
user isn’t directed off of the site. A new tab may also be used for PDFs and other non-Web documents that are
downloadable attachments. Please add advanced warning for those documents with links to necessary plugins.
Section 508 Compliance
Like our university, our users are diverse. Site content needs to be accessible and useful to all of those users. Villanova is committed
to delivering accessible websites, and requires that sites comply with requirements outlined in section 508 of the United States
government’s Rehabilitation Act.
“Section 508 was enacted to eliminate barriers in information technology, open new
opportunities for people with disabilities, and encourage development of technologies that
will help achieve these goals.” – Source: www.Section508.gov
Naming Conventions
Page names should be intuitive, short and reflective of an academic or administrative unit’s affiliation with Villanova University.
Typical Villanova URLs are extensions of the root villanova.edu. When naming files, follow these guidelines:
●
no title case
●
no uppercase
●
no capitalization
●
no special characters
●
use “_” underscore when needed
Templates Used
The templates used for the Responsive Web Design have gone through an intensive creation and approval process between the Web
Service and Technologies group and the Office of University Communication. Much consideration has gone into the creation of these
templates so that the Villanova message can remain consistent throughout all the websites within the VU domain.
The three templates that have been used are: Homepage, Landing Page and Content Page

Homepage Template – This template can only be used as the Villanova main page unless specified by University
Communication. Only University Communication and WST may use this template.

Landing Page Template – This template can only be used for the landing pages listed in the global navigation unless
specified by University Communication. Only University Communication and WST may use this template.

Content Page Template – This template can be used for any page other than the homepage and landing pages, will
have the ability to convert to two-column structure, and will have the ability to add or remove the top banner section.
All CQ Users may use this template.
Homepage Template
Header Section
The header section, at the top of the page, will have a solid navy blue background and include the full Villanova University logo with
the seal. This section will also include two types of global navigation elements: the main global menu items (About, Admissions,
Web Guidelines 2013
7
Academics…) which will be landing pages, and the service menu items (Apply, Give, MyNova…) as well as the search field. Both of
these menus will be global, ie., a constant fixture on all university pages. When viewed on a mobile device, the main global menu
will collapse into a tab called “MENU”, the service menu items will collapse into a tab called “TOOLS”, and the search field will
collapse into a tab called “SEARCH.”
Banner Content Section
The Villanova Homepage banner section will have a one column structure to accommodate the slider, which is updated by University
Communication. When reduced to mobile resolution, the slider will be ‘swipeable’ to where a site visitor will be able to advance
slides by swiping across their mobile screen. Images should be 1600 x 580, no border, level of compression at 6. Images should also
be appropriate to contrast the text above it. Please Note: Images should be photographic only, no illustrations or Clip Art.
Main Content Section
The main content section, in the middle, will have a white background that can accommodate up to a 3 column structure, which is
updated by University Communication, with the first column reserved for news and events and the second and third column for an
information highlight area. Any images used in the content area should be 780 pxW, with level of compression at 6. Please Note:
Images should be photographic only, no illustrations or Clip Art.
Web Guidelines 2013
8
Secondary Footer Section
The secondary footer section, be above the Global Footer section at the bottom of the page, will have a grey background and
include custom information particular to that directory, such as a brief description of the department/college/office, social media
icons, quick links. This footer will be changeable depending on the current directory.
Global Footer Section
The global footer section, the last section on the page, will have a solid navy blue background and include the University contact
information on the left, website related links and copyright information in the center, and the full University logo with seal on the
right. This footer will be global, i.e., a constant fixture on all university pages.
Landing Page Template
Header Section
The header section, at the top of the page, will have a solid navy blue background and include the full Villanova University logo with
the seal. This section will also include two types of global navigation elements: the main global menu items (About, Admissions,
Academics…) which will be landing pages, and the service menu items (Apply, Give, MyNova…) as well as the search field. Both of
these menus will be global, ie., a constant fixture on all university pages. When viewed on a mobile device, the main global menu
will collapse into a tab called “MENU”, the service menu items will collapse into a tab called “TOOLS”, and the search field will
collapse into a tab called “SEARCH.”
Image Background Section
The image background section, below the header, can accommodate an image as a background to the landing page. This image can
be placed in the Page Properties panel under the Image tab. Please Note: This will apply for the Landing Page Template only.
Web Guidelines 2013
9
Main Content Section
The main content section, in the middle, will have a white background that can accommodate up to a 3 column structure, which is
updated by University Communication, with the left column containing the page name and a collapsible menu, and the right column
will contain highlighted information.
Secondary Footer Section
The secondary footer section, be above the Global Footer section at the bottom of the page, will have a grey background and
include custom information particular to that directory, such as a brief description of the department/college/office, social media
icons, quick links. This footer will be changeable depending on the current directory.
Global Footer Section
The global footer section, the last section on the page, will have a solid navy blue background and include the University contact
information on the left, website related links and copyright information in the center, and the full University logo with seal on the
right. This footer will be global, i.e., a constant fixture on all university pages.
Content Page Template
Header Section
The header section, at the top of the page, will have a solid navy blue background and include the full Villanova University logo with
the seal. This section will also include two types of global navigation elements: the main global menu items (About, Admissions,
Academics…) which will be landing pages, and the service menu items (Apply, Give, MyNova…) as well as the search field. Both of
these menus will be global, ie., a constant fixture on all university pages. When viewed on a mobile device, the main global menu
will collapse into a tab called “MENU”, the service menu items will collapse into a tab called “TOOLS”, and the search field will
collapse into a tab called “SEARCH.”
Web Guidelines 2013
10
Left Column Section
The left column section is reserved solely for the left navigation of a site. Content can no longer be added to the left column so that
the content from the main/middle section and the right column can stack according when going to mobile view. The left navigation,
when being resized for mobile view, will become a drop-down menu.
Main Content Section
The main content section, in the middle, will have a white background that can
accommodate up to a 3 column structure, although the left column is reserved solely for
the left navigation (when the page adjusts to mobile dimensions the items in the middle
and right columns will stack accordingly under the left navigation which reduces to a
select menu). The left column will begin with the ‘homepage’ navigation link in bold text
above the left navigation. This link will lead back to the main homepage of the directory
in which you are currently navigating. The left column will contain the main navigation
for that directory. The middle column will contain the title of the page, an area for a
static image, and the remainder of the content for that page. The right column will
contain areas for highlighted information.
Secondary Footer Section
The secondary footer section, be above the Global Footer section at the bottom of the
page, will have a grey background and include custom information particular to that
directory, such as a short description and quick links. This footer will be changeable
depending on the current directory.
Global Footer Section
The global footer section, the last section on the page, will have a solid navy blue background and include the University contact
information on the left, website related links and copyright information in the center, and the full University logo with seal on the
right. This footer will be global, i.e., a constant fixture on all university pages.
Global Site Requirements
Visitors navigate to websites with expectations of what is commonly used on other sites. Without those commonalities, our site will
be more difficult to use. To be consistent, we require that all Villanova sites contain the following items built into the website
template:
Villanova University Logo and Website Header
The logo will appear in the left side of the header section, and will link back to the Villanova homepage. This version of the logo will
be simple text without the seal and will be the only instance where the Villanova can appear without the University seal. This logo is
only visible on the Content Page template. For specifics on logo versions, please see the University Communication’s website for the
Brand/Logo Guidelines.
Web Guidelines 2013
11
The website header will contain the name of the School or Office and will link back to that site’s homepage. We will no longer have
headings for individual departments or smaller programs. The text heading at the top of the page and the top of the left
navigational area will serve as the identifier for that site.
Search and Action Items
The search engine and any account related links (i.e. log-on, myNova) will appear in the top right section of the header. These
service menu items will collapse into a tab called “TOOLS”, and the search field will collapse into a tab called “SEARCH.”
Global Navigation Bar
Global Navigation will appear directly under the header area and must remain consistent throughout the entire site unless specified
differently by UCOMM. There are no longer dropdown menus along the global navigation. All navigational items will be a direct link
to the respective landing pages.
Global Footer
Global footer must be in a three-column structure with the following: VU address in first column, Quick links in the second column
and the VU logo in the third column. Required elements in the footer are: Links to the accessibility policy, sustainability, HIPPA Act,
Villanova job search, policies, legal notices, copyrights, and feedback. The footer will contain the full University logo with seal. For
specifics on logo versions, please see the University Communication’s website for the Brand/Logo Guidelines.
Logo
Consistent usage of the logo will be followed according to the existing logo guidelines in the University Communication’s Brand/Logo
Guidelines. Logo should always have enough gutter space surrounding its container. The minimum width that it can be used should
be: 201 pixels. (VU Homepage is exempt from this width).
Web Guidelines 2013
12
Sizes for Each Variation
The recommended sizes for each logo variation are:

Homepage and Landingpage Logo: 340px x
80px – VU logo with seal to the left

Contentpage Logo: 254px x 19px

Footer Logo (for all pages): 600px x 161px
Variations of logo usage
Acceptable uses of the logo are:

The VU seal can be placed above the text with the text
centered, or the VU seal can be placed to the left of
the text with the text left aligned.

The VU logo can be used without the seal within the
Global navigation only.

The same rules apply to the Villanova “V” logo in
conjunction with the logo text.
Please refer to the existing logo guidelines in the University Communication’s Brand/Logo Guidelines to see the types of logo
usage that are not allowed.
Web Colors
*These colors are subject to change until the template is finalized.
*Villanova Blue (Primary Color)
Accent Colors (Secondary Colors)
#847248
#002664
*Font colors (styles) available:
● alert message (red/#ff0000)
#867A6E
#A59D95
*Heading colors (styles) available:
● H2 heading - #1854B2; Georgia
●
stylize 1 and 2 (dk blue/#03277F/bold)
●
H3 heading - #1854B2; Border-Bottom: 2px #5594FB; Arial
●
stylize 2 (dk blue/#03277F/italic)
●
H4 heading - #03277F; Arial
●
stylize 3 (lt blue/#1854B2/bold)
Typography
Villanova brand typefaces are Goudy and Gotham (print) and Arial (Web). Arial should be used for HTML text. HTML titles/headers
may use the Georgia font family. Keep typography simple. Do not overcrowd layouts and do not use too many type sizes. Use weight
to draw emphasis instead.
Web Guidelines 2013
13
Fonts
Name Villanova specified fonts, including sizes and any other attributes applicable.
●
Default font size: 14px,
●
Default font family: Helvetica Neue, Helvetica, Arial, sans-serif
●
Default font color: #333333
●
Other fonts used: Georgia, GothamBoldRegular, GothamLightRegular, Goudy
Typography Readability
 Lower case letters, with their ascenders and descenders, make it easy for the eye to process word formations.

UPPER CASE LETTERS have no variety or outline and therefore makes it harder to read! Reserve capital letters for headlines
if necessary - certainly never use in body copy.

Italics should be treated in a similar way to capital letters. Many partially sighted people can find italics difficult to read so
they should be used minimally. A good alternative is using bold or a color to add emphasis.

Always use unjustified text (ranged left). Left aligned text with a ‘ragged’ right hand margin is the most legible as it is easier
to find the start and finish of each line. The spaces between each word are also equal.
Contrast
 There should always be high tonal contrast between the text and the background it is printed on.

Contrast is greatest when dark colors are combined with very pale colors. Reversing out copy

The background color should be as dark as possible. White copy reversed out of a very dark color or black are the most
legible. Attention should be paid to type size and very light weights of type to ensure that copy is always legible.
Imagery
Use simple, engaging, high quality photographic imagery. A wide range of imagery is available to express the variety of personalities
found across the university. A license must be obtained to use copyrighted stock images.
Images NOT to Use
● Clichéd images, models or posed images. Use real people with natural poses.
●
Clipart or stock illustrations.
●
Badly cropped images.
●
Uninspiring imagery. Images should be engaging and well photographed.
●
Low resolution or blurry images.
●
Busy shots without a focus. Keep image focus simple.
●
Images that will degrade the reputation of the University.
When bringing all these elements together it is important to ensure your design is clean and simple, allows text to breath, and keeps
different images and type styles to a minimum.
Web Guidelines 2013
14
Image Sizing
The image size depends on the use of the image. Tablets are the largest mobile device that images have to scale to and 800px or
larger is the recommended size for an image to display correctly on all devices, including desktop. There are some exceptions to this
rule such as a “call to action” image or button. These images usually don’t scale the width of the device but are positioned to flow
with the rest of the content.

Slider images should be 868px X 387px

Homepage Slider images should be 1600px+ X 580px

All other images should be least 780px in width
Optimize images
It is important to choose the appropriate image format. DO NOT UPLOAD .TIFFs. When creating graphics for the Web, it is best to
use the Web graphics export option in your graphics program of choice.
●
GIFs are ideal for line art, cartoons and other images composed largely of flat blocks of color. They are not suited for
complex images, such as realistic photographs because they won’t compress well and will lose color information.
●
JPGs are ideal for photographs or other images that are highly complex and contain many colors. They are not suited for
simple images with sharp lines since they will be unnecessarily large. They do not support any transparency. JPGs must be
optimized for Web; Print JPGs will not render.
●
PNGs should only be used for images containing transparent areas that must blend smoothly or when you wish to provide
print ready, high-resolution graphics. They provide the highest quality at the cost of being the largest.
Please Note: Images should always be created for the web at 72px/inch resolution and compression of 6.
Photography
Photography is a powerful and dynamic tool. Villanova values and ethos are reflected in the images we use. They should
communicate the diversity, energy and personality of what we do. Villanova images show natural, real-life people and situations.
They should convey emotions, atmosphere and engage the audience.
Images should feel observational and spontaneous rather than staged, and show a contrast with our heritage – beautiful
architecture and the energy of the people who interact with the University. To request suitable images from University
Communication, please refer to their Photography Request guidelines.
You are encouraged to use photography on your sites. Optimize your photographs for web viewing by sizing them to the exact
height and width at which they will be displayed. Setting size parameters within the HTML code will increase load time for the
page, and could result in your page not displaying as expected.
Photography should be appropriate to the subject matter of your website. Only use images that are relevant and add value. Ensure
the content does not offend or alienate. Avoid clichés, and racial and gender stereotyping.
Consent forms
Appropriate consent forms should be completed if participants are photographed, recorded or filmed during University events or
activities.
Icons
Defining size and spacing and where to use icons is another great way to promote consistency. Icons used in the global sections of
the template (i.e. footer, header etc.) are using bootstrap glyphs and are to be used sparingly. The bootstrap glyphs will not be
accessible by editors. The custom VU icons used on the callout boxes (i.e. text/image component) are to be used sparingly and
within the confines of the text/image component.
Web Guidelines 2013
15
Content
Content is the most important part of a website—a site's reason for existing. Content on Villanova University websites should adhere
to the following guidelines.
Text Optimization
Content displayed on websites should be written specifically for the web as a medium. Content that has been written for print does
not always translate well to the web. The following are some ways to optimize your text for web:
●
Keep it brief. Short sentences without extraneous words work best. If the topic warrants, use the pyramid structure by
keeping summary information on primary pages, then linking to pages with in-depth information.
●
“Chunk" content into categories and then display the different chunks on separate pages or clearly separate them on one
page.
●
Make text more readable by breaking text out into bulleted lists, bolding important terms and using headings.
Relevance
Web users are on a mission to find information. Make it as easy as possible for your users to find information on your site—keep
content on an individual web page relevant to its page title. Avoid including additional information that is unrelated to a page's main
topic—create a new page and link to it. Do not include links to pages that have not yet been constructed or upload pages that are
“under construction." Every page should contain useful information, and pages should be fully formed before they are uploaded and
linked.
Multimedia (sound, video, animations, and Flash). Multimedia on University websites should be used as a content element, not as
a design element.
Examples of multimedia as content include: Sound files for instructional purposes, podcasts, interactive training sites, and
Instructional videos.
Examples of multimedia as design include: Introductory Flash “splash” pages, and background music embedded in a page.
Content Accuracy
Villanova colleges and departments must review and update content regularly to maintain accuracy.
●
●
●
●
●
Review contact and deadline information every semester.
Check all site links at least quarterly; monthly is recommended.
Immediately remove outdated pages and content.
All content must appeal to target audience (prospective and current students).
All Web content is expected to use accurate, standardized information on enrollment.
Web Guidelines 2013
16
Editorial Guidelines
What does “responsive design” mean? It means that a website changes to show content differently on different screen sizes, such as
the smaller screens of tablets or the very small screens of mobiles. Villanova’s website is now responsive in its overall look and
behavior, but we rely on individual page authors to format their content so that it can collapse well on small screens, while still
looking good on large screens.
How Does Responsive Design Impact Your
Content?
For the new Responsive Web Design, the UNIT Developers
have focused mainly on technical and aesthetic matters.
However, content and content flow has also played a very
important part in the conversations.
The point of using a responsive approach is to allow the same
content to work across multiple devices. This can make your
job easier by not having to update content in multiple places.
So what can happen to a site’s content as we go from a large
desktop to a smaller device? Three things typically occur:
The Content Shifts
This is the most obvious change in content when we look at a
responsive layout. As the screen decreases, the columns become narrower and text becomes larger and more readable. Sidebars
and secondary content will move from the side to below the main column(s). Rows of images go from several to one, etc. When
done properly, this eliminates the need to pinch, expand, and move around a site on a smaller device, and it can make the viewing
experience much more enjoyable and efficient.
The Content Gets Hidden
Content that would otherwise take too long to skim by scrolling or just doesn’t fit well in the layout might get hidden. It's then
revealed when a user performs an action like clicking a button or toggling a drop-down.
The Content Gets Removed
Uh oh! Did an alarm just go off in your head? It should have, because this is the part of responsive design that no one likes to talk
about. Even though the general consensus is that removing content is generally a no-no, it’s totally possible and oh-so-tempting in
the name of esthetics, reduced scrolling, lowered page load time, etc.
Why Should Content Owners Care?
There are a lot of decisions to be made about what should happen to the content across different screen sizes. Should this piece of
content shift? Become hidden? Disappear altogether? What’s more important, this piece or that piece? Should this go above or below
that? It becomes clear very quickly that designers or developers should not be the only one making these decisions.
Below, you will see two views: The full view of how a website would look on a desktop, and the reduced view of how it would look
on a mobile device. As you can see, the three-column site reduces into one column and some items are condensed.
In the desktop view, you can see the three-column structure displaying the site content in its full state.
Web Guidelines 2013
17
Below is the website in desktop view:
Below is how the website will look in mobile view: (broken down into screens as you scroll on your mobile phone)
Screen 1
Screen 2
Screen 3
Screen 4
Responsive design. Mobile first. Progressive enhancement. These and any other technical approaches where website content can
take different forms across channels and platforms present a challenge to content strategists. The content you create needs to be
flexible. To achieve this, you may need to enhance and adapt some of your traditional deliverables, or set them aside in favor of
Web Guidelines 2013
18
conversations and collaborations, which is always a good thing. The Web will continue to evolve, and the more content owners and
designers can work together to adapt to these changes, the better off our content—and users—will be.
Formatting Your Content
To assure your content renders across all devices, it is necessary to sacrifice some complexity of presentation, as you will see in the
instructions below. Increasingly your audience is viewing your pages on mobile devices and tablets, and it is important that the
college or department site be accessible and readable to everyone.
How Can I Format My Content So It Will Look Good on a Variety of Screens?
 Left navigation items should only be three (3) levels deep. The pages that make up your left navigation should be
categorized (or recategorized) so that they build out three levels deep. This makes it more readable on a mobile device as
well as easier to find. Any pages deeper than the third level will appear greyed out. Create links in your main content for
other pages that cannot be in the left navigation.

Don’t use tables to construct the layout of your content: Tables do not translate well in responsive templates. A table may
appear okay on a larger desktop screen, but its content can become jumbled as screen size shrinks. If you have the need for
tables, remove the fixed widths in the table so that they will easily collapse into mobile view.

Trust that less is more: Avoid a complicated layout. Don’t make everything bold. Format less.

Never say “Click here”: Make the name of the item itself the link. Your links will be clearer and more prominent, as well as
being more accessible to those using a text reader.
Make good use of the right column: As the screen size shrinks, the right column will move below the content in the main
column, and both will remain readable.


Use headings: Headings add hierarchy to your information and break it into more digestible chunks.

Use bulleted lists. Users prefer to scan for needed information, not read lengthy text.

Use photographs. Images add life to your page. Learn about University Communication’s Photography Services, and find
numerous photos for your site.



Placing a photo with caption: Simply drop a large photo between paragraphs, or perhaps under your headline. The
photo will automatically shrink to fit smaller screens. It is important to be deliberate about placing images: make sure
they add value to your text and add to the message being told on the page.
Placing small images with text to the right or left”: Add a Text Image Component and use the align feature in the Style
tab of the component. This will allow you to evenly align text with an image so that you can eliminate needless
‘whitespace’ on your page.
Size images in CMS: Add images according to the size specifications found on page 15. Smaller images with fixed
dimensions will not render well when switching from desktop to mobile version. If an image needs to be adjusted to a
fixed dimension, do it within the component panel in CQ.
For more specific information on how to change your web site content, please check the updated instructions on the CQ Online
Help Site at http://www1.villanova.edu/villanova/cqhelp.html.
Web Guidelines 2013
19