Websites for Small Orgs – A Resource Round-Up

I’ll be talking to the Audubon Society this weekend about how local chapters can get on the web. I’m hoping to post the slide deck afterwards but in the mean time I wanted to share this list of resources here. It starts from a pretty basic approach but there’s good info in here for every level of web operation. It’s by no means all inclusive, just some links I have found helpful and hope someone else will too – and feel free to add your favorite “Getting Online” resources in the comments.

Resources:

Do you need a website?

-     Website or Facebook Page? Infographic:
http://inspirationfeed.com/inspiration/infographics/to-build-or-not-to-build-a-website-infographic/

-     Top 10 reasons to have a website:
http://nonprofitwebsiteproject.com/resources/10-top-reasons-why-every-nonprofit-should-have-a-website/

General Resources – all kinds of useful stuff

-       Idealware.org: http://idealware.org

-       TechSoup.org: http://techsoup.org

-       NTEN.org: http://nten.org

-       Care 2’s Frogloop blog: http://www.frogloop.com/

-       Google for Nonprofits: http://www.google.com/nonprofits/

General Process Overviews

-       Web Style Guide http://webstyleguide.com

-       NPower: http://www.npowernw.org/knowledge-center/websites-for-nonprofits

-       Network for Good: http://www.fundraising123.org/web-site-101

-       Smashing Magazine: http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide/

-       Site Wizard: http://www.thesitewizard.com/gettingstarted/startwebsite.shtml

Fundraising:

-       Network for Good Learning Center: http://www.fundraising123.org

Graphics & Design

Infographic – all about images for the web: http://stedas.hr/infographic-beginners-guide-to-web-image-formats.html

Easy Photo editing tutorial: http://www.companykmedia.com/2011/06/07/tool-tuesday-free-easy-anywhere-photo-editing-with-picnik/

What Not to Do:   Web pages that suck: http://www.webpagesthatsuck.com/

sources for images
Flickr Creative Commons: http://www.flickr.com/creativecommons
U.S. Gov’t images: http://www.usa.gov/Topics/Graphics.shtml
Wikimedia Commons: http://commons.wikimedia.org/wiki/Main_Page

Tools for image management
Photoshop Elements from Tech Soup:
http://www.techsoup.org/products/photoshop-elements-11-and-premiere-elements-11-esd–G-45103–AdobeIndividualWin
Pixelmator: http://www.pixelmator.com/

Themes

WordPress

.com themes: http://theme.wordpress.com/

host your own themes: http://wordpress.org/themes/

I have come to like the responsive themes these folks build: http://themeid.com/

For many CMS systems (a mixed bag, proceed with caution) -Theme Forest:  http://themeforest.net/

CMS & Services – links

Hosted Web builders:
Wordpress.com: http://wordpress.com

SquareSpace: http://www.squarespace.com/

Google Sites: https://sites.google.com/

CMS options

Idealware Overview:
http://www.idealware.org/reports/cms2012

Drupal: http://drupal.org

Pantheon (hosted service): https://www.getpantheon.com/
Joomla: http://joomla.org

PicNet Soapbox (hosted service): http://www.nonprofitsoapbox.com/

WordPress

http://wordpress.org

A decent how to: http://buildwebsiteeasyonline.com/

Hosting Options

Dreamhost: http://dreamhost.com/about-us/the-dreamhost-difference/

Lunar Pages: http://www.lunarpages.com/

BlueHost: http://www.bluehost.com/
Third Party (just a few I use)

SEO

http://seo.grassroots.org/guide

http://www.seobook.org/

Social Media

Facebook’s resources for nonprofits: https://www.facebook.com/nonprofits/app_149255468478339

 Tech & Design Volunteer Help

Volunteer Match: www.volunteermatch.org
Idealist.org: http://www.idealist.org/
Sparked: https://www.sparked.com/welcome/nonprofit

 

3 Infographics Full Of Good Info About Nonprofits

Today is apparently infographic day since my inbox led to two great data rich visuals. Here are a set of infographics that provide a glimpse into research that looked at nonprofits as a group. I’m on the look out for the best nonprofit mission and program visuals from nonprofits and hope to post a follow up on those – please leave any that you love in the comments.

1. Digital Teams: Just out today is this one from Jason Mogus’s company Communicopia. They did some timely original research to understand how non-profit leaders manage digital & online initiatives in their organizations. The topline summary is laid out in this bright infographic.
Communicopia Digital Teams research infographic


2. Nonprofits & Social Media:
Another recent infographic showed up from Allyson Kapin of Rad Campaigns & Frogloop, who  teamed up with Craig Newmark and cragiconnects to take a look at how the top 50 nonprofits by net income do social media.
Rad Campaigns and Craig Newmark Social Media infographic


3. Nonprofit Benchmarks:
M+R  and NTEN’s 2011 eNonprofit Benchmark study also resulted in an infographic full of interesting info.
2011 eNonprofit Benchmark infographic

These provide just a taste of what the full reports include, and I encourage you to go ahead and download and read all of them.

In case you’ve been bitten by the infographic bug too, here are links to even more:

Interactive Infographic Fun

I’ve been thinking about data visualization and infographics for a while now. I’ve loved them since before it was cool I think. I’ll be writing more about some ways to create them for nonprofits soon, but for now I just want to highlight one fun example.

One of the site in this 12 Creative Design Elements Inspiring the Next Generation of UX post from  SEOmoz caught my eye. The entire post is full of inspiration and eye-candy for designers but the Maersk interactive infographic hooked me and as I kept playing with it I started thinking about why.

The answer was simple: because its fun! Just really fun to be surprised by the results when you compare their ships to landmarks and whales.

And although I’m not really clear on how this benefits their sales or business goals, I’m glad it’s there. It tells a very simple story (our boats are really big) intuitively and with impact. I’ll keep this in mind for future brainstorms for clients. The subject matter here isn’t in itself super interesting (think of the yawns a table full of measurements would bring) No, the fun part lies in the clever interface & interaction.

Neat.

Here’s a bonus example of fun that my social network pals have been playing with – Draw a Stickman. Try it, and think how engaging such a bare bones technique could be paired with real world issues & actions.

Like I mentioned, I’ll be writing more on this soon.

Take Aways from Design for Mobile Seminar

So I’m back and as promised, here’s what I have to report.

I definitely went to the big city, both literally and figuratively. San Francisco and the Nielsen Norman Group seminar respectively – both a bit like Oz. They were exhausting and exhilarating in equal measure.

While I was already a bit intimidated by the vast sea of things to learn about designing for mobile/tablet sites and apps, I found things are even more complicated than I knew. So much for a quick one day learning experience. As usual, I have been sucked into researching and reading everything I can get my hands on about this new (to me) area of design.

The presenters (Kara McCain, NNG & Rob Abbott, Egg Haus) were great – well informed, good communicators, with a clear understanding of what it was we had all showed up to learn.  Our printed workbooks were the only real disappointment – as a design nerd and internet geek I just don’t see why this wasn’t online, or at least printed well. Printed out resource URLS are so last century. But I’ve included some of the links here, so at least you can click right through.

With so many devices, each with their own peculiarities, they compared designing for mobile to the early wild-west days of web design during the browser wars (Netscape!) of the 90′s and early 00′s. What works on one breaks on another and none of them can agree to a standard.  I’d have to say though that the challenges remind me more of the headaches and learning curve to be overcome in the design of (good) HTML emails, which also have to accommodate so many different methods of access and display.

Some of the general guidelines sound just like best practices for a good donation form – less is more, – make it easy – get them to do the next thing quickly and without distraction. That applies to any mobile screen and is ten times as important for forms on mobile.

Some  Key Take-Aways:

Icons are King

  • Your App Icon *is* your brand on the store and launcher screens
  • Unless you have a good reason, stick with the standard look for Tab bar & Menu icons (top and bottom bars)
  • Don’t use any unneeded icons for list views, they just add noise.

Don’t Add Anything (you don’t need)

  • As in – think twice about big images and graphics, users don’t have patience and connections can flake out
  • Same goes for fancy fonts. Use what’s native.
  • And content too. Fight back internally to keep things streamlined. Only top priority items on the screen (its small)

Tap Area (links & buttons) Design is Critical

  • Make tap areas as big as you can (especially if they are important)
  • Don’t put tap areas close together, which leads to accidents. More padding is better.
  • Placement is crucial to avoid accidents too (Big actions like Send need to be away from the space bar for example)

Motion is More Important on Mobile

  • People not only will horizontal swipe to navigate, they expect it
  • Good transitions reinforce user confidence, bad ones make them avoid your app
  • Remember user Feedback (visual changes that show actions or states) -  test to make sure its still visible from under the user’s finger

Design & Details Do Matter

  • People *do* notice good and bad design on mobile
  • Never put text in images, they look like crap
  • Always check your design on real devices in the real world

It really all came down to KISS: Keep It Simple Stupid. Sadly, simple is not easy.

Some links:

HIG (Human Interface Guidelines – handy!)

General Reference

And Some Questions:

  • Do you have a mobile device?
  • What do you do with it?
  • Any great sites and Apps you love or examples of really craptacular ones?
  • Know of any resources I shouldn’t miss?

I really hope you’ll leave some new trails for me to follow in the comments.

Update: Just got an email about New Use It article on writing for mobile that has some really good guidelines that reinforce the Don’t Add Anything ( you don’t need) theme.

Into the Future

smart phone: FEMA image, public domainI have a confession to make. I am sort of a Luddite when it comes to cell phones, smart phones, and hand-helds of all kinds. The virtual office doesn’t have cell signal, so I’ve fallen behind on this branch of technology. I know basic design principals hold true and how to make a site mobile-friendly, but feel I should know more.

So what’s different about designing for these little screens? That’s what I’ll be finding out next week in a full-day training on Visual Design for Mobile Devices and Tablets during the Nielsen Norman Group Usability Week in San Francisco. I’ll report back.

Notes from SXSW

(originally posted on the Idealware Blog)

South by Southwest is everything they say it is and probably a whole lot more. This being my first year, I was dutifully overwhelmed with the sheer number of options for learning, inspiration and fun. I had planned to report back on the nonprofit oriented sessions I attended and their take-aways, but something else has struck me as even more important to highlight. more »

From the Idealware Blog: A Year End List of Lists

(originally posted at idealware.org/blog)

In the last week of the year you can count on at least  two things it seems: the ubiquitous  “last chance to give a tax deductible donation” emails from your favorite organizations and recap and top 10 lists from just about everyone online. A favorite way for bloggers to draw us in, lists can actually be very useful to pare down the vast amount of information out there into bite size chunks we can consume in one sitting. more »

Idealware publishes updated Open Source CMS report

Anyone who knows me knows that I am a big fan of Idealware, the nonprofit that does research and publishes information on technology for other nonprofits.

So it comes as no surprise that I have been delighted to co-author the  2010 Comparing Open Source Content Management Systems: WordPress, Joomla, Drupal and Plone report. It includes unbiased detailed reviews with a feature summary,  as well as a directory of consultants. more »

Updates to Portfolio

It’s been a busy busy fall here and I’m are still catching up with updating this site. In the meantime I’ve added a couple recent projects to the portfolio and have more almost ready.

One neat little project that isn’t listed yet are the ads Shayna Englin engaged us to create for the Global Day of Jewish Learning. Pairing their Big Questions with popular celebrities in tiny ad spaces proved challenging and fun. You can see a couple of the ads that are now in circulation below. more »