Web Guidelines & Best Practices

Text Utilization Across Webpages

Text is one of the most important aspects of a website. It does everything from providing users content to read, serve as navigation option, or simply highlight elements throughout a page that lets a user know where they are.

It is important however to understand the proper way of utilizing text. With a variety of options, it can be easy to get carried away stylizing countless elements. Given that circumstance, it is highly advised to follow a set of guidelines that meet the HTML standards as well as the standards that pertain to Texas A&M Health and Texas A&M University.

In the following examples, you can find the different HTML elements that we use to structure webpages and how we apply our custom stylings to highlight the Texas A&M Health brand.

Headings

Headings should be used to outline the hierarchy of a page. One 1st level heading <h1>, (the title of the page), followed by 2nd level headings <h2> that are subtopics of the h1 title, and so on.

Think of each page as an outline, the heading levels representing the structure of the page. Lower level headings should be children of higher-level headings. For example, an h3 should be a subtopic of the parent h2. You wouldn’t do something like skip from h2 to h5.

Paragraph Text

This is paragraph text. It is the text that typically goes underneath a header and it contains content pertaining to the topic listed above it. The font choice 'Open Sans' is the font we designate for paragraph text because it is easy to read and it is a font that is a part of the official Texas A&M University brand.

This is an example of a Heading 2

Think of heading 2 as a way to start talking about the main subtopics pertaining to the webpage.

This is an example of a Heading 3

Think of a heading 3 as a way to build on a subtopic without deviating into something entirely different.

This is an example of a Heading 4

Think of a heading 4 as a way to further highlight details regarding the elements within a heading 3.

This is an example of a Heading 5

Very similar to a heading 4. A heading 5 is used to highlight even smaller details regarding elements within heading 3.

Bold Text

Bold text should be utilized sparingly. Though bold text can be useful for highlighting important information such as time, date, or even locations, it is best to not overuse it as it can detract readers from fully reading content fully.

Italic Text

Similar to bold text, italics should not be overutilized. Italics are best used when providing emphasis on one topic or highlighting secondary information such as a title for a professor or faculty member. Though this is not always the case, it can vary depending on content structure and what information is being presented.

How to properly use Images

Images across a webpage are typically the first thing we see. They are vital to how attractive a webpage can be, and are usually focused on before reading any text that is on the page. Understanding the correct way of implementing an image can make the difference of how effective the web page can be.

It is crucial that the individual uploading the image has ownership rights of the image, or has permission to use said images. Texas A&M has a large resource of images that be utililized within our web pages. 

 The Texas A&M Photo Repository is a collection of University-owned images maintained and updated regularly by the Division of Marketing and Communications. Usage rights for these photos is outlined on the Photography and Video page. If you see an opportunity for a general use campus image that could be added to this repository, please send suggestions to photo@tamu.edu.

Rules for Images

• Graphics are professionally designed
  -Web layouts, templates and web graphics should be created by professional graphic designers
• Photos are professional (preferably shot by a professional photographer)
• No generic stock photos
• Graphics should be consistent with the look and feel of HSC websites
• Images are sharp on a high res screen
• Useful & relevant - does it enhance the content?
• Optimized using ImageOptim, or equivalent
  -jpg compression between 80 & 90%
• Appropriately sized and cropped - e.g. is a 10000 x 10000px photo being used at 100 x 100?
• Used at the correct aspect ratio - no stretching or skewing
• Given a concise, descriptive alt tag
• No graphic text on images (must use HTML and CSS to add text on top of an image)

Uploading Images

Before you upload an image, make sure you save them with a filename that is descriptive and helpful using keyword rich text appropriate for the content of the page it will be on. An image's name acts as alt text if there isn't any other alt text provided. It also tells search engines a quick description of the image, which allows a more likely search result.

Image Text

It is recommended to add text as an overlay instead of including it within the image. This makes the text searchable and keeps it visible if the image crops on mobile or tablet devices. If your image contains text, it's best to save it as a .png file. Text in a .jpg file often becomes blurry when the image is compressed. A .png file typically retains its quality, and displays much more sharpness than a .jpg.

Aspect Ratio

Maintaining a proper aspect ratio is vital to the quality your image will be displayed. Images are cropped based on their height and width, so if all your images have the same aspect ratio, they will be displayed much more fluidly.

Correct Aspect Ratio Example
 

Incorrect Aspect Ratio Example

How to properly use Logos

A logo is the face and signature of our brand. It unites us as a single identity and connects the world to our brand as the face of any form of communication. The more consistent a logo is, the more likely it will be remembered.

Our logo is our primary identifier, and a logo must be present on all communications from the university. Depending on the medium, message, and audience, you may choose to use the university logo or a unit logo.

When using any Texas A&M logo, be sure to scale all marks proportionally, and use the electronic logo files as provided in the Logo Downloads section with registered trademark symbol. Note the incorrect use cases below:

Don't distort, modify or remove elements from the official university logos provided in the Logo Downloads section.

Example:

Don't create your own logo, use incorrect colors or add elements to the official university logos.

Example:

 

 

Don't recreate the TAMU Logo Box with a different size box.

Example:

Page Layout Types

Lorem

Site Navigation Structures

Lorem

How to properly use Links

Lorem

Button Types

Buttons are an essential part of a website. Though they can theoretically function as links, they are usually stylized to distinguish them from regular links. 

Most links tend to serve as a navigation option either to take a user from one page in a website to another, or to a different website entirely.

Buttons, however, can be special in that they can be stylized as a call to action. They differentiate themselves from regular links in that they draw more attention to a user and typically feature text that instructs the user to perform an action such as: ‘Apply Now’ or ‘Request More Information’.

They can be very useful to capture users' attention but must be used sparingly depending on the context. Different buttons can represent different actions and as such, it’s good to standardize how and where to use each type. See the following examples to get a better understanding of the types of buttons you’ll come across on various Texas A&M Health websites.

How to Properly Utilize PDFs

Lorem