Skip to Content

Patterns

Our digital message comes to life by merging dynamic content with uniform and scalable content patterns. We are intelligent, consistent and versatile.

Banner Images

Blurred banner image of Texas State hand signs Blurred banner image of Old Main Focused banner image of Old Main Focused banner image of logo star

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 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.

Resources

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.

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.

Resources

  • Editorial style:  Building names and other useful guidelines for text are available in the Editorial Style Guide.
  • Email link syntax:  In our CMS, footer links require basic HTML. Use this snippet and replace "name" in both places with your unit's email handle. Always test.
    <a href="mailto:name@txstate.edu">name@txstate.edu</a>

Department Directory

Harrison Pranglin Albrecht - Staff  
Graphic Artist I  
JCK 860  
(512) 245-1555  
Loretta Reyes Alcala - Staff  
Administrative Asst III  
JCK  
(512) 245-1555  
Rodney Troy Crouther - Staff  
Publications Writer  
JCK 860  
(512) 245-1555  
Daniel W Eggers - Staff  
Dir, Univ Mktg  
JCK 860  
(512) 245-1555  
Analisa Victoria Goldblatt - Staff  
UI/UX Designer  
JCK 860  
(512) 245-7856  
Caitlin Elizabeth Harvey - Staff  
Asst Dir, Univ Marketing  
JCK 860  
(512) 245-1555  
Blain A Hefner - Staff  
Graphic Artist II  
JCK 860  
(512) 245-1555  
Nicole Marie Hefner - Staff  
Copy Editor  
JCK 860  
(512) 245-1555  
Kelly Marie King-Green - Staff  
Assoc Dir, University Marketing  
JCK 860  
(512) 245-1555  
Cesar D Limon - Staff  
Graphic Artist II  
JCK 860  
(512) 245-1555  
Rebecca R Lockhart - Staff  
Program Specialist  
JCK 860  
(512) 245-1555  
Joshua David Matthews - Staff  
Digital Video Specialist  
JCK 815  
(512) 245-1555  
Lauren Mikiten - Staff  
Graphic Artist I  
JCK 860  
(512) 245-1555  
chandler Prude - Staff  
Asst Dir, Univ Marketing  
JCK 815  
(512) 245-1555  
Benjamin Rauls - Staff  
Digital Video Specialist  
JCK 860  
(512) 245-1555  
Isabel Van Dyke Ray - Staff  
Publications Writer  
JCK 860  
 
Stephanie Alyssa Schulz - Staff  
Photographer  
JCK 815  
(512) 245-1555  
Brooke Thrasher - Staff  
UI/UX Designer  
JCK 860  
(512) 245-1555  
Vanessa Michelle Villescas - Staff  
Coord, Social Media  
JCK 860  
(512) 245-1555  

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.

Resources

  • Correcting employee info:  For editors deploying this pattern in our CMS, please contact Human Resources if you find incorrect information.
  • Faculty and staff photos:  For units wishing to add feature-rich content for their staff pages, University Marketing can assist with portrait photography.

Documents and Downloads


Simple Version

Full Version

Sample Word Document : Optional Subject (DOCX, 27 KB)
This is a sample description of a Microsoft Word document. It is intended to demonstrate the documents and downloads content pattern when used with a full description. Descriptions are optional.

Best Practices

  • Use this pattern whenever you are serving a link to a download item; this is far better for users than inlining 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.

Emergency Alerts

Texas State Alert

University Emergency: Texas State CLOSED July 12 due to severe weather

Updated: July 12, 2016 at 5:28 p.m. CDT

Screenshot of emergency alerts

Best Practices

  • Emergency alerts should use unique patterns that are not featured in the design interface anywhere else.
  • Area should be easy to read, interact with, click and tap.
  • Place at the top of interface and push other content down.
  • Make alert messages descriptive; indicate any action that must be taken by affected visitors.
  • At the same time, make alert messages very brief; link to an established landing page to provide more detailed information.

Avoid

  • Don't use emergency patterns for anything other than true emergencies.
  • Don't make the emergency area difficult to interact with; area should be large and easy to click/tap.
  • Don't obscure or cover up other content a user might need; push other content down instead.

Resources

Event Calendar

Expand or Collapse all.

Monica Haller: Object for Deployment / Veterans Book Project

Location:
Joann Cole Mitte (JCM); The University Galleries
Cost:
Free
Contact:
Chad Dawkins, 512.245.2664
Campus Sponsor:
The University Galleries, School of Art and Design

This exhibition runs through November 18, 2016.

The Veterans Book Project is a collection of 50 books authored collaboratively by artist Monica Haller and individuals with firsthand experience of war. Many of the authors are veterans of the recent U.S.-led wars in Iraq and Afghanistan, some are family members of soldiers, and others are Iraqi or Afghan civilians living in the United States. The books were all made in the U.S., where the wars were launched but rarely collectively seen and discussed. Haller's work spans video, installation, design, sound, photography and writing and has focused on violent and nonviolent activities in human and environmental systems. She is the recipient of a 2014 Efroymson Fellowship, a 2010 Guggenheim Fellowship, National Endowment for the Arts support in 2010, and a 2008 Jerome Fellowship, among others.

Click here for more information
more about event

Monica Haller: Object for Deployment / Veterans Book Project Opening Reception

Location:
Joann Cole Mitte (JCM); The University Galleries
Cost:
Free
Contact:
Chad Dawkins, 512.245.2664
Campus Sponsor:
The University Galleries, School of Art and Design

Opening Reception for Monica Haller: Object for Deployment / Veterans Book Project exhibition. The Veterans Book Project is a collection of 50 books authored collaboratively by artist Monica Haller and individuals with firsthand experience of war. Many of the authors are veterans of the recent U.S.-led wars in Iraq and Afghanistan, some are family members of soldiers, and others are Iraqi or Afghan civilians living in the United States.

Click here for more information
more about event

Ajax in Iraq

Location:
Theatre Center (THEA); Mainstage Theatre
Cost:
$10 students / $18 adults
Contact:
Deb Alley, 512.245.3660
Campus Sponsor:
Department of Theatre and Dance

The play follows the stories of Ajax, a fierce Greek warrior, and A.J., a female American soldier, both destroyed by the betrayal of a commanding officer. Inspired by interviews with Iraq war veterans and their families, Ajax in Iraq explores the struggle of soldiers as they try to make sense of war. (Adult content)

Performances run October 31 to November 6. See individual listings for showtimes.

Click here for more information
more about event

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.

Resources

FAQ

Expand or Collapse all.

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 and organize 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.

Forms

Best Practices

  • Make title and question labels very brief and descriptive. Rarely should they wrap to a second line when viewed on large screens.
  • Keep form length short and avoid insider language that would confuse users.
  • Organize form fields logically and sequentially, even grouping them into easily scannable sections with themed headers.
  • Take care to select the right type of form field for the task: selection/radios for single defined answer, checkboxes for multiple defined answers, text areas for free-form entry.
  • Use audits to validate expected entry types (i.e., Texas State email addresses, NetIDs, and other identifiers).

Avoid

  • Avoid lengthy forms whenever possible.
  • Don't overuse optional fields; instead keep forms short and ask for only the information that is absolutely necessary to fulfill the request.
  • For CMS use, do not ask for sensitive information like social security numbers. Gato forms are not fully secure (stay tuned for updates on this).

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

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 2 or 3 levels of headers maximum; 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.

Resources

  • Icon library:  Font Awesome has a searchable list of icons that may help you identify the right icon for your purpose, or determine if an icon represents a brand you are unfamiliar with.

Image + Caption

Without Link

San Marcos River in the morning
The San Marcos River remains a constant 72 degrees year-round.

Best Practices

  • Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users that cannot see the content of the image.
  • Best used in multi-column layouts paired with other image/caption combos. Examples: Common Experience, Style Guide
  • 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 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.

Resources

Image cards are a new content type that are only available in certain section types and layouts. Cards are not available in a one column layout.

There are five section types for regular image cards as well as either mosaic or collage layouts that arrange the cards into a grid.

In the mosaic layout, you can incorporate an RSS feed card or a video card. This layout also provides a no crop option or automatic cropping options to create a grid with cards of the same size.

In the collage layout, you can incorporate video cards, but you will not be able to choose the cropping option and must crop the images to your liking before uploading them.

Image + Text


Image Left

Kids of hammocks at the Theater building

San Marcos Campus

Stroll down the hill from the majestic spires of Old Main to splash in the crystal clear waters of the San Marcos River as you explore the most beautiful university campus in Texas.

Nestled along the river and the Texas Hill Country, the San Marcos campus stretches over 495 acres and includes more than 240 buildings.

Image Right

Kids of hammocks at the Theater building

San Marcos Campus

Stroll down the hill from the majestic spires of Old Main to splash in the crystal clear waters of the San Marcos River as you explore the most beautiful university campus in Texas.

Nestled along the river and the Texas Hill Country, the San Marcos campus stretches over 495 acres and includes more than 240 buildings.

Best Practices

  • Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users that 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 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 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.

Resources

Image Gallery

Best Practices

  • Always add descriptive alternative text (sometimes called "alt text") to your images; this provides context for users that 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.

Resources

Links

Best Practices

  • Make 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.


Vertical

58%

Female

By Gender


Horizontal

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

58%

Female

By Gender

Best Practices

  • Percent display is one of the first content types for data visualization. It is useful to represent 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

Marketing Day – Marketing Land

Marketing Land
https://marketingland.com

Marketing Day: Twitter view counts, holiday marketing tips & Google Manufacturer Center

December 11, 2017 3:00PM

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

Online Marketing News From Around The Web:

Marketing Day: Holiday paid search, Facebook Pages & an ad fraud study

December 8, 2017 3:00PM

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

Online Marketing News From Around The Web:

Marketing Day: Instagram’s Direct app, Twitter adds AMP analytics & YouTube ad prices

December 7, 2017 3:05PM

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

Online Marketing News From Around The Web:

Marketing Day: Retailer-brand relationships, end-of-year marketing & YouTube’s top ads in 2017

December 6, 2017 3:10PM

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

Online Marketing News From Around The Web:

Marketing Day: SEO reports, Pinterest chatbot for Messenger & an Instagram Stories update

December 5, 2017 3:00PM

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

Online Marketing News From Around The Web:

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.

Best Practices

  • Adding a background color to a section gives your pages some visual separation for different areas of content down 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 identification 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 that 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, as links are not required.
  • 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/size 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 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 utilize 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 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.

Resources

Tables


Standard

Employee Phone Email Building
James Bowie 245.1555 jamesbowie@txstate.edu Old Main
William B. Travis 245.1556 williambtravis@txstate.edu Nueces
Davy Crockett 245.1557 davycrocket@txstate.edu LBJ Student Center
Sam Houston 245.1557 samhouston@txstate.edu J.C. Kellam
Stephen F. Austin 245.1558 stephenaustin@txstate.edu Alkek Library

Carded

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

Employee Phone Email Building
James Bowie 245.1555 jamesbowie@txstate.edu Old Main
William B. Travis 245.1556 williambtravis@txstate.edu Nueces
Davy Crockett 245.1557 davycrocket@txstate.edu LBJ Student Center
Sam Houston 245.1557 samhouston@txstate.edu J.C. Kellam
Stephen F. Austin 245.1558 stephenaustin@txstate.edu Alkek Library

Sortable

Employee Phone Email Building
James Bowie 245.1555 jamesbowie@txstate.edu Old Main
William B. Travis 245.1556 williambtravis@txstate.edu Nueces
Davy Crockett 245.1557 davycrocket@txstate.edu LBJ Student Center
Sam Houston 245.1557 samhouston@txstate.edu J.C. Kellam
Stephen F. Austin 245.1558 stephenaustin@txstate.edu Alkek Library

Borderless

Employee Phone Email Building
James Bowie 245.1555 jamesbowie@txstate.edu Old Main
William B. Travis 245.1556 williambtravis@txstate.edu Nueces
Davy Crockett 245.1557 davycrocket@txstate.edu LBJ Student Center
Sam Houston 245.1557 samhouston@txstate.edu J.C. Kellam
Stephen F. Austin 245.1558 stephenaustin@txstate.edu Alkek Library

Li'l Type

Employee Phone Email Building
James Bowie 245.1555 jamesbowie@txstate.edu Old Main
William B. Travis 245.1556 williambtravis@txstate.edu Nueces
Davy Crockett 245.1557 davycrocket@txstate.edu LBJ Student Center
Sam Houston 245.1557 samhouston@txstate.edu J.C. Kellam
Stephen F. Austin 245.1558 stephenaustin@txstate.edu Alkek Library

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, 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.

Twitter Feed

Join @TexasTribune on campus for a conversation with Kyle Biedermann & Jason Isaac – Dec. 12 at Bobcat Stadium. D… https://t.co/lq1CLysiMO
2017-12-12T00:35:08Z
’Twas the night before finals at #TXST, all studying hard at Alkek Library. Students look back on their notes from… https://t.co/HL5esIok9n
2017-12-11T22:15:13Z
Thank you to everyone who submitted their #txst snow day photos. Here are the winners! ❄️ Check out more great pic… https://t.co/qJmZ6p69zr
2017-12-11T20:56:36Z

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 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. 

Resources

Video


YouTube

Vimeo

Best Practices

  • Only embed videos from sources you trust. Ask permission whenever possible to create a relationship with the content provider.
  • Video embeds 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 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 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.

Resources

  • Video production:  University Marketing may be available to consult with and produce video content for your unit.
  • Central channels:  Please feel free to embed and share video content found on the Texas State Vimeo and YouTube channels. Be aware that we remove older content periodically.