Skip to main content

Web Best Practices & Guidelines

As marketers and representatives of UH, we strive to provide an excellent, consistent experience to our visitors. The styles and best practices defined on this site help to create effective communication on the web. These practices can apply to any website, whether you are in the UH CMS or another platform, but we will highlight perks to being in the UH CMS.

All websites for colleges, divisions, departments, centers and institutes that are funded by the University shall follow UH brand guidelines. For more on these guidelines, please review UH Brand Guidelines or the Editorial Style Guide.

For information on migrating your site into the CMS, please contact Robert Birkline with Business Solutions in Technology & Support Services.

For information on digital signage please contact digitalsignage@uh.edu.

For information on streaming media services please contact streaming@uh.edu.

Table of Contents

Fundamentals of a Website

A good website meets user needs and delivers a positive experience. When you are creating, updating or maintaining a site, the following questions should be considered:

  1. What is the purpose of the website/change?
  2. Who is your target audience and how will they find you? Identify who your audience is – faculty, staff, students, buyers, media, etc. Consider how they will find your site or better phrased, how are you going to let them know your site is available – SEO, integrated marketing, another website.
  3. What type of site/experience are you trying to create? Informational, sales, announcement, blog, functional application, humorous.
  4. What do you want the user to do? Call to action (CTA) – be clear and concise – don’t make the user think or guess.
  5. What will the user want to do? This can be different from what you want them to do. To help, develop use cases and try to answer questions before they are asked.
  6. Is the content on your site original, engaging and relevant to the user? You may develop the most creative/beautiful site, but if the user doesn’t find the answer to “what’s in it for me?” they’ll leave the site, likely to never return.
  7. Is your site responsive? It should be! CMS Perk: all sites developed in the CMS are responsive.

Please use this guide and practice the fundamentals when creating or updating your UH website. If you have any questions, please send an email to webmarketing@uh.edu.

Additional Resource: Web Style Guide Online

Web Development – The building and coding of the website. Developers use processes and technology for front end (what the user sees) and back end (the coding of the site) development.

Web Content – The message of the website. This includes the text, both on and off-page (metadata), sound, video, and other graphic elements.

Web Design – The visual style of the website. This includes the layout of the page and site, colors, graphics, and typography. CMS Perk: Templates are available that are designed and Brand approved.

Developing a website should follow these eight stages. Brief descriptions and essential tasks are outlined for each.

Phase Description Tasks
Initial Consultation Kickoff phase to discuss project concept, the purpose of website, audience, etc. with business, IT, and Marketing. See Fundamentals of a website. Establish costs, resources, hardware/software requirements, access, and permissions.
Project Specification/Scope Establish preliminary specs and functionality. Formalization of the scope of work, including responsibilities, timelines, and cost. KPIs should be discussed in this phase. Formalize a project plan and wireframes.
Site Organization Development of the site architecture is established.
Site Design and Content Creation Content development and collection is during this phase. Development of site design and site navigation, based on requirements and content. Business, marketing and IT review and sign off is required in this phase. Responsibilities and process for creation/collection is reviewed and approved during this phase. Consider user testing at this stage. Establish Metadata, SEO strategy, Adwords, event tracking/Analytics, etc. IT technical specs, if needed, finalized/written.
Project Development Coding and database development (DB development is done by UIT) begins during this phase. Must meet Web Accessibility/508 Compliance standards
Testing & QA Development is completed and business and UAT testing begins. Testing in supported browsers is completed. Bugs are submitted and corrected during this phase. Business and Marketing sign off is required for this phase. Regression, load, stress, UAT/QA testing.
Create metatags, submit URL to search engines, PPC, SEM, Social Media campaign integration. Submit site to Marketing for Brand review and approval.
Site Launch Coordinated launch of website to production/live site. Post-prod testing.
Maintenance Maintenance of the website and any minor updates. As assigned/needed.

Site Organization

Organize the site content to best enhance the user experience. Think of your site's folder structure as a table of contents, but from the user's perspective. Group folders as buckets of related information. Users will click to view deeper content if the site is easy to navigate but may choose to leave the UH site entirely if the content is not easily found. Make sure that the more important information is within a top-level folder.

All websites for colleges, divisions, departments, centers, and institutes that are funded by the University should adhere to the UH Brand Guidelines. For more on these guidelines, please review UH Brand Guidelines or the Editorial Style Guide.

Your site architecture drives your navigation. Delete unnecessary pages and define your navigation with the user, not yourself, in mind. The following activities should be followed to define your site architecture:

  • Content evaluation (think user experience):
    • If you have an existing site: Identify all existing site content and evaluate the relevancy, accuracy and effectiveness of existing content (analytics, surveys, etc.).
    • If you are creating a new site: Identify what type of content would be relevant, accurate and effective to the intended audience.
  • Information-grouping (chunking): Grouping your content into user-centered, top-level categories.
  • Standardize content (think consistency): Establish a standard, consistent vocabulary for the site to apply to all site content.
  • Related links – (think SEO): Create descriptive, useful metadata, “related link” lists and other navigation components that aid in discovery.

Site navigation is the roadmap for the user to find out where they are and where they can go. Just like with any map, if you don’t make it intuitive and easy to understand the user will get lost. Try to present the information in the way that the user will find it (think user experience and consistency).

  • Orient the user: Answer the question, “Where am I am right now?”
  • Route decisions: Can the user intuitively find where they want to go next?
  • Mental mapping: Are the experiences consistent and understandable enough to know where they’ve been and to predict where they should go next?
  • Destination: Can they recognize that they have arrived in the correct place?
  • Create consistent, well-marked navigation paths using a variety of navigation elements throughout the site: menus, breadcrumbs, related and footer links to help users easily navigate your site.
  • Don’t confuse the user with too many choices on home and major menu pages (character limits should apply – be more concise with your menu options).

Helpful hints:

  • Menus are containers of related information. Links should be short and contain words that users easily identify as calls to action or as informational content or resource.
  • Include a high-level link to the UH home page (www.uh.edu) in your site navigation.
  • Your main menu navigation should be what is contained within your site. (Do not link to outside pages, unless a cue is given - like "by clicking on this link you will be leaving our site" or displaying the URL “www.notUHwebsite.com”).

Directory names should not be unnecessarily long and should make use of relevant words. Recommendations for folder names should use the following:

  • Use simple language, no jargon;
  • Language should be easily understood and compelling to those seeking its content;
  • Contain keywords to help the user see that they’re getting what they want and expect;
  • Should match the title of the page which lets the user know what they are about to read. One creates an expectation (URL) and the other delivers on it (Page title/content);
  • Should be all lower-case; and
  • Should not include spaces or special characters—hyphens are preferred to underscores.
  • All UH websites should use a single domain and the UH subdomain (www.uh.edu)
    • Site content ranks better if it all shares the same subdomain. For this reason, it is better to have your website at www.uh.edu/yoursite instead of yoursite.uh.edu/.
  • Limit redirection hops to one
    • Browsers — especially on mobile devices — are slowed down and can occasionally struggle with multiple redirection hops
    • Search engines may consider URLs with multiple redirection hops as less important and rank the page lower

CMS Perk: pages are lean, responsive, and include print style sheets.

Additional resources: Best Practices for Structuring URLs

Content

Page content should be relevant, engaging, and clear in the messaging or the call to action for the intended audience.

Use the active voice when writing content. Speak directly to your audience. All websites for colleges, divisions, departments, centers, and institutes that are funded by the University should adhere to the UH Brand Guidelines. For more on these guidelines, please review UH Brand Guidelines or the Editorial Style Guide.

All screen content must adhere to UH brand standards. New modules and screens are subject to brand review and must be approved by UH Branding. This will be coordinated through the development and implementation cycle with UIT. Copy changes or screen updates using images that have previously received brand approval must be submitted to UH Branding for updated approval.

Readability is important to the user experience. Users will scan web pages for a few seconds, looking for keywords in headlines and in the first paragraphs before clicking away. One question to keep in mind when creating a page is: How easily can the user understand the written text?

Another aspect of readability is also related to how you develop the content on your page. A page that has a graphic of text versus coded text may not appear differently to the user, but screen readers (for the visually impaired) and search engines will view the page differently. To meet ADA compliance standards and for search engines optimization (SEO), any text that is important to the user should be hard-coded.

Improve the readability or scan-ability of your pages and users will be more likely to click through to other pages within your site and not exit from the landing page. We will cover several ways to improve your website readability.

Related link: How readability can make sure people actually read your content

  • The text on your page should be text, not an image of text. When text is not hardcoded as HTML, the user and search engines cannot search the page for text and the page text may not size correctly in a responsive view. Exceptions can be small graphic elements, such as buttons, icons, or widgets.
  • The most important information should be higher up on the page and demoting as you move down the page.
  • Include introductory copy that summarizes what the page is about and orients the user to the purpose of the page.
  • The content should be broken up with headings making the page easy to scan. Use concise headings (h1, h2, h3 tags) to help delineate content hierarchy and to help users scan content. These tags should include words that users may use as search criteria and is specifically related to the page content.
  • The first heading <h1> should identify what the page is about. For example, “About UH” or “Web Best Practices.”
  • Consistently use the following:
    • Title casing for headings, sentence casing for paragraphs
    • Vocabulary
    • Handling of styles – underlines, bold, colors, etc.
    • Presentational elements with their correct semantic meaning (more info: The i, b, em, & strong elements)
      • <i> for text in an alternate voice </i>
      • <b> for stylistically offset text </b>
      • <em> for stressed emphasizes phrases</em>
      • <strong> for text of strong importance</strong>
  • Use bulleted lists or graphics when possible.
  • Make sure that there is enough contrast between text and any background colors or background images.
  • Hyperlinks and CTAs should be succinctly and clearly marked. Use clear language identifying where the hyperlink is going or what you want the person to do. Instead of “click here” you can use “Read more.” Or hyperlink the exact phrase that relates to the link.
  • Avoid overusing bold to highlight or call attention to special text or page content. Emphasize <em> phrases or format text using special CSS styles — see additional Bootstrap body content style information.
  • Use tables only to display tabular data. Don’t use tables to layout page content.
  • Don’t rely on images for page layout. Use proper HTML and CSS to layout and style text instead of saving text as an image.
  • Use concise words as the hyperlink text.
  • Do not use ‘click here’ or ‘for more information’. A better method would be to link a phrase that incorporates contextual information, i.e. ‘for more human resource benefit information’. Contextual hyperlinks help users visiting your site with 'screen reading technologies' and helps search engines crawling your site.
  • Do link to deeply nested content or to related topical information to help with SEO.
  • Links should be styled (color, underline, etc.) consistently on your site. This helps user quickly determine what text is hyperlinked
  • Links to pages within uh.edu should not open in a new window. This allows the user to click the back button in their browser and provides for a better user experience.
  • Links should include a title tag. This helps those using screen readers and also serves as a tool tip to inform users of what they’re clicking on.



<a href="/web/bootstrap/index.php" title="Bootstrap H1,H2,H3 Tags">Bootstrap H1,H2,H3 Tags<a>

  • View available images for the web
  • All images visible to users should have meaningful, descriptive alt tags to comply with Section 508 Standards regarding accessibility guidelines. Images that are purely decorative should have null alt tags.

<img src="/web/_img/college-home.jpg" alt="College of Pharmacy Home Page" width="360" height="200"/>
<img src="/web/_img/decorative-image.jpg" alt="" width="360" height="200"/> Decorative image with null alt tag

  • Use only non-copyrighted images. If copyrighted images are used with permission, a photo credit needs to be displayed with the image.
  • Images should be sized appropriately, not stretched or squashed.

File size

Optimize the file to the smallest file size that looks good. We recommend a file size of 100 kilobytes or smaller. How to compress the image size? This helps to keep page load time to a minimum.

File formats

The primary image file formats for the web are GIF, JPEG, SVG, and PNG — all of which should be saved in RGB color mode

JPG

  • This file format is best for photographic images
  • Maintains a greater number of colors in compression
  • Does not preserve transparency
  • Should be avoided for logos, screenshots, and graphics as edges degrade with compression and artifacts can distort the image

PNG

  • Should be used for logos, screenshots, and other non-photographic images;
  • Supports multiple levels of transparency and most number of colors;

SVG (Scalable Vector Graphics)

  • Renders crisp at all screen resolutions and can be resized without losing quality
  • Minimal file size for basic graphics
  • Most ideal for logos and icons
  • Older browsers do not support this format

GIF

  • Good for images in which there are few colors (limited to a max of 256 Colors)
  • Supports index transparencies but does not support alpha transparencies
  • Is the only file type that natively supports animation
  • Should generally be avoided in favor of PNG

Use of logos and more guidelines around images - see Brand Guidelines for more information.

  • Include a fallback image or alternate video format options when embedding video with the HTML5 video tag. This is to accommodate the various web browsers that may be in use by visitors to your site.
  • For YouTube embedded video, unless the video is from a specific UH playlist, it is best to change the default setting by unchecking 'Show suggested videos when the video finishes’ when generating the YouTube embed code. Click the 'SHOW MORE' tab in the example below to access these options.'

    Example:

    Share
    Embed
    Email
    X
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/scZiGNN054U?rel=0"></iframe>
    SHOW MORE
    You Tube Video Graphic

    Video size:

    Show suggested video when the video finishes
    Show player controls
    Show video title and player actions
    Enable privacy-enhanced mode[?]

Dont's

  • Set audio or video to 'Autoplay' when the page loads, this is not the desired user experience.

Title

The Title Tag defines the title of the web page. Title tags are used on search engine results pages and are important for both SEO and social sharing. Titles should not be too long as only the first 60 characters are displayed in search results. The most important keywords should appear at the beginning if the title is long.

Description

The Meta Description should include a concise description of the web page that a searcher will want to click. Keywords should be used intelligently within the description but do not factor into Google’s ranking algorithms for web search. The description is displayed on search engine result pages to display a preview for the page. The description should optimally be between 150-160 characters.

Keywords

The Meta Keyword tag should not be used as it is no longer a factor in the Google search algorithm.

<h1>Writing for the Web </h1>

<p>Users visit a website to find information or to complete specific tasks. Our job is to help them easily accomplish these goals. Users typically scan web pages, beginning at the top of the page, and then work their way down the page from left to right. The first headline they see should be an h1 tag. That headline should be written in a clear and direct manner. Include words that users may use in search criteria—this can help elevate your page ranking in search engines. If you're in the CMS, the first h tag is formatted for you.</p>

<h2>Write 'to the Point' Headlines</h2>

<p>Once you've identified the main topic for the page and provided a few sentences, add more content, keeping it brief and concise. Organize your content, placing the most important items first. Use secondary headlines (h2, h3, h4 tags) to delineate content sections. Subheads should be brief and tell the user what each section will cover.</p>

<h2>Write in the Active Voice</h2>

Create sentences where the user performs the action and avoid complex sentence structures that place the emphasis on the object of the action. Write in passive voice only for content in which the user is not important or ...

Active Voice:

Students choose us for many reasons.

The University of Houston has surpassed the benchmark of achievement yet again.

Passive Voice:

There are many reasons that students choose us.

The benchmark of achievement has been surpassed again by the University of Houston.

Provide Bulleted Lists

<ul>
  • <li>Provide calls to action: Register Online, Schedule a Visit, Sign Up For An Advisor</li>
  • <li>Unordered lists are ideal ways to break up long paragraphs.</li>
  • <li>Use ordered lists where the sequence matters</li>
</ul>
<ol>
  1. <li>Step 1</li>
  2. <li>Step 2</li>
  3. <li>Step 3</li>
</ol>

Google Analytics

Google Analytics is software that can help you better understand how people are using your website. Through different dashboards and reports, you’ll have the opportunity to unlock a great deal of data. Google can provide you with the routes people take to reach your site, the content they viewed, and even the devices they use to get there.

CMS Perk: Google Analytics is automatically set up if you have a site in the CMS. Contact webmarketing@uh.edu to request access to your site.


Web Accessibility/508 Compliance

State agencies and institutions of higher education are required to comply with Texas EIR Accessibility statutes and rules to provide accessibility.

All websites for colleges, divisions, departments, centers, and institutes that are funded by the University should adhere to the UH Brand Guidelines. For more on these guidelines, please review UH Brand Guidelines or the Editorial Style Guide.


Browser Testing

The University of Houston officially supports browser versions used by more than 1% of uh.edu visitors. Site owners must test pages in each of the browsers shown below before the site is made live. Additionally, responsive pages should be reviewed at all viewport sizes to make sure that content displays as intended.

View the list of supported browsers.

CMS Perk: Your website will always be supported in the browsers listed above.

General Website Guidelines

Hyperlinks, URLs, Third-party applications, Third-party advertising, etc.

Purpose

These guidelines have been established to protect the online brand and reputation of UH.

The benefits of these guidelines, in order of importance, are:

  1. Best practices for brand reputation and user experience
  2. SEO best practices
  3. IT security best practices
  4. Compliance with any state agency that has oversight of our websites

These guidelines apply to every website that is owned, funded or operated by University of Houston (on the uh.edu domain or externally). These web pages should contain relevant, cohesive on-brand official UH content.

It is the department or website owner's responsibility to ensure they are meeting these and other applicable university guidelines. It is at the discretion of the department marcom team to approve requests that fall under these guidelines.

Definitions

“Official” is defined as being used in the line of business, representing UH business or anything that ensures the continued operation of the University.

“Website” as defined by Texas Administrative Code. 

  • (20) State website--A website that is connected to the Internet and is owned, funded, or operated by or for a state agency or institution of higher education, including key public entry points.
  • (24) Web page--Presentation of state website content, including documents and files containing text, graphics, sounds, video, or other content, that is accessed through a web browser.

Important note: All higher education web pages are required to meet TAC guidelines.

The UH.edu domain is the largest and most accessible piece of the UH brand. It can be accessed by anyone, anywhere at any time. Where to apply these guidelines

When a user sees our domain (uh.edu) in the URL they are automatically expecting something from this. Read this article about best practices for URLs by Nielson Norman to go into details about user expectations.

URLs and Redirects

New URL requirements:
  1. Must be for official UH business and site must adhere to Brand guidelines.
  2. Your Department Marcom team must approve of the URL request before University Marcom will consider the request.
    • URL requests can be made through UIT: URL request
  3. Your Department Marcom team must take “ownership” of the URL and is responsible for ensuring the URL is maintained and does not serve an error page.
    • University Marketing & Communications reserves the right to unpublish the URL if these requirements are not maintained.

Redirects from UH.edu to UH.edu

Example: uh.edu/page-1 redirects to uh.edu/page-2

  • Allowed, using a 301 redirect (do not use a 302)
  • Redirect to the final URL whenever possible
  • Avoid redirect loops

Redirects from UH.edu to outside of UH.edu

Example: www.uh.edu/page-1 redirects to www.energy-research.com

  • Allowed under the following circumstances:
    • Both sites are for official UH business and meet UH brand standards. [flesh out external party brand guidelines.
    • The redirect site is paid for and maintained by UH funds.
    • Your marcom department takes “ownership” of both URLs and will ensure both URLs are maintained and meet these standards.
    • If the redirect site will no longer be maintained, the redirect must be changed to a new site that meets these standards.
    • University Marketing & Communications reserves the right to unpublish the redirect if these requirements are not maintained.

Redirects from an outside URL* to UH.edu

*This guideline applies to URLs that the University owns/manages that are outside of the uh.edu domain. The typical use case for this is vanity URLs.

Example: www.tdecustadium.com redirects to www.uh.edu/athletics

  • Allowed under the following circumstances:
    • Both sites are for official UH business and meet UH brand standards. [flesh out external party brand guidelines.
    • The redirect site is paid for and maintained by UH funds.
    • Your marcom department takes “ownership” of both URLs and will ensure both URLs are maintained and meet these standards.
    • If the redirect site will no longer be maintained, the redirect must be changed to a new site that meets these standards.

On page Hyperlinks

This section provides guidelines for adding hyperlinks on a uh.edu (referral) web page to websites outside of uh.edu.

Use the following decision tree to assist you in determining if the hyperlink is appropriate.

  1. Is the referral page (the page the hyperlink will be placed on) on uh.edu. Does the referral page meet brand guidelines and contains official (see definition above) UH content?
    • If yes, move to #2
    • If no, the department marketing staff should work with the page owner to bring the site into brand. Once the department feels the site is in brand, the site should be submitted to branding@uh.edu for review. Once you receive brand approval, move to #2
  2. Is the context of the page and hyperlink text making it clear on what the user will expect to see when they click on the hyperlink? For example, “Find out more about the application process for admission and financial aid available to Freshmen.” Versus “You just need to apply and pay for classes”
    • If yes, move to #3
    • If no, rework your content so that the user's expectations will match what they will click on.
  3. Is the URL you are hyperlinking to a reputable source? For example, other universities, government agencies, known not-for-profit, legitimate public/private organizations?
    • If yes, post your hyperlink
    • If no, your marcom department should review and assess the credibility of the website. This is a security risk from both a technology perspective and a brand perspective. You do not have any control over what is on the other website.
      • If the hyperlinked site is no longer maintained by the owner, that's an opportunity for less reputable people to claim that URL and all of the SEO credibility with the backlink. That's the best-case scenario. Worst-case scenario is that the site content may no longer relate to what the previous owner maintained - it could be adult websites.
        1. University Marketing & Communications reserves the right to unpublish the hyperlink if these requirements are not maintained.

Third-party advertising on a Higher Education Website

Any official UH website should be free from any third-party advertising.

  • Website owners are not allowed to sell web space for advertising.
  • Website owners are not allowed to display any third-party applications that display advertisements.
    • For example, the free version of a PDF digital publishing tool, like ISSUU, comes with ads and the paid version is ad-free. You must use the paid version on your official website.