Web Design Best Practices

Type Styles

Navigation and Menu structure

Use Title Case

In title case, major words are capitalized, and most minor words are lowercase. In sentence case, most major and minor words are lowercase (proper nouns are an exception in that they are always capitalized).

• Major words: Nouns, verbs (including linking verbs), adjectives, adverbs, pronouns, and all words of four letters or more are considered major words.
   
• Minor words: Short (i.e., three letters or fewer) conjunctions, short prepositions, and all articles are considered minor words.

Button Label Best Practices

• Use Action Verbs
• Use Task-Specific Language
• Use Title Case
  ie : Explore a Degree in Business
• Do not use Click Here or Read More, the link needs to be more descriptive for usability and accessibility

Headings/Titles

Headings help users and search engines to read and understand text. For example, they act as signposts for the readers and make it easier for them to figure out what a post or page is about. Headings also define which parts of your content are important, and show how they’re interconnected. Here, we’ll give you pointers on how to think about headers and use them to improve your content.

• Use Title Case if not a full sentence
  ie: Achieving Beyond
• Use Sentence case if a full sentence
  ie: You’ll go farther than you ever imagined.
• All headings should be flush left    

Why use headings? (H2)

Why use headings? (H2 Proxima)

Use headings to show text structure

Headings are signposts that guide readers through an article. Therefore, they should indicate what a section or a paragraph is about. Otherwise, people won’t know what to expect.

Readers like to scan content, to get an idea of what the text is about and to decide which sections of the text they’re going to read. Headings help them do that. Scanning the text becomes significantly harder for your readers when it doesn’t contain any headings. It’s even worse when you add long stretches of text after a heading.

For web copy, it’s good practice to make sure that your headings are informative to the reader. Some people like to tease their audience in the headings, trying to entice them to read further. While that can work very well, it’s easy to get wrong. Remember that the main focus of headings should be on the content – and the primary purpose should be to make the text easier to read and understand.

Use headings to improve accessibility

Heading structure is important for accessibility as well. Especially for people who can’t easily read from a screen. Because headings are in HTML, a screen reader can understand the article structure and read them out loud. 

By reading or listening to the headings in an article, visually impaired people can decide whether or not to read an article. Also, screen readers offer shortcuts to jump from one heading to the next, so they are used for navigation as well.

When reviewing web sites, a UNI student employed by IT who is blind and using a screen reader noted that proper heading structure was one of the main contributors in making a web page easily understood to the user. Skipping web headings, going from an H2 to an H4 with no H3 in between, for instance, can be confusing to the user of a screen reader. 

Use headings to improve SEO

It’s generally agreed that how you use headings doesn’t specifically impact your SEO. Making minor tweaks to individual headings likely won’t help your performance. However, there are indirect benefits. Using headings creates texts of higher quality that are also easier to read. A better text is better for users, which is better for your SEO.

If visitors can’t quickly find what they’re looking for, they’ll probably leave your site and look for another answer to their question. This is why text structure and heading use also impact SEO. Search engines pick up on people bouncing from your site. When you have a high bounce rate, search engines can conclude that your page doesn’t give searchers what they’re looking for. Consequently, you might get lower ratings.

With headings, you should always put the user first. Use them to add structure and signposts to your content, and to describe what each section is about. If your headings let users know what your article is about, they’ll help Google understand your content, too.

Structuring your headings

You should structure your headings well, and you should use your key phrase in them. 

When you’re editing an web page in Drupal, you’ll see different ‘levels’ of headings in the text editor – from ‘Heading 2‘ to ‘Heading 6‘. These come in different sizes; moving from largest, to smallest. (H1 is not available in the editor, because it's automatically assigned to the site title (on the site’s home page) or the page title (on subpages).

Behind the scenes, these are converted into HTML heading tags; from <h1> to <h6>. Your theme probably uses these HTML tags in its templates, too.

That’s why, when we talk about how to structure headings and content well, we talk about H1 tags, H2 tags, and so on. We’re referring to the underlying HTML code.

How to structure your headings

You are limited to using one H1 heading on each page. The H1 heading should be the name/title of the page, and is automatically set for you. 

Then, as you write your content, you can use H2 and H3 subheadings to introduce different sections. Those individual sections might also use more specific headers (H3 tags, then H4 tags, etc.) to introduce sub-sections.

Adapted from an article on Yoast.com

Paragraph Spacing

Paragraphs automatically include extra spacing after to separate it from the next paragraph. You can use a line break or a soft return (shift + return) to eliminate that space and keep two lines of text together in the Paragraph Format dropdown.

Bulleted Lists

When using bulleted lists, if just a few words per bullet, do not add space between each bullet. If bullets are sentences, add space between each bullet by setting them as normal (paragraph) style.

Image Styling

• Use plenty of white space when adding images. If choosing to wrap an image, use no less than 15px of padding between image and text horizontally. The image should be aligned on the left of the content if possible.
   
• Alternative text - Be more descriptive with the alternative text.
   
  • The best way to approach Alt text is to think how you’d briefly describe the image over the phone. A few words will usually be enough; though sometimes a full sentence is necessary.
     
  • Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person or a machine when something they're accessing is alt text.
     
• Select high-resolution photography from the UNI photo library in UNI Photoshelter
   
• Do not add borders to images