For web editors: Website conventions

Why should you follow conventions?

By following our 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

Too many college sites are viewed as repositories of information.

The better approach is view your site as a marketing tool, with prospective students are your foremost audience. When considering whether information is appropriate for your site, ask whether prospective students could use it to help them decide whether UA is the right choice for them.

Today, with more mobile users visiting our pages, we are slimming down our sites, making pages text light and easier to scan. (Law went from 1,300 pages to 300 in 2016.)

Smaller websites are easier to use, easier to maintain and perform better in search engines.

Design conventions

As attention spans and screen sizes shrink, the need for concise and scannable text grows. Make your text scannable with bullet points and subheads to break up blocks of copy.

If possible, avoid three columns of information (menu, main content, sidebar with contact information). It’s overwhelming and distracting. Increasingly, we’re designing in a single column, and the most effective pages have a single purpose.

A simple design, like a simple essay, reflects hard work. 

Headline and subheads

The top of every page should contain a single 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 people using assistive devices navigate your page/site.

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

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

Scannable pages

For the most part, 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 <h3> or <h4> subheads to break up copy and keeping paragraphs short.

Do not use any of the h tags (h1, h2, h3, h4) for regular copy or links. Doing so makes reading your page more difficult for those using assistive devices, and it affects your Google page rank. (Boxes are a better way to draw attention to calls for action; we can help.)

Capitalize proper nouns. Everything else is sentence case, even in menus.

Tone

Web writing is less formal and more conversational.

  1. Use contractions.
  2. Use the language your audience uses rather than higher-ed jargon (e.g., "experiential learning"). Use keywords in your content, which will improve your Google search ranking (very important!). Don’t do this at the expense of nice, conversational writing, however.
  3. Use short sentences. Fewer than 20 words is a good target. (Sentences with two or fewer commas are recommended as well.)
  4. Speak directly to your audience.
    ORIGINAL: Students should apply by Nov. 10.
    PREFERRED: You should apply by Nov. 10.
  5. Avoid abbreviations. On second reference, use a descriptor term rather than an abbreviation (the commission vs. HLC, for instance).

Web addresses or URLs

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

PDFs

Use sparingly. PDFs do not display well on small screens. They also cause problems for people using screen readers.

Avoid placing important information in PDFs. Instead, place important content on a webpage. We can help you with this.

Important! Overwrite your PDF when you have a newer version of the doc. That way, you won’t have to change links on your site and links in email will still work. (Call us if you have questions about this.)

Use descriptive text in lowercase to title the pdf. Put hyphens between words: smith-biography-2014.pdf. This small step will help those who edit the site after you and will make your URLs read easier (spaces convert to "%20" otherwise).

uakron.edu/this is my excellent document.pdf
becomes
uakron.edu/this%20is%20my%20excellent%20document.pdf

In the Properties field of the PDF, put in the title of the document. This will help with Google search returns and accessibility.

Choose the right words

Use the words your audience uses. Make it easy for them to make good link decisions on your site. Remember, you won't physically be there to guide them when they become stumped by higher-ed jargon on your site. Frustrated users will go elsewhere.

Page behaviors

When you are linking to a new page, don't have the page open in a new window (in other words, don’t select “target_blank”). When you do that, you are polluting the user's browser with tabs. This is especially annoying and disorienting on mobile devices.

Images and documents

There should be a “images” folder and a “docs” folder in every college/department folder. Please park images and docs in those folders. That will make it life easier for you and for editors who come after you.

Text

Avoid click here. Instead, use words that describe clearly the destination page. (Bonus: Good things happen in search returns if the hyperlinked words match the <h1> headline on the destination page. Doesn't have to be exact, though it's nice when its 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 (e.g., Online newsroom). This makes your pages easier to scan because fewer words will be capitalized, letting proper names stand out.

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

Resist centering text or headlines. Centering makes it harder for users to scan your pages quickly. Everyone who visits your pages will be in a hurry.

Templates

Our templates are responsive, meaning they serve a variety of screen sizes.

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

What do I put on my site?

  1. Prospective students (and their parents) are the most important audience, by far. (Current students are less likely to use the .edu site; information they need is often on Brightspace or My Akron.)
  2. Many sites emphasize courses and expertise, but don’t reveal the personality of the department or give a sense of place. Testimonials from students and faculty members help reveal your personality. The testimonial can be 30-60 words and a good photo of the speaker. Cell photos can work well; shoot someplace with an uncluttered background for the best results, and shoot close to your subject. Call us if you have questions.

Help is near

We are happy to assist. Call Steve at ext. 7299 or Krystal at ext. 7419.