Website Style Guide
The Butler University website reaches more people than any other marketing medium. This makes it imperative for the University to deliver a high-quality, accessible, and consistent digital experience so it can achieve its institutional goals.
This Butler University Website Style Guide provides guidelines and best practices for all site editors to follow. As the University’s web presence grows and develops, the guide will be updated. To suggest new styles or ask questions, email links@butler.edu to consult the Web Team within University Marketing.
Key considerations
Accessibility
As with other areas of the University, the website is subject to federal regulation pursuant to Section 508 of the Rehabilitation Act. This means the website must provide access and use for individuals with disabilities that is comparable to that provided to individuals without disabilities. In alignment with Butler’s commitment to accessibility, the University website strives for compliance with the industry standards set by the World Wide Web Consortium (WCAG 2.1 AA Guidelines).
For more information about Butler’s accessibility efforts and resources, visit the Office of Online Education and Educational Technology.
Editorial styles
Unless specified otherwise, all styles listed in the Butler Editorial Style Guide also apply on the website.
Component styles
Unless specified otherwise, refer to the Component Style Guide for examples and uses for the various building blocks and options available in WordPress.
Website styles
All caps
Do not use all caps to emphasize text. Instead, use bold to emphasize text, but do not overdo it. To de-emphasize text, use italics (such as in disclaimers or notes).
Ampersand (&)
Ampersands are acceptable only in headings, buttons, and menus.
Click
Use “select” instead for actions that can be taken on either a mobile device or computer.
Course numbers
Insert one space between a course code and its number. Example: FYS 101.
Credit hours
Always use figures when denoting the number of credit hours or credits. Example: Students will need to take two 3-credit courses. Both courses count for 1 credit hour each.
Days and months
Always spell out days and months. Example: Meet at the HRC on Monday, November 17.
Avoid including the day unless necessary.
Directions or instructions
Italicize words or phrases that are meant to be selected when giving on-screen directions. Example: Select the tile that says Financial Aid and select Home in the navigation bar at the top.
Double spaces
Insert one space between sentences in a paragraph (not two spaces).
Email addresses
Email addresses should be all lowercased. Example: osp@butler.edu.
Write out an email address when used in the Contact Footer component for quick reference. Elsewhere, there is flexibility in whether to link a name with its corresponding email address.
HTML
Some WordPress components require you to style text using HTML tags. When bolding text, use the <strong> tag (not <b>). When italicizing text, use the <em> tag (not <i>). This is for accessibility purposes, as screen reader software reads <strong> and <em> semantically.
Info coming soon
Never create a page that has no content. A page with only “info coming soon” on it is not an exception.
However, “info coming soon” may be used on a page that already has content if there are some changes coming soon that are important enough for people to know are coming soon but are still under development. Be sure to follow up with the content soon.
Notes
If adding information that is not important enough to include in the main flow of content, add “Note:” before the sentence. Bold the word “Note” and italicize the entire note. Example: Note: This is an example. If a note is included in a bulleted list, perform a Shift+Return to keep it with the preceding text.
Use all caps. PDF is an acronym that stands for “portable document format.”
Quotes
Put quotation marks around quoted material. Include attribution when possible (not anonymous quotes). For attribution that follows a quote, such as the Quote component, the name and title should be left-aligned. The title should go on a second line (Shift+Return). However, a degree year reference should follow the name. Example:
Evan Krauss ’16, ’23
Associate Director, Digital Content Strategy
Time zones
Do not add a time zone unless some readers are likely to be from a different time zone, such as for virtual events or virtual information sessions. Events that are on-campus only and are not expected to draw people from outside Central Indiana do not need a time zone to be specified.
If you include a time zone, do not specify daylight saving time. Simply add “ET” for Eastern Time.
Trademarks and copyrights
Do not add trademark or copyright symbols (®, ™, ©).
Underlines
Use bold to emphasize text instead of underlines. Underlining words is reserved strictly for hyperlinks.
Years
Add a comma after the year when used mid-sentence. Example: Butler Blue will host a beauty contest on September 27, 2025, before the Homecoming football game.
Accessibility
All files (including PDFs) should be reviewed for accessibility before being uploaded to the website. Make sure they have been tagged appropriately so assistive devices can read them properly. Images should have alt text, and videos should include captions and transcripts.
Review the Accessibility Help Index on ask.butler for assistance.
Accordion use
Avoid using an image or video at the top of an accordion (within it) to keep accordion content length shorter. If used, add a spacer above the image or video.
AI-generated content
Do not use AI-generated images. Follow IT Department guidance.
Embedding
If there is a pre-approved WordPress tool (like YouTube), use it. It’s technically OK not to, but the embedded file may get broken easily.
Links
Links to files should open in a new tab regardless of whether the file is hosted on the University website.
Naming
Before uploading a file to the WordPress Media Library, rename it so that it has all lowercase letters, uses descriptive words, and separates words using hyphens only. Example: bise-students-discuss-liv-golf-tournament.jpg.
Also ensure PDF files’ titles are named appropriately (descriptively) because they are viewable by users. Go to File > Properties > Title to set a descriptive title.
Sizes
File sizes should be kept as small as reasonably possible without sacrificing too much quality. Preview your video or image on a large monitor to get the best sense for whether image quality is too low.
- Video limit: 20 MB
- Image limit: For hero images, aim for maximum of about 500 KB and 2000-2500 pixels wide (72 ppi). For all other images, aim for maximum of about 100 KB or less (72 ppi). Images should not exceed 1 MB in any circumstance.
Do not upsize images (increase their dimensions greater than original size).
Text wrapping
Do not use text wrapping when a full-size image is being used. Text wrapping around a small- or medium-sized image is OK, but preview how it looks in mobile to ensure readability.
Tools for editing
The tools below are recommended for editing, but users are not restricted to these.
- Files: Adobe Acrobat
- Images: Adobe Express or Canva. WordPress Media Library editor has limited functionality.
- Videos: Adobe Premiere Pro
Capitalization
Use title case for H1 headings (page titles), but use sentence case everywhere else. Use https://titlecaseconverter.com/ for assistance. Note: Sentence case is a change from previous practice, so many pre-existing headings may be in the former capitalization style for the time being.
Informal headings
Sometimes it is appropriate to have a small heading within the body copy of a section. In these cases, leave it as paragraph text and bold the heading phrase (as is the case for all entries in this style guide). Do not add punctuation. Do not use all caps.
Page titles
All page titles should be H1 headings and in title case.
For master’s degree programs, include “Master of” wording (singular “master,” not “master’s”) for the page title. The URL slug should include “master” but not the “of.” Example: Page title of “Master of Arts in Deaf Education” and URL slug of “/master-deaf-education.”
Punctuation
In general, do not use punctuation in headings. If a heading is formed as a question, use a question mark at the end. If a heading consists of two or more phrases, separate them with punctuation and end with punctuation. Do not use exclamation points in headings. FAQ accordion headings should use punctuation at the end if formed as a full sentence or question.
Do not use colons at the end of headings. The heading format itself indicates there is related information that follows, making the colon redundant.
Structure
Hero pages
- Hero component is H1 by default.
- WYSIWYG title should be H2.
- Other headings are H2 or below depending on context. If they are on the same “level,” then H2. If they are within any other sections, then they should step down to H3-H6 accordingly.
Non-hero pages
- WYSIWYG title should be H1.
- Other headings are H2 or below depending on context. If they are on the same “level,” then H2. If they are within any other sections, then they should step down to H3-H6 accordingly.
Accordions
Accordion component heading should be chosen depending on context.
- On a hero page, if the only headings that exist prior are the H1 (hero) and the H2 (WYSIWYG title), then the accordion heading should be H3 and any interior headings should start at H4.
- On a non-hero page, if the only heading that exists prior is the H1 (WYSIWYG title), then the accordion heading should be H2 and any interior headings should start at H3.
Two Column Two Buttons Components
- These should be headings (not paragraph text) and almost always an H2.
Use
Every page needs at least a main heading. Beyond that, the use of headings is determined on a case-by-case basis, but “less is more,” particularly when preceding accordions. If components are within a single WYSIWYG together, it may be more likely that no heading is necessary. But if it’s a separate section or component, such as a video, it likely needs a heading to aid understanding.
Capitalization
Use title case for all buttons and links. Text that is linked inside a paragraph can be capitalized like normal paragraph text would be.
Internal and external links
Internal links are those that direct to pages within the same website. They should open in the same browser tab (the default link setting).
External links are those that direct to a different website. They should open in a new tab. Example: Links to forms to fill out.
Exceptions: Some Butler websites are technically separate websites, and links to them from the main Butler website should open in a new tab. These would be links to Founder’s College, Butler Overseas, Butler Athletics, Butlers Arts & Events, majors.butler.edu, and any ad campaigns.
All links to files, regardless of source, should open in a new tab.
Punctuation
Question marks and exclamation marks are not to be used in button/link text. Punctuation that is adjacent to a link within paragraph text should not be linked.
Types
- Standard links: Links can be used within paragraph text or in bulleted lists. Make sure that no blank spaces are formatted as links immediately before or after your intended link phrase.
- Links with arrows: Links with arrows are for lists of links or to call special attention to a link not contained in a paragraph or bulleted list.
- Buttons: Buttons are to call special attention to one link not contained in a paragraph or bulleted list.
Use
When directing users to another page, file, or website, link directly to that resource instead of providing lengthy instructions on where to find the information.
Standard links: Limit use of links in paragraphs to avoid overuse. If there are several links within the same paragraph, consider making a bullet list instead.
Buttons or links with arrows: If using a component that provides a choice between links with arrows and buttons, choose a button if only one link is needed, and choose links with arrows if more than one link is needed.
Wording
Describe what a link will lead to. This is especially important for accessibility reasons.
Avoid “click here” and “learn more,” and describe what users will find instead.
Examples:
- Instead of “Learn More” for a button link to the RecWell Hours of Operation page, use a descriptive phrase like “Look Up Facility Hours” or “RecWell Facility Hours.”
- Instead of “Click here to explore your options,” use a descriptive phrase like “Explore the advising and development resources offered by Career and Professional Services” or “Visit the For Students & Graduates page to explore your options.”
Similarly, avoid using raw URLs (https://www.butler.edu/admission-aid/financial-aid-scholarships/); link to descriptive text instead (Financial Aid and Scholarships).
Alt text for images
Alt text (alternative text) is a word description of an image. It should be specific to the context in which the image is used on a page. What information is being conveyed in the picture that the viewer should know?
Be accurate. Only a few words are necessary, but a short sentence or two may be appropriate. Do not include phrases like “image of” or “graphic of.” Say if it’s not a photograph (specify if it’s a logo, illustration, painting, or cartoon).
Use a period at end of the phrase or sentence.
Visit ask.butler for more tips on alt text.
Contractions
See Butler’s brand guidelines for direction on voice and tone, but contractions are acceptable.
First-person perspective
See Butler’s brand guidelines for direction, but in general, first-person language is accepted. Example: “We” when referring to the University, a department, or program. Aim for consistency within a family of pages.