Practice: Postlight’s Book Now on the Web

For Postlight’s one-year anniversary in October, we created Practice, a book of highlights from our Track Changes podcast. The 61-page, soft-cover print book is a collection of insights about building products that you can hold in your hand and easily flip through — something you can’t do with podcast episodes. (Get yourself a free copy of Practice here!) Just like podcasts aren’t easily scanned, print books aren’t easily distributed, so we knew it was time to take Practice to the web.

Adapting print content for the web is a challenging task in general, and Practice had its own unique traits. The book is made up of 18 chapters, each of them a short (300–500 word) excerpt from a podcast interview. Designed by Matt Quintanilla, the book also has a strong typographic style that we planned to base the web version on.

But even with an established design and shorter bits of web-friendly content, bringing this book from paper to the web wasn’t a straightforward port. Things on a web page can move and respond to the reader’s actions, and unlike a book, you don’t have to show people everything all at once. There were lots of decisions to make along the way.

The Single-Page Book

Our design team discussed if each chapter should have its own page, but there wasn’t enough text in each chapter for that to feel compelling. I looked at interesting executions of digital books, including one with a unique single-page navigation, using the table of contents to hide and show content. Ultimately, the short chapter lengths of Practice and its high number of chapters led us to decide on a single page, so that readers can quickly move from one section to the next, reading without interruption.

Navigation was our biggest opportunity to take advantage of the dynamic and interactive nature of the web. On desktop, where vertical space for the persistent side navigation is limited, job titles of interviewees are exposed in a hover state. On mobile, which uses a scrolling navigation drawer, job titles appear as a subhead for each chapter. The dots on the navigation help to keep readers oriented, which is important since each section can be individually shared on Facebook or Twitter, so readers are not necessarily landing at the top of the page.

Adapting the Design

An attempt to directly adapt the book’s cover to the web failed. The large gray header felt static and separated from the text, so we decided to deviate more from the design of the printed book. The final design makes heavy use of our yellow accent color; the light background allowed for overlapping the title to create continuity between the top of the page and the book’s text.

Blending Design and Development

In addition to designing Practice for the web, I also had the opportunity to build it. Knowing that I would be doing the development reduced the amount of time I spent on design before moving to code; creating mockups of only the page’s top, navigation, and a single chapter for approval of the direction. I started building knowing that everything would need refinement as we loaded in the content. Developing the page enabled me to spend a lot of time tweaking animation timings and type details like letter spacing — things that need to be seen in the browser and take a lot of trial and error to get right. At different points in the project I dropped back in Sketch and Illustrator as needed to experiment with different design ideas and draw or refine icons.

This was a fun project and a great intro to taking on a small development project at Postlight. Check out the finished product and order a free copy of the book!

Thanks to Matt Quintanilla for design direction, Cody Cowan for product management and support, and Neil Renicker for getting me up to speed on the technical details of postlight.com.