Tips for effective websites

Tips for effective websites

You have less than 5 seconds to engage visitors to your website. What's going to hold their interest?

The most effective websites are: 

  • Designed for the user
  • Responsive to mobile devices
  • Scannable
  • Concise
  • Engaging

Designed for the user – How to Organize Your Site

University Communications' goal is to ensure Appalachian's websites are designed for the user, not the host organization. Consider what visitors want to accomplish on your site... What tasks are they coming there to do? Focus on their needs. Think of how to best organize the content so they can quickly access information and complete those necessary tasks, such as applying to a program.

 

Responsive to mobile devices – How to Build Your Site

Mobile users outpaced desktop users in 2013. If you want your site visited, it must have responsive web design – meaning that the visual presence changes or "responds" to a fit a smaller screen.

 

Scannable – How to Present Your Content

Web readers scan first, then read further if they're interested. So, website text should contain...

 

  • Easy-to-scan copy blocks
  • Short sentences – 5 to 10 words
  • Short paragraphs – 50 words or less; stand-alone sentences are OK; no paragraph should be more than 5 lines long
  • Subheads
  • Bullet points – 5-6 items; group with subheads if bullet lists becomes too long

Concise – How to Write

  • Be brief, clear, compelling and persuasive
  • Use personal language, such as "you" and "your"
  • Include strong calls to action
  • Include links for additional info – embedded or listed in a sidebar
  • Use numerals whenever possible instead of spelling out (10, 60, 100, etc)

Engaging – How to Combine What You Have Just Learned

Combine all the tips above and you'll have a site that is more useful and easier to navigate. Further, consider what content your readers want to see and write to their interests.

Embedded videos can enhance any web page, but they are not without pitfalls. Consider whether video is the best medium for your message and, if you decide it is, implement videos using best practices.

Is video an appropriate way to present your content?

Before committing to using video, you should determine whether video is an appropriate medium to present the information your website users are looking for.

Although the popularity and value of video is undeniable, text is still the most prominent and useful medium on the web. Text is scannable; accessible; easy to refer to; can be easily copied and pasted; is relatively easy to update; and indexes well in Google and other search engines. Text is also easier, and usually faster, to initially produce and post.

Video can be a chore, both to users and maintainers.

Reserve video for those things the medium is most adept at:

  • storytelling
  • interviewing
  • demonstrating procedure
  • documenting events

University requirements and best practices

If you have determined that video is an appropriate medium to present or supplement your content, there are university requirements and best practices.

Make sure the video is accessible

Videos are a trouble spot for accessibility. Users with either visual or hearing impairments cannot get the full benefits from video, so all video should make available open or closed-captioning, sometimes supplemented with text transcripts. These materials should, in addition to making all spoken text and sounds accessibility, also account for "text as images," such as titles and credits. The only exceptions are videos that contain neither audio nor "text as images."

YouTube and Vimeo both have support for open or closed-captioning, so refer to their documentation for more information. If you begin by preparing a text transcript yourself, you can upload that transcript to YouTube and it will turn it into open or closed-captions.

In addition to aiding accessibility, text transcripts also provide an additional benefit — they make the spoken text in videos available for indexing in Google and other search engines. Although it is not required that text transcripts be included with every video embed, they can provide nice page content for those pages whose sole purpose is to present a video.

Only embed videos from reliable sources

Whether you are embedding video that somebody else created, or you are creating brand new video content, the video must be embeddable from a reliable source. This means an appropriate channel. Both YouTube and Vimeo use the channel model, where all videos belong to a channel maintained by a YouTube or Vimeo user.

If the video you want to embed already exists, determine whether the channel it is posted to is reputable and sustainable — reputable in that the channel is owned by a known company, organization or user and that the other videos in that channel are appropriate; sustainable in that the video is not likely to be deleted or its URL changed (either of which would break your embed).

If you are creating a brand new video, determine which channel it should be posted to. Don't post new videos to personal channels. Always look for an official university channel that would make an appropriate home for the content. If you do not have an official channel, go up your chain of command until you find one. eg. If you are in an academic department and your department does not have a channel, contact your college of school to see if you can use their channel. Do not create new channels without University Communications approval.

How to embed your video

Our Drupal 7 documentation provides the following resources that will help you embed video into your pages:

How to prepare a text transcript

Text transcripts are pretty straightforward. YouTube allows you to upload a simple text file of the spoken words, and their software will do a pretty good job of matching the text to the video and deploying captions at the appropriate timestamps.

YouTube also provides automatic captioning, and, although the accuracy is pretty good, proper names and appropriate punctuation are sometimes an issue. It is always best to prepare your transcript by hand, upload it and then tweak the captions as necessary.

If you plan to include your text transcript on your web page, make a copy of your transcript, edit it and precede each paragraph with the speaker's initials in boldface. For the first paragraph for each speaker, replace their initials with their full name to provide necessary context.

  • Remove all out-of-date, irrelevant information.
  • Look for redundancy – are there multiple pages with the same or similar content? Reduce that content to one location. It's OK to have multiple ways of getting to that spot, though.
  • Ask your users how the site could better meet their needs. What aspects do they find confusing, incomplete or frustrating? What do they love and want you to keep?
  • Review FAQs that are either listed on your site or submitted from visitors. Find a way to incorporate the answers into your site's structure. If your site is organized well, has the appropriate content and is designed to meet your readers' needs, there should be no need for a separate FAQ page.
  • Edit existing content and build new content with SEO in mind.
  • Examine the writing throughout the site. Is it brief, clear, compelling and persuasive? Does it incorporate commonly searched keywords, which helps drive traffic to your site? If not, make it so.
  • Show your reorganization and revised copy to others and get feedback and make adjustments as necessary.

Every webpage should incorporate search engine optimization (SEO). These are bits of copy, strategically placed, that make your site and its content searchable by Google, Bing and other search engines.

The following steps cover front-end and back-end SEO.

  • First, know your audience and your message to them.
  • Brainstorm possible keyphrases that relate to the services you offer. Consider, what words would someone use to search for what I offer?
  • Research possible keyphrases in Google AdWords or Google Trends. Find the "sweet spot" between low search and competitive search keyphrases that people are using to find your site.
  • Choose the keyphrases that match a page's theme and intent.
  • Use those terms in your writing and page title.
  • Focus each web page around 2-3 keyphrases and place them in three places:
    • Headlines
    • Subheads
    • Body copy
  • Use either of two approaches to maximize copy: (Plan first, write second.)
    • Keyphrase edit – ideal for info pages, articles, white papers, FAQs, About, blogs, sub categories
    • Write all new copy – ideal for home page and crucial sales pages
  • Write action-oriented content that is the proper voice for your audience.
  • Hyperlink your keyphrases in the text when there is an appropriate url to go to, especially to take an action. (Ex: Apply to Appalachian State University)
  • Measure your SEO success by search engine rankings (the visibility of your keyphrases) and conversions (sales, return on investment). Revisit your keyphrases every few months and tweak as necessary.

Search Engine Optimization (SEO) means enhancing the ability of a search engine to find your website or web page when someone searches for something on the Internet. There is front-end SEO, which is what you see in the content, and there is back-end SEO, which you mostly don't see.

At Appalachian State University, Drupal 7 will automatically handle most of your website's back-end SEO needs. There are things in your control, though, that can improve the front-end SEO. That's good news, and these five steps can help.

Develop content readers care about.

What news and information are your readers interested in? This may be as basic as "About" information on your college or program, or it could be more focused, such as how to apply for graduation or examples of successful alumni.

Legitimate content designed for your target audiences is important to your readers, as well as Google and other search engines. So, write about what is relevant and important.

Reader interest is a good measure, too, of what existing content should be kept or tossed. Much like an attic or garage, your website should not accumulate old stuff that no longer serves anyone.

Select keywords or keyphrases that people use to search for your topic.

So, you have an idea of what's important content, but does the language in that content coincide with search terms people might use to find it?

Here's the fun part of SEO – finding the most effective keywords or keyphrases. If you're selling low-price shoes, an ideal keyphrase might be "cheapest sneakers in Asheville." In higher education, it might be "best value schools in the Southeast," and specific to Appalachian State University it might be "scholarships at Appalachian."

Brainstorm ideas or perhaps poll a few members of your target audience for terms they use to search for your content. If you have time, you can research possible keywords or keyphrases extensively using online tools such as Keyword Tool.

Other online tools, such as Google Trends or Google Search Console, can help you compare the strength of one keyphrase versus another. For example, in Google Trends you can type in "teacher preparation program" to learn the frequency of searches using this term. Then, you can add a second keyphrase, such as "become a teacher," and see the frequency of those searches in comparison. If one has more searches, this may be a better keyphrase for you.

Incorporate those keywords or keyphrases into your content.

  • Page title
  • Headlines
  • Subheads
  • Body copy

In the fraction of a millisecond, a search engine will scan the title of a webpage and its headlines, subheads and body copy for whatever language has been typed into the "search" box. If it's a match, your content will pop up in the search results page. If not, then well... your content and the person searching for it don't connect. Or your content might get picked up, but it will be listed on page 65 of the search results.

Push out content on social media to encourage users to visit your site.

Another way to increase the likelihood of a search engine picking your content for the top rankings of a search is to make it more legitimate by having it read and shared by others.

This is where social media can play a critical role in improving your SEO. Google and other search engines select websites and webpages with authority among readers – that is, those with plenty of visits. So, once you've written stellar content, push it out on your organization's social media accounts. Not only will this help spread your news and information to those who want it and bring more visits to your site, it will also boost your credibility with the search engine.

Also, seeing how many Facebook likes your content receives can indicate whether you were on or off the mark in terms of developing the appropriate content for your target audience.

Use Google Analytics to track what pages get visitors and how often, and tweak the content if necessary.

Google Analytics offers great information to help identify what content is being seen and when. For example, you can determine if a page is viewed on a Tuesday or a Sunday, at the start of a school year or just before graduation. Use the Google Analytics request form to request access for your site and help in reviewing the information. Having this data can help you adjust the content if necessary.

It's always good to revisit your content every few months, or more frequently, and tweak as necessary to ensure it is still accurate and relevant.

When beginning any website design or redesign project, an important first step is to identify your target audience, or users. Your website will be built for their needs, so it is important that you answer the following questions...

  • Who are they?
  • Who is the most important?
  • Who will visit most frequently?

By defining and ranking your audience segments (or user groups), and then determining their content needs, you give yourself a framework for gathering, creating and publishing content on your site.

You will refer to this information when determining your site's navigation, when writing copy and when laying out individual pages. Throughout the design/redesign process you are going to have to make choices. Having audience information available will help you.

Who are they?

Few websites have only one audience, so be prepared to group your audience into segments (or user groups). Here are some basic audience segments that many university websites must account for...

  • Students
  • Faculty
  • Staff
  • Parents
  • Donors
  • Alumni
  • Visitors
  • the News Media
  • UNC General Administration
  • State legislature

Not all segments are appropriate for all sites. Some sites will have a subset of these basic segments. Some sites will subdivide these basic segments into sub-segments. Some sites will have a completely different set of segments. But, the list above is a good place to start.

You can subdivide these segments based on audience need. For example, the needs of prospective students often differ from the needs of current students. A subdivision of the segment "Students" may look like this...

  • Students
    • Prospective students
    • Current students

For an academic department, a subdivision of students may be between undergraduate students and graduate students...

  • Students
    • Undergraduate students
    • Graduate students

Who is the most important?

Once you have identified what your audience segments are, rank them in order of importance. "Importance" in this case is a subjective term. Public facing websites - ie. those that primarily serve external audiences - usually rank prospective students, alumni, donors, the news media, etc. higher than faculty and staff. These sites are often recruitment-based. Other sites may rank current students, faculty and staff at the top. These are more retention-based or service-oriented. If you don't know how to visualize the importance of your audience segments, refer to your communication plan or your mission statement for guidance.

Who will visit most frequently?

Determining which audience segments visit your website most frequently, or in the highest numbers, is a real challenge. Often it is only a best guess, especially for new sites. If you have an existing site, Google Analytics tools can be of help. Also, talk to your office staff—they can help you estimate based on who telephone and emails requesting information.

Why you should rank by both importance and frequency?

If you wonder why ranking your audience segments by importance and frequency is a good idea, realize that the biggest segment is not always the most important.

Prospective students might account for more visits, but their parents usually hold the purse strings.

The news media might only visit occasionally, but they might republish and redistribute your content to wider audiences.

You can bet that during the UNC system's program prioritization process completed in 2014, the General Administration looked at campus websites. The frequency—ie. the amount of site traffic—from GA personnel was minuscule, but the importance of these visits was high. The GA is an important audience to consider when determining what content is presented and how.

This applies to members of the State Legislature, too. They want to demonstrate to their constituents that state funds are well spent and that results are measurable.

Once you have identified your website's target audience, you need to identify audience need. This is best described by answering the following questions...

  • What information do users want to get from this site?
  • What tasks do the users want to do on this site?
  • What is your message to users?

The answers to these questions will help you to create a blueprint for what your website should be and what it should do.

What information do users want to get from this site?

If you are having trouble figuring out what your audience needs, wants or expects, I recommend a "frequently asked questions" approach to identifying your audience needs.

For each audience segment that you have identified, write down the 20 most frequently asked questions for that segment. If you don't know what those questions are, ask your audience. Whether you do it formally with questionnaires or focus groups; with the help of published surveys, faculty members, guidance counselors, etc.; or by informally grabbing people in the hall, get to know your audience. Twenty is not a magic number. Just try to be complete.

By identifying these questions, much of your content needs are now determined! Go a step further and document the answers to these questions. Of course, you probably don't want to just publish all of your content in a question and answer format. But, if you have documented answers to the most frequently asked questions for your audience segments, it's one step further towards content that's ready to be published.

What tasks do the users want to do on this site?

Most websites are primarily informational. The "task" that the user wants to perform is to learn. Many websites, however, do have task-oriented components where a user can...

  • Make a request for a service
  • Download a form or a document
  • Register for a workshop
  • Share something on social media
  • Request more information

Most tasks that your website will have to accommodate will be identified by answering the previous question, "What information do users want to get from this site?" If you use the "frequently asked questions" approach, look for user questions that start with "How do I...?" These will often be the clue that you need to identify a user task.

By identifying tasks, you can organize your site in such a way to make it easier for users to find what they are looking for and allow them to complete what want to accomplish more quickly. For this, they will thank you.

What is your message to users?

Your message to users goes beyond their needs. When your users leave your site, you want them to take away more than just what they came for. The implications of this are large and varied. If their need was to find out if you offer a specific degree program, make sure they leave with success stories of students in that program. If their need was to find out the time of tomorrow's show, make sure they leave knowing how wide and varied your whole schedule is. Tell them your stories. Highlight your people. Leave them knowing that you are professional, trustworthy and that you really care.

 

I have nothing against FAQs, but effective websites usually don't need them because all of the answers are handled through topical navigation. Having said that, as long as all of the questions are dealt with throughout your site in the appropriate places, there is nothing wrong with publishing your questions to a FAQ section as a quick reference.

I do have one big peeve, however, and that's when the only place that you'll find a given answer is in the FAQ. If it really is a frequently asked question, why should I have to refer to a FAQ to find the answer? Why doesn't the answer permeate your site?

In a nutshell, web accessibility means that all users, regardless of disability, must have equal access to the information on your website and must have equal opportunity to perform tasks on your websites (eg. filling out forms). As a branch of the State of North Carolina, Appalachian State University is also required to comply with Section 508 of the Rehabilitation Act of 1973, so web accessibility on campus is not just good practice—it is the law.

The most common types of disabilities for which your website must account for are:

  • visual
  • hearing
  • motor
  • cognitive

Consider users with each of these disabilities when preparing and posting information to your website. Although I do recommend an online accessibility checker below, there is no magic solution and there is no substitute for common sense. You must put yourself in the position of a user with a disablility and evaluate your website from that user's perspective. This is sometimes impossible unless you actually have that disability. A project called WebAIM (Web Accessibility in Mind), which is sponsored by Utah State University, has a website full of great resources, including a good Introduction to Web Accessibility that includes information directly from the perspective of users with disabilities.

Levels of web accessibility

The accessibility of your website is assessed at different levels...

Site level

Is your website navigable by people with disabilities? Can it be navigated without a mouse? Is your website navigable with scripting turned off in the browser? These accessibility features are usually handled by the web theme that you are using.

Page level

Do your pages use proper HTML markup? Do you have appropriate headers, lists, etc? Are all links properly described? If your page contains visual information, does that information also appear on the page as text that can be read by a screen reader? You need to pay particular attention to this. As a content creator, you have the power to make your pages accessible, or to open yourself up to liability under the law. Page level accessibility is in your hands.

Resource level

If your page links to a PDF, is that PDF itself accessible? Are videos closed captioned or, at least, include transcripts? Is audio transcribed? Do images contain appropriate alt text where appropriate? These things are also up to you. Pay attention to the accessibility implications of the documents, videos, etc. that you post.

Trouble spots

Headers

Headers - ie. HTML elements <h1> through <h6> - are used to break the content of the page into logical sections. Screen readers see headers as semantic in nature and pay particular attention to them, offering them up to users as a means of navigating within a page. Often, however, site editors will deploy headers just because they want a certain piece of text "more visible" or as a shortcut to a certain visual look. Do not do this. Only use headers to delineate content.

Video

Video requires at least two accessibility considerations. The visually impaired are relying on sound to pass them information, so graphics with no corresponding speech, such as the name of somebody being interviewed, would need to be in a transcript that can be accessed by a screen reader. The hearing impaired rely on visual cues, so closed captioning or, at least, a transcript is required. (Closed captioning is recommended.)

Audio

Audio, such as podcasts, readings, sound bites, etc. requires a transcript for the hearing impaired.

PDFs and documents

PDFs and documents, because they are downloadable and thus represent separate standalone objects, must be individually accessible. Please consult the documentation for the software that you use to create these documents for instructions on how to make them accessible.

Images

Any image that either contains information, such as embedded text, or that serves as a link, such as a thumbnail, needs to have appropriate alt text that describes it so that a visually impaired user can still reap that information. In the case of an image that serves as a link, the alt text should describe where the link goes. In the case of images which are pure eye candy—eg. decorative page header images, etc.—the alt text should probably be left blank. This is not a perfect science— ie. there may be pros and cons to using any solution. Also, image treatment is often influenced by page context. If the content on the page describes what is on the image, supplying alt text for the image may be superfluous.

Tools

There are several online accessibility checkers. My favorite is the Wave web accessibility evaluation tool.

Related links