Blog: March 2007

Announcing the Knight Citizen News Network

March 30, 2007

Knight Citizen News Network: Helping citizens and journalists amplify community news

March 26 was the official launch of the Knight Citizen News Network, www.kcnn.org. We worked with Jan Schaffer and the other fine folks at J-Lab (University of Maryland) to design and build this truly enormous site where you can find all kinds of help and information on citizen journalism.

Some terrific citJ people are involved: Jan Schaffer, JD Lasica, Dan Gillmor, Amy Gahran. And, there will be more! The site’s future growth will be sustained by development of new learning modules. J-Lab will be giving out periodic grants to journalists and others to reseach some aspect of citizen journalism for publication on the site. We’ll let you know as these modules—pretty large Web sites in themselves!—become available. For starters, though, check out Principles of Citizen Journalism, Using E-Mail to Jumpstart your Newsgathering, Training Citizen Journalists, and the comprehensive Directory of CitMedia Sites.

Building this site posed some special challenges for Hop Studios. First of all, the site need to be part of a family of J-Lab Web sites we’ve designed—J-New Voices, and J-Learning—without too strongly having the flavor of one or the other of those resources. And, of course, we had to meet the particular design requirements of the KCNN site itself. We tackled the challenge by focusing on the details: rounded corners on boxes, color-coded sections, font faces, and use of color. The result makes KCNN a first cousin to J-Learning and J-New Voices. A cool first cousin.

The other big challenge also fell into the design area: Jan Schaffer at J-Lab wanted the module developers to be able to have control of their own designs, so that even if they were creating content for the KCNN site, they could do so in the style that best suited their presentation. And, for good measure, she didn’t want to make that privilege a burden, so that module developers who weren’t independtly design-minded, had a reasonable way of producing pages within a usable and attractive framework.

After we stopped weeping, we got to work. Our solution was evolve a set of requirements and suggestions, and then to produce some standard templates for the module developers. Among other things, module creators are required to include a standard header containing the KCNN site navigation on all module pages, no matter what they look like, and to make all pages printable. And we suggest that module creators standardize link colors, use certain font sizes, and provide ways for people to interact. Together, we hoped to create requirements and suggestions that left the door open for experimentation, but still resulted in modules that were accessible to KCNN site visitors.

Then we turned our attention to the templates. The idea was to create a set of standard templates in the formats most likely to be used by module creators: text pages, blogs, video files, and photo galleries. The style of these templates matched the overall style of the KCNN site, but included specific ways for the modules to include titles, credits, navigation, and of course, nice photos and quotes.

The templates are incorporated into our favorite content management system, EllisLab’s ExpressionEngine. Implementation hasn’t been without its foibles, as I know JD Lasica can tell you, but we’re pretty pleased with the result.

Why not head on over to KCNN and leave a comment?

Posted by Susannah Gardner at 6:17 PM | Comments (0)

Four in One Day

March 26, 2007

It’s been a busy, busy day in Hop Studios land.  Never before (and dare I say, never again?) have we launched four sites in one day!  Expect a full write up of all of them, but here’s the bullet points:

  1. First was eMarketing101, a great little EE site run by Alex Brabant. I think Matt did a gorgeous job on this one, and it’s a hot rod of a site, with many little features that’ll make it a HUGE hit with the search engines—I would expect no less from Alex.
  2. Next up is KCNN.org, the Knight Citizen News Network, which is a huge, and I mean HUGE, site promoting citizen journalism.  This site has some of everything, technology-wise.  More importantly, I think it is even on its launch day one of the best resources online for those trying to do citizen journalism, and it’s going to get even better over the next month. Just a brief look at the folks involved: Jan Schaffer, JD Lasica, Dan Gillmor, Amy Gahran, and other stars soon (I can’t give away the surprise!)
  3. This is a neat one: VacantReady, a site for hoteliers and others in the hospitality industry.  The site’s owner, Chris Clarke, is a natural blogging prodigy, and working with him is like flying a box kite in a brisk thunderstorm—great fun, and we get a lot of energy from it, too.  In a reversal from our usual pattern, Chris wanted us to first launch his site and then start work on it. So, we’re developing live, and rolled out the platform installation, and then the design, and soon some kick ass features, while all the while he’s already blogging and building community around the framework we’re erecting.  His site today got the official look and feel rolled out; I consider this the launch of the beta phase on top of what was the alpha.  It’s a drop dead gorgeous site, come check it out.
  4. So I figured today would be our all-time record three-launch day.  Then, Aileen called.  She needed a placeholder site.  Like, today.  Sure, no problem.  Aileen got a one page wonder, but for her new business, that was all she needed.  And the thought of getting four Web sites up in a day was too good to pass up.  So give a welcome to Sharp Pen Strategies.

And now we’re going to go lie down. (Update: Hey, why don’t I use the OL tag?  Yeah, that’d be perfect!)

Posted by Travis Smith at 11:24 PM | Comments (1)

Hop Studios Spawns ThinkSalmon

March 21, 2007

Screenshot of Think SalmonToday is a good day.  Today, we attended the launch event for Think Salmon.  Sure, we’ve launched Web sites before, but this is the first launch we’ve done that’s been attended by a government minister (BC Minister of the Environment, Barry Penner), with speeches and banners and buttons and more.

If it was up to me, I’d describe it as a kick ass site that lets people learn and share how important and cool salmon are to British Columbia and to the planet.  However, the site describes itself as “inspiring individuals and organizations to contribute to the best possible conditions and environment for British Columbia’s Pacific salmon.” Same difference.

The site has been a long time in development, and it shows - even though it just launched, there’s some amazing Google Maps integration, a mailing list, customized site registration, clean URLs, a savvy RSS feed, and a bit I’m particularly proud of: Comment flagging, where users can participate in removing comments that are inappropriate.  This was custom-built for the site’s ExpressionEngine content management system, and perhaps I’m overly proud of it, but there you go.

Of course, the design itself is also something we’re proud of; there’s an awful lot of work that went into making it so clean-looking. The site uses non-standard fonts and fairly complex layouts, but everything can be managed by someone knowing just a little HTML, and the home page can be edited and scheduled in advance, which is really nice when you want to keep the site fresh but don’t want to have to edit it every day.

Users can come to the site, sign up and be sharing photos, stories, events and more within minutes, and it took a heck of a lot of work to make the site registration system work so well.

Lastly, of course, there’s the data on the site.  For one think, there’s a searchable index of all the projects funded by the Pacific Salmon Foundation in the past 15 or so years.  There are dozens of stories, a whole section devoted to Salmon facts, and a section that highlights the latest salmon-related news.

We have a lot planned for the next phase of the site, but I can’t share that with you yet.  Think: SalmonCast—oh no, I think I’ve said too much already!

It’s also important to note that this entire project was managed by the great folks at Work Industries, who connected us with the client, the Pacific Salmon Foundation, and guided the project canoe down the long milestone river to the ocean of launching, so to speak.

Posted by Travis Smith at 6:27 PM | Comments (0)

A Design Dissection of EllisLab.com (formerly pMachine)

March 20, 2007

Here at Hop Studios we are big fans of a content management system called ExpressionEngine. We’ve used it for at least the past two years, and some of our biggest and more exciting projects are run using heftily tweaked and configured installations of this amazing tool. (Both Truthdig and Think Salmon, for example, are run using ExpressionEngine.)

The creators of EE, EllisLab, changed their company name from pMachine two weeks ago, just in time for SXSW. At the same time, they completely redesigned their Web site and added a site dedicated just to ExpressionEngine.

All that to bring me to the point of this post: an excellent article written by the Web designer EllisLab hired to do the redesign work.

Redesigning the ExpressionEngine Site by Jesse Bennett-Chamberlain

This is a piece about a product we love, but even better, it’s a dissection of how a Web design project typically works in our shop as well. If you’ve ever wondered what we’re doing in between graphic comps and Basecamp messages, this article should give you a good idea. Every design job is different, of course, but most of the time the basic process ends up being the same, give or take a pixel here and a Javascript there.

I especially like Jesse’s description of what is needed from the client in order to get started:

“The first thing that I requested from EllisLab in order to get the wireframing stage underway was a list of design elements that they wanted to display on the home page. After a couple of hours of discussion around Rick’s dinner table, we narrowed down the sections to include:

  • Nav, super-nav, logo  
  • Large expansive banner graphic  
  • Links to download ExpressionEngine and take a feature tour  
  • Introduction message  
  • News, blog posts  
  • Featured users (bloggers / developers / business owners + featured user)  
  • Footer

“During that conversation, we also discussed the design direction that they wanted to head in, which I will touch on in the next section. With this list of design elements, I was able to open up Adobe Illustrator and get started on trying out some different layouts.”

Posted by Susannah Gardner at 5:15 PM | Comments (0)

Spam Scams Stopped by Sam Members!

March 7, 2007

We were privileged to redesign http://www.samharris.org in July of 2006. Along with the Web site of this influential thinker and writer, we inherited oversight of a thriving forum community. Filled with active members, the Sam Harris Forums explore issues of faith and society. However, an unfortunate side effect of the popularity of Sam’s new book “Letter to a Christian Nation” also attracted a thriving community of parasites.

Spammers posted dozens of unwanted, potentially offensive links, images, and ads in the forums. We were deleting ten or more member-reported ads every day, and still missing countless unreported spam posts in the depths of involved discussion threads. We couldn’t stem the tide of crud!

Finally, in a move that will hearten states rights enthusiasts, we deputized the locals. Especially active members were invited to step in and delete offensive posts themselves. The results were immediate and stunning — there is no longer spam on the site, new spam is deleted as soon as it goes up, and the forums are still vibrant!

We wish we could take credit for this, but time and again web communities demonstrate that sharing responsibility means a better experience for everyone. Unless you’re a spammer.

Posted by Matt Gardner at 10:51 AM | Comments (0)

From the Blog

  • Click to fill out the Hop Studios Quote Request Form



 

Recent Blog Posts

RSS Feed


Archives