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

Archives
This blog has 44 entries.

Tutorials

Web Content Blog

Friday, June 12, 2015

Formatting 101

Image Alignment and Borders

Images are a great resource to add to any page, but some things should be considered when placing the image. The way an image is used on a page can either distract the user from the page’s content or enhance what is already there. Here are a few tips to ensure the image is added the right way.

Alignment

When adding an image next to text, you might think it will be complicated to get the text to wrap around the image. This is easily done without adding tables or paragraph breaks – it’s just a few clicks on the tool bar. Select the image, click on the “Styles” drop down on the tool bar, and select your desired image orientation – “Image on Left” or “Image on Right.”  This action will automatically bring the image to the selected side of the page, adjusting any text around the image with an even margin.

Borders

Another important note about adding images is to also add an image border (unless your template does not have a border option). This makes the image look cleanly placed upon the page, and it keeps images across Liberty’s website consistent. This is done in the same place as alignment. Simply select the image, click on the “Styles” drop down, and select “Image Border.” 

See the examples below on the differences between an image with a border and one without.  

The border gives the image a definitive
edge and helps the image stand out.
No border makes the image look
incomplete on the page.


WRITING IN ALL CAPS

Generally, using all caps gives an impression of urgency, shouting, and general bossiness. This should be avoided on the web. Full paragraphs in all caps should especially be avoided, because they require more effort to read. 

WHAT IMPRESSION ARE YOU GETTING FROM THIS QUESTION?

vs. 

What impression are you getting from this question?

Bullets & Numbered Lists

Using bullets to put content into list form instead of paragraph form is a great idea, and it can be added with the bullet/numbered list tool in the WYSIWYG. Lists make your content easier for users to quickly scan and comprehend. When your content has a specific number of items or steps, using a numbered list may be a better option than just bullets. 

Bullets

Numbered List

Paragraph

  • Read this 
  • Read this 
  • Read this 
  1. Read this first
  2. Read this second
  3. Read this third
Please don't forget to read this, this, and also this. 
This list is easy to read and items don't belong in any particular order. This list is easy to read and does belong in a specific order.  This paragraph is harder to scan and must be read completely. 

Kari Barton and Tricia Mieden

Posted at 2:50 PM | Permalink

Tuesday, April 21, 2015

Finding Images for the Web

10 Commandments -

By Diane Austin

Your web page is almost perfect! You just need an image to catch the eye and set the tone. But where will you find that perfect image?

Here’s what you should NOT do: Google it and download the first image that you like. It might seem like the fast and easy solution, but don’t do it! You could go to jail! You could be fined thousands of dollars!

Copyright laws

Well, you probably won’t go to jail, but the copyright violation fines are real, and stealing is just plain wrong. In most cases, whoever made the image owns it. The Jerry Falwell Library has excellent information about copyright laws, such as how the law applies to multimedia use, including online photographs.

Your #1 resource

Joel Coleman

Photo by Instagrammer @courtrusso
(Courtney Russo) 

If you need an image to go on Liberty’s website, an excellent place to start is with the university Marketing Department. Our professional photography department may have already captured the perfect image for your needs. Your marketing project coordinator can help you find the image or schedule a photo shoot, when appropriate.

Option 2: DIY

At other times, you might be able to use your own photographs on Liberty’s web pages. If they are of good quality and represent Liberty well, that might be all you need. We would be happy to take a look at your photos and advise you if you are unsure. (Check the Web Manager homepage for contact information.)

3rd choice

But what if neither of these options work? We don't recommend using stock photography on Liberty's websites, but there are limited exceptions. For instance, if it's for a blog post, you might need something beyond what you or Liberty photographers can provide. This is when people are sometimes tempted to download whatever they like from the web. Remember, if you didn’t take a photograph, you need to have the creator’s permission to use it.

The good news is there are plenty of sites that offer free photographs that you can use on the web. Many don’t even require attribution. The bad news is that the photo you choose might be on someone else’s website too, so use stock photography sparingly. Here are a few sites you can try:

If none of these suit you, there are plenty of blogs and other websites that have compiled their own list of free stock photography sites. Here's a sampling:

Final touches

After you've found the perfect image to complete your web page or blog post, be sure to follow best practices for optimizing, naming, and adding alt tags. See our blog post on Getting the most from your images for details. 


Posted at 11:24 AM | Permalink

Monday, September 29, 2014

Writing for the User

Taking out the "we" word.

We need to take our eyes off ourselves when writing.

Not too long ago, my mother stopped going to the hairdresser she had been using for years. Telling me about it, she said that her decision had nothing to do with the woman’s abilities.

“She just talks about herself all the time,” my mother said. “She never asks me about my own life.”

Just like the customers in that salon, our web users don’t want to hear us talk about ourselves all the time either.

But when we write content for our web pages, we tend to gravitate towards what we know – and that’s our department isn’t it? Our offerings, our services, our classes.

The reader needs to know the facts, so why not deliver, right?

Web users are looking for benefits

We have to be careful though, because successful web content is written in a very different style. Web users are looking for benefits, and when someone lands on your page you have just seconds to convince them to stay. You do this by writing content that shows you care about helping them with their questions, their needs, and even with their pain.

Speak to your readers directly

Unfortunately, much of our existing web content is focused on us. We may use the word “we” a lot or just mention our department over and over again. Or, if we do talk about our readers, we sometimes throw in impersonal words like: “the student,” and “him, her, and they.”

Here’s a snippet of content I’ve written, and you’ll see what I mean:

"We"-focused content 

I've highlighted the we-focused and impersonal content in yellow. And there's a large dose of it, isn't there? The good news is that content like this can easily be reworked.

Talk to the user just like they were right in front of you

Words like “you,” “your," and "you're" are encouraged. So, here’s what you could do to the above web content to make it more compelling:

User-focused content

Focus on the user and not on the department

See? That was easy. With a little practice, your content will flow more freely and feel more natural. And your users just may thank you by staying on your pages longer and engaging with your content. 

After all, it was written just for them.

Posted at 9:16 AM | Permalink

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


» Archives