The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Links–Part 1
This one: How to Code Accessible Links–Part 2
How to Code Accessible Links–Part 3

How to Code Accessible Links–Part 1

Filed Under Audience, Guest Writer, Links, SEO, Successful Blog, Tech/Stats | 16 Comments

Cas read my article on how to code hyperlinks and in the comments shared some discussion about the importance of accessible links–a topic which had come up earlier in Successful-Blog conversations. In my usual fashion I invited Cas to write on the subject and she took up the challenge. Her response was to do a series of articles on accessible hyperlinks. I, for one, am so glad she did. She really does know so much more about such things than I do. In fact, she knows so much more that I asked her to start by just clarifying for me what is it that makes an Accessible link. –ME “Liz” Strauss

How to Code Accessible Links–Part One: The Basics
by Cas of Brightmeadow

Liz has already written a great article on how to code hyperlinks. I’d like to take this one further and show you how to code accessible hyperlinks. If you are happy with how to manually code hyperlinks, then we can continue. If you aren’t, or feel like you need a bit of a refresher, I do recommend you read the article. We’ll wait.

Ok, ready?

What is an accessible link?

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they’re using. An “accessible link” therefore, is simply a link that imparts as much information to as many users as possible. It enables the reader to preview the link, making an informed decision about whether to follow it or not, and helps to differentiate between links that may share link text but refer to different targets

So why should I worry about accessibility?

Not everyone views the Web in the same way that you do – accessibility is not just for disabled users. It is for the many potential readers who might be browsing your site on a dial-up connection, using a screen-reader, using a mobile device with a small screen, or using a text-only browser such as Lynx. By making your website accessible you are opening it up to a much wider potential audience. Making something accessible for humans also has the side effect of making it more accessible for search engines. If you make a living through your site, happy readers, and happy search engines just make good sense.

Not convinced?

Not convinced that this is necessary? Turn off the images in your browser, and then the stylesheet, and see if you can still successfully navigate your website and get meaning from your content. What you see now is roughly how someone with visual impairment, or a text-only browser, views your website.

• Internet Explorer: Tools > Internet Options > Advanced > Multimedia > Show pictures (uncheck)
• Firefox: Tools > Options > Web features > Load images (uncheck)
• Opera: Tools > Preferences > Multimedia > Show no images
• Stylesheets: View > Page Styles > No style

So how do I go about making my links accessible?

It really isn’t that hard. If you’re already manually coding your links, making them accessible is just a case of putting in a few extra bits of text.
This how-to is in three parts, and will walk you through what you need to know:

1. How to code an accessible hyperlink
2. How to code an accessible image
3. How to code an accessible embedded hyperlink

Throughout this article I will be using http://www.foo.com as an demonstration. Simply replace this, and any other exemplar text with the particulars for what you are doing.

How to code an accessible text hyperlink

Basic code

Just to remind you what the basic hyperlink code looks like:
<a href=”http://www.foo.com”>Descriptive Link Anchor Text </a>

The TITLE description – how it works

It is the TITLE attribute that makes a link accessible. It is inserted after the URL but before the first closing angled bracket and contains descriptive text, enabling the reader to ‘preview’ the link. This in turn allows users to more accurately guess where the link will take them, and make a more informed decision about whether or not they should follow it. Roll your mouse over this example link and you will see what I mean. The text that appears by your mouse cursor is the preview.
Example link

Accessible code

<a href=”http://www.foo.com” title=”Descriptive text” >
Link anchor text will render like this: Link anchor text

When to use

Every hyperlink should have a TITLE attribute.

A few notes

The descriptive title can be any text you want, though to make it as accessible as possible, follow these simple rules:

• It should say something about the destination of the link.
• It needs to be between 3 and 80 characters long. A single sentence is normally sufficient.

–Cas and Liz

The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Links–Part 1
How to Code Accessible Links–Part 2
How to Code Accessible Links–Part 3

A Blog Is Born

Filed Under Basics, Community, Guest Writer, SEO, Successful Blog | 1 Comment

Indie and I were talking about whether a sub-domain name gets in the way of Search Engine Rankings–the whole “Google doesn’t like sub-domains” idea. The question was whether that is true if your blog holds court with quality content in a specialty niche. Indie’s comments and his recent blog start-up put forth a compelling argument. We agreed he should share his experience with the community. My hope is that he’ll check in every now and then and let us know how this New Year’s Tucholdky Blog of 2006 is doing. –ME “Liz” Strauss

A Blog Is Born
by Indeterminacy

I have just started a new blog and Liz thought the readers of Successful-Blog might benefit from some of my experiences. So with my own feeling of how to do things, and some of the ideas picked up from Liz, I set out . . .

The Blog’s Purpose

The purpose of the new blog is to present the works of Kurt Tucholsky, a brilliant German journalist, satirist, poet who died in 1935. He was one of the few persons who saw clearly what was going on in German during the 1920′s and gave prescient warnings against him. His works today are just as relevant as they always were, so it seems a good idea to translate them for an English audience. I am also collaborating with the poet David Raphael Israel, who will take my literal translations into formal lyric– that’s quite frankly a task that’s beyond me. We developed a short and specific description, which is the first thing visitors will see:

Title: Kurt Tucholsky

Description: Contains a selection of the works of satirist Kurt Tucholsky (1890–1935), translated into English from the German by Indeterminacy. These translations (along with an impression of the originals) then form the basis for poet David Raphael Israel’s formal verse renderings. All translations copyright 2006.

Domain:

The first step was selecting a domain. I wanted to do the blog in Blogspot, because I’m used to Blogspot and that’s where my other blogs are, plus I believe (whether rightly or wrongly) that this will give a slight advantage in search indexing, at least in Google searches. I checked for the domain http://tucholsky.blogspot.com/, but it was blocked by a blog that never took off. Then I tried reserving http://kurttucholsky.blogspot.com/. That was available. The domain name of course has 100% relevance to the content, so I think it’s the perfect name for the site.

Setting up the Blog:

I selected one of the default template designs, actually the same I’m using at The Synchronicity of Indeterminacy but without all the links and add-ons. I think it’s essential to have some kind of statistic program–to see who visits, and which site referred users. Sometimes that’s the only way to tell if someone has linked to you. I added a minimum of relevant links: The Kurt Tucholsky Society, the German language Tucholsky blog, and the Wikipedia entry on Tucholsky.

After the first two posts I wrote to the Kurt Tucholsky Society in Germany about the project. A member of their board of directors was gracious enough to give his blessing in a lengthy post mentioning the project. I went in and added a blog introduction to lay down the purpose of the blog, and to give some background about why I wanted to do this. The blog is actually a spontaneous spin-off of a post I made at indeterminacy.

Next I added a link section to online collections of Tucholsky texts in the original German and a further link section to be maintained over time containing a chronological list of relevant posts about Tucholsky at other blogs (regardless of language). I also visited a few German language blogs that had posted one of the poems. David has written to poetry forums and friends to gather feedback for the project.

The bloggers at the blogs I visited responded enthusiastically about the project, not because they want to read Tucholsky in English, but because Tucholsky’s works are relatively unknown in that language. His works have been translated, of course, but these translations are out-of-print. So the blog fills a niche by making Tucholsky’s works accessible to a new audience. I intend to add a section of links to Bibliofind.com for each English language edition from which people can call up a list of used books.

The First 100 Hits:

The blog was created on January 4th. Ten days have gone by. Three posts and an introduction. Some of the visitors were of course random referrals from Google. What fascinated me is that some of the visitors at this early stage actually came in via search engine referral. Not many, but still interesting:

I repeated the searches myself and was surprised to see the blog showing up in the top ten already. My assumption is that the blog has two things going for it:

1) The domain name contains the same terms that would be used to search for the blog content, and
2) I had a look at the site Google Rankings to find out how high the rankings were for several terms.

This is what I found for the various searches:

I invite comments on what this means, how the search ranks could be so high so early.

Plans:

The plan is to just keep blogging. I will do a minimum of promotion, as I think the blog will promote itself. One of the visitors who found the blog via Google already has posted a short entry to his blog about the project. I hope it will grow into an essential reference for anyone wanting to read specific texts of Tucholsky in English. Of course it has a long way to go before reaching anywhere near comprehensiveness. The aaddtional link section that I intend to include in which each of the out-of-print translations of Tucholsky may be automatically searched in Bibliofind.com. This will help interested visitors further on their way to discovering Tucholsky in depth.

The End, that is, The Beginning

Blog Construction–What's Your Function?

Filed Under Design, Guest Writer, SEO, Successful Blog, Tech/Stats | Leave a Comment

Guest Writer: James Shewmaker

I’m delighted to present this article on Blog Usability, written at my invitation, by James Shewmaker.

If you’re a regular reader at Successful-Blog, you’ve seen James’ insightful comments throughout our discussion threads. James is a visual branding consultant in Atlanta, GA. His business, which he began in 2001, is Qwerty – “Helping Businesses Become Unforgettable,” and his business blog is Qwerty.us/blog/.

Blog Construction–What”s Your Function?

Design is more than decorating. Design has to do with functionality. The form of whatever is designed needs to serve the purpose or function for which it was made.

Many bloggers are more concerned with article writing than they are with the functionality of their blog. There are a number of design factors which these bloggers overlook. However, readers are affected by how they experience your blog, and the reader’s experience is a result of how well the blog functions. If a car looks great on the outside but its engine has no power and its steering feels like driving a motor home, buyers are going to avoid this car. The same is true of the functionality of your blog.

Here are five suggestions for improving the usability of your blog.

1. For the visitor who does not have your web assets in her browser’s cache, how long does it take for your blog’s main page to load? The visual aesthetic of your blog must be balanced against load design. This balance is determined by the purpose of your blog. If your blog is devoted to visual design such as MocoLoco or CoolHunting, then you will sacrifice speed for visuals, but if your blog is devoted to the discussion of philosophy, you should sacrifice the aesthetic for the reader’s speed of access.

To test the load time of your blog, first erase your browser’s cache. In most browsers this can be done in the preference settings, or you can use a utility such as iClean by Allume to erase your browser’s cache. Next use a LOW speed internet connection. Just because you have broadband does not mean that your readers do. Now using a stopwatch (or a watch which tracks seconds) see how long it takes for your blog to load into the browser.

2. Are your graphics fully optimized and have you chosen filenames and alt tags which will aid your visitors and improve your search relevance?

Optimizing your graphics refers to using a graphics program to reduce the file size (kilobytes) of your graphics to the lowest size possible for the reader to see that which is being shown. Again the size of the file is determined by the purpose of your blog. If the purpose of your blog is not graphical, then a good target size to aim for is approximately 10 kilobytes.

Unless you are a professional photographer, a jpeg in a blog should never have an optimization setting in the 80s or 90s. This refers to the quality of your jpeg. The best quality and largest size jpeg has an optimization setting of 100, while the lowest optimization setting is 0. In most general purpose blogs, an optimization setting somewhere between 50 and 75 should suffice. If you are producing your own images using a digital camera, it is usually advisable to take the best quality picture and then use a graphics program to optimize the quality.

Image file names should use words from your posting separated by underlines where spaces would be.

Alt tags not only provide text for broken links. Alt tags also provide rollover feedback in some browsers. In some browsers. placing your mouse over an image causes a small rectangle to appear which displays the content of the alt tag. This is what is meant by rollover feedback.

Alt tags also are used by some search spiders. Search engines use programs known as spiders to index the content of websites. Different spiders use different criteria for determining web page relevancy. Alt tags are used by some spiders in evaluating the relevancy of a web page.

3. Are you using redundant code instead of using CSS? Redundant code refers to code which contains unneccessary duplication of the code declarations. The longer you blog, the more the updating and archiving of your blog is going to be affected by bloat code. Try to eliminate table coding and font declarations as much as possible. CSS reduces the source code necessary to display your blog to a minimum.

Using HTML to define your blog’s fonts or using tables to create your blog’s layout is the main cause of redundant code. Bloated code is often created by WYSIWIG editors, such as Frontpage, Freeway, and MSWord. If you are importing code from one of these editors into your blog’s editor you are creating bloated code.

Another reason for avoiding redundant code and bloated code is that it can overtax the servers on your webhost. If a webhost’s servers become overtaxed it can either slow down the access to all the blogs on that server or even cause the blog service to crash.

4. Minimalistic design in blog templates is more effective than attempting to dazzle with the exception of visual creatives, such as photographers and graphic designers. That which distracts irritates readers.

Allow me to illustrate this by contrasting the main article page of the Wall Street Journal’s Startup Journal Online with the print article page of the same article. The print article page removes everything which might distract the eye. I am not advocating that you strip your blog’s design to this degreeâ€â€?even the navigation system is eliminated from the print page. Instead I am illustrating the difference between a complex page layout and a minimalistic page layout. The complex layout distracts the eye from the article content. While the minimalistic page layout, makes the text of the article more accessible and important.

5. Always keep in mind that a large percentage of your audience will be reading your content off RSS or Atom readers and syndicatorsâ€â€?design your blog so that the textual content can stand on its own whenever necessary. For example, do not reference something in your blog’s sidebar without providing a link in the article text.

If you would like more suggestions on improving your blog’s functionality, Jakob Nielsen writes excellent articles about Web Usability.

And for a construction connection of another kind. If you are nostalgic about ABC’s Schoolhouse Rock, here are the words and the site connection to “Construction Junction.�

Thanks, James.
I know I couldn’t have said that better.

James will be back again soon with more.

–ME “Liz” Strauss.

Submission: Getting Your Blog Ready for Readers

Filed Under Audience, Guest Writer, Marketing, Successful Blog, Survival Kit | Leave a Comment

In the spirit of a community blog, articles from readers are a regular feature here. Know that I read them all to ensure the content belongs in the context of Successful Blog. Know that not every submission makes it here and that some get revised before they pass muster. Still even then, not every one of them will be right for every one of you.

To be respectful of your time–who needs me going on and on?–I ‘ve made a snapshot form to help you determine easily whether the content suits your personal needs. When you keep an article, it can serve also as a summary. If you have suggestions for changes to the form, just make a comment after an article whenever you think of them. Now on to the article. . . .

Guest Writer: Katy Whitton

Katy Whitton of Katy Whitton.com sent us this article on how to Market Your Blog and Keep Your Readers from her blog, Flipping Heck!

Target Audience: Beginning Bloggers
Article Type: Overview
Content: Katy mentions the main points of bringing your blog into the world of blogging, including choosing an appropriate name, content considerations, Permalinks, pinging catalogues (directories), posting frequency, advertising, and stats. She also provides links to additional information.

Notes: This is an overview that will get a new blogger thinking on what there is to do and hopefully bring him or her back to Successful Blog to find answers to any questions the article might prompt. Katy’s writing makes her article an easy read, an investment of a few minutes. Her writing voice lets the reader know that he or she can do this.

Thanks, Katy, for contributing to the Successful Blog community.

ME “Liz” Strauss