Tech Tips Blog

By now, most of you have seen our ideas4oregon campaign (you can read the original announcement) and some of you might be wondering about the tools we used to run the campaign. I thought I'd outline what we did, for those who are interested.

We could have posted this on our own website, but there were some issues:

• We would have had to use something like a forum, which is designed for conversation and okay for accepting ideas, but klunky and not very useful in terms of making existing ideas easy to find and avoiding duplicates.
• Because the campaign was open to all Oregonians, but our own website is mostly of interest to grantseekers, we would have gained a large number of new users on our site who would post an idea/comment and then never return to our site.
• The spike in interest would probably have meant making upgrades and changes to our site that would be unnecessary after the month-long campaign was over."
• It looked like being a substantial amount of work.

We considered a few options, but all of them seemed pretty work intensive, except for a proven service called UserVoice which is designed to make posting ideas and suggestions quick and easy. Best of all they combined the submission with a clever search that let you know that you might be posting a duplicate idea. It was a near-perfect solution for us, but unfortunately for us, UserVoice is built around voting (visitors can vote for the ideas of other visitors and ideas are sorted according to popularity) and the decision had already been made on our end not to allow voting for Ideas4Oregon. Our designer, Theresa Pridemore, found a way to hide the UserVoice voting from visitors to the site, and that clinched it. We decided to go with UserVoice. It was a decision that turned out quite well for us.

Overall, our team really liked UserVoice as a tool. There are still some areas where improvement is needed (e.g., the profanity filter knocked out the words Fred and zero, along with others we couldn't ascertain, we don't get the logic the filter uses), but it is already a very solid ideas platform, out of the box, with a lot of great features.

UserVoice were excited about what we'd done to use their tool without voting and they wrote a blog entry featuring our ideas4oregon.org site, but I was forced to comment there this is not an ideal solution. Read that entry for more information on this count. My initial comment is below.

My name is Grant and I'm the software guy who set this site up for MMT, with help from a designer. In fact, the designer is the one who deserves most of the credit for our solution. We're big believers in sharing knowledge, so I thought I'd share with you our lessons learned from this approach, now that the idea-gathering phase of our ideas campaign is over.

Overall, our team really liked UserVoice as a tool. There are still some areas where improvement is needed (e.g., the profanity filter knocked out the words Fred and zero, along with others we couldn't ascertain, we don't get the logic the filter uses), but it is already a very solid ideas platform, out of the box, with a lot of great features. I could have set up a CMS/forum site to do this, but it would have been a lot more work, would have lacked some of the best UserVoice functionality and would have been reinventing the wheel, to some degree. The search-add functionality in particular would have been hard to beat.

Even so, UserVoice without voting has some challenges. We elected to go this route out of need, mostly the need for speed (of development), but there are several reasons not to use CSS to hide voting, including the following:
* To change the CSS you have to pay the maximum for your UserVoice account, which makes this an expensive option for those with limited funding.
* Hiding voting through CSS is a hack that made me squirm a bit. UserVoice is designed around voting and is not designed to aid this hack. As a result there are not enough targetable HTML tags, so sometimes you have no choice but to hide helpful text/functionality along with the voting. All the images we use had to be set up on another website. On one occasion we were unable to target voting text and had to use CSS to drop in an image to overlay it. Further, some of it was clunky in the execution.
* We could show and hide text, but we could not change it, so some voting wording has to remain, for example, the page currently has a banner that reads, "This forum has closed. No more *voting* is allowed."
* UserVoice's algorithms that determine "what's hot" factor votes in and appear not to work to any logical degree without voting. This is further confounded by UserVoice mostly defaulting to 1 vote, but sometimes defaulting to 0 votes.
* It is easy for anyone with the most rudimentary browser CSS tools to change our CSS from their browser and show all the hidden idea HTML and then to add more votes to their idea in order to artificially fool the algorithms into thinking their idea/s are more popular (hotter). Yes, this did happen. Initially I limited this slightly by keeping the votes limited, but this also limited the number of ideas users were allowed to post, so I was forced to undo this.
* I could not change votes from the admin end, so I could not correct any of the above issues where the wrong number of votes were assigned.
* It added a level of complexity to cross-browser testing that you don't otherwise have to worry about.

In conclusion, we got a lot of good things out of the service, but we cannot recommend the use of our approach to get a voteless forum working. It's doable and we mostly got away with it because our campaign only ran for a month, but a much better solution would be for UserVoice to work this sort of option into their software. Even so, we have shared our CSS and HTML for our solution and we hope others find it useful. The most credit belongs to Theresa Pridemore, our designer, who wrote the CSS in a time crunch.

Thanks so much for featuring us and for being excited about us doing something different with your service. I hope all this is useful to others out there.

If you'd like to see the HTML and CSS we used, I have included it
below, laid out per the UserVoice sections:

CSS

body {
  background: #84b4be url("http://www.mmt.org/sites/all/themes/custom/mmt/images/uservoice-background-repeat-x.gif") repeat-x left top;
}
#page-header {
  background:url("http://www.mmt.org/sites/all/themes/custom/mmt/images/uservoice-ideas-for-oregon-header.gif") no-repeat center top;
}
#welcome {
  font-size: 1.35em;
}
#cstm-footer {
  width: 870px;
  margin: 0 auto 20px;
  padding-bottom: 20px;
  font-size: 1.1em;
}
#cstm-footer img {
  border: 0;
  margin-left: 10px;
  float: right;
}
#follow-text {
  float: right;
}
#cstm-footer-left, #cstm-footer-right {
  width: 49.5%;
  float: left;
}
#cstm-footer-right {
  text-align: right;
}
#cstm-footer-left .inner, #follow-text .inner {
  padding-top: 0.7em;
}
.uservoice-component #ribbon.page {
  margin-top: 0;
  color: #FFF !important;
}
.uservoice-component #ribbon.page a {
  color: #FFF !important;
}
#search {
  background-color: #9fd786;
}

#status {
  display: none;
}
#page-header .top-nav {
  left: auto !important;
  right: 13.5em;
  z-index: 110;
} 
.left-column {
  display: none;
}
.powered-by {
  display: none;
}
.suggestion .content {
  margin-left: 0;
  padding-left: 60px;
  background: url('http://www.mmt.org/sites/all/themes/custom/mmt/images/light-bulb-idea.png') no-repeat 10px 0;
}
select[name="suggestion[votes]"] {
  display: none;
}
#uservoice-dialog form, #uservoice-dialog #pane {
  background:url("http://www.mmt.org/sites/all/themes/custom/mmt/images/uservoice-popup-bkg.png") no-repeat left bottom #FFFFFF;
}
.uservoice-component form#new_suggestion fieldset {
  margin-bottom: -10px;
}
#uservoice-dialog form #new_suggestion_submit {
  margin-top: -50px;
}
.sidebar .rank {
  display: none;
}
.sidebar .details {
  display: none !important;
}
ol.search-results-header h3 {
  display: none;
}
#search-results .search-results-header li small {
  display: none;
}
#search-results .search-results-header li em {
  display: none;
}
.sidebar .scores {
  display: none;
}
#extra-div {
  margin-bottom: 20px;
  background-color: #cce0e4;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  border: solid 1px #ddd;
  font-size: 12px;
}
.i4or-instructions {
  width: 870px;
  margin-left: auto;
  margin-right: auto;
}
.i4or-instructions .inner-footer {
  padding: 5px 20px;
}
.i4or-instructions h2 {
  color: #FFF;
  margin-bottom: 5px;
  font-size: 2em;
}
#header-link-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  z-index: 100;
}
#header-link-wrapper .inner-header {
  margin:0 auto;
  width:870px;
  position: relative;
}
#jump-link {
  border-color:-moz-use-text-color #CCCCCC #CCCCCC;
  -webkit-border-color: #CCCCCC;
  border-color: #CCCCCC;
  border-right:1px solid #CCCCCC;
  border-style:none solid solid;
  border-width:medium 1px 1px;
  -moz-border-radius-bottomleft:0.5em;
  -webkit-border-bottom-left-radius: 0.5em;
  -moz-border-radius-bottomright:0.5em;
  -webkit-border-bottom-right-radius;
  background-color:#FFFFFF;
  display:inline-block;
  font-size:120%;
  padding:0.3em 0.5em 0.2em;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
}
#jump-link a {
  color:#074E54;
  text-decoration:none;
}
#jump-link a:hover {
  color:#0066CC;
  text-decoration:underline;
  background-color: #FFF;
}

Header

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16932847-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Body Top

{{ header }}
<div id="header-link-wrapper"><div class="inner-header"><div id="jump-link"><a href="#guidelines">Posting Guidelines</a></div></div></div>

Body Bottom

<a name="guidelines"></a>
<div class="i4or-instructions"><h2>Guidelines for Posting Ideas</h2></div>
<div id="extra-div" class="i4or-instructions"><div class="inner-footer">
	<p>
		Oregon was once known as a place where new, creative thinking flourished and people weren’t afraid to face hard truths and take bold steps. But lately Oregon conversations are full of pessimism and cynicism. We all know Oregon is in a world of hurt. We’ve grown accustomed to hearing what’s wrong here.
	</p>
	<p>
		Meyer Memorial Trust wants to help change the tone of the conversations and  jumpstart action that again makes our state a place where ideas begin and grow. But we need your help. Tell us what you think is the most pressing issue facing Oregon that an investment of up to $1 million from MMT could provide meaningful support and leverage over the next two years. Give us your best ideas about the form that support and leverage might take.
	</p>
	<p>
		This is not a time for faint hearted suggestions. We're looking for bold and innovative approaches. And while the nonprofit sector is proving itself to be resilient, innovative and inspired in these times, we need to move beyond categorical thinking and invite all sectors to work together to address the issues we face before it's too late. This is not the place for an organization to make a pitch for funds on its own behalf. We’re looking for ideas that rise above individual organizations and constituencies.
	</p>
	<p>
		Asking for public input in this kind of forum is new for us. Frankly, we don’t quite know what to expect. But we have faith that Oregonians will take this process seriously and contribute their best thinking. We believe Oregonians are ready to reengage and stay engaged and work together to find solutions. But awarding the million dollars depends on the quality of ideas—if we don’t have sufficient participation or we don’t find a good match with MMT’s mission and values, we reserve the right to find another route to helping create a better future for Oregon.
	</p>
	<p>
		We are confident Oregonians won’t let us down. We expect lively—but civil—discussions. We desire innovative, entrepreneurial ideas…the kind Fred Meyer might have had.
	</p>
	<p>
		Thank you for jumpstarting a better future for Oregon by submitting your million dollar idea below and/or commenting on ideas already suggested.
	</p>
</div>
</div>
<div id="cstm-footer">
  <div id="cstm-footer-left">
    <div class="inner">
      <a href="http://www.mmt.org/" alt="Meyer Memorial Trust Site Home">MMT Home</a> | <a href="http://www.mmt.org/blog/whats-your-million-dollar-idea-oregon" alt="Ideas 4 Oregon Announcement Blog Entry">Ideas 4 Oregon Announcement</a> | <a href="http://www.mmt.org/staff" alt="Meyer Memorial Trust Staff Directory">MMT Staff Directory</a>
    </div>
  </div>
  <div id="cstm-footer-right">
    <a href="http://www.twitter.com/meyermt" alt="Meyer Memorial Trust on Twitter"><img src="http://www.mmt.org/sites/all/themes/custom/mmt/images/socialmedia/twitter_32.png" alt="Twitter Icon" /></a><a href="http://www.facebook.com/meyermt" alt="Meyer Memorial Trust on Facebook"><img src="http://www.mmt.org/sites/all/themes/custom/mmt/images/socialmedia/facebook_32.png" alt="Facebook Icon" /></a>
    <div id="follow-text"><div class="inner">Follow us:</div>
  </div></div></div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16930207-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>