Website design conventions

Lower on this page: Writing for the web

Why should you follow conventions?

By following sitewide conventions, you allow users to focus on your content. The user doesn't have to reorient herself every time she lands on a page.

In addition, following conventions will make it easier for your colleagues and successors to maintain your pages.

Content philosophy

Years ago, websites were viewed as vast repositories of information.

Today, with more mobile users visiting our pages, we are slimming down our sites, making pages text light and easier to scan.

People visit web pages to complete tasks. When you are considering whether to add something to a site, first ask yourself if the content helps the user complete an important task. If not, leave it out.

Begin to think of your site as a marketing tool rather than a repository.

Bonus: Smaller websites are easier to use and easier to maintain.

Design conventions

The most important information should be at the top left of a page. That's what mobile users will see first. As you build your page, bear in mind the sequence by which mobile users will see your content. (Questions? Call Bob Kropff at ext. 7048 or Steve Sedlock at ext. 7299.)

Increasingly, people are viewing your pages on small screens like smartphones. To help them, make your writing concise. Make your text scannable, meaning use bullet points and subheads to break up blocks of copy.

Ideally, each page benefits from art and white space.  You want to avoid full pages of copy.

A simple design, like a simple essay, reflects a lot of hard work.  Simple is better always.

Headline and subheads

The top of every page should contain a headline in a <h1> tag. The <h1> tag lets people know immediately that they are on the right page.  Bonus: When a user clicks on a link, it helps them if the words they clicked on are the same as the ones in the <h1> tag on the destination page. This also strengthens your page rank in Google and helps users on screen readers.

Lower on the page, use <h2> tags to designate major subject areas.

Then use <h3> or <h4> to designate minor subject areas. (<h4> is used most frequently). By using <h4> subheads, you allow readers to scan your page so they can find the information they want quickly.

Make your pages scannable

Often, people don’t read web pages. They scan them, trying quickly to complete a task that drove them to the site in the first place. Help them by providing numbered lists for procedures, by using <h4> subheads to break up copy and keeping paragraphs short.

URLs for pages

Always lower case.

Put hyphens between words: www.uakron.edu/study-abroad/funding-your-journey.dot

PDFs

Use them sparingly. PDFs do not display well on small screens. Avoid placing important information in PDFs. Instead, place important content on a webpage. We can help you with this.

Overwrite your PDF when you can. That way, you won’t have to change links on your site. (Call us if you have questions about this.)

Use descriptive text to title the pdf. Put hyphens between words: smith-biography-2014.pdf. This small step will help those who edit the site after you.

Page behaviors

When you are linking to a new page, resist having the page open in a new window (in other words, don’t select “target_blank”).

Text

Avoid using click here. Instead, use words that describe clearly the destination page. (Bonus: Good things happen if the hyperlinked words match the <h1> headline on the destination page. Doesn't have to be exact, though it's nice when it's close.)

Use sentence case in your headers, page titles and menu items. In other words, only the initial word and any proper nouns should be capitalized.  This makes your pages easier to scan because fewer words will be capitalized, letting proper names stand out.

Only links should be underlined. To give words emphasis, use boldface rather than underline or italics. The readability of a paragraph of italics is poor.

Generally, don’t center text or headlines. That makes it harder for users to scan your pages.

Templates

Our templates are responsive, meaning they serve a variety of screen sizes. More about our page templates.

We try to avoid having menus on the left and right side of the page. The left is where the menu belongs. Use the right sidebar to display contact information, as on this page. (That template, widely used, is www.uakron.edu Responsive 3 column.)

Help is near

We are happy to answer any questions you have. Call Bob at ext. 7048 or Steve at ext. 7299.

Writing for the web: Eight tips

Make your copy scannable

From dotMarketing:  “For years, usability researchers have found that web users rarely read entire pages, word for word. Web users:

  • Scan pages
  • Pick out key words and phrases
  • Read in quick, short bursts
  • Are action oriented
  • Click and forage in search of bits of information that lead them toward a goal

Keep in mind: “There is evidence, in fact, that shows that reading on a screen is physiologically more difficult than reading on paper. Reading long paragraphs on a screen hurts the eyes, is laborious and time consuming in a medium known for speed.”

Suggest:

  1. Use bulleted or numbered lists. Lists create chunks of content that facilitates scanning. Lists can separate ideas and allow for counting. 
  2. Put key phrases and keywords in bold, if it makes sense.
  3. For steps in a process, use numbered lists and action-oriented imperatives:
    1. Register for a username
    2. Log-in to the portal
    3. Download the application

Catch your readers’ attention in the first few words

Start with the conclusion, then follow with the details (inverted-pyramid style).

Use half the word count of traditional writing

One idea per sentence (leads to shorter sentences and increases comprehension).

The more you reduce your word count, the greater the chance your attract and hold readers.

Use words that your target audiences use when searching.

Avoid jargon. This point underscores the basic philosophical change in the UA Web site over the years: We had been UA-oriented, now we are audience- or student-oriented. 

How do you learn the terms that your audience uses? The best way is to ask them, but if that's not possible, consult a thesaurus or a keyword generator on the Web.

Carefully choose hyperlinked words

People scan and jump to the links. The links should describe what the user will see should she click on it.

Also: Search engines put emphasis on hyperlinked words when determining page rank or importance. (Search engines also put high emphasis on headlines, subheads and keywords.)

POOR: For the retreat agenda, click here.
BETTER: The University's [department name] has approved this event as a continuing education/professional development opportunity for staff. Download the application and the retreat agenda.

POOR LINK: Directory
BETTER LINK: Find a person in the employee directory Or: Search employee directory

Do not put the web address in your writing

POOR: Visit the University of Akron’s Web site at www.uakron.edu.
BETTER: Visit The University of Akron’s Web site.

Find the right tone

The web is a very direct, informal medium. When your readers scan your content, every word is valuable. Do not fill your pages with fluff or needless formalities. Use adjectives and adverbs sparingly. Boastful, exaggerated language reduces the likelihood that your content will be read or believed.  (Source: dotMarketing)

Open up your page and make it inviting

Add subheads (use the h4 tags). Limit the number of choices. White space is encouraged. Try to have something of visual interest on each major page (chart, photo, call-out quote, box). Call us: University Communications and Marketing can help with the presentation of information.

Need help?

For assistance, contact:

Bob Kropff
University Communications and Marketing
Ext. 7048
bobk@uakron.edu