Ethan O. Perlstein – Open Science
Open Science Modular Grid with several integrated API content feeds.
Project Type: Web Design & Development 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.
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.
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:
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!
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!