These are the things I wish clients would ask when they’re looking to start a new project. You can use this as a punch list of questions to ask a web designer, web development agency or someone to develop an online course:

1. Do you have any case studies?

Case studies are a really great way to see what an Internet developer or graphic designer has done for another client. Good ones take you through the problem, solution and introduce the technology. We’re careful to create case studies that are framed to show how work we’ve done for one client is applicable to many. People can find case studies on our website, but they don’t ask for them enough or ask for ones that are specific to the work they need.

2. Do you have references?

It’s a little odd how many people don’t ask me for references. They should, because talking to someone we’ve actually done work for is invaluable. An outside perspective is exactly what someone hiring a designer should be looking for, too.

3. How does your process work?

I’ve worked on enough projects to know how valuable it is to have a capable person managing the process. You’re not only hiring someone who knows about the technology and design, but who also knows about how to manage a project, how to schedule milestones, and make sure deadlines are met.

4. How did you get into the web design industry?

This is an easy question that will give you an idea of how passionate a person feels about the work they do. It will also give you an idea of the values of the web developer and what kinds of hidden skills they bring to their cache of talent. It always sparks a good conversation, and anything that opens up conversation in an exploratory call helps.

Notice that nowhere on this list is, “How much will this cost?” Everybody has a budget, but without preliminary research into what a client needs, it’s virtually impossible to give a price estimate. Plus, if you’re working on a tight budget, a good development agency can help figure out how to solve problems you have rather than cut features you can’t afford. Plus, value is not the same thing as cheap. With interactive design, you get what you pay for.

Anything I missed? If there are other questions you’ve found useful in initial conversations with web designers, add them in the comments below.

If there’s one takeaway from 2011, it’s that the economy is haywire and technology is evolving faster than an oiled bullet. In that kind of nutty atmosphere, it can be a challenge to predict what will happen to web-based technology in the coming months.

What does 2012 hold for nonprofit websites?

We do see a few trends emerging for the next year, however. Here are our predictions for 2012 web trends. Take note for when you next talk to your web design firm about and also pay attention to so you can to succeed in your NGO or company.

1. More design for mobile devices.

Look around you. What’s in the hands of the people surrounding you, including your own? An iPad or iPhone? Nook? Kindle? Tablet? Blackberry? Everybody’s using some kind of handheld device. While corporate websites have been mobile-compliant for years, nonprofits will finally start to catch up. Want to peer into the future of mobile design? Read Mobile Web Design Trends and Best Practices.

2. App-lification of websites.

All those people with mobile devices are getting used to responsive design that they can manipulate with their fingers. Move over “point and click,” and make way for “touch and swipe.” People are beginning to expect interactive design with websites, so expect to see websites look and behave more like they came from the app store.

3. Websites focused on user experience.

Since people are spending so much time with their heads bowed over their handheld devices, they also expect to understand what to do with an app without having to guess. This means websites will be built with careful attention to user experience design (UX), in other words, built with humans in mind. Nonprofit leaders might finally understand that the less people have to think about a website, the more likely they’ll donate, sign petitions, volunteer or otherwise participate. Finally!

4. Less Flash.

We’ve long believed Flash to be big and clunky plug-in, with way too many distracting splash screens and blank spaces on the iPad. There are other technologies out there that make web movies and play on a host of devices, so expect to see more of these letters in the alphabet soup: AJAX, CSS3 and HTML 5.

5. Move to online donations.

Smart charities are already asking for money online with little more than a click. Many smaller nonprofits have been slow to relinquish check-cashing for ecommerce web design. We see some of that fear waning, and expect more nonprofits that don’t allow online donations to begin earning some electronic cash.

What do you think will be trending in 2012? Give your vote for one of these five in the comments below or tell us what you think we’ll see in the future.

[Image: Flickr user rjrgmc28]

Here’s a little secret: web designers like to be bossed around. Nicely. Under certain circumstances. They like to be told of your color preferences. They like to know what styles of fonts to avoid. They want to know what things you find hard to use on the web and the things you prefer to visit.

One of the worst things a web designer can hear is, “I don’t care. Just make it look good.” “Good” is one of those enormously subjective words, the way some people think cilantro is “good” – ugh. Even if you don’t think you know what kinds of design elements you like, the chances are high that what a web designer thinks looks super may not be what you think.

You really do have preferences, even if you think you’re a design noob. You just have to learn to tap into them. Then, when you go to create a project brief, you’ll have somewhere to begin.

Where to find web design inspiration

Here are a few places for finding design inspiration:

Check your stationery for branding.

If your organization or corporation already has business cards, letterhead, a logo or anything with approved colors or branding, you should look here first for design guidance.

Look through random magazines.

Flip through a few magazines at the library or bookstore and focus on the design rather than the articles. Note typefaces you like, colors, pictures, layout – anything that grabs you.

Scan your environment for cool things.

You might have unknowingly cultivated a design aesthetic through the pictures on your wall and the stuff on your desk. Look at this interesting coffee mug photo contest, where you can see the beauty in a cup of joe.

Look through image sets on Flickr.

This enormous image database has not only photographs that might spark your interest, but also all manner of design projects, products and just about anything that someone else finds inspiration.

Check the design of other websites.

Look at other web design for inspiration. Note down what resonates with you, including overall design and good logo examples, and why.

See artwork in galleries and museums.

Check out the masters to see how they use colors together and what kinds of patterns they put together. We once built a website to match the architectural style of Frank Lloyd Wright.

Check for design in nature.

Nobody does it better than Mother Nature: the colors, patterns, textures. All wonderful fodder for design.

Read a few children’s books.

Kids’ books have masterful balance, color and content. You can use them to glean some great ideas from the layout and textures.

Web design gift card and super cute mug

Contest time

[Update! Congratulations to Linda, who won the drawing for one of the cutest travel mugs on the planet. This contest may be over, but you're still welcome to keep sending ideas for creative inspiration.]

Now that you’ve got some solid ideas of the kinds of design elements you like, do something with it.

Enter our drawing for one of these enormously cute Brewed by Talance travel mugs, and you’ll automatically receive a $150 gift card good for any new web design or update work from us. It’s part of Talance’s Customer Appreciation Month, where every week through December, we’re offering a new giveaway or contest.

How do you enter? Just add your ideas for how you find design inspiration in the comments below, and you’ll be entered into a drawing to win the mug and will receive your gift card via e-mail.

Deadline for entries is January 9, 2012. We’ll pick one winner at random from all entries on January 10, 2012 and will notify the winner via e-mail. You must leave your name and a correct e-mail address to qualify.

Enter now!

Here’s a little secret many people don’t know about building projects for the web. You don’t have to do everything from scratch. There are so many tools out there that do the tricky stuff for you, that you really don’t have to be an HTML wiz to have a polished looking website.

Here are some excellent tools to help you fake web excellence:

Table Builders

Tables are the nemesis of many well-meaning web worker. They can be tricky to build from scratch, but no need with these.

Quackit HTML Table Generator

TableGen

Code-Generator.net HTML Table Generator

Color Palettes

Color theory is a practice that people spend years perfecting. But you can fake it pretty well with these tools that help you choose complimentary colors.

Color Scheme Designer

Color Schemer Online

Elvan Online

Image Generators

A few well-placed images can help bring your site to life. These three tools help you manage and create pictures to illustrate your pages.

PicMarkr lets you to add custom watermark to your images.

Digital Post It Note Generator

Create A Graph

[This appeared in our July newsletter.  Subscribe now so you get monthly tasty tech tidbits and special deals.]

The more you pay attention to images, the better your website will be. Good graphics make the difference between a webpage that attracts and one that repels. Here are a few essential graphics tips you can follow to make your whole website better:

1. Save photographic images as JPG and save illustrated images as GIF. Learn more about GIF vs. JPG.

2. Make sure your web graphics are saved as no more than 72 dpi. That’s the standard compression for the web. Anything bigger means slow loading. Learn more about optimizing images from The Comprehensive Guide to Saving Images for the Web.

3. Don’t use HTML to set the width and height. Instead, resize the picture to the appropriate dimensions. Doing otherwise will make your page load slowly and could skew the look of the picture. In other words, if you need

<img width=”200″ height=”200″ src=”boat.jpg” alt=”sailboat” />

then your image (boat.jpg) should be 200x200px rather than a scaled down 500x500px image. Just like this perfectly sized pic:

Here are more tips on web design from the Talance blog:

• Save Your Sanity AND Get the Logo You Love (Yes, You Can!)
• You’re Doing It All Wrong! How to Use Pictures on a Website
• How To Design by Committee (And Live To Talk About It)
• Make Websites Easier for Older People
• 7 Best Homepage Updates

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.

Announcing the new Brockton Teen Pregnancy Prevention Program logo:

Brockton Teen Pregnancy Prevention Program Logo

BTPPP is an organization in Brockton, MA, that aims to reduce teen pregnancy rates. They needed a new logo for web and print that would appeal to teens as well as their mentors.

Talance delivered! The new logo is modern and abstract but still demonstrates health and wellness, rather than sex, and inclusiveness.

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.

The Talance team will be at Drupal Design Camp Boston this weekend at MIT. We’re looking forward to sharing designing and usability ideas with others who work on Drupal. We’ll also be talking to nonprofiteers and Drupal newbies to pick up insight into how we can help you better. Stay tuned for special reporting of the event.

Give us a shout if you’re interested in meeting up!