Banner Images

Best Practices 

• Banner images are strongly recommended for the header area of all Texas State websites.
• Images should be 1600x400 or larger.
• Keep the focus of the image toward the center of the banner. Due to the responsive nature of the area, the viewable area of the image is unpredictable.
• Use semi-abstract, detailed, or blurred images. Banners are best for driving impressions, not delivering content.
• Pick a single image and use it across your entire site; this helps users identify you.

Avoid 

• Don't use images that you don't own or have permission to use.
• Avoid cluttered images or scenes with a lot of people.
• Do not use low-resolution imagery.
• Do not use stock photography unless there is a compelling need for your unit.
• Avoid words or type on banner images.

Buttons

Styles 

Colors 

Sizes 

Best Practices 

• Use sparingly. Buttons should function as a primary call to action; rarely should more than one be used on a single page.
• Be consistent. Pick a single color and style, and use those consistently across your entire site.
• Button labels should be very short and direct.

Avoid 

• Don't use buttons for layout purposes.
• Don't overuse; rarely does a page need more than a single button.
• Don't use long button labels; two or three short words is all it takes.
• Don't use long words and be aware of word wrapping on smaller devices.

Cards

Image Cards

Use image cards to add photos and captions with colored backgrounds to your page. This content type can be a good way to send a user to another related page by making the image card into a clickable link.

Image cards are only available in certain section types and layouts:

• Two columns
• Three columns
• Four columns
• Two columns: small – large (image cards only available in the small part of the column)
• Two columns: large – small (image cards only available in the small part of the column)
• Mosaic
• Collage 

*Image cards are not available in a one-column layout. 

Video Cards

In the mosaic and collage section types, you can add a video card.  

In the collage layout, you will not be able to choose the cropping option for the video card and must crop the splash image to your liking before uploading it. You will be able to choose between a large card and a small card.

RSS Feed Cards

In the mosaic section type, you can add an RSS feed card.

Collage Section Type

In this section type, you can choose from an image card or a video card. Then you can choose a small card or a large card.

This layout is meant to look like a Pinterest-style grid. 

Contact Information

Option 1

University Marketing
601 University Dr.
J.C. Kellam 860
San Marcos, Texas 78666
512.245.1555 (phone)
512.245.8153 (fax)
umarketing@txstate.edu

Option 2

University Marketing
601 University Dr.
J.C. Kellam 860
San Marcos, Texas 78666

Phone: 512.245.1555
Fax: 512.245.8153
Email: umarketing@txstate.edu

Best Practices 

• Always hyperlink the email address.
• When multiple phone/fax numbers exist, use one of the above patterns to distinguish the difference.
• Use full building names instead of abbreviations.
• Always include address, phone number and email address. If those do not exist for your unit, please use the contact information of the parent unit.

Avoid 

• Avoid reordering contact items.
• Don't add unnecessary social media links unless it's a primary form of contact for your audience; use of iconography is recommended in those instances.

Department Directory

Best Practices 

• It's a good idea to use a department directory somewhere on your site.
• This is best for quick and simple directory pages; if images and biographies are necessary, perhaps try an image + text pattern instead.

Avoid 

• For academic units, avoid mixing faculty and staff; keeping those groups in separate sections or pages will help your users.

Documents and Downloads

Simple Version

Full Version

Best Practices 

• Use this pattern whenever you are serving a link to a downloadable item; this is far better for users than inlining the links in paragraph or list text.
• Use descriptions when listing multiple documents to distinguish their individual purposes.
• Title your documents using user-friendly, descriptive terminology.
• Capitalize all words in your title and subject, and remove all hyphens and underscores.

Avoid 

• Don't use file names or structures as display titles; remove any hyphens, underscores or other file name residuals.

Event Calendar

Best Practices 

• Use high-quality thumbnail images for each event.
• Display short and targeted event ranges whenever possible; more than 10 events stacked in a block is too much to consume.

Avoid 

• Try to avoid very long event descriptions.
• Avoid displaying more than 10 events at a time, as this is hard to consume.

FAQ

Best Practices 

• The accordion pattern suits FAQs because it makes it easier to scan the questions before accessing the answer. It can be used for similar "show/hide" content needs, but be careful not to hide content that should be exposed on the screen by default.
• If you have more than 10 questions, create multiple FAQs organized in logical groups with headers to break up the flow; this will be easier to digest.

Avoid 

• Don't use the accordion for content that is better exposed on the screen by default.
• Don't make your questions or answers excessively long; keep it short and direct whenever possible.
• Avoid using images or multimedia content inside the accordion.
• Avoid using more than ten questions in a single FAQ grouping; favor multiple groups in that instance.

Headers

Best Practices 

• Headers should be used to describe whatever is in the chunk of content beneath them.
• Keep header text very brief and descriptive; longer headers may wrap and take up a large portion of the screen on smaller devices.
• Use headers in a semantic, logical order; don't select a particular header based on appearance alone.
• Most pages will only require a maximum of 2 or 3 levels of headers; don't overdo it.
• Headers can be boldfaced if desired; be consistent across your site.

Avoid 

• Don't use headers to convey emphasis for paragraph text; instead use a standard paragraph and apply boldfacing for emphasis.
• Avoid using more than five words in a header.
• Don't select headers based on appearance; instead choose the logical next header based on the hierarchy of the document.
• Avoid italicizing headers.

Icon + Text

Best Practices 

• Select an icon that clearly matches the purpose of your accompanying text or linked content.
• Best used side-by-side in three equal columns, as this is a recognizable layout on the modern web, and is easy to digest.
• Pick a color option for your site and be consistent. Maroon, gold and charcoal are the icon color options.
• Links and text are optional, but decide how you want to use the pattern and stick to it, as this sets reliable expectations for visitors.
• In our CMS, there is character limit of 25 for the title and 150 for the paragraph.

Avoid 

• Avoid mixing colors; pick a color to use on your site and be consistent.
• Within a single site, avoid treating some icons as links and others as static images, as this can be confusing for users. Pick a style and stick to it.
• Do not use brand icons for any reason other than to represent the company or product it refers to.

Image + Caption

Best Practices 

• Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users who cannot see the content of the image.
• Best used in multi-column layouts paired with other image/caption combos. Example: Common Experience
• Use landscape-oriented (i.e., 3:2 or 16:9) photos whenever possible, as these fit better on all devices.
• When using multiple images in a single row, be sure to use images of the exact same dimensions for perfect row alignment. In fact, it's highly recommended to use the same dimensions for images across your entire site.
• Make captions substantive; try to expand on the content of the image rather than simply describing what's happening.
• Use short captions of no more than 20 words; sometimes a single word is all it takes.
• No matter how long your captions, pick a length and stick to it across your site.
• When linking to other sources, be sure that the image and caption text give the user a strong indication of where they are being linked to.

Avoid 

• Avoid using in a single column unless the photo is very landscape-oriented.
• Don't mix-and-match image dimensions across your site, especially when aligning images next to each other in columns. Using identically sized images creates balance.
• Avoid very long captions; 20 words or fewer is plenty.
• Avoid simple descriptions of what's happening in the photo; take the opportunity to expand on the image.
• Avoid portrait-oriented photos whenever possible.

Image + Text

Image Left

Image Right

Best Practices 

• Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users who cannot see the content of the image.
• Be flexible! Don't worry about orphans or widows; say what you need to say, be brief and chunk your content into groups of headers, short sentences and lists.
• Favor landscape-oriented (i.e., 3:2 or 16:9) photos whenever possible, and use the same dimensions for images across your entire site. This creates balance and adds valuable patterns for your visitors.
• Best used in single-column or 2-column layouts.
• Feel free to combine images with captions; be sure to follow image + caption best practices.
• When used multiple times on a single page, consider alternating the image side with each row.

Avoid 

• Don't mix image dimensions across your site, especially when used on the same page. Using identically sized images creates balance.
• Avoid long paragraphs; be brief and descriptive instead. It's rare that a paragraph should be more than four sentences; use headers so that visitors can scan for the content they're looking for.
• Avoid using low-quality or small images. A good rule is to upload an image that is twice the size it will appear on the screen; let the CMS do the rest.
• Avoid portrait-oriented photos whenever possible.
• Avoid using lists when images are to the left.

Image Gallery

Best Practices 

• Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users who cannot see the content of the image.
• Keep slideshows between 5 to 15 images.
• Don't worry about having unequal rows of images; this will change depending on device width anyway.
• Whenever possible, use high-quality images with dimensions of no less than 1000px wide.
• Use brief, relevant captions of 20 words or fewer; a single complete sentence is often best.
• Both landscape and portrait style images work well in this format; feel free to alternate.

Avoid 

• Avoid slideshows with fewer than 5 images, or more than 15.
• Avoid captions that are irrelevant or provide little context.
• Avoid captions that are more than a single sentence.
• Don't use low-quality images; shoot for images that are larger than 1000px wide.

Links

Best Practices 

• Make the link text descriptive enough for the user to reliably predict where the link goes without needing to click it.
• Link from words in the natural flow of the text instead of relying on phrases like "learn more" or "click here."
• Use 3-8 words of text to link from. Complete sentences are OK.

Avoid 

• Don't attempt to change link color in the CMS text editor; it will change the color of the text without changing the color of the underline, which is inconsistent.
• Avoid linking with phrases like "click here" or "learn more"; instead, link from a natural portion of your text.
• Avoid links that are a single word.
• Avoid links that are longer than a single sentence.
• Don't try to force links to open in a new tab. We've disabled this on all pages in our CMS except form pages, since users may lose data otherwise. On those pages, we automatically open all links in a new tab; no action is required.

Mosaic Section Type

With the mosaic section type, you are able to build a set of cards (image, video and RSS) and add filters to the set. This allows the user to have filtered content for specific use cases. 

The cards can be image cards, video cards or an RSS feed. 

Be sure to evaluate whether the goal that you're trying to accomplish in this section makes sense for your content. Read the instructions in the links below on how to use this section type before attempting to build the mosaic section or using the filters: best practices, things to avoid and use cases. 

Percent Display

Vertical

Horizontal

Shrink browser width or view on smaller screen to see the horizontal layout effect.

Best Practices 

• Percent display is one of the content types for data visualization. It is useful for representing percent completed or progress.

• Be consistent. Pick a single style (horizontal or vertical) and use it consistently across your entire site.

• Labels should be short and direct.

Avoid 

• Avoid using long labels.

RSS Feed

Full Contents

Headlines Only

Best Practices 

• Only pull feeds from sources you trust.
• Use feeds that are relevant to your unit's core purpose, such as a blog managed by your team.
• Favor RSS feeds from sources that are updated regularly and predictably.
• Pull in a maximum of 10 articles; any more than that is hard for visitors to consume.
• Sort the feed so the most recently published article is at the top, unless there is a compelling need to sort otherwise.

Avoid 

• Avoid RSS feeds that aren't relevant to your unit's core purpose.
• Avoid pulling in more than 10 articles at a time.
• Don't use RSS feeds from sources you don't trust.

Section Background Color

Best Practices 

• Adding a background color to a section gives your pages some visual separation for different areas of content on a page. 
• Use when you want to make a clear distinction between different content.
• Fill in a section title when the content inside the section requires an identifying label.

Avoid 

• Avoid using a section background color on multiple sections in a row. You will lose the emphasis on any given section.

Separator

Best Practices 

• Separators should be used to visually indicate a logical separation between pieces of content on a webpage.
• Best used in a single-column layout.

Avoid 

• Don't use separators to "frame" elements of a page or for decorative purposes; only use to indicate a logical break in the page to visitors.
• Avoid using as the first or last element on the page; only use between elements.
• Don't use two or more separators in a row.
• Avoid using in multi-column layouts; use between entire rows only.

Site Map

Best Practices 

• Adding a site map to your website can be very useful for some visitors. It's not necessary for it to exist as a top-level navigation item, but somewhere logical and easy to access is recommended.
• It's generally a good idea to alphabetize your navigation manually, but if you aren't able to do that, sort your site map to alphabetize.
• Reviewing your site map can be a sobering reminder that your site has too much navigation, and unfortunately, simply publishing your site map won't help that much. Always strive to simplify your website architecture.

Avoid 

• Avoid thinking that a site map solves website navigation, usability or content discoverability problems; use the resources below to get started on better website architecture instead.

Slider

Best Practices 

• Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users who cannot see the content of the image.
• In our CMS, each slide is intended to purposefully link to other areas of your site. Never link to a blank hashtag or your home page as a bailout; use an Image Gallery slideshow instead, which does not require links.
• Keep slideshows limited to 5 or 6 total slides; retire old slides as new content is added.
• Slider dimensions are fixed at 16:9. Images outside of these dimensions are automatically cropped in our CMS.
• Whenever possible, use high-quality images that are at least twice as wide as they will appear on the screen. If that's confusing, crop or resize images to 1600 x 900px and go with that.
• Best used on the larger side of a two-column layout (or either side in the case of 50/50); avoid full-width layouts, as the slider is too tall in this configuration.
• Keep caption titles brief; 3-6 words is optimal.
• Caption descriptions should also be brief and descriptive; 120-160 characters is optimal.
• Decide on a length of title and description and use that as a strict standard across all your slides.
• Be sure that the image and caption text give the visitor a strong indication of where they are being linked to.

Avoid 

• In our CMS, don't leave the link field empty or link back to your home page as a bailout. If you don't have anywhere purposeful to link to, use an Image Gallery slideshow instead.
• Avoid using images with embedded text, as these cannot be translated to other languages or interpreted by screen readers. Instead, use the caption area to convey textual content.
• Avoid slideshows that contain more than 5 or 6 slides.
• Avoid low-resolution images whenever possible.
• Avoid using a slider in a single-column layout.
• Don't use caption titles longer than 10 words; 3-6 is optimal.
• Don't use caption descriptions longer than 200 characters; 120-160 is optimal.
• Avoid captions that provide little context about where the slide link is directing the user to.
• Avoid using more than one slider on a single page; this should rarely be necessary in practice.

Tables

Standard

Carded

Shrink browser width or view on smaller screen to see the carded layout effect.

Sortable

Borderless

Li'l Type

Best Practices 

• Use tables only to convey information that is tabular in nature.
• Keep table headers very short; a single word is often all that is needed.
• Use alternating row colors unless there is a compelling need to disable; this feature helps site visitors scan table rows.
• Default header background is Texas State gold. In our CMS, other colors from our primary and secondary color palette may be selected.
• Though the nature of tabular data is expansive, try to keep table rows and columns to a minimum. Columns, in particular, can make viewing on mobile devices much more challenging.
• Carded layouts are good for mobile usability if your data is basic and brief. Be sure to test this feature on smaller devices if utilized.
• All styles above can be combined; they are not mutually exclusive features.

Avoid 

• Never use tables for layout purposes; only use tables for tabular content and/or data. In our CMS, similar layouts can easily be achieved with sections and column layouts.
• Avoid long header labels.
• Avoid making tables sortable when using fewer than 10 rows; this adds unnecessary complexity.

Note: 

• You may now create additional header rows in the table content type by adding a line which has only one column of content, and making the content begin with an asterisk (*). This information is included in the dialog.

Twitter Feed

Best Practices 

• Our CMS allows Twitter feeds based on a Twitter handle, hashtag, or both. Only add feeds from sources you trust, and be aware that any Twitter account can use a hashtag and show up in the feed.
• Only use feeds from accounts that publish content on a regular basis; an account that your unit owns is most optimal.
• Works well in all column layouts; display 3 or 6 tweets for an optimal look on all devices.

Avoid 

• Avoid displaying fewer than 3 tweets or more than 6. Generally, 3 or 6 tweets exactly is the optimal amount due to how they are arranged and styled on the page.
• Avoid using feeds that you don't own or control. 

Video

YouTube

Vimeo

Best Practices 

• Only embed videos from sources you trust. Ask permission whenever possible to create a relationship with the content provider.
• Embedded videos with a strong marketing component should be brief; 3 minutes or less is a good rule. Educational content or training videos have no limit.
• Audit video content periodically to ensure that it's accurate and fresh.
• Remove or update videos that are more than 3 years old; dated content can make your unit look unprofessional.
• If you don't own the video content, test the embed from time to time to ensure that the owner has not removed it from their channel.

Avoid 

• Avoid low-quality video content.
• Don't embed videos that are more than 3 years old; dated content hurts your messaging more than it helps.