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.

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

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

• 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

  

  Video size: 1280 x 720 560 x 310 640 x 360 Custom 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.

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

Provide Bulleted Lists

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

1. <li>Step 1</li>
2. <li>Step 2</li>
3. <li>Step 3</li>