Wicked Cool

Contribute Tip: Give Every Web Page a Meaningful Title

The problem:  Every web page should have a title that describes the page accurately and concisely, but it's not immediately obvious how to set it in Contribute for existing pages on your website.

Why it matters:  Using a proper title will help to make your web pages more professional-looking, more accessible, and more recognizable in search engine results pages.  Web page titles show up in two fairly prominent places:

• At the top of the window when you view the page in a browser:
  
  
  
• And as the link title whenever the page appears in Google's search engine results:
  

The solution:  Check your web pages in a web browser first—does each one have an appropriate title?  Does it use correct spelling, punctuation, and capitalization?  (Remember, people can see this!)

If you're not happy with what you find, here's how to change it using Contribute:

1. Open the web page in Contribute and click "Edit Page."
2. Click the "Page Properties" button.  (A dialog window will pop up.)
   
   
3. Type the updated title in the "Title" box and click "OK":
   
   
   
4. Publish your page.

Writing an effective web page title:

• Be as obvious and straightforward as possible.
• Use language that closely matches the title that shows up in the body of the web page.
• Include the most important keywords near the beginning.
• Use proper spelling, punctuation, and capitalization.  (Remember, all-caps is harder to read and "sounds like yelling" online.)
• It is ok to include the name of your library/organization at the end.
• Specifying "Home" or "Homepage" in the homepage's title is optional.

Contribute Tip: Alternate Text for Images

The problem:  Contribute makes it easy to add images, but it doesn't prompt you to finish the job by adding alternate text for them.

What's alternate text?:  Alternate text is a snippet of text that takes the place of an image on a website when the image cannot be displayed.  Some situations where alternate text would appear instead of the image:  a bad image URL causing "Image not found" errors, anyone using a browser with images turned off to make pages load faster over a dial-up Internet connection, or a visually-impaired person using a screen reader to access a web page. 

Why it matters:  Best practice is to add alternate text to images that carry meaning as a safeguard for any of the situations mentioned above.  It's part of the Web Content Accessibility Guidelines and the Section 508 Standards -- and if that's not enough encouragement, it's also common courtesy (it's a little rude to make people guess what an image means when they can't see it).

The solution:  Use Contribute's "Image Properties" button to add alternate text to any meaningful image you use in your web pages.  (Click on the images to view a larger version in a pop-up window.)

1. Insert an image into a page as you normally would
2. Click on the image to select it
3. Click on the "Image Properties" button (or right-click on the image itself and select "Image Properties")
   
4. In the popup window that appears, type the alternate text in the "Alternate Text" box
   
5. Click "OK" and continue editing the page as needed.

Writing Effective Alternate Text:

• Be concise and shoot for 50 characters or less.  Technically there is no length limit, but some browsers may cut off very long alternate text if image-loading is turned off or if they cannot locate the image.
• Do say what the picture represents, or summarize its function
• Don't say "Picture of..."
• Don't add alternate text if the image is purely decorative or does not add meaning to the page
• Good examples: "Patrons enjoying the library," "Beach Reads on display in the library," etc.

Contribute tip: Wrapping text around an image

When you're adding an image to a web page, you often will want to wrap the text around it to achieve a more polished layout. There are a couple ways to do this using Contribute. Here's the easiest way. (Click on the images to view a larger version in a pop-up window.)

1. Insert the image



2. Right-click on the image



3. Select Align, then Left or Right. Preview (F12) to view the effect in a browser:

Read more about inline image editing at the Adobe Contribute Developer Center.

Contribute tip: "You cannot perform this action in this region of the page"

The problem: this error message when you're trying to edit your web page in Contribute:

You cannot perform this action in this region of the page.

Most likely, this has to do with templates, which you can't edit in Contribute.

The Contribute help site has a little bit of useful info about templates, but what it doesn't say is that if you click on the end of a line to place the cursor where you want to type, Contribute might put the cursor in the template part of the HTML code. But you won't know it until you see that error message. (D'oh!)

The solution: place the cursor in an area you can type in (say, the middle of the last word in a line) and right-arrow over to the end of the line - but not beyond - and start typing.

You can also clear errors like this by saving & closing your draft, then reopening it.

Thanks to Meg and Cheryl for this tip!

Contribute tip: Previewing your changes

Since many SCLS libraries have started using Macromedia Contribute to edit their own web pages, I thought I'd toss in an occasional tip or trick for using it.

Here's an indispensable one - to preview the changes you've made to a page before you publish it, just press the F12 key. So handy, you'll not know how you lived without it!