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.
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:
- What is the purpose of the website/change?
- 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.
- What type of site/experience are you trying to create? Informational, sales, announcement, blog, functional application, humorous.
- What do you want the user to do? Call to action (CTA) – be clear and concise – don’t make the user think or guess.
- 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.
- 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.
- 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 email@example.com.
Additional Resource: http://webstyleguide.com/wsg3/
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 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.
|Initial Consultation||Kickoff phase to discuss project concept, 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, functionality. Formalization of scope of work, including responsibilities, timelines, 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.|
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 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.
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: https://moz.com/blog/15-seo-best-practices-for-structuring-urls
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.
Readability is important to the user experience. Users will scan web pages for a few seconds, looking for key words 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 to 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 way to improve your website readability.
Related link: http://www.sjo.com/readability/
- The text on your page should be text, not an image of text. When text is not hard coded 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
- Handling of styles – underlines, bold, colors, etc.
- Presentational elements with their correct semantic meaning (more info: http://html5doctor.com/i-b-em-strong-element/)
<i>for text in an alternate voice
<b>for stylistically offset text
<em>for stressed emphasizes phrases
<strong>for text of strong importance
- 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 lay out page content.
- Don’t rely on images for page layout. Use proper HTML and CSS to lay out and style text instead of saving text as an image.
- 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.
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 with keep page load time to a minimum.
The primary image file formats for the web are GIF, JPEG, SVG and PNG — all of which should be saved in RGB color mode
- This file format is best for photographic images
- Maintains 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
- 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
- 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
Example: Photograph saved as GIF, PNG and JPG file types
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:X<iframe width="1280" height="720" src="https://www.youtube.com/embed/scZiGNN054U?rel=0"></iframe>SHOW MORE
Show suggested video when the video finishes
Show player controls
Show video title and player actions
Enable privacy-enhanced mode[?]
- Set audio or video to 'Autoplay' when the page loads, this is not a desired user experience.
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.
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.
The Meta Keyword tag should not be used as it is no longer is a factor in the Google search algorithm.
<h1>Writing for the Web
<p>Users visit a web site to find information or to complete specific tasks. Our job is to help them easily accomplish these goals. Users typicially 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 a 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.
<h2>Write 'to the Point' Headlines
<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.
<h2>Write in the Active Voice
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 ...
Students choose us for many reasons.
University of Houston has surpassed the benchmark of achievement yet again.
There are many reasons that students choose us.
The benchmark of achievement has been surpassed again by the University of Houston.
Provide Bulleted Lists
<li>Provide calls to action: Register Online, Schedule a Visit, Sign Up For An Advisor
<li>Unordered lists are ideal ways to break up long paragraphs.
<li>Use ordered lists where the sequence matters
Google Analytics is a 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 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 firstname.lastname@example.org to request access for 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.
- Texas Government Code 2054.451, enacted in 2005, requires that all state agencies and institutions of higher education, provide state employees and members of the public access to and use of electronic information resources.
- Texas Administrative Code206 regarding state Web Sites aligns state web accessibility standards with the federal regulations set forth in Section 508 of the Rehabilitation Act of 1973.
- Texas Administrative Code 213 regarding electronic and information resources enacted state standards for procurement, development, or usage of EIR for people with disabilities and also aligns accessibility standards with the federal regulations set forth in Section 508.
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.
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.
CMS Perk: Your website will always be supported in the browsers listed above.