You are here: Home > Offices > Marketing
Web Content Blog

Archives
This blog has 42 entries.

Tutorials

Web Content Blog

Wednesday, September 10, 2014

Buttons vs. Text Links: The Inside Scoop

“Could I get a button on this page?”

This is one of the most-asked questions by our Web Manager users. And with buttons continuing to be highly sought after, it’s time you got the inside scoop on when to use them—and when not to.

When Buttons Work

In the old days, buttons were often used to decorate webpages and make them more graphically “exciting.” For example, here’s a screenshot of Liberty’s main website from 2002:

Ineffective button links from 2002

This 2002 screenshot of liberty.edu shows an overwhelming number of ad-like buttons.

Yikes!

But now, buttons are less about decoration (what looks good) and more about design and function (what works well).

It’s widely accepted that buttons represent an action, such as “Pay Now,” “Create an Account,” or “Save.” The action is more than just navigating from point A to point B. Instead, it tends to let the user do something based on user input. For example, clicking a “Buy Tickets” button should reserve a ticket for you, decrease the number of available tickets, and charge your credit card using the info you provided. That's an action.

Take a look at the new Jerry Falwell Library website. The green “Go” button works here because clicking it performs a search (the action) based on your search terms (user input). The result is a custom search result page that didn’t exist before. On the other hand, a text link works best to access a pre-made page of search tips.

Button links for actions, text links for navigating content

Good example: the “Go” button performs an action, while the "Search Tips" text links to a page.

When Buttons Don’t Work

Colored, underlined text is the most recognized visual cue for a link between two pieces of content or pages. It’s so common that users often ignore buttons in favor of text links. That’s why buttons don’t work well as page-to-page links.

We tested this a few years ago on the former LUO site shown below. Users were asked to locate HelpDesk information or intensives, but the majority of them had trouble because they ignored the buttons and jumped straight to the text links below them.

Users can ignore buttons and favor text links

When tested, users ignored these buttons in favor of text links, making the information hard to find. These buttons were removed at the next redesign.

Image buttons don’t work well for search engine optimization (SEO) either. More links pointing to your page means more potential ranking power for that page. But the text used in the link is also important. If the text “School of Religion” links to the SOR page, then that page can build search credibility on that term or topic. This is lost when buttons are used.

The Takeaway

So there's the inside scoop on buttons vs. text links.

  • If clicking performs an action (e.g. confirming a payment, registering for a class, shipping an order), a button might do the trick.
  • If clicking connects content or webpages together (e.g. department homepage, a policy, news article), try text instead.

To request a button for your page, contact your Marketing project coordinator to get started. We can help you determine if a button will work for your page!

And join us on Twitter to be a part of our growing web content community.

Posted at 2:47 PM | Permalink

Tuesday, August 26, 2014

Text in Images: Don't do it (usually)

Here's why we say that text should not be put in images on the web:

  1. Search Engines cannot find it - your page will not return results for that text.
  2. Screen Readers cannot read it - users with disabilities will not know it's there.
  3. Consistency on Liberty's website will be lost when everyone has very different text images on their pages.

For Function

When the text performs a function, such as a header or title, it should not be in an image because it needs to be searchable for Search Engine Optimization (SEO), and available to users with screen readers. Neither of these can happen when text is buried in an image.

Examples:

In this example, the text in the image is taking the place of a proper text header, so the page only has an image and body copy.

This is what the image "looks" like when someone is using a screen reader or has image loading turned off on their browser, so they would have no idea what the header is on the page (or that there is one).

Buttons

Buttons and images are two different things: Buttons are clickable links with a specific "button design" that users expect and know, whereas images are often not expected to be clickable by users. Images are meant to serve as visual/design appeal and should not be used as buttons. If you would like a button added to your page, you can request one from the Marketing Department.

For Design/Visual Appeal

Images are great for adding visual appeal to a page, and sometimes it is also okay if they have some text in them that only adds design appeal and does not take the place of pertinent text.

Example:

In this example, the text in the image is only providing design and visual appeal, it is not taking the place of the proper page header, which is still at the top of the page as it should be.

Posted at 11:04 AM | Permalink

Monday, August 11, 2014

Page titles and headers

Web page titles and headers have a simple but important function. They tell readers and search engines what the page or section is about. That part’s pretty simple, but there are a few tips that will make your page titles and headings better.

Page Titles

The page title should briefly and accurately describe the purpose of the page. It should use keywords that your audience will know and understand.

  • Keep the title short and simple – the full page title will show up to search engines with your Web Department name and “Liberty University” added to it. You can hover over the tab of a live page to see the full page title. 

 Hover over tab the page tab to see the full page title

  • Put keywords at the beginning – Search engines assume that the most important words are at the beginning of titles and headings. In the above example, the department name appears first, followed by the title entered in Web Manager - "Meet the SVP for Student Affairs." But "SVP" is not a term that most students would recognize or understand and the page is not about how to get a personal introduction to the SVP - it just tells a little about the Senior Vice President. A better title might be: "Student Affairs Senior Vice President Liberty University.

Page Headers

These are the heading formats (heading 1, heading 2, or heading 3, etc., also known as h1, h2, and h3) that you use on your page to organize and divide it into sections. 

  • Use one – and only one – h1 per page. Usually, the h1 is the same as your page title and it should go at the top.
  • Organize your content using headings so that the most important information comes first (h1, followed by h2, etc.)
  • Left-justify headings (don't center them) – People read (scan) web pages using an “F” pattern. When they are scanning the left side of the page, they may miss a heading that is floating in the middle of the page. 
  • Keep headings short - don't put whole sentences or paragraphs into a heading format. You can emphasize "normal" format text by using bold, italics, or bullets. 

Examples

Good heading uses

The right way

Good use of header styles

 

Bad heading uses

Don't do it this way

Each page should have one and only one h1

Don't do it this way Don't use header styles for entire paragraphs of text
Don't do it this way Don't use more than one h1 on a page
   
 
Posted at 4:03 PM | Permalink

Monday, July 28, 2014

Top 5 Social Media Tips

When it comes to social media, we all want to use it to the best of our ability. So for this Web Manager Blog post we decided to give some tips on how to improve your use of social media. Don't hesitate to contact socialmedia@liberty.edu if you have questions about your accounts or you can reference the Social Media Policy

1. The Shorter the Better. Research shows that posts that are around 100 characters tend to see better reach than longer posts (meaning that many of you quit reading this after 100 characters).

2. Post Consistently. When people see an account that has up to date information, photos, and posts they are more likely to follow/like! But, don’t over post! Find the happy medium.

3. Ask Good Questions. If you want to increase engagement, ask questions that people will really answer. It's always a great idea to respond as quickly as possible. 

4. For Facebook, constantly check insights. Look at what posts have the highest reach and who they are reaching. Then tailor future posts to those people based on what has worked in the past.

5. DON’T post identical content to Facebook and Twitter. These two social networks are very different. Find out what works for each respective platform and post unique posts to each of them.

Posted at 11:47 AM | Permalink

Friday, July 11, 2014

Understanding keywords

To make your web page more findable, it’s important to understand how and where to use keywords. A keyword is simply a word or phrase that describes your website, web page, or document. It’s what someone would type in a search box if they were looking for your content.

  Keyword is a term that describes your web content

You can make your page more findable – also known as search engine optimization or SEO – by putting keywords on your page in strategic locations:

  • Page Title
  • Heading 1 (h1 tag), Heading 2 (h2 tag), etc.
  • On-page text
  • File names and alt tags

Your entire website or department pages might have many important keywords, but each individual page will only have a few. You should place important keywords at the beginning of the page title and the H1.

Examples

Here are some examples of titles and headings where the keyword (in bold) was placed at the end or left out entirely. 

Bad keyword placement or missing keyword

Don't do it this way

Mark your calendar for this year's Homecoming event
Liberty University School of Law Awarded Full Accreditation Approval by the ABA
We want to honor you for your service

Now look at those same examples where the keyword has been placed at the beginning of the title or heading.

Good keyword placement

The right way

Homecoming 2014 Dates
ABA Accreditation approved for Liberty University School of Law
RSVP for Military Appreciation Day

You can also use keywords in your image file names and alternative text. (Review our blog post Get the Most from your Web Images to learn how. If you must link to a PDF, make sure you use best file naming practices when saving files.  Of course, your on-page text should include keywords.

Think like your visitors

To use keywords effectively, you have to think like your visitors do. That means you’ll have to use the keywords they are searching for. Usually, that means using simple language. For example, a web page about bus routes should be called “Bus Routes,” not “Mass Transit Configurations.”

If it turns out your audience is not finding the information they are looking for, even though your web page has it all right there, the problem might be that you’re not using the right keywords. Listen to the words they use when they tell you they can’t find something and then check your page to see if you’re using the right terms in the page title, headings, and on-page text.

Get help

If you need help making your content easier to find, contact the Web Content team. It's our privilege to serve you. 

Posted at 9:06 AM | Permalink


» Archives