Although you may not have the same needs as this organization you may consider using WordPress MU if you want to develop more than one blog.

I had originally created the coastwatch site using the Joomla CMS system but, as the interface was complicated for them, WordPress was my obvious choice. After working with WordPress on various sites for a year or so, I know how flexible it can be. I was pleased to see that immediately after the new site was up and running Keef, who will be a co-author, had written a post and just needed me to tell him to hit the media button to add images. So much simpler.

As NCI East Coast now comprises of two coastwatch stations, managed by two separate committes, each needed their own unique identity, I decided on using WordPress MU to make administration simpler. Both stations now have their own unique pages and blogs on their own virtual subdomains.

The blog and some pages on the main East Coast site are being used as a private member only area for both of the coastwatch volunteer teams. Plugins turn this section into a true community site.

The other East Coast pages are public and contain information common to both stations. By using WordPress MU, the three blogs and three sets of static pages (NCI Eastcoast, NCI Skegness and NCI Mablethorpe) can all be managed from one admin dashboard.

I am hoping to see lots of posts written on the site to gain it speedy search engine page ranking and to raise awareness, more volunteer watchers and, hopefully more funds, for this worthy charity organization. Their volunteers man the coastwatch stations daily, making sure beach and sea goers are safe.

You may like to go along and leave a comment, joining me in congratulating them on their hard work and efforts in getting their second station up and running.

I will expand upon the advantages of and uses for MU in an upcoming post. For those of you interested in setting up an MU site I will also be talking of how to I set the East Coast site up, the plugins I used and where to find futher information.

I will also be discussing how you can use WordPress, including an existing installation, or WordPress MU to create a community site. As with the NCI Eastcoast example, you do not have to run your whole site as a community site – you can just have it as an add-on to a normal WP site.

WordPress Multi User | Blogging Sueblimely

Image Editors with extensive features

As well as allowing for upload of images from your computer, these applications allow you to import/export from other sites such as Flickr, Photobucket, Picasa, Facebook and MySpace.

Common Features include:

• cropping and resizing
• color adjustment and enhancing
• red eye reduction
• add text
• add frames and borders
• various fancy filters and effects

• Fotoflexer – grandly calls itself the "the world’s most advanced online image editor" but it does have a host of impressive features; from the more standard editing functions of to a range of fancy effects.

• Flaunter is a suite of applications: PhotoEdit for the more basic jobs, PhotoStylr which includes effects, and PhotoProfilr which will create avatars and profile photos . which has a good range of features, is quick loading and also allows you to create digital scrapbooks, ecards, greeting cards and invitations
• Picnik – Another very advanced online editor with lots of easily applied effects. I got a little carried away using this as you can see.

Images – Broome Western Australia

UltraViolet Observations

• Splashup (previously known asFauxto)- Another multi featured editor with an interface like a that of a desktop program. It does not have all the fancy built in effects of the other two but it does allow more manipulation of images. If you have used programs such as Photoshop then you will find this simple to use, otherwise there may be a bit of a learning curve.

Other online image editors

These don’t come with all the special features of the above applications but do provide basic editing tools, which may be all you need the majority of the time.

• MyImager.com
• Phixr
• Pixer.us
• Snipshot – integrates with Firefox via a browser bookmarklet and allows you to integrate it into a website.
• Wiredness

In invite only beta

Aviary sounds and looks interesting but as I have only just signed up and have not got an invite as yet, I could not try it out. Aviary is a suite of online applications with tools, all named after birds, for image editing, typography, music, video and 3D. Aviary is aimed more at designers and artist rather than those who just want basic image editing tools. Their blog has a host of examples of what it can do – it looks pretty impressive to me and I like the idea that tutorials are available.

I have collected an extensive list of editing tools over the years but they do not compare with the capabilities of these newer ones. I have scrapped that list now and I will add to and update this list to keep it current. Please let me know if you have have any favorite image tools (online or desktop) and I will check them out for inclusion here or in a future post in this series on images.

Future posts will include where to find free images, websites that help you search for them and tools that do specific tasks.

Excellent Free Online Image Editing Tools | Blogging Sueblimely

Inbuilt blog editors make it relatively easy to insert and position images in posts but you can add some additional styling elements and make them more interesting.

The WordPress insert image screen (Appearance tab) allows you to add inline styling for individual images In Blogger you have to enter the CSS styling manually. If you have a particular style that you are going to use regularly it is simpler to add the a class to your CSS styling. I will explain this more as I go along.

WordPress Insert Image Screen

Firstly I will show you how to just add a simple border to your images and then I will build on this to create some different effects.

Simple Border

Inline styling

The html for an image with a solid border, 1px in width, color #FF0000:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid  #FF0000;"  />

Blogger - Add your image as usual and in your post html edit tab add all the colored code above after the image location and before the />

WordPress – In the ‘Insert Image’ window (Appearance tab) – enter the width of border you require to the ‘Border’ box (1 in this example).

This will produce a black border. To alter the color of the border enter border-color: #FF0000; in the Style box. (There is no need to add the code in orange (style=" and ")as this will be added automatically.) You can also add styling by editing in the post html window as in the instructions for Blogger above.

Add Code to Stylesheet

If you are going to use this same formatting regularly add a class to your CSS styling instead of the Inline method above (edit your style.css for WordPress, Layout/Edit html window in Blogger). Use a descriptive class name and you are more likely to remember it easily:

.border-red {border:1px solid #FF0000;}

When you want to use this border style – insert your image as usual and then add the the class in the html tab. From the example above:

<img src="http://www.imagesite.com/image.jpg"
class="border-red"  />

Border with padding

Follow the instructions as above but add padding to the outside of the image. The color between the image and the border will be the same as your post’s background color.

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid  #FF0000; padding:6px;"/>

or
Add to Stylesheet
CSS:

.border-padding {border:1px solid #FF0000; padding: 6px;}

HTML:

<img src="http://www.imagesite.com/image.jpg"
class="border-padding"  />

Border, Padding, Colored Background

The same as the prior image except for the addition of a colored background:

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;" />

or
Add to Stylesheet
CSS:

.border-padback {border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;}

HTML:

<img src="http://www.imagesite.com/image.jpg"
class="border-padback"  />

Image Consistency

If you have various size images in a post you can standardize the size by adding borders and padding to smaller images to create an overall size matching your larger image. This time I have only included code for inlne styling as the padding will vary from image to image.

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #FF0000;
padding:40px 78px 40px 78px;" />

You could get a bit fancier by increasing the width of the border and adding background color:

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #FF0000;
padding:35px 70px 35px 70px;
background-color:#F5F5F5;" />

I have not included the ‘alt’ tag in the html coding here for the sake of simplicity. It is always worth adding this for accessibility and search engine reasons. If you need to know more about this please read my post The Alt Attribute and Online Public Relations recent post Demystifying Accessibility Myths: The Alt Tag Attribute

Add Borders to Images | Blogging Sueblimely

Today is the fourth course in my series on blog navigation menus – dessert. Some ‘sweet’ menus for you to copy – suitable for WordPress and Blogger.

Here is the html code you will need for all the examples:

HTML

<div id="menu">
<ul>
<li class="selected"><a href="http://www.your home page.com">Link2</a></li>
<li><a href="http://www.your link.com">Link2</a></li>
<li><a href="http://www.your link.com">Link3</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
</ul>
<div class="clear"></div>
</div>

Menu Bar

CSS

<style type="text/css">
<!--
#menu, #menu li a {background-color: #8AAADF; color: #ffffff; font-size: 1.0em; font-weight: normal; height: 1.5em; line-height: 1.5em; text-decoration: none; }
#menu, #menu li {padding: 0; margin: 0;} #menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; }
#menu li a { background-color: inherit; display: block; padding: 0 10px; border-right: 1px solid; border-right-color: #ffffff; }
#menu .selected, #menu a:hover { background-color: #B9CCEC; color: #ffffff; text-decoration: none; border-right: 1px solid #537495; border-right-color: #5B80A4; }
-->
</style>

Tabbed Menu

CSS

<style type="text/css">
<!--
#menu, #menu li a { color: #000000; font-size: 1.0em; font-weight: normal; height: 1.5em;
line-height: 1.5em; text-decoration: none; }
#menu, #menu li { background-color: #FFFFFF; padding: 0; margin: 0;}
#menu {border-bottom: 1px solid; border-bottom-color:#83E292;}
#menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; margin-left: 10px; }
#menu li a { background-color: #83E292; display: block; margin: 0; padding: 0 10px; border:0;}
#menu .selected, #menu a:hover { background-color: #A0E9AB; color: #ffffff; margin: 0; font-size: 1em; text-decoration: none; border:0;}
-->
</style>

You will of course need to change the links to your own: Copy the code for your chosen menu into a text editor such as Notepad or Wordpad and alter the links to point to where you want them to go. This means altering not only the link text – e.g. Sausage Links – but the hyperlink too. Change http://www.your link.com to the address you are pointing the link to. (remember that blogger does not use the www prefix so you homepage will be something like http://yourbloggeraddress.blogspot.com)

These menus, styled using CSS, are infinitely changeable. If you wish for a thicker menu bar change the height and line height values (currently 1.5em). Change the colors to suit the rest of your blog by changing the values for "background-color" and for text "color".

How to use them in your blog:

Blogger

You can do this by adding an "html/javascript" page element. Firstly you need to make sure you are able to add the page element in the place you want it.

Go to your layout/html section and backup your current layout. Tick the "expand widgets" box. You can alter either of the following two tags (you may not have the crosscol wrapper so will need to alter the header section.

Change:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"no"'

To:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"yes"'

Or:
Change

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

To:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

If you already have 2 widgets add another and so on.

Now go to your layout/add element area and add an HTML/Javascript element to the header or cross column section. Copy and paste the CSS and the html code from your chosen menu into this. Alternatively, add just the html code to your html/javascript element and put the css into the style area of your template. Because Cascading Style Sheets cascade you may find the font size of the menus too larage or small so change the "font-size" in the html.

WordPress

You can approach this in two ways. If you already have a horizontal navigation menu built into your theme then you can just style this. The default WordPress menu is already called "menu" so the only changes that are needed are to the your style.php file. From the menu examples above only add the CSS styling portion (the code between the "<style type="text/css"><!–" and "–>
</style>" tags), replacing any tags of the same name.

If you do not have a horizontal menu bar already you can add one by adding the html code to your themes header.php file – just below the header division.

If you want to get fancy then instead of your home page address you can use this line instead.

<li><a href="<?php echo get_settings('home'); ?>"></a></li>

The next and final course in this menu tutorial will be made of a variety of fresh ingredients to tempt you to indulge yourselves.

Navigation Menus 4 – Dessert | Blogging Sueblimely

I thought I would get down to the meat of the main menu today by showing you some css styling.

HTML Code for all of these menus:

An unordered list:

<div id="navigation">
<ul><li><a href="#"id="a#current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>

Menu 1

With no CSS styling – the list will display vertically: (If you try this with your current template, existing styling may alter the look of this):

Menu 2

• display the list horizontally – display: inline;
• take away the bullets – list-style-type: none;

CSS

#navigation ul li {
   display: inline;
   list-style-type: none;
}

Menu 3

• increase the font size – font-size: 1.1em;
• create space (padding) between the words
• color the link text:
• change the link text color on hover

CSS

#navigation ul li {
  display: inline;
  list-style-type: none; 
  font-size: 1.1em;
  padding-right: 10px;}
  #navigation ul li a { color: #330099; }
  #navigation ul li a:hover {color: #00FF33;}

Menu 4

• Move the whole menu (the ul) to left by making margin and padding left "0"
• Take away the underlines – text-decoration: none;
• Add padding to link – padding: 3px 10px;
• Add background color to link – background-color: #9EBEDE;
• Add different background hover color – background-color: #006699;

CSS

#navigation ul li {
  display: inline;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
#navigation ul li a {
  color: #000066;
  padding: 3px 10px;
  text-decoration: none;
  background-color: #9EBEDE;
}
#navigation ul li a:hover {
  color: #00FF33;
  background-color: #006699;
}

Menu 5

CSS

• Tell the menu to extend the full width of its container – width: 100%;
• Add background color to the whole menu (the ul) - background-color: #9EBEDE;
• Float the menu to the left
• Add a border to the menu items

#navigation  ul {
  padding-left: 0;
  margin-left: 0;
  background-color: #9EBEDE;
  float: left;
  width: 100%;
}
#navigation li {
  display: inline;
  list-style-type: none;
}
#navigation  li a {
  padding: 3px 10px;
  background-color: #9EBEDE;
  color: #000066;
  text-decoration: none;
  border-right-width: 1px;
  border-right-style:solid;
  border-right-color:#FFFFFF;
  float: left;
}
#navigation  li a:hover {
  background-color: #8FD8ED;
  color: #00C427;
}

Menu 6 – Tabs

• Add a border to the ul for the bottom line
• Add borders to the tabs (li)
• Add some padding to the ul to seperate the tabs from the bottom line.
• Identify the page by adding some styling and an id a#current

#navigation ul{
  margin-left: 0;
  padding-bottom: 3px;
  padding-left: 0;
  border-bottom-color: #666666;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#navigation li {
  display: inline;
  list-style-type: none;
  font-size:1.1em;
}
#navigation li a {
  border-style: solid solid none;
  border-color:#003399;
  border-width: 1px;
  padding: 3px 10px;
  background: #9EBEDE;
  margin-left: 3px;
  text-decoration: none;
  color: #000066;
}
#navigation li a:visited { color: #003366;}
#navigation li a:hover {
  color: #00C427;
  background-color: #8FD8ED;
}
#navigation li a#current {
  background-color: #ffffff;
}

NB Notice the "border-bottom: 1px solid white;" in the last menu. This is CSS shorthand for "border-bottom-width: 1px; border-bottom-style:solid; border-bottom-width: 1px;"

I think that is more than enough to consume in one session – it certainly is for me anyway. Next (hopefully tomorrow) I will adapt these to some blogspot templates and WordPress themes. Please let me know if you want me to explain any of this further.

Navigation Menus 3 – Main | Blogging Sueblimely

image: by Today is a Good Day on Flickr

Now we have considered where we want readers to visit on our blogs we need to look at how easily they can find their way there.

This is where a good navigation system makes a difference. The more time readers need to search for where they want to go the less likely they are to stay on your site. We want our regular readers to easily find all the content since their last visit and new visitors to find content that interests them.

Is your navigation system your weakest link?

Blogs with minimal additions and default templates/themes tend to have a more intuitive basic navigation system but give little choice as to where to find more content – especially content you wish to direct them to.

However, all the addins, plugins, widgets we use on our sites can make our blog sidebars as difficult to navigate as the north west passage.

Blogs littered with too many above the fold ads hide the internal blog navigation systems below deck.

Posts easily get lost in archives so it is important your still relevant older posts can always be found.

Give Your Readers a Smooth Cruise

Show me the way to go home!

If you have tempted your readers to delve into your older posts or individual post pages, make it easy for them to travel back to your main page with an obvious link to your home page. As you can see from the image Captain Cook traveled far and wide but found his way home (apart from his last voyage, through no fault of his own!)

Ensure your blog heading image or text leads back there – have a home link in your main menu and consider a duplicate menu in the form of breadcrumbs in your footer:

Home | About | Contact | Archives | Sitemap

Do Follow

This is one occasion when it is wise to follow others. Sticking to more conventional navigation layout methods means that readers often expect to find certain things in certain places. It makes sense to them. Although you may prefer to be different, remember you are laying out your site for your readers.

The F heat pattern

A study of eyetracking by Neilson show that users often read Web pages in an F-shaped pattern: that is,two horizontal stripes followed by a vertical stripe.

Pointer Institute’s Eyetrack III study found that people looked at navigation more when it was at the top of the page than either left or right. Right navigation was looked at slightly more than left. Their 2007 study shows that online news readers first look at navigation bars and teasers whereas in printed news it is headlines and photos. See EyeTrack07: The Myth of Short Attention Spans for more details.

Don’t forget your sitemap!

Add a detailed sitemap for easy browsing of post titles. Mine is far too long and I need to turn the categories into drop down menus.

Categories and Tags

Always categorize or label your posts and use a category list list in your sidebars – a tag list or cloud too if your topics lend themselves to this. This not only makes it easier for searching but clearly indicates your blog topics for new readers.

Consider a search box to make it easier to find more specific topics or posts.

Make the most of your sidebar space

• Consider using drop down or scrollable menus.
• The use of tabs can keep important content within easy view.

Post navigation is important too.

• Use different colors and slightly larger fonts on links you want your readers to follow especially for comments but also for previous post/next post.
• Use a plugin to add similar posts to the bottom of your current post if possible and if not create one manually, at least where you think them most relevant.
• I am not a fan of comment links placed at the top of posts as it takes me time to search for the link. Make commenting as easy as possible.

Tips

• Ask someone to review your navigation system. You are familiar with finding your way around and may not spot problems.
• Do not neglect readers who leave comments – try to fit in a recent comments list alongside your recent posts.

Navigation Menus 2 – Entrees | Blogging Sueblimely

If we consider where we want our readers to go, after they have read the page they are currently on, the answer will usually be “Somewhere else on my site”.

Unfortunately menu bars and sidebar menus can become littered not only with too many hard to find links but with too many external links in the wrong places. Your navigation needs a purpose, a planned direction, a guidance system.

Consider:

Where can your visitors go to on your blog?

• Post pages so that they are more likely to leave a comment.
• “Read more” type post pages where you are not displaying full posts. (to hopefully leave a comment)
• Recent Posts so that regular readers can catch up on what they have missed (to hopefully leave a comment)
• Archives (to…. I think you get the drift)
• Popular Posts – if you have that feature installed.
• Back to the home page
• An about page (except on Blogger where I suggest you create an “about me” post and link to that as an about page rather than to the default Blogger profile – then readers stay on your site.)
• To a contact form or email link to send you a personal message.
• To posts found with an internal blog search.
• Your turn to suggest more please.

Apart from your site there are other places you may wish your visitors to go ( I am not counting those that leave rude comments or spam – where you may wish them to go is probably not to another webpage!)

• To a subscription page after clicking a Feed button.
• To a social media site to favorite, fave, add, digg, stumble or bump you to give some kudos and link love.

• To visit your blogging friends via a blogroll, as hopefully their blogroll will also be leading readers to you.

Tuesdays Menu:

How easily can they find their way there?

Comments this way:

Navigation Menus 1 – Appetizers | Blogging Sueblimely

I suggest good comfortable blog hopping shoes. Prizes galore are on offer. Last year over 1000 bloggers took part. This year even if you do not write a post inviting others along you can till take part – by commenting on at least 20 participating blogs.

How could I take part, keep to my blog topic and offer something of use to other party guests I wondered? I noticed that some participants are posting recipes which gave me my idea. I therefore present for your edification something to whet the palate:

Ultimate Menus

- blog menus that is. I will dip into the recesses of the storeroom of my mind and dish up some of my favorite tips, resources and tutorials. A 5 course course on blog navigation.

• Tuesday: Appetizers – some light hor d’ouvres – nothing too heavy to put you off the rest of your meal.
• Wednesday: Entrees – a selection of easily digested tips for making the most of navigation menus on your blogs.
• Thursday: Main -The meat of the course, pure rump and nothing butt. How to create navigation menus.
• Friday: Desert – The icing on the cake – sweet navigation designs that you can whip up yourself.
• Saturday: Coffee – To finish off, a mild blend of information that will not grind you down but hopefully inspire you to cook up your own menus.

I do apologize for the food puns but some of my earliest memories of laughter were of the bantering puns that my father and brother served up. I suppose they were bread into me.

Before I start writing these posts I am off to take a nap. Preparations for my youngest son’s 18th birthday party and the party itself yesterday in 35 degree heat have worn me out. It was probably a mistake wearing a wig and a thick heavily beaded long velvet belly dancing dress, whilst cooking in those temperatures. (a Bollywood costume for a Hollywood theme party). I think I am still coming to terms with the fact my baby is all grown up now and all my children are adults.

Ultimate Blog (Party) Menus | Blogging Sueblimely

Definition of the alt attribute

The alt attribute is a method of providing a descriptive text alternative for images. Example:

<img src=”http://www.yourdomain.com/your-image.jpg” alt”this is the alt text” />

Reasons for using the alt attribute

• To display a text equivalent for an image in browsers where images have been turned off.. Reasons:
  • To speed up page load time for users on slow dial-up connections.
  • To avoid viruses that can be spread through image files, where the user does not have adequate virus protection.
  • To save bandwidth when users are concerned about using up download limits.
  • To save download amounts if using a pay per download scheme (e.g. when connecting to internet via a mobile phone)
  • To aid browsing when using a handheld device e.g. PDA, mobile phone, electronic books, Blackberries.
• Accessibility purposes for users with disabilities:
  • For those who use assistive technologies such as screen readers which convert text-to-speech, sound icons, or a braille output
  • For those with color blindness which precludes them from distinguishing detail in images.
  • For those using audio-based browser technologies
• Search engine optimization:
  • Most search engines interpret the meaning of objects by analyzing their alt attribute. They cannot see images!
  • Use keywords in alt text to help with indexing and pagerank.

How to add alt text in blogs

In Blog Posts:

Blogger – In your “Create” post screen upload or point Blogger to your image location using the “Add Image” icon in either the visual or html post tabs. Once this is done look in the Edit HTML window and you will find an empty alt attribute which looks like this alt=”" . Add your text in between ” and ” e.g. alt=”this is the descriptive alt text”

WordPress - add your image using the image icon in the new post visual tab. Add your “alt” text in the Image description box of the Insert/Add Image window.

Elsewhere in your blog:

If you are manually adding an image to your blog via widgets or straight html coding add the alt code to the image tag: For example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” /> will produce:

If you are using IE, hovering over the image will show this text. Another attribute, “title”, can be used for displaying image description and this does show up in Firefox.

Tips for the text in the “alt” attribute

• Keep the text short – if too long it may break page layout where images are turned off.
• Ensure the text is meaningful and adquately descriptive for accessiblity purposes or where graphics are not being displayed.
• Include keywords for search engine purposes but still take account of the first two points above.
• If the image is a text image, use the same text for the “alt” attribute – e.g for blog titles
• Use CSS background images for bullets, lines or other decorative elements where descriptions are not necessary to make sense of the page. If you need to add them directly to your page you can leave the alt tag empty (alt=”") or, for example, use alt=”*” for a bullet and alt=”—” for a seperator.
• Use the “title” attribute in addition to the “alt” where you want to add longer descriptions. Example:

<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” title=”Your comment backlink is followed by search engines.” />

Checking out your page:

If you wish to see how well you are using the alt attribute,

• Turn off images in your brower – see if your alt attributes make sense -try reading your page out loud.
• Convert your blog post into audio using a service such as Odiogo

I guess my blog topics do not lead to relevant Yahoo Shortcut images but as this was suggested for the term “alt”, I liked it and appropriate or not I am using it

The “Alt” Attribute | Blogging Sueblimely

Web accessibility is all about enabling people with disabilities to use the web or use it more easily. In addition to those with permanent disabilities there are many many people with temporary impairments. Aging populations add to the numbers of those with difficulties. I would hazard a guess that at any one time there would be at least 20% of web users with some sort of problem that reduces their ability to use the internet to one degree or other. That does not include those, like me, who sit in front of this machine for so long they get eye strain!!

• One in 12 men and one in 200 women have some form of color blindness.
• “An estimated 15-20% of the population has some sort of language or text comprehension difficulty”. – Cognitive Disabilities on the WebAim site
• There are over 30 million people in the US over 45 with some form of vision impairment and “the number of people in the United States with impaired vision – including blindness – could increase by at least 60 percent over the next three decades” – Economic Impact of Vision Problems in the U.S. Estimated at $51.4 Billion

As bloggers we can use techniques and tools to make sure our blog is easy to ‘read’ (by sight or screen reader), understand and navigate.

Although bloggers are at the mercy of programs we have no control over, or we have little knowledge of how to change parts of it that can be changed, there are some simple measures we can put in place. Many of these techniques make sense for use on blogs even if we are not considering them for accessibility purposes – for readability, SEO (Search Engine Optimization) and browser compatibility reasons.

Language and Writing

• Use the clearest and simplest language appropriate for a site’s content.
• Avoid slang, jargon, and specialized meanings of familiar words, unless defined within your document – not only for accessibility but for international readers who do not understand the lingo.
• Avoid complex sentence structures – anyone could be confused or lose interest reading these.
• Use clear and accurate headings and link descriptions – also good for SEO and those who like to skim when reading.
• State the topic of the sentence or paragraph at the beginning of the sentence or paragraph. This will help both people who are skimming visually, but also people who use speech synthesizers. – especially good for using keywords for SEO in your first paragraph.

Layout

• Use a clear understandable navigation system. Helpful to keep any readers on your site longer.
• Use headings and lists – improves readability for all.
• Avoid clutter and use plenty of clear space – this always makes a site easier to read.

Color

• Make sure of good color contrast so that text stands out well from backgrounds – this is kind on anyone’s eyes.
• Be aware of readers with color blindness in aspects where color can cause an element to be unreadable – for example use image descriptions or captions.

Other Considerations

• Use text equivalents for describing images and links – use”alt’ tags on images, use titles and or “longdesc” – good for those using screen readers as well as for SEO purposes. (I will do a post explaining how to add these elements soon)
• Use a readable size font (please use a readable size font – it bugs me having to change browser text size for just one site and I am sure I am not alone in this.)
• Use valid coding in your posts and CSS styling and in any other template coding you may do.
• Blind users of the web often use a screen reader to read the contents of a web page out loud. Important components of your page should work without a mouse.
• Pull down lists and rollovers etc depend on mouse action for interpretation.
• If, as is increasingly common, you use video on your blog consider adding an explanation of what it is about, or include written transcripts, for those who are deaf, have other hearing impairments or use screen readers because of vision problems. Consider this for those readers who prefer to read text quickly rather than spend much more time watching or listening to a video too (I am one of those – If I come across a page with a video tutorial I will go somewhere else for answers as transcripts are not common)
• Avoid flickering images or videos – Epileptic users must always be careful to avoid seeing flickering between 2 and 55 Hz
• Scrolling text and blinking icons can be a hindrance for those with attention problems – they can really bug many other people too.
• Some people even without a disability are visual learners – images with the correct tags assigned to them can help many – they add interest and color to a page too as long as they are not used in excess or combined with clashing backgrounds.
• However intelligent your audience do not assume they can read really well.

To help you understand:

• from Core Techniques for Web Content Accessibility Guidelines 1.0 “A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?”
• Try navigating your site using keyboard alone and check how easy or hard it is to do.
• Try making this Origami Cup – Cognitive Disabilities Activity

There are more complex considerations – if you are interested in pursuing the topic further you could take a look at

• Web Accessibility Initiative (WAI)
• WebAim

Website Accessibility Tools

There are various tools available, to use online or as free download programs, to help us make our sites accessible – here are some examples which would be useful to most bloggers.

• Vision Australia’s Web Accessibility Toolbar – has many tools to check your site including many that are also stand alone tools provided by other sites. This is worth having for other reasons than accessibility too – e.g. validating your code, showing the source code of a page in notepad.
• AccessColor is a free online tool which analyses the internal and external CSS of a web page to test the color contrast and color brightness between the text and background colors.
• Accessibility color wheel A tool that helps in the choice of a color pair (text/background) to use in a web page. It simulates three kinds of color blindness and it shows the result of w3c algorithms, that compute contrast and difference of brightness, applied to the chosen colors. The accessibility color wheel shows if the color pair is “good” from an accessibility point of view.
• Color Blindness Check – re-colorizes any webpage you like into a palette that closely resembles the typical palette available to a person having a red/green color vision deficiency.
• The Color Contrast Analyzer Firefox extension
• Colorblind Web Page Filter – check your page for color blindness accessibility Color Laboratory – allows you to select colors and see how they appear next to one another, and in various foreground/background combinations. It also allows you to see those colors as they might appear to color-blind users.
• ColorDoctor from Fujitzu – a free downloadable Windows program that checks accessibility from the aspect of color. It converts any images displayed on the your screen, into gray scale or colors that person who has color blindness perceives.
• Microsoft Office’s ‘show readability statistics’ option in spell check.
• Juicy Studio – readability checker
• IBM’s downloadable programaDesigner - a disability simulator that helps pages are accessible and usable by the visually impaired.
• AnyBrowser AnyBrowser.com – check to see if your site is compatible with any browser, view site at various screen sizes, check html validity.
• CSS Validation Service – checks your style sheets for errors.
• WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
• AccessValet – This tool analyses HTML and XHTML pages. Reports deprecated (outdated) and invalid markup, and violations of accessibility guidelines.My site failed this one partly because of using IFrames – used in sidebar for widgets – to speed up page load time.

Making sure your blog is as accessible as possible has benefits for all your readers, not only those with disabilities – pages will be easier to read, easier to navigate, and faster to download. You will benefit from the incorporated SEO techniques. Sounds like a win win situation to me.

I am very keen on this issue, having a child with a disability, who has fine motor problems and can read only at a very basic level and a partner who, until recently, was getting massive migraine type headaches after spending time reading the screen (he is online as much as I am because of his “PC doctor” business – he brings them into the world and heals them if they get sick.)

Thanks to Nathaniel, and his article Web Accessibility is for Everyone on Purecaffeine.com, which gave me the motivation to dig out my notes on the subject and write this post. It has been a good reminder for me to take care when adding extra styling features to this blog too. In my desire to pretty it up I had forgotten that one of my original aims was to keep it very clean, clear and easy to read.

I am going to use some of the tools I mentioned on this blog now to see where I have to make adjustments.

Accessibility and Blogs – A Win Win Situation | Blogging Sueblimely