The most surprising thing about the iPad is how quickly and seamlessly it has nestled into the working and daily life of so many people. Gartner reported that Apple will sell 19.5 million units by the end of 2010 – way more, way faster than the iPhone.

Even if you’re not thinking about creating an iPad app for your non-profit (it’s not a bad idea, by the way), you minimally should be thinking about how your website looks on an iPad. A good chunk of your supporters may already be looking you up from their tablet, but according to the report from Gartner, the market is going to blossom with media tablets: 54.8 million units in 2011, up 181 percent from 2010. That means your constituency is likely to be moving to a handheld unit.

You should know minimally that if you’re using Flash, it’s not showing up at all on an iPad. But how about the rest of your site? How many of you have thought about how your site looks and performs on an iPad? Weigh in on our poll, and then check back in coming weeks as we report on our findings and give you tips on how to make your web project perfect on the most popular viewing devices.

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:

Where to add the ALT tag

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.

It’s easy to think in extremes with websites. Your website might be looking a little tired, and you might think, “Time for an overhaul!” Often all you need is a little freshening up, and you’ll notice a big payoff. As long as you’re reasonably happy with your content and you don’t have any technical problems, you can execute a few tweaks that are far cheaper than an overhaul, and that pay off big time.

Contra Costa Midrasha just went through what I’d classify as a “refresh” rather than a “relaunch.” CCM is a program for Jewish high school kids in Walnut Creek, Calif., and every year they start a big registration push to recruit more students.They were already planning a “Put Yourself in the Picture” direct mail campaign and had designed a postcard.

It seemed like the perfect time to breathe new life into the website while using it as the hub for registrations, donations and news about events. After a few discussions with Devra Aarons, the program’s executive director, we came up with a plan of attack that would be budget-friendly but still achieve her goals of getting new recruits and collecting information. We decided to also align the site with the “Put Yourself in the Picture” campaign.

Here’s the plan:

• Design a new header to match the campaign.
• Add punchy noticeable buttons to encourage donations and registrations.
• Create motion and interest through an interactive slide show.
• Use an expanded online registration tool.
• Promote their new social media campaign.
• Use analytics accounts to track usage.

New header

The old website header was designed to match a brochure. It was eye-catching, but this was probably the most impactful way to update the look of the site. We used an existing postcard for the upcoming campaign and extended the movie metaphor with CCM’s color palette and some layered textures. Here’s the old banner:

And the new banner:

Donate and Register buttons

For a long time, Devra knew she wanted to add call-to-action buttons to encourage donations and registrations. There was a blank area above the banner that was the perfect spot. We created a couple buttons that matched the new header and that stood out.

Slideshow

The biggest wow factor on the page comes from the slideshow. It cycles through a series of pictures with text, and each image links to a corresponding page. Since Devra wanted to ramp up registrations, we made them all lead – for now – to the registration page.

Registration tool

Devra decided to largely scrap the paper registration and put it all online. The form was long, to be sure, but we streamlined as much as possible and used fieldsets to group like information with like. We also used collapsible fields, which open with a click and reveal more information. This is helpful for information that might not be relevant for everyone. The end result for the user is a friendly flow of information that’s a little easier on the eyes.

The payoff here was clear and nearly immediate. Registrations started coming in right away, and the feedback was good: “I got a lovely e-mail from a parent saying how user friendly our registration form was!” Devra said.

Promote social media

CCM just started using Twitter, so we added this and a link to their Facebook Group to the homepage, where it’s easy to click through.

Analytics

Finally, Devra set up accounts on Google Analytics and Clicky, both helpful tools to show the who, what, where and when of people visiting the site. After making these kinds of changes, tracking usage becomes a helpful benchmarking tool to know what decisions are resonating and identifying possible issues. The data that comes in over the following weeks and months will help plan for the future, as needs and responses change through the course of the program.

Here’s the whole site, but make sure you visit so you can see it all in action.

Take a look at A New Day, a heroic organization in Massachusetts that helps victims of sexual and relationship violence. We helped them bring a bright and hopeful face to the work they do with a new logo to match their new name (they’re formerly known as Womansplace Crisis Center). The new logo provides instant recognition to non-native English speakers and those who may be illiterate. It also communicates calm, freshness, vibrancy and empowerment.

A New Day Logo

Visit them at their website: anewdayma.org, and stay tuned, because big things are planned for this space.

Who Is A New Day?

A New Day is a free and confidential space for survivors of domestic and sexual violence and their family. They provide counseling, medical advocacy, 24-hours’ response to individuals who have been sexually assaulted (including meeting them at the hospital and staying with them through procedures), legal advocacy and prevention, working in the community to change the way they think about and respond to domestic and sexual violence in hopes to stop it at its roots. Check ‘em out. They’re worth every bit of good will they get.

If you’ve never seen the words “how to” followed by “design by committee” without words like “throw yourself out a window because you were involved in this horror show known as” in between, you may be shocked to read on. You may be one of those people who’s been trapped on a committee and all its egomaniacs, petty arguments and grudging concessions and know what a mess committees can make of things like web projects. Wikipedia puts it this way:

“The defining characteristics of ‘design by committee’ are needless complexity, internal inconsistency, logical flaws, banality, and the lack of a unifying vision.”

That pretty much sums it up.

But as much as people hate to have web projects designed or decided by committee, it still happens. All the time. Like at almost every company we work with. So, as much as it pains me to write this article, I’ll do it anyway knowing that if a committee is going to be involved in a web project, it should at least be run the best way possible.

Don’t design by committee

I know what I just said, but if you can find a way of disbanding the committee, do it. Have one capable, knowledgeable person in charge, and other parties involved weigh in at appropriate times. Note I said “weigh in” and “appropriate.” Not make the final call, unless those parties are uniquely qualified to do so.

I once worked on a website project for teens. The COO – in other words, the 50-something-year-old who was in charge of writing contracts and making sure the organization was following its overall strategic objective – decided that keys were a better teen image than whatever shape the designer came up with. I suppose the reasoning was something like most people get a driver’s license when they’re teens. That means they can drive cars. You start cars with keys. So the final design had keys all over it, which looked weird and spoke to no one.

Opinions are valuable, but they’re just opinions. Let the experts make the final call.

If there’s no escape, organize responsibilities

If a committee is unavoidable, assign separate responsibilities rather than giving everyone a share in every single responsibility. The trouble is taste is inherently subjective. Some will agree, but many will have different opinions. Giving everyone a chance to weigh in on everything goes exactly nowhere. Or worse, it leads to compromise. (”I hate the blue.” “Well, I hate the red.” “Then let’s just choose green. At least nobody hates it.”)

Yet, if you give each person on the team his or her own role and responsibility, they can feel as protective about the thing they’re in charge of as they like. Plus, it helps eliminate indecision and might actually move a project along faster.

Foster collaboration rather than compromise

Sometimes nixing the “I don’t like” and the “that’s ugly” kind of comments can make a difference. When reviewing a design or idea, ask instead, “What works and what doesn’t? Why?” Instead of making or responding to visceral comments, ask, “What can we tell the designer that will address our concerns?” Reasoning and thinking together can help you arrive at rational decisions that leave everyone feeling included.

Speak for your audience, not yourself

The bane of committees is the egomaniac who feels their preference must be reflected in the design. If you’re the rational person on the team, you may understandably feel irritated. Remember, preferences are natural. The person you are and the position you have will influence your taste. You can’t help it if your gut is telling you that you like something or that you don’t. It’s what guts do.

Understand this reaction, and make every effort to direct the conversation to the people who really matter: your audience members. Ideally, this will take the form of user testing. Even informal user testing, where you send the idea to a handful of your audience members and ask for their feedback.

If you can’t do a simple audience survey for some reason, at least put yourself in their shoes. If you were your main demographic, would you respond to these colors? If you were of a certain age and background, would you respond to that style of writing? Do the people who use your site use products whose designs are similar to what you’re considering?

Despite your best intentions, you may very well be pulled into a committee or form one. As long as you make sure you’re asking the right questions, and everyone can come to a sensible decision.

Never one to turn down a free bagel, I sent away for a coupon from my friendly neighborhood bagel shop. They e-mailed it, as promised, but without any regard for the way most e-mail programs by default disable images. Because the entire thing is an image, I couldn’t tell what arrived in my in-box, and I almost deleted it before recognizing the subject line.

Here’s what I was looking at:

What happens if you go picture-bonkers

The lesson? Use images judiciously in your outgoing messages. And always make sure you use ALT text in case pictures don’t display.

The day I bought my mother a cell phone, she cried. Believe me, they weren’t tears of happiness. She looked at all those buttons and numbers and codes and had a little meltdown. We put the phone away and gave her a new cordless phone instead.

My mom is 70, and while there are plenty of hip 70-year-olds e-mailing pictures of their grandkids around and doing online banking, not all of them are. To many people of my mother’s generation, the online world is utterly confusing. They look at websites with no history and with no idea how to navigate.

At the same time, more people are moving into a 60-and-older age bracket than ever before. These are the people who will be using your website. If you’re a non-profit, these are also the people who may be looking for ways to donate their money and time.

Make it easy for them. Here are a few things to keep in mind when presenting a website to older viewers:

Put the most important information up top.

This should be a given no matter what age demographic your audience is. But in studies, older users failed to scroll down the page because they didn’t know it was a possibility.

Explain things in plain English.

We’re all guilty of using too much jargon, but sometimes we don’t realize how much. These are all terms that may confuse: user, content, URL, homepage, browser.

Use a search tool.

Studies have shown that older audiences are more likely to use a search tool to find items than younger people. One possible reason is that younger users are more accustomed to conventions of placing items on a page or within navigation.

Provide a text resizer.

This makes it easy for people with visual limitations to increase the font on the page. Some older users find anything less than 12 points a challenge to read.

These tips are common sense. Follow them, and your website will be easier to use not only for older people, but for everybody.

The good people at JFFixler Group know that the entry point to your organization is your website. That’s why they asked me to contribute an article to their blog about the 7 Best Homepage Updates you can do. They’re quick, they’re easy, they pay off. Check it out:

7 Best Website Updates on JFFixler Group blog.

Design is a dirty word for many non-profiters. The idea of an organization spending time money making something look polished and clean, some think, is a sign that organization is spending time and money where they shouldn’t. All resources should be funneled into the cause.

That’s not saying much for design. Design may be artistic, but it’s not art. The design process is calculated and defined. It follows methodologies and steps that support the objectives of a website and is there to help the viewer accomplish tasks.

While your focus should definitely go into your cause, you should also explore every outlet you can to help support what you do. Think about how you look at websites and how quickly you make judgments. In a snap, you decide if that organization is trustworthy. You decide if the donation process makes sense. You evaluate how easy it is to pledge support – if that Donate Now button isn’t easy to find, you might assume donations aren’t important.

If you have a scrubby website that looks like your favorite niece built it between classes, people will think that you’ve got an equal organization. Inspire trust in your visitors. Show them respect. Trust that design serves a purpose other than to look pretty, and let your website shine.

First impressions count for everything when it comes to websites. In real life, you might have second crack at forming someone’s view of you: making a joke or warmly shaking someone’s hand. But online, when the average viewer’s attention is being pulled in a million different directions, you have to hit them exactly right to make sure they keep coming back.

Working with clients over the years, we’ve uncovered five simple tips that will help you present a great first impression so you can convert a website visitor into a fan.

1. Make your pages consistent.

Few things are as confusing as when each page looks different than the page that came before it. Web users need consistency when it comes to websites. This means when they click through the items in your menu, they always thing they’re on your site. If your structure is sloppy and inconsistent, you look sloppy and inconsistent.

2. Ensure quick load times.

If you think the people in the line at the DMV are impatient, multiply that by a factor of a bajillion to approximate their impatience with website loading pages. If your site doesn’t open in a reasonable amount of time, your visitors are gone, baby.

3. Clean up your logo.

Your logo is the flag of your website. It communicates important information about you at a glance. If that information has anything to do with tired clipart or design ideas borrowed from anybody else, it can have a negative effect on your visitors.

4. Appropriate colors.

Colors can communicate a mood to someone before they even read a word. The colors of your website should be attractive and also appropriate. An IBM blue probably isn’t the right color for a preschool website, and electric pink isn’t the right shade for a funeral home.

5. Everything works.

If a link is broken, if your margins are askew, if your images don’t load – these are all big mistakes that reflect badly on you as an organization. Taste is subjective, but operability isn’t.