Blog » Building Websites

When non-profit organizations are young and bootstrapping, they generally don't have any budget to pay for a professional website.  Fortunately there's almost always a volunteer around who will take on the job of making your organization a site.

We work with a lot of non-profits who are making the big leap from "free volunteer-maintained website" to "cold hard cash money website".  It's rarely as smooth a transition as we'd like, and a lot of that grief comes from the way the free sites were set up.  Some tips to save heartache:

Register your own domain.

Register your domain name(s) under an account set up specifically for your organization.  Pay for it in your organization's name -- it's cheap at the big places like NameCheap.com or GoDaddy.com.

Why? 
Transferring domain registrations is a hassle at the best of times, so start right and make sure that your organization (which uses the domain) actually owns the domain.  Having it registered by a well-meaning volunteer in their own name might seem simpler right now, but trust me on this one.  If someone wants to cover the cost of the registration, that's brilliant. Have them donate $20 to your org to cover the costs rather than paying for it themselves.

Use email addresses @yournewdomain.com.

If you are running PaisleysForPeace.org, use info@paisleysforpeace.org, not sweetpaisleylover@yahoo.com.  You just bought a domain!  Use it.

Why?
If I was feeling snippy, I would say "Because no one should ever give money to someone using a free @yahoo address".  The more salient business point is that using an address at your own domain builds brand recognition, is more professional, and is just plain easier for people to remember.  Even if your organization is 2 people working on a card table in your dining room, you can set up info@, marketing@, donations@ and so on.  Mail sent to those addresses may all end up in the same inbox, but when you're small it can help make your org seem big, and when you're big it will help keep you organized.

Your site needs to be built in a Content Management System (CMS).

A CMS will allow you (or someone else in your organization, including your plucky volunteer) to easily change the content of your site.  You don't need to know how to program or how to read code.  The skill level you'll need is right around "can write a letter in a word processor", which is great because, hello, you have no free time. You are busy trying to save the world!

Why?
The first years of your organization are probably when it will undergo the most change.  At the simplest level, a service that you currently offer only to "cats and dogs" may soon expand to "cats, dogs, small rodentia, and ferrets".  You may outgrow your dining room and move into your own office, or a shared non-profit space.  You may grow or adjust your mission radically, and you should be able to update your site to reflect the changes.

The CMS should be popular.

Some of the simplest and most popular are Wordpress, Tumblr, and Blogger*.  Insist that your volunteer use one of these services (or another that you're comfortable with).  Your intrepid volunteer may be a student or otherwise eager to use this project to explore a new system, or maybe they want to build the site from scratch to teach themselves how to do it.  Whee!  We're all for learning!  But not at the expense of your website.  Be firm.

* "But this is a website, not a blog!" you might point out.  That's OK.  A blog is just an organizational structure, and your volunteer should be perfectly capable of using the CMS to make informational pages instead of a blog.

Why?
Popular services mean tons of support available (sometimes from the company itself, or from other users), and lots of people who are familiar with using the service.  If your volunteer moves away or gets poisoned by a platypus spur, who's going to make changes to your site?  It's like buying a Ford instead of a Lada -- there are lots of mechanics around who know their way around a Ford.  What's a Lada, you ask?  Exactly. 

Your site should hosted by a 3rd party, not the volunteer.

Do not under any circumstances allow the hosting of your site to be on anyone's private server.  Do not let your volunteer "just tuck the hosting in under their own account" in order to save money.

Why?
Whoever controls the hosting controls your site. They're like your site's landlord, and you want to be your own landlord.  If you're using Tumblr or Blogger or Wordpress.com, you're golden because hosting is part of the whole package with those accounts. If you are using a Wordpress installation [WP can be run on WP servers, or off your own server] or some other CMS, insist on controlling and paying for the hosting yourself.  It doesn't have to be expensive, and having complete control over your site is worth the expense. 

Summary

It is worth the small amount of extra work and money to make sure that you have full control of your domain and site. Hopefully this advice will help you and your organization build a solid first website and put you in a good position for an upgrade when the time comes.

One of my favorite Dilbert cartoons of all time [am I dating myself?  Do the kids these days still like the Dilbert?] is this one from way back in 1995:

Search Engine Optimization (SEO) is today's mauve-RAM-database: you can't peruse a magazine or business website without reading about how important SEO is, and how you need to spend lots of moolah and energy working on it.

I think that's crap, and I'm really happy to read so many blog posts recently who share my view.  Here are some snippets from my favorites:

51Bits: Why I Don't Care about SEO

...There are two contributing factors to a search-friendly product: good, readable content [and] clean, semantic markup. [...] Almost every site I’ve worked on has reached a PageRank of 5 or higher over a relatively short period of time simply by following these two fundamental principles of producing and presenting good content for the web. You can’t fake good content and you can only exploit the search engines for so long before they and their users catch up to you.

LeahCreates: Let's Give Them Something to Talk About (or, Why I don't care about SEO)

...Small business owners (among others) too often fall victim to a rather charming sales pitch about how their website traffic can be improved with a little bit of SEO therapy. [...] But let’s face it: nothing has ever been as awesome as making a genuine connection with your audience.

Matt Gemmel: SEO for Non-dicks

The key thing to understand is that the rules of SEO aren’t magic or arbitrary. They’re based on the goals of a search engine, which is to find relevant results. Relevance implies genuineness, and genuineness implies trust. So, shockingly, you should try to make your site’s content trustworthy, genuine and relevant. All of the rules have come about due to their utility in detecting those three positive metrics. Good SEO is a by-product of not being a dick on the internet.

I love that all three articles come from different perspectives but arrive at basically the same conclusions -- which are, incidentally, the same things that we tell our clients when they ask us about SEO:

• There's a bit of structural code-level stuff that makes sure your site is search-engine friendly and google-bot-readable.  We take care of that; we wouldn't even really know how to build a site that *didn't* take care of that stuff.
   
• Write good content so that people want to come back and read more and share it with their friends.  If your site does not have a blog or other often-updated content, that's OK.  Write content that answers the questions your users are asking -- what are your store hours?  What kind of services do you perform?  How do I get ahold of you?

Thanks to Matt & Leah & 51Bits (AKA Chris) for their great articles!

In my desire to overextend this website-as-house metaphor, today I'm writing about Drupal and timberframing.

Timberframing and Drupal:  Heavy and Adaptable

There are more ways to construct a house than you can shake a yardstick at:  adobe, concrete, steel, stick-built, SIPs, and tons more.  We think of Drupal as the post-and-beam construction of web development:  there's a steep learning curve for the builders, but when done correctly, it is powerful, extensible, and awesome.

(Totally not our chicken house).

Is Drupal overkill for a small website?  Probably. 

A 4-5 page site could easily be built in Wordpress or Dreamweaver, but what looks like overkill now will look like foresight next year when you want to expand your site.

Website-as-House Metaphor:  Our Poultry House

Here at webmeadow HQ, we keep a flock of poultry.  When we moved here, our birds had no place to live, so we built them a house.  Poultry shelter needs are pretty undemanding:  a dry, safe space out of the wind (and electric fencing to keep away the more toothy and hungry visitors).  We could have bought one of those wee garden sheds you see in the parking lot of the Home Depot, or we could have cobbled together something out of conventional lumber and plywood.

Instead, we built a timberframe structure.  We called the lumbermill down the road (Poulsens we loooooove you!) and they delivered our materials the next week, cut-to-order: 6"x6" hemlock posts and beams, with 3"x6" rafters.  The bird house ended up being 8'x16', which was also way overkill for a flock of (at the time) 11 ducks.  It's a hefty house!

A year later, when we decided to raise 35 chickens, there was plenty of space for all the birds together.  When we decided to put on a living green roof rather than shingles, the beams and rafters were plenty strong enough to handle it.  When we decided to extend out the rafters so we could keep more tools out of the weather, we didn't need to do anything to the underlying structure of the house.  And when we move, the house can hold goats, dogs, lawnmowers, or whatever the next owner needs.

Those beams and rafters seemed comically large when we built the bird house, but now we think we were being very clever and ahead of our time.

The future is never as far away as it seems.

That's why we build sites with Drupal, even the small ones.  Sure, sometimes it might seem a bit extravagant to use such a powerful system for a smaller site, but you'll be happy when you need to add a custom photo gallery / shopping cart / turkey roost and your site says, "Yes, please!"

----
Beautiful post-and-beam picture from Vermont Timber Works; sometimes I go to their gallery just to drool.

Want to learn post-and-beam construction?  Or how to build a canoe with your bare hands? Check out Yestermorrow Design/Build School; if you take a class you can come visit us nearby!

Whenever I chat with people about websites, I always come back to the idea that building a website is like building a house.  This will be the first post in a series designed to explain some basic concepts about building websites while making you sick of my house metaphor.

Project Budgets, and Why You Need One

People get squirrely when we talk about money.  I think the assumption is that if they tell us they have a budget of $10,000, we will come back with a proposal for $9990, even if it is only $4000 worth of work*.  Realistically, though, budgets simply help us determine which solutions will work for the project and your organization.

* We don't do that.  Honest.  If you have $10k to spend and only $4k worth of work, we will charge you $4k, and then spend a bunch of time figuring out what other awesome project you could pay us to build with your extra $$.  We're thinking long-term relationship here, not take-the-money-and-run.

Website-as-House Metaphor:  The Kitchen

Let's talk about kitchens.  When you're building a house, you need a kitchen.  What do you do in your kitchen? 

• Make food
• Make drinks
• Store food
• Cleanup
• Socialize
• Eat food

These functions can all be addressed in many great ways, and below are a couple examples.

1. Small space + small budget:

   

   Nice, huh?  Streamlined, simple, pretty plants!  Maybe you're not going to socialize in there, but it does everything else that a kitchen needs to do with a minimum of fuss.

2. Large space + large budget:

   

   Woo!  U-shaped island, open shelves, tons of storage, built-in seating, the works!   This kitchen meets all the needs listed above, too, but with a bit more oomph and luxury.  I bet you didn't even know you wanted a wall-mounted oven.  (Tip:  you do!  They're awesome.)

The Right Kitchen

When you're looking for the small, functional kitchen for yourself, the first solution is fantastic.  Similarly, the giant kitchen is a lovely solution for a larger house with family members cooking, eating, and socializing at the same time.  The key is getting the kitchen that's right for you, and not the large kitchen in your tiny New York apartment (or vice versa).

That's it.  A budget helps us create a solution that works for your needs.  Are we talking galley-kitchen, with 18sq.ft. of counter space and reusing existing appliances?  Or are we talking giant island, granite countertops, brand new cooktop and hood fan?  Both will meet the need of "place to cook meals and clean up" and both will be beautiful and a pleasure to work in, but neither one is right for everyone.

[Pictures shamelessy stolen from Ikea.com]

We're always on the lookout for fun ways to explain complex ideas to clients and friends, and it turns out the creative folks at Common Craft are specialists in making the concepts seem easy! 

Ranging in scope from technology topics like Twitter to financial topics like borrowing money, Common Craft has hit on a great method of introducing topics in a non-intimidating way.

In fact, thanks to Common Craft, I just learned ways to identify zombies, and confirmed useful zombie facts:  they don't eat candy (only brains) and they can't dance.  Now I know.

We ran across this great organzation the other day called TechSoup!

In their own words, "We're a nonprofit with a clear focus: to make it as easy as possible for other nonprofits and libraries to obtain and use the technologies they need to achieve their goals."  They partner with companies that make software (Adobe, Symantec, Microsoft, etc) to offer organizations massive discounts on products they otherwise couldn't afford.  For example:  Microsoft Office Professional Plus 2010 retails for $300+.  Even Microsoft's own non-profit license is $90.  From TechSoup the exact same software is $31.

Different bits of software have different licensing -- some are available only to non-profits in the US, some are available only to orgs with less than a $10million budget, many are available to groups that provide services that are pro-community if not necessarily non-profit (town libraries, community health clinics, arts organizations, vocational training programs), and so on. 

This is a really great service, and I especially love that they are not strictly focused on 501(c) organizations but instead offer their help to all sorts of community organizations.  I tend to lean towards open-source solutions (OpenOffice instead of MSOffice, Thunderbird instead of Outlook, etc) but they're not right for everyone.  If your organization needs commercial software, this is definitely a solution to check out.

A few weeks ago I read What makes a web app successful by Fred Wilson.  It's from talk he gave (transcript is below the video) at Carsonified, and since then I've sent it to 4 clients and 3 partners so I figured I should post about it up here.

His points are focused on web apps, which I define as sites that "do stuff" (Yelp, Twitter, etc) as opposed to sites that "say stuff" (most business websites, like this one!).  But I think that most of them are applicable to all web sites.  A few favorites:

• #4 Less is More:  It's so much better to have a site that does one or two things really well, as opposed to having 14 features that are all over the map.   Once you get a big audience then you can work on expanding your feature set.
   
• #3 Software is Media and #10 Playful:  You should have a good brand and consistent messaging carried throughout your site, from the login screen to the error screen.  If you've ever used MailChimp (which we love!) then you'll know what I mean:  there is not just a chimpanzee in the logo.  That dude is on every page, telling you funny messages and pointing you to bizarre chimp-based YouTube videos.  There's no technology challege to approaching your site like that, but you have to make a concious choice to make attitude an important part of the user experience. 

Read the rest and enjoy!

Since we're still on the concept of fonts here at webmeadow HQ, let's talk about Typekit, one of the most exciting things to happen to web design in many years.  We've been talking amongst ourselves about Typekit going on a year, so we thought it was time to share.

As most of you know, websites have been limited to a core set of fonts that are shared across various computer operating systems.  So, when designers create sites that use non-web-safe fonts, the question always becomes where to keep the font (and use a graphic) and where to make it web-safe (and use plain text).  As programmers, we like plain text because it can be used by everyone on all platforms (the hearing impaired, the visual impaired, the Internet Explorer 6 impaired, etc.).  Graphics look nice, but they're not particularly versatile.

To be fair, there have been some solutions to this problem in the past, like sIFR, but they've always felt like too much of a hack for our tastes.  We tend to like graphically stunning websites with elegant behind-the-scenes code.

Enter Typekit.  All of a sudden, there is a gigantor font library that everyone can view (yes, even Internet Explorer 6).  And even better for my sanity, Typekit is web standards compliant -- no more hacking to make a non-web-safe font appear!

The only potential drawback is that Typekit is a subscription-based service that has costs associated on a per-website basis.  As professional website developers, we actually view that as a bonus, because that means the Typekit folks are always improving their service.

Thanks Typekit -- we welcome the next stage of the web!

We recently came upon a great article by Hoeffler & Frere-Jones about combining multiple fonts in a single work.  We work with fabulous designers who know how to combine fonts in their sleep, but in our own lives and personal projects, we are always on the lookout for nice rules-of-thumb for graphic layout.

Hoeffler & Frere-Jones present four palette concepts, each complete with short, compelling descriptions and shorthand for roles that the fonts play.  My favorite concept is 'wit', mostly because each of the font roles is broken into 'tough', 'cheeky', and 'sweet'.  There are already some Christmas gift applications coming to mind!

Perhaps with the concepts from H & FJ, you can make your own newsletters, birthday cards, and other projects have a bit more impact, too.

Have you ever seen that Shakespeare play "As You Like It"?  Did you know that Kenneth Branagh made a version of it a few years ago set in Japan?  Well, he did.  It's pretty good, but there's that part in the middle where Oliver and Orlando are attacked by a lion...  and he didn't bother to change it.  I think I might have yelled at the screen, "A LION???  YOU MOVED THE WHOLE PLAY TO JAPAN, BUT YOU KEPT THE LION?."

Well, my friends, today's post is like a great big lion in the middle of Japan.  Which is to say, incongruous.  When we moved the whole site to solar hosting a few weeks back, we also changed blogging software, from LifeType to Movable Type.  Obviously, I didn't want to lose all the entries we had written before, so I set out to move them over to our new Movable Type installation.  Well, Google as I might, I was not able to find one bit of help out there in the wild interwebs.

Fortunately, I am apparently some sort of "programmer"!  So I wrote my own script that takes a LifeType database and converts all of the information into a format that Movable Type can digest.  I am posting it here for all the world to see, so that the next person who wants to make the same move won't have to reinvent the wheel.

Right-click and save this file.  There are instructions in it; you'll need to be a little familiar with PHP and your LifeType database to make this work, but at least you won't have to start from scratch.

Sorry for the interruption; I now return you to your regularly-scheduled duck-watching.