Web Development

3 Ways to Inspire People to Use a Carbon Calculator

calculator.png

We recently launched an online carbon calculator for a non-profit we started called ConcordConserves.org (CCO). Since being introduced in January this year, 384,357kg of c02 has been eliminated and over 330 people have participated, far exceeding our expectations.

We first researched all the live calculators out there looking for the best features and platform for developing it. The calculator we came up with has 3 parts:

  • Calculate: The ability to calculate your footprint based on transportation, food and home energy use
  • Reduce: The ability to reduce your footprint by selecting actions from a list weighted towards local rebates
  • Compete: The ability to compete with others to see who can reduce the most

After investigating several web development platforms we decided to use Drupal, the open source content management system since it gave us the functionality and flexibility we needed.

Carbon Calculator Screen Shot

But what made the calculator appealing and how did we get so many reductions? Here are the 3 best aspects we think did the trick.

1. Compete: this feature has been far and away the most effective part. It’s implemented using groups. In this instance a teacher at the local high school decided to use it for the Earth Science department, where there are about 11 classes. Each class is a group and each competes with each other to see who can reduce the most.

2. Peer View: The calculator allows people to see what reductions groups have done as well as contact each other and post comments. Since peer relationships have shown to be one of the most powerful drivers when trying to influence and change people’s behavior, we wanted to emphasize this part. Adding community/social media features is a big plus when trying to get people to use an online calculator.

We also inserted a chart on the entry page showing how per capita emissions of Americans stack up to other countries. Don’t be surprised, Americans emit more carbon per person than just about any other country. This type of peer-to-peer comparison chart is a really effective way to get the point across and inspire people to act.

Carbon Per Capita Chart

Note the above chart also shows how many planet earths would be needed if everyone on the planet consumed as much as the average in that country.

3. Go local: There are a lot of calculators out there so we decided to make ours as local as possible. Remember ‘act local, think global’? The list of reductions starts with programs offered by the town (e.g. $5 off compact fluorescent bulbs). We also targeted the schools so that the calculator could be used in their curriculum. CCO is all about local too, making it easy to promote it within the community. We also included a master “everyone’s reductions to date” feature showing how much carbon has been reduced by everybody. This feature is an easy way for people to feel a part of a bigger group as well as feel like they are making a more significant contribution.

Calculator Reductions Screen Shot

We learned a lot from this project – about how to build online communities as well as how to engage people to improve the environment. Creating online communities is not easy but understanding what motivates people can make for a far more compelling online experience.

Note, a special thanks to the Concord Carlisle Community Chest for their generous grant, and the support of private donors as well as Fletcher Boland, Jessie Pearl, Christopher Lorch and Kitty Smith who built the calculator. Without their help it would not have happened.

What grade does your website deserve?

Bartlett's eValuator continues to prove that the majority of websites are not well optimized. Visually, anyone can see whether a website is well designed or not but many people are unaware of just how many other key elements make a website successful.

Based on the eValuator results dating back to October 2008, over 37% of the websites entered received a grade below 50%. See the pie chart below for a complete overview:


The grade is based on behind the scenes factors such as Google PageRank, indexed pages, meta tags, PR, and more.

To see what grade your website receives, try out the eValuator now.

Building an Online Community

CCM 1

With the growing number of social media outlets on the web, I thought it would be a great opportunity to build an online community out of the The Concord Conservatory of Music (CCM) website, www.concordconservatory.org.  I wanted to create an area for students as well as family and friends to experience all that the school has to offer.

In working with Bartlett Interactive, they were able to incorporate several features such as video streaming through a video sharing service, Vimeo, for watching music recitals, a Flickr photo gallery so anyone can upload photos of events and/or students playing instruments, as well as a link to the CCM Facebook page.

The ultimate goal is for everyone involved in The Concord Conservatory of Music to feel like part of a community. By sharing photos with one another, watching recitals, interacting on Facebook, and making the website more user friendly, we are able to make that happen.

If you would like to see how Bartlett Interactive built an online community for us, visit www.concordconservatory.org

Kate Yoder
Concord Conservatory of Music

Automatically Post Your YouTube Videos to Your Website

Recently, one of our clients, the Oration Group, asked that we find a way to post their YouTube videos to their website automatically. There’s lots of ways to do this including using several widgets YouTube supplies or by rolling your own feed parser.

Integrating the video listings with the visual styling of this site was essential, which ruled out the branded YouTube widgets. There was also a very small budget, which eliminated custom coding a feed parser to display the information exactly as we wanted.

Our middle of the road solution delivers a lot of functionality, with a minimal investment. You’ll have an automatically updating feed of video on your site in no time. Here’s how:

  1. Download the files (Courtesy of Feed for All)
  2. Edit the following code to use your website urls

    <?php
    $XMLFILE = "http://gdata.youtube.com/feeds/base/users/youryoutubeusernamehere/uploads?alt=rss&v=2&client=ytapi-youtube-profile";
    $TEMPLATE = "http://www.yourwebsitehere.com/sample-template.html";
    $MAXITEMS = "50";
    include("/rss2html.php");
    ?>

  3. Paste the script above anywhere on your php enabled website
  4. Upload the files to the base (root) folder of your website.

If you’d like to learn more about what this script can do, including many customization options, check out the full documentation.

How to Make Websites More Visual

Learn about 3 tools that can make your website more visually interesting, simply and inexpensively. Our screencast "How to Make Websites More Visual" discusses ThickBox, SlideShow Pro, and Flash video with numerous examples and pricing info.

Websites are Like Pies

Websites are like pies

Whether you're making your own website, or going to a design firm, you need to know a bit about web hosts. It may not be the most exciting topic, but I've explained it in a language everyone can understand. The language of pies.

Bartlett Video | Websites are Like Pies

Really, they are.

Fun With jQuery: The Big Dance

Heard of jQuery yet?

It's a new way of working with javascript, and it's incredibly concise.

Let's see what we can do with single lines of jQuery:

Click here to make new friends

for( i=0; i<35; i++ ){ $("#box").append('<div class="friend"></div>'); }

That was easy, but they look bored. Let's make them dance.

Let's Dance!

setInterval( function(){ $(".friend").each( function(){ $(this).fadeTo('fast',Math.random()); } ); }, 500 );

You call that dancing?

I said dance! Dance!

setInterval( function(){ $(".friend").each( function(){ $(this).fadeTo('fast',Math.random()); } ); }, 250 );

They're dancing too hard! Stop!

But I enjoy the dancing!

setInterval( function(){ $(".friend").each( function(){ if( Math.random() > 0.9 ){ this.zIndex = 666; this.style.background = 'url(dead.gif) center center no-repeat'; $(this).fadeTo('slow',0.2 ) } } ) }, 250 );

Well this is just terrible.

Sorry, let's clean up this mess.

$("#dancefloor").slideUp();

That's jQuery.

If you want an in depth lesson on jquery, start here.

Otherwise, all you need to know is that it takes code like this:

Traditional Javascript:

var element = document.getElementById("box");
if( element.style.display != 'hidden' ){
element.style.display = 'hidden';
} else {
element.style.display = 'block';
}

And replaces it with something like this:

JQuery:

$('#box').toggle();

JQuery is also useful for more practical tasks. Want a slideshow, voting system, or form autocompletion? JQuery makes it all easy, whether you code from scratch or use any of the hundreds of free, open source plugins.

It's not just pretty, either. Dynamic loading with jQuery's ajax functionality can lower server load dramatically.

Let's look at a simple ajax request to pull some content from the server:

JQuery code:

$.get("content.xml","",function(x){ $("target").html( x ) });

I'd include the alternative code here, but it's so long that it would simply be rude to do so.

That's the basics of jQuery. Really simple interactive coding. Plus, it's free and open source.

Read more about it at jquery.com, or check out our eValuator, which uses jQuery for visual effects.

How Healthy is Your Website?

A free website tool called the 'eValuator' will show you what you didn't know about your website.
 
With the rapid pace of development in web technology, it is hard for companies to pinpoint key factors that comprise a successful website. Often times things look normal to viewers, yet businesses can see they are not getting the traffic and conversions they need from their websites. Knowing what website improvements result in higher ROIs can be difficult, which is why we have launched a website tool called the eValuator, as a guide.

The objective is to provide businesses with a resource to gauge the health and value of their website and to address the challenges that they face when trying to optimize their business presence online.
 
                                 eValuator

The eValuator uses a scoring system to grade a website based on different indicators, such as:
- Google PageRank
- Alexa TrafficRank
- technical errors [e.g. clean URLs, nested tables]
- marketing components [e.g. meta information, press releases, XML sitemap]
- analytics
 
Each is weighted separately depending on its level of importance in comparison to the others. To help those who are not familiar with specific terms, each indicator includes a description of what it is, why it is important and ways to improve performance. It is best used as an educational tool, enabling marketing directors to have a better understanding of how to boost website traffic and increase sales.

To enter a website and receive a score, check out the eValuator.

The 3 Parts of a Healthy Website System

Branding, Marketing and Functionality Venn Diagram

There are many ways to view websites, Internet marketing and the different components that comprise the online marketing ‘cloud’. Over the years, I’ve come to see that what we do for clients i.e. design and develop websites, is comprised of 3 parts; branding, marketing and functionality. And for a website to function properly, all 3 parts not only need to be implemented effectively, but also need to integrate well together. This is no small task and is rarely done well.

Part 1 - Branding

Branding on the Internet is an amorphous term that contains many parts, such as: a logo, tag line, user interface [look + feel], messaging [headline copy], text, photos, graphics, video, illustrations, motion graphics, demos, information architecture, interactivity etc. All of which fall under the term the ‘User Experience’.

This constitutes what is said, to whom and why it is said. Without the right message, to the right people, websites fail to meet their most basic task – communicate effectively to the target audience.

Typically the branding/user experience suffers because it is under too much pressure to serve too many interests. The ‘more is more’ rationale typically wins out. The best interfaces often are the ones where the content comprises the majority of the page and the ‘look + feel’ is secondary, minimal and simplified.

Part 2 – Marketing

The marketing component of a website is even more amorphous than branding, since it’s evolving and expanding into something very different than what marketing was originally conceived to be. So new terms have arisen such as ‘demand generation’, ‘inbound marketing systems’, ‘viral marketing’ and ‘search marketing’ as well as many new terms such as SEO, SEM, black hat techniques, landing pages, doorway pages, sales funnels, link farms, favicons, bounce rates, keyword density, link rot, CPA, CPC, PPC, meta tag generator, Twitter, Flikr, digg, del.icio.us and the list goes on and on.

Nonetheless, the most common types of Internet marketing programs are: e-mail marketing, search marketing, pay-per-click advertising and analytics/measurement.

Regardless of the shifting sands of online marketing terminology and processes, websites suffer if at least some of these programs are not effectively used. They suffer in many ways, mostly from reduced traffic and decreased visibility on the Internet.Read more

The 4 D’s of Web Development

To ensure the highest quality web site and effective project management, we implement a 4-phase development process:
 
Define, Design, Develop and Deploy
 
While these action items are meant to be comprehensive, we are committed to a collaborative approach in order to produce the most effective and customized website that meets our clients needs.

Read more

Syndicate content