Science and Diplomacy

Science & Diplomacy

The publishers of Science magazine came to us with a challenge: Design and develop a web-based application for a new online journal comprised of long, in-depth articles.

We had to plan how best to present the very long articles, any of which could run thousands of words in length. A mobile-friendly interface help serve the lean-back visitors reading the site on their tablets, but what about those on smartphones and desktops? People don’t like to read large swathes of text while sitting at their desks staring at a computer screen, and smartphones are fine for short reads, but can be a bit small for comfort reading an in-depth essay. People needed to be able to save content for consumption later.

User experience

Users would come to the site via any of a number of platforms – desktop, laptop, tablet, smartphone – so the site naturally had to be accessible. Mobile was an obvious target. But what kind of mobile? A dedicated application would not help people following a link shared on Twitter or Facebook. (Forcing a user to download and install a bespoke application just to be able to access content in a mobile-usable way is not an ideal user experience.) So we knew that responsive design would be necessary.


Mobile wireframes and screenshot

The design began with mobile. Desktop layout built upon that.



Screenshots of the site on various devices

Responsive design was the easiest and most cost-effective way to support all devices with one editorial process.


With content requiring an investment of time and concentration, we also had to consider that users would want to bookmark an article to continue reading later. To make the Science and Diplomacy content available where users are, and easily re-found when they want to read, and when they have time to read, we chose to design the system to integrate with various service that people use for reading at their convenience, such as content bookmarking and repackaging services like Instapaper.


screenshot of article

The desktop layout has several breakpoints to adjust to different tablet sizes without breaking the magazine feel. Hero images and author bios help readers ease into the essays. On all displays, readers can bookmark the article for reading later on Kindle, tablet or other device of preference.


Science and diplomacy is not at its core a visually focused topic; we couldn't count on being able to break up long passages of text with photos and diagrams. Therefore, we turned to a staple of long-form journalism publishing — break-out quotes — to help give the eye landmarks and not get lost on the “page.”


screenshot of break-out quote

We implemented break-out quotes to help provide vertical rhythm and visual landmarks to the content presentation.


Implementation

Being a non-profit organization, and having a relatively short timetable before scheduled launch, AAAS was enthusiastic about having the site present their long articles in clean, legible fashion for for users on all platforms.


screenshot of schiencediplomacy.org

The simple, clean design for the content was applied outward, all the way to the header.


To stay with lean startup principles, we collectively agreed to not design a tablet/iPad-specific version of the site, but rather allow the relatively narrow 770px grid display to for both both landscape and portrait orientations of most standard tablets. Smaller tablets and smartphones would still get the mobile-optimized presentation.


screenshot of desktop version

The desktop layout highlights a handful of featured articles, while providing a Table of Contents area, giving the online publication a printed journal experiential feel.


We developed the site with Drupal 7 at the core, allowing us to complete the entire project, from strategy to deployment, in three months.

Tell us how we can help you