Posts Tagged ‘Design’

Incredibly Useful Advice for Better Websites – from a Writing Pro

Friday, October 16th, 2009

"On writing well"

[Photo credit: On writing well, by picassina, on Flickr]

My digital life has caused me to reevaluate my bookshelves, groaning with books I hardly look at. When my local library posted signs asking for donations, I decided to purge. As I was filling boxes, I found one little gem I haven’t seen in years: William Zinsser’s classic book On Writing Well.

Journalism students know this as required reading in an attempt to learn the principles of cleaning up prose for newsprint. In my years as a journalist, I found it inspiring and refreshing to dip into now and again for advice on how to de-clutter my writing and simplify my words.

As I was thumbing through my copy the other day, I realized that if I replaced “writing” with “creating websites” – especially in the first few chapters – Zinsser’s book is chock full of fantastic advice for anyone looking to plan or maintain their website, whether it be creating design elements, planning pages or writing copy.

The best sites are those that don’t make you think. They’ve been refined so much that you find just what the website owner wants you to find, and you never have to hunt. Few sites suffer from being too simple. That’s exactly what Zinsser preaches in his book.

I recommend you check out a copy of On Writing Well to learn how to write better (useful advice anyway for business documents, blog entries, e-mails and the like), but I’ve taken a few golden nuggets from Zinsser’s book and tweaked them slightly for web building. Follow this advice, and your website will serve you – and your visitors – better.

  • The secret of a good website is to strip it to its cleanest components. Remove every element that serves no function … these are the adulterants that weaken the strength of a website.
  • If the web visitor is lost, it’s usually because the web builder hasn’t been careful enough. Perhaps a website is so excessively cluttered that the visitor doesn’t know what it means.
  • Constantly ask yourself: What is my website trying to say? Surprisingly, often people don’t know. Then look at what you have done and ask: Have I said it? Is it clear to someone encountering the site for the first time? If it’s not, some fuzz has worked its way into the machinery.
  • Web building is hard work. An easy-to-use website is no accident. Remember this in moments of despair.
  • Look for the clutter in your website and prune it ruthlessly. Be grateful for everything you can throw away. Is anything pompous or pretentious or faddish? Are you hanging on to something useless just because you think it’s beautiful?
  • Simplify, simplify.
  • 10 Things To Include on Your Synagogue Site – Now!

    Wednesday, July 22nd, 2009

    Affordable websites

    1. Contact information – on the homepage. This includes mailng address, phone number, e-mail address and fax number.
    2. Directions. This includes a map (like a Google map), parking information and public transport options. Do you provide transport services? Include info on this here too.
    3. Service times. keep this up to date with candle-lighting times and special, high holy day services. In text, on the homepage.
    4. Rabbi’s blog. If there are two things rabbis do well, it’s think and write. They should be blogging machines. If you’re thinking, “But I can’t get the rabbi to blog!” have him or her send you an e-mail every week with their thoughts, and you do a cut-and-paste job. Bonus points if you put the most recent blog posts on the homepage.
    5. Extra blog for special projects. This is especially for long-term projects you want to inform your members of, like renovations, new programs or campaigns like Save Darfur. Yes, start a second blog for these things. That way you don’t cloud the focus of the rabbi’s blog.
    6. Pictures – OF PEOPLE. If you have to show a picture of a room, make somebody stand in it. Better if multiple people are standing in it. If you can’t take pictures during services, provide arty shots of architectural highlights.
    7. A calendar. Keep it up to date. Bonus points if you put the week’s events or a date-picker on the homepage.
    8. A way to give. Do not be shy. Do not make it hard for people to figure out how to give. They want to help you out. Let them.
    9. Calls to action. Tell your visitors what they should do when they arrive at your site. if you want donations, say, “Donate now!” If you want them to subscribe to the blog, say, “Subscribe to the blog!” If you want them to come to an event, say, “Sign up for our next event!” Get the picture?
    10. A special section for potential members. Your regular Joes know what you’re all about, but your new people need special guidance. Put all the stuff they need – like directions, membership forms, rabbi’s profile – in one handy spot so they can pick it up when they come. Label it clearly, “Visitors: Click Here.”

    A Quick Website Tweak To Get More Donations

    Monday, July 13th, 2009

    Adopt a Pet, Live Longer!

    [Photo credit: Adopt a Pet, Live Longer! by sayheypatrick, on Flickr]

    You may already have a Donate page on your website where you make it possible (and easy) for people to support you. But how many people click through to your Donate page compared to other pages of your site? I’m willing to make the sad bet it’s not at the top of the list.

    Some pages, though, are stars. They consistently receive more visitors than other pages. This might be the Dog of the Week adoption page or your contact information page. People either love or need what’s there, so they come back, day after day.

    While you should stay true to the main focus of these pages, start to think of them as a way to reach out to potential donors by putting a call to donate on these busiest pages of your site.

    To find which pages pull in the droves, tap your Web analytics service, such as Clicky or Google Analytics. Most have a section that lists the top 10 or more pages in terms of traffic. Pick the top pages from this list and ask people to support there.

    It helps if you can elegantly work in the plea for funds with the focus of the page. If it’s the Homeless Dog of the Week page, for instance, you may want to include something like:

    “Can’t take Buster home? Support him and his doggy friends by donating $20 right now by clicking here.”

    That’s it. Stand back, keep checking your traffic and donation box, and see if your income doesn’t increase. Make sure to come back and tell us how it went.

    5 Painless Ways to Squeeze More from Your Website

    Friday, July 10th, 2009

    Getting your website to work for you doesn’t have to mean a complete overhaul. Here are five small updates you can make without suffering.

    1. Add a feedback form

    One of the very best ways to get more use out of your website is to give its visitors a way to interact. If you add a contact form to your contact page (here’s an example), you’ll open up opportunities for accepting comments. It’s welcoming, will help limit spam, and can increase the amount of feedback you receive from your site. A pretty big payoff for something so small.

    2. Make menus consistent

    Clicking through the pages of your site should not cause motion sickness. Yet some websites have inconsistent navigational menus. Sometimes they actually jump around. Sometimes the options change. Sometimes they don’t even work. Make them consistent and reliable, and you’ll find more people will be clicking around.

    3. Limit what’s on your homepage

    You wouldn’t stuff all your house’s furniture into the foyer, would you? Same thing with all the content on your website. Put your front-page stories on the homepage, and tuck the rest of the information where it logically belongs.

    4. Add some links to and from your social networking accounts

    Many organizations have well-used Facebook, MySpace or Twitter accounts, but you’d never know it from the website. Do some cross-linking, and add some links on your site. (Note: Join for the Talance Facebook Fan Club, and we’ll give you some lovely social media icons.) People can learn more about what you do, and they can subscribe to your accounts and receive updates and reminders.

    5. Launch a blog or microblog

    Even if you update it just once a week, a blog is a great add-on to a website. It increases your chances of telling the world what makes you so great, and it keeps people coming back for more.

    How To Create a Dysfunctional Website

    Monday, June 22nd, 2009

    In preparing for an upcoming presentation on how to create functional websites, and it’s got me thinking about all the dysfunctional sites I’ve seen recently. There’s no single feature that makes a website completely unusable, but there definitely are trends.

    Below, divided into three categories, are the chief gaffes you should follow if you really feel like creating a website that doesn’t work.

    Market Positioning

    Build your website without thinking what you want. “Yes, we need a website!” is a lousy reason for a website, yet it’s the one too many people follow. First, make a list of all your organization’s goals, and then think about how technology might help you meet those goals. Then from that you can start to think about shaping your website around your needs.

    Don’t think about who’s looking at the site. If your audience is made of 50-year-old women from the Midwest, why would you create a zippy website built to attract college students? If those people are interested in volunteering, why would you load the homepage with information on grants, staff bios and news releases? Think about what the people coming to your website want or need to see, and then give it to them.

    Design

    Ugly artUse lots of clipart. Ooph. Steer clear of crummy clipart. Go for real pictures, even freebie stock photography, rather than goofy cartoon drawings. Check out the Creative Commons images on Flickr or Stock.xchng for good resources.

    Include pictures of empty rooms. What’s welcoming about an echo-y chamber? Put some people in there!

    Use flashy splash pages. They look like ads and have the same effect. People click off splash screens and never get to the meat inside. It’s like going around with two hats on. The top one doesn’t matter and makes people think you’re nuts.

    Use a microscopic font. You know how on TV ads, they put all the stuff they don’t really want you to read, but are required by law to display, in teeny text at the bottom of the screen? It’s because no one can see it, and they ignore it even if they can. Small font does the same thing to your website, but the whole website.

    Honestly, tell me how readable this is.

    Usability


    Shroud donation processes in mystery.
    Heavens, if people want to give you money, make it easy for them. Here, take this big bright Donate Now! button and put it on your homepage. (Right-click and choose Save As.) A gift from Talance to you.

    Donate Now!

    Glom onto every widget you can find. A real danger with the proliferation of widgets and plug-ins and add-ons is that you have a website that looks like a carnival. All flash, no focus. Choose wisely with anything you add onto your site, and make sure it follows your directive of achieving your goals.

    Add 50 items – or even 10 – to your menus. People’s eyes cross when they see more than seven items in a menu, so stick with that magic number.

    Put the most important info at the very bottom of the page. People look at the top left of web pages to pick up the most important information. If there’s something you really want people to read, put it up there and not down below.

    Harsh News for Tired Eyes

    Thursday, May 21st, 2009

    covering the eyes
    [Photo credit: "covering the eyes" by Secret Seasons, on Flickr]

    Here’s a harsh reality you must face when you’re thinking about the design of your website: nobody likes to look at computer screens.

    Yes, we all do it all the time, but that doesn’t change our physiology. Most people suffer from screen fatigue simply because monitors flicker and render an image that’s grainer than print. Think about how many times you’ve gotten a headache from spending too long looking at a computer screen or blinked your dry, irritated and watery eyes. Happens to me almost every day. That’s why I sit by the window; frequent eye breaks.

    That’s also why we can’t help scanning websites. Our eyes seek out big fonts, bullet points and images to help us make quick identifications rather than focus on tiny text. It means that sometimes we frequently don’t take in enough information to get the full picture – we just glean what we can quickly.

    Good web designers will think about these usability issues when designing a site. Make sure you think about what you need to do to present your site so it’s easiest for people to read.

    Spring Clean Your Website: Refresh the Design (Part 4)

    Friday, May 1st, 2009

    A house may be well-built, but the kitchen looks outdated, it’ll be hard to sell. Websites are the same way, which is why after you’ve cleaned up your links and website copy, you should think about cleaning up your design as part of your spring cleaning ritual. (We’ve been talking about spring cleaning your website all week – click here to see all the articles in the series.)

    As you live with your website, you’ll make changes and upgrades to suit your organization’s goals. But those changes, made iteratively over time, don’t always synch up with the overall look of the thing. That’s why it’s important to step back a few times a year to make sure your site looks like a cohesive piece and still looks up to date.

    For example, you might have added a picture here or an icon there to help address a need, but it might not fit overall. Or, you might have jumped on the bandwagon of a design trend that doesn’t hold up any more. I believe the Web 2.0 glassy effect is going to look as outdated as avocado-colored refrigerators in the near future.

    It’s always a good idea to get an outside opinion on how your site looks and what can be done to improve it, but here’s a little checklist you can run through to see how messy it’s become over time:

    • Does your website fit the monitor? Many websites built a few years ago were built with smaller monitors in mind. As a result, when seen on today’s big monitors, they look either like tiny postage stamps in the middle of the screen, or they expand where there’s a wide open space in the middle. Make sure your sites fit modern monitors.
    • Do you have unified icons? You might be grabbing a graphic here to illustrate your e-mail and a graphic there to highlight your Facebook account. But do they match? Look for an icon set that matches to give your site a unified look.
    • Does your site match your branding? Your organization might have had the website designed two years ago, but only last month revamped all the print material. Make sure that you’re presenting the same branding everywhere, from your site to your print collateral to your Twitter account. If your other properties have been updated, it’s time to tweak your site to match.
    • Are you using CSS? If not, you should be. Cascading Style Sheets are the practical way to control the display of your website instead of using old-school HTML tags. Once you create a CSS, you need only make one tweak to change all the font around your entire website, for instance.
    • Do you have an Under Construction image anywhere? For heaven’s sake, if you do, get rid of it.

    Make sure to read the other articles in our series on spring cleaning your website. Make sure you don’t miss anything by subscribing to the RSS news feed. Not sure what an RSS feed is? Click here.

    How To Lose Donations and Confuse People

    Wednesday, April 15th, 2009

    The Chronicle of Philanthropy has a great article about what prevents people from giving online (Confusing Web Sites Discourage Donors From Online Giving). What does it come down to? Bad design.

    Nielsen Norman Group, which conducted the research and wrote it into this report. A summary of the biggest problems, which I can testify are the same problems we fix too:

    • Poor presentation of the charity’s mission
    • No information on how contributions are spent
    • Poor page design and unclear content makes it hard to find how to donate

    Most of those issues are text related, so make your changes right now.

    Excellent Tool for Identifying Fonts

    Thursday, October 30th, 2008

    There are billions of fonts out there, which makes it darned difficult to identify one by sight. That’s doubly difficult if someone presents you with a graphic of a font. You can’t exactly look that one up in the font drop-down menu in Word.

    Instead, you plug it into What the Font?! In their words, “Upload a scanned image of the font and instantly find the closest matches in our database.”

    And it works amazingly well for identifying a mysterious typeface.

    Tests and Tools for Color Blindness

    Thursday, September 11th, 2008

    It’s a good probability that at least one in 20 people can’t see everything on your website. That’s because a higher number of people than you probably expected are color blind in some way. Some statistics I’ve seen say that as many as 18 percent of people have some kind of visual limitation.

    Around 90 percent of the people I tell this fact to are shocked – the rest know it because they’re used to not seeing everything on a website. But what if they’re missing something terribly important, like a news alert or a call for contributions or all your website navigation?

    I love the Colorblind Web Page Filter because it makes it easy to see what your website might look like through a color-deficient eyes, those that can’t see red/green or blue/yellow.

    For some help choosing the right high-contrast colors for your site, try the Color Laboratory. It’s handy because it “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.”

    Makes the incredibly important job of picking the right colors easier.


    UA-2525455-5