How to Improve the Design of Hundreds of eBooks in Minutes

There’s a common perception that digital books have to sacrifice a lot of the beautiful style touches that print books offer. What if that perception were wrong? What would you design?

In fact, it is possible to bring a high level of style and design to your digital titles, and with a little upfront work, you could customize the look of each title in mere moments. Here at Inkling, we were faced with a problem that any publisher can understand: how do we quickly digitize a hefty backlist and still preserve the individual books’ styles and beautiful print layouts? As part of a massive project with Elsevier to revamp its popular Expert Consult and Student Consult online portals, we needed to transform 850 medical references and textbooks into mobile-optimized eBooks that still retained the beauty and the structure of the print books.

In tackling this monumental task for Elsevier, we created possibly one of the most convenient SASS files we’ve ever used: the setup file. The setup file contains all of the basic eBook stylesheet options in one easy-to-access place. By altering one line of code in this file, we were able to change the design across large sets of titles in mere minutes.

Imagine changing 6 characters and seeing an entire book change color–that’s the genius of the setup file. Using SASS and color math, we’ve created a system that will change and vary the colors of headings, asides and section background colors, tables, unit banners and more. All by setting one main color in this line:

$color-1: #3878a8;

Yes, that’s it! That #3878a8 is the hex code for the color royal blue in the image below.

By swapping out the #3878a8 hex code for a different color’s hex code, we changed almost every color in the title, making the creation of a unique look for each book a super-simple task. Once the setup file has been created, all you have to do is pop over to a website like colorhexa, pick your color, plug in the hex code, and you’ll have a stunning variety of color options. Here’s an image of the same chapter title with the hex code changed:

Note the color distinctions between the section banners up top, the chapter title background, and the chapter numbers. All of those colors were set just by changing the $color-1 to purple, yellow, and red, respectively. The color math picks up that main color and makes it lighter or darker depending on the element (ex: the section banner color was made darker by the color math).

Here’s another example. Let’s say you added a unit banner above those dark blue section banners.

The color math automatically adjusts the unit banner to be lighter, making it distinctive from the section banner below it.

This makes short work of customization and adds an instantaneous distinction from other titles. There are even more useful one-liners in the setup file, which you can mix and match to make a very diverse library, such as these examples below.

All of these simple changes via the setup file are possible because we researched the content in Elsevier’s library for patterns. Though each of the library’s 850 titles is unique, groupings and patterns emerge when you take a broader view of the content. By taking a pattern-based approach with our eBook stylesheets, we were able to build scripts and systems that could cascade changes across many titles at once, imposing both consistency and beauty upon the library, and making the task of converting large libraries of legacy content seem much less daunting!

Want to learn more about how Elsevier partnered with Inkling to create a better mobile experience for their half a million users? Get the full case study here, available as an interactive eBook and PDF.