Apr 14, 2021 by Jesse Mutzebaugh

Every piece of content you publish is supported by a number of smaller pieces. This section lays out our style in regards to these web elements and explains our approach to the tricky art of SEO.

Hyperlinks - Never say "Click Here"

“Click” Puts Too Much Focus On Mouse Mechanics

Using the word “click” on your links takes the user’s attention away from the interface and onto their mouse. Not to mention, you might also make them feel dumb by suggesting that they don’t know what a link is or how to use a mouse.

“View” relates to the user’s task, while “Click” puts focus on mouse mechanics.

“Here” Conceals What Users Are Clicking

Some links use the word “here” instead of “click.” The word "here" conceals what the user is clicking. The text around the link might explain what they’re clicking, but when the user reads the link itself they won’t have a clue. This means that the user has to read the text all around the link to understand the context of the link, thus impeding them from taking the quick and short route of clicking the link directly. If there’s a lot of text, this could slow the user down a lot.

Don't do thisThe Hobbit is available in the Kindle store. You can download it here

Do thisYou can download The Hobbit on the Kindle Store

When your link communicates more than “here,” users can skip the verbose text and go right to the link.

Not only that, but if multiple links say “here,” “here” and “here,” the user has to go through the trouble of differentiating between each link, opening each one to see how it’s different. And if the user wants to return to a particular source, they have to remember which “here” it belongs to. This forces them to have to use recall over simple recognition. Instead, it’s better to label the links with something that describes where the user is clicking to so that distinguishing between the links becomes easier.

Don't do thisPhotos of my trip are here, here, and here

Do thisPhotos of my trip: at the beach, on a boat, and going fishing.

Links that are labeled are a lot easier to distinguish.

Link to Nouns

Instead of saying “click here,” it’s probably better to make concrete and proper nouns in a sentence the link anchors. Concrete nouns are more immediate and vivid and give users a better idea of what they will get when they click through.

Avoid using only verbs as anchors because they’re vague and often don’t give a clear picture of what to expect. An alternative option would be to use verbs and nouns but with this approach, some links might become way too lengthy.

Don't do thisMarie Curie was a chemist who researched radioactivity. She was the first woman to win a Nobel Prize.

Do thisMarie Curie was a chemist who researched radioactivity. She was the first woman to win a Nobel Prize.

Using nouns as anchors gives a better picture of what the user is clicking to.

End on a Link

You might want to try to structure your sentences so that the link anchors fall at the end. This will make links easier to spot because users will see each one as soon as they finish reading the sentence. Thus, they will be able to take action immediately, rather than having to go back and hunt for the link in the middle of the sentence.

Don't do thisI'm on Twitter. Follow me for the latest updates.

Do thisFor the latest updates, follow me at @NewVistaDigital.

Linking at the ends of sentences helps users to act more quickly.

If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark.

Guidelines

Alt text

Alt-text is a way to label images, and it's especially important for people who can’t see the images on our website. Alt text should describe the image in a brief sentence or two.

For more on how and why we use alt text, read the Accessibility section.

Buttons

Buttons should always contain actions. The language should be clear and concise. Capitalize every word, including articles. It’s OK to use an ampersand in button copy.

Standard website buttons include:

  • Log In
  • Sign Up Free
  • Subscribe
  • Email Us

Checkboxes

Use sentence case for checkboxes.

Checkboxes are used in two instances:

  1. When a user can select multiple items, e.g. "choose your favorite brand(s)"
  2. When there is a single option on a form, e.g. "opt-in to newsletter"

Write as little as possible to communicate your message clearly.

If a list has more than 8 options to choose from, use a dropdown with a multi-select list instead.

Radio Buttons

Use title case for headings and sentence case for button fields.

Radio buttons are used when a user can only choose a single option, e.g. "Choose the shirt color for your order."

If a list has more than 8 options to choose from, use a dropdown select-list instead.

Drop-down menus

Use title case for menu names and sentence case for menu items.

Forms

Form titles should clearly and quickly explain the purpose of the form.

Use title case for form titles and sentence case for form fields.

Keep forms as short as possible.

Only request information that we need and intend to use. Don’t ask for information that could be considered private or personal, including gender. If you need to ask for gender, provide a field the user can fill in on their own, not a drop-down menu.

Headings and subheadings

Headings and subheadings organize content for readers. Be generous and descriptive.

Headings (H1) give people a taste of what they’re about to read. Use them for page and blog titles. Only use a single H1 per page.

Subheadings (H2, H3, etc.) break articles into smaller, more specific sections. They give readers avenues into your content and make it more scannable.

Headings and subheadings should be organized in a hierarchy, with heading first, followed by subheadings in order. (An H2 will nest under H1, an H3 under H2, and on down.)

Include the most relevant keywords in your headings and subheadings, and make sure you cover the main point of the content.

Use title case, unless the heading is a punctuated sentence. If the heading is a punctuated sentence, use sentence case. Use sentence case for subheadings regardless of end punctuation.

There are a few things to avoid to help people using screen readers:

Don't do thisNever use headings (h1-h6) for styling just to make text bigger.

Don't do thisNever use bold text to indicate headings.

Lists

Use lists to present steps, groups, or sets of information. Give context for the list with a brief introduction. Number lists when the order is important, like when you’re describing steps of a process. Don’t use numbers when the list’s order doesn’t matter.

If one of the list items is a complete sentence, use proper punctuation and capitalization on all of the items. If list items are not complete sentences, don’t use punctuation, but do capitalize the first word of each item.

Navigation

Use title case for main or global navigation. Use sentence case for sub-navigation.

Navigation links should be clear and concise.

Related content

Sometimes a long piece of copy lends itself to a list of related links at the end. Don’t go overboard—4 is usually plenty.

Related articles should appear in a logical order, following the step-down/step-up rule: The first article should be a step down in complexity from the current article. The second one should be a step up in complexity to a more advanced article.

If you can, avoid repeating links from the body text in related articles.

Titles

Titles organize pages and guide readers. A title appears at the beginning of a page or section and briefly describes the content that follows.

Titles are (you guessed it) in title case.

Don’t use punctuation in a title unless the title is a question.

Writing for SEO

We write for humans, not machines. We don't use gross SEO techniques like keyword stuffing to bump search results. But we also want to make it easy for people and search engines to find and share our content. Here are some not-icky ways to do this:

  • Organize your page around one topic. Use clear, descriptive terms in titles and headings that relate to the topic at hand.
  • Use descriptive headings to structure your page and highlight important information.
  • Give every image descriptive alt text.