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.

Post from: Blogging Sueblimely

Excellent Free Online Image Editing Tools

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

Post from: Blogging Sueblimely

Add Borders to Images

Table of contents for Navigation

1. Navigation Menus 1 - Appetizers
2. Navigation Menus 2 - Entrees
3. Navigation Menus 3 - Main
4. Navigation Menus 4 - Dessert

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.

Post from: Blogging Sueblimely

Navigation Menus 4 - Dessert

Table of contents for Navigation

1. Navigation Menus 1 - Appetizers
2. Navigation Menus 2 - Entrees
3. Navigation Menus 3 - Main
4. Navigation Menus 4 - Dessert

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.

Post from: Blogging Sueblimely

Navigation Menus 3 - Main

Table of contents for Navigation

1. Navigation Menus 1 - Appetizers
2. Navigation Menus 2 - Entrees
3. Navigation Menus 3 - Main
4. Navigation Menus 4 - Dessert

Is your navigation system plain sailing ?

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.

Post from: Blogging Sueblimely

Navigation Menus 2 - Entrees

Table of contents for Navigation

1. Navigation Menus 1 - Appetizers
2. Navigation Menus 2 - Entrees
3. Navigation Menus 3 - Main
4. Navigation Menus 4 - Dessert

The quick answer to why we need good navigation on our blogs is “useability” but as that term could refer to how easy it is to use your mp3 player or washing machine I should expand on this.

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:

Post from: Blogging Sueblimely

Navigation Menus 1 - Appetizers

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.

Post from: Blogging Sueblimely

Ultimate Blog (Party) Menus

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.

Post from: Blogging Sueblimely

Accessibility and Blogs - A Win Win Situation

To alleviate the problem of those resource hungry social networking widgets making page load time slow, I have now relegated them to the footer. Not being a php expert - (not much past the “hello dolly” stage) I had to search for a way of doing this. I had to piece together various bits of information here and there so I thought it an idea to put it all together for your edification and delight. (I am wondering how many left after reading the last part, thinking how boring). Anyone using anything other than Wordpress may as well take their leave at this point too, although I would much rather you click on recent posts or archives and stay a while longer on this blog of course.

Rather than having to add widget codes directly into my footer.php, I have added “sidebar” elements into the footer. This means I can add widgets to them from the Wordpress dashboard widget page, which gives me more flexibility if I change their content..

How to add a sidebar to a Wordpress footer

Firstly I had to tell Wordpress to insert new sidebars into my theme by altering the footer.php file.

As I already have two sidebars and wanted 3 columns in the footer, I needed to let the Wordpress architects know that instead of two sidebars I now needed 5. (the architects are those that work on the basic structure and design - in my imagination that is). For this I had to alter the functions.php file in my theme folder.

Edit functions.php:

Find the section in your theme folder’s functions php file that says something similar to the following- except the number will not be 5 yet:, it may be 1 or 2. Change the number to reflect how many sidebar elements you want in total (that is the number of sidebar(s) in your sidebar area plus how many you want in your footer) . If you do not have a functions.php file but have a widget enabled theme create the functions.php file including all of the code below.

<?php

if ( function_exists('register_sidebar') )

    register_sidebars(5,array(

        'before_widget' => '',

        'after_widget' => '',

        'before_title' => '<h4>',

        'after_title' => '</h4>',

    ));

?>

Now the architects have drawn up their plans, the construction team come in to put the new sidebars in place. They need to build the new “sidebar” elements into the footer. I added mine at the very top of the footer straight after:

<div id="footer">

Add to footer.php:

<div id="footer-sidebar" class="secondary">

   <div id="footer-sidebar1">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(3) ) : ?>

     <?php endif; ?>

   </div>

   <div id="footer-sidebar2">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(4) ) : ?>

     <?php endif; ?>

   </div>

   <div id="footer-sidebar3">

     <?php if ( !function_exists('dynamic_sidebar')

      || !dynamic_sidebar(5) ) : ?>

     <?php endif; ?>

   </div>

</div> <!-- Close footer-sidebar -->

<div style="clear-both"></div>

I gave my new elements the id of “footer-sidebar” but you could call them anything you like as long as the name is unique - that is, different to any other id name you have in your theme.

That done, when your site loads, the builders come in and add the sidebars into the footer. Imagine how busy they are grabbing all the bits needed to put your page together.

The problem is the building is is still very basic. Now we need some interior designers to add a bit of style and finesse. Crack open your style.css file and pretty up the sidebars so they sit side by side of a width that is going to suit the sort of content you want in them. I made mine all the same width, measured so they stretch the full width of the footer: I gave the whole footer a border. I could have added borders around each sidebar, added background color etc, but wanted to keep it simple for these instructions.

Add to style.php

#footer-sidebar {

  border: 1px solid #cccccc;

  display:block;

  height: 260px;

}

#footer-sidebar1 {

  float: left;

  width: 300px;

  margin-right:20px;

  }

#footer-sidebar2 {

  float: left;

  width: 300px;

  margin-right:20px;

 }

#footer-sidebar3 {

  float: left;

  width: 300px;

 }

Note that the divisions have the same names as I gave them when adding them to footer.php

As, by the time you read this, I may have altered the formatting of the footer once more to add extra styling elements here is an image of what it looks like after adding the above styling.

Post from: Blogging Sueblimely

Add Widget-ready Sidebars to Wordpress Footers

• This text is bold
  code:
  [b]This text is bold[/b]
• This text is italicized
  code:
  [i]This text is italicized[/i]
• This text is underlined
  code:
  [u]This text is underlined text[/u]
• http://www.sueblimely.com
  code:
  [url]http://www.sueblimely.com[/url]
• Blogging Sueblimely
  code:
[url=http://www.sueblimely.com]Blogging Sueblimely[/url]
• Red Text
  code:
  [color=red]Red Text[/color]
• 
  code:
  

• “Quoted Text”

  code:
  [quote]"Quoted Text"[/quote]

• Combining two codes:
  [B][color=red]This text is bold & red[/color][/B]
  code:
  This text is bold and red

If the bulletin board comes with an editor, clicking on the relevant button will insert the surrounding code tags for you. All you have to do then is enter the required text inbetween the inserted [] and [/ ] tags.

If these codes do not work on the forum you are posting to or you wish to add tags not listed above, check the documentation for the Forum software that is being used. You can usually find this in the forum’s footer.

Post from: Blogging Sueblimely

Styling and Linking Forum Posts