The quickest shortcut to making your website look polished is to use icons. These little pictures, plenty of which are cheap or free, look way better than anything most mortals can do with Photoshop. A little pop of color, used judiciously, can help bring life to bland webpages. Coordinated sets of icons also make pages look like you put a modicum of thought into how the out-put looks. And, importantly, visitors are more likely act based off a compelling picture rather than a chunk of text.

So stop snagging any old picture off Google Image Search (naughty, naughty!). Here is a list of free icon sets guaranteed to make any non-profit’s webpage better, whether you’re into donations, social media, activism, environment, or health and human services. Have you seen anything I’ve left off? Leave a link in the comments.

Donations

Donate Now Buttons

Festive Donate Buttons

Open Source Icons (including money icons)

Themed Fundraising Buttons for Email

Credit Card and PayPal Icons

Social Media

Vector Social Media Icon Set

Scribble Social Icon Set

Scribble Social Icon Set

WG Social Media Icons

Double J Social Media Balloons

Buddycons

Health and Human Services

Fruit/Food Bank Icons

Education Icons

Jana free baby icon set

People & Disability Icons

Medical Toolbar Icons

Environment

Environment Icons

Ecology Icons

Recycling Icons

Weather Icons

Water Icons

Activism

Endangered Animal Icons

Sign Up Petition Icon

World Flag Icons

Military and War Icons

Multi-ethnic People Icons

Slick web designs might impress the board, but what good does that do if your visitors can’t see? Making your website accessible is extremely important for people with visual or physical hindrances. Tiny fonts and low-contrast colors might look good in practice, but they’re useless if they can’t be read or used to navigate your website.

The upside to embracing accessibility is that your digital materials, be them websites, online courses or electronic documents, will be better used by everyone.

Here are nine tips that make a more accessible website.

[You can find an article about the importance of accessibility and helpful tools in the last issue of the newsletter. Subscribe to the newsletter.]

Graphics

Make sure you use images, icons and other visual elements consistently and appropriately.

Text equivalents

If you you’re using graphics, figures or illustrations, make sure you include a line of text or a longer description for people who can’t see them.

Headings

Use H tags to organize and structure your content rather than using larger fonts and different colors. This is a helpful article on H tags and best practices.

Remember PDFs

PDF documents are often neglected in an accessibility review. Make sure they’re accessible too.

Spell out abbreviations and acronyms

Screen readers have a hard time with acronyms – they think they’re full words. Either spell them out or use coding to make them readable. Look at the acronym in the previous paragraph to see an example.

Use tables appropriately

Not everything should be in a table; many contain information that’s more readable when they’re simply written out. If you do use a table, make sure you’re marking it up appropriately.

High contrast

When you use colors, make sure they stand out. I like to run websites through Vischeck to see how they display to people who are color blind.

Captions or scripts

If you’re using video or audio, use closed captioning or provide a script for people to read along.

Use descriptive links

No more “click here.” Use descriptive text around your hypertext.

We see some common mistakes on our web travels at Talance. We see a lot of them that have to do with image formatting on websites and blogs. No doubt that a gripping image can compel a visitor to spend more time with you or even give you money. But you can ruin the best photo with bad habits.

Here’s what people do all wrong with pictures on websites, and how you can learn from their mistakes.

Infraction: No ALT tag

Not every web browser can see every picture. Obviously, blind people can’t see pictures, but other people have pictures turned off, and some browsers restrict certain kinds of images (hello, Gmail and Outlook). That’s what the ALT attribute is for. It’s meant to be attached to each picture so there’s a text equivalent in case the picture can’t be displayed. At least someone can read a description of what the picture should be.

How to fix it

This one is easy. Every time you add a picture to your site, fill in the ALT text box or “image description” field. Almost every web editor prompts you for this information. Here’s what it might look like:

Infraction: Huge image, small space

Many people know how to take an enormous web photo and make it look small. You can set the image to shrink it down to fit in a reasonable sized box on the page. This technique can squish the picture into a weird shape and also slow down the loading of your page.

How to fix it

What’s better is to make the picture smaller to begin with. Pick one of the hundreds of image resizing programs out there – we use Photoshop in the office – and crop it down. It will load fast and look right.

Infraction: No padding

The eye craves white space. When text is crammed up against a picture, there’s no white space, which makes the page look junky and makes it more difficult to read.

You can see I’ve added a picture here with no padding. See how the words are all mashed up against it? Makes it difficult to see the picture and read the text surrounding it.

How to fix it

Introduce yourself to padding. Padding puts a margin around your pictures, which helps break up text and helps the eye move more fluidly down the page. The best way to add padding is to ask whoever is in charge of building your site to add it directly to the CSS file. But you can add it manually too.

In your image tool on your web editor, look for Image Properties. Sometimes this is in the advanced settings. Look for fields called Vertical Space and Horizontal Space, and enter 10. That will give your picture a nice gutter to help it stand out. See how the same picture as above looks that much nicer just because I added a little breathing room around it? It gives a more polished look to the whole site.

At first glance, you may think kuler from Adobe Labs is little more than online paint chips. But imagine paint chips in dazzling combinations that have been rated for effectiveness and beauty by a network of people. It’s an excellent tool for choosing colors for web and print projects, and an interesting community to become involved in.

I haven’t tested it, but WebAssist has a plug-in that lets you use kuler with Dreamweaver for on-the-fly color combos.