Spruce interactive


Ethan O. Perlstein – Open Science

Open Science Modular Grid with several integrated API content feeds.

Project Type: Web Design & Development

{ Visit Website }

 Details

Perlsteinlab.com is an open science platform consisting of module content blocks which are populated by various feeds (both internal and external). The Spruce team felt this site needed to be heavily gridded and as flexible as possible to house a wide variety of content, which could shift and scale to fit together like a big wacky puzzle that is both fun to interact with as well as easy to read. In addition, we wanted to make the back end simple and easy to administer, regardless of whether the content was coming straight from a post or from an external site via API.

Responsive Modules

Our first step was to create a system that responded to the viewport. The boxes within the grid are flexible and will scale down from any number of columns wide to a single column on smaller devices. Then, on article pages, we made text size scalable, relative to the browser window.

Pulling in Content from Various Sources

Part of the open science model is integrating fully with content published on a variety of science-based websites where users share and comment on published documents, research, etc. We pulled in content and metrics data from Mendeley, Figshare, Altmetric, pLos One, and Twitter. Any user on the the Perlstein Lab website can gain quick access to any data associated with a published article from any one of these sites, and the admin of the site can easily connect these works to the site by simply entering in an ID for the article.

In addition to content from other sites, internal content is also displayed within the grid blocks. For example, blog posts and featured articles are posted within the site infrastructure and appear alongside external content. Every article is shuffled into the grid in chronological order by post date.

The Grid is also equipped to display multi-media content, like slideshow images and videos.

Content Filtering

The user can quickly access certain types of content by clicking on any category within a content block, and the grid will automatically sort. For example, here is a quick filter to display only blog posts:


Getting Help

We think the grid is fairly intuitive and will likely be fun for lots of folks. But, as a fail safe, we created a simple “how to” section with a handful of slides for users who might not be sure how to dive in.

Engaging the Reader

The single article page, as well as having metrics if/when available, can also be converted or saved to Readability (an excellent application for saving articles in a readable format). The look and feel is similar to Amazon Kindle™ text format, and there is also an option to export directly to Kindle™ from the post page. This is a nice feature for anyone wishing to save the article to a device, or who might want quick access to it later on down the road. Articles are also able to be tagged, and are easily shareable to every social network or via email.

The community surrounding the site is highly communicative, so the site required a robust commenting system. We went with Disqus, which we find to be a reliable system we recommend to many clients with an active community such as this. It’s easy to use/manage for both users and site admins alike.


Perlsteinlab.com has attracted considerable attention from the scientific community, as it represents a new breed of laboratory website with a focus on sharing research directly from the source. So far he’s received write-ups from MedCity News (“One scientist’s quest to rid the world of boring research lab websites”), Figshare (“The greatest lab webpage ever?”), and BMJGroup (“A new species of lab website?”). A recent article in TPM called the site “slick”. Below are two videos that explain the Open Science movement and walk through the site, each with narration provided by Ethan.


In response to overwhelming praise from visitors, we decided to make the PerlsteinLab theme available as a free WordPress theme, in the hope that ambitious scientists might take a stab at creating their own versions. This is currently in development, and will be available in Summer 2013.

Emmanuel Dumont got in touch with us recently and asked us to help him cross the finish line with a final product. He’d already done much of the work himself, but we swooped in and polished things up a bit. We stripped the APIs and static pages, while adding a new custom Instagram module and making numerous improvements throughout. This is a lean and blog-friendly version of its more fully featured predecessor–we’re thrilled with how it turned out! You can drop in and see for yourself at emmanuel-dumont.com. In the meantime, here’s a nice snapshot:

For a slightly different look, with pages floated inline (and at random) right on the homepage grid, check out Lorena Barba’s research group website. We completely re-wrote our Twitter and Figshare modules for this build, increasing speed by 150%. Her publications page is powered by a custom database table that allows us to dynamically show lists by year, topic, author, and more!

Lorena A. Barba Group : Professor Lorena A Barba’s research group at Boston University.

Peccoud Lab is our most advanced build yet, integrating a homepage slideshow with an interactive animation and brand new Mendeley & AltMetric modules. Stay tuned for even more improvements coming over the next couple months!


Peccoud Lab : Systems and Synthetic Biology

Talk to Us

Wise men have said, "All good things must come to an end", and so it was with Spruce. We began our first project in 2006, and completed our last in Fall 2013. It's been a wonderful experience, but now it's time to begin the next adventure.

Though...we wouldn't want to leave you hanging, now would we? Here are our top recommendations for world-class branding, design, and web development:

  • Kristina (KJ) Parish and Beam Collective:
    KJ provided the artistic vision that allowed Spruce to succeed, and we still think she's the greatest designer in the entire world. She's started a new collective with some talented developers, and is covering much the same territory as Spruce--design and development all under one roof, with a caliber of service and professionalism seldom seen in this business or any other. If you like what you see on the Spruce site, then definitely get in touch with KJ at kj@beamcollective.com
  • Permanent Art & Design
    Permanent is a nationally recognized design & branding firm out of Minneapolis, MN. They've been a long term collaborator and strategic partner over the past couple years, and we'd recommend them for medium to large sized businesses/organizations who are serious about putting their best foot forward. In addition to design, Permanent offers strategy and marketing services, plus in-house and networked developers. For more information contact Joseph Belk joseph@permanentadg.com
  • Nate Thompson
    A freelancer, Nate reminds us of ourselves back in the day. Smart, communicative, and skilled, Nate is our recommendation for small to medium sized businesses/organizations who have sites built on Wordpress or other open source content management solutions. With a background in both design and development, he's a one-stop shop for most web-related tasks. You can get in touch at nate.a.thompson@gmail.com
  • Kevin DeBernardi
    Designer turned developer, Kevin is embarking on a freelance web career after working as the in-house designer at the Museum of the City of New York. He's adept at translating his design ideas into custom PHP code, and is constantly expanding his technical palette. Kevin's a good choice for projects that don't quite fit into the Wordpress mold, and that would benefit from a consistency of presence and vision from design through execution. Kevin can be reached at kevin@analoglifestyle.com