Keep an eye on your inbox!
Hmm, that didn't work. Try again?

How to build an ebook website

Dig into the strategy and content structure of our ebook website, then watch a full walkthrough on how we built it.

Mat Vogels
June 16, 2016
Tutorials

Content has proven a powerful tool for brands time and time again. But you can't just do exactly what everybody else is doing. You've got to find the right topics, tone, and medium for your brand.

Let’s create an ebook — or, rather, a web book

A few months ago, during one of our (three-person) marketing meetings, John and I were brainstorming different, creative ways to publish our content. We just weren’t happy with the idea of publishing one more of those endless PDF “ebooks” everyone downloads and forgets.

We wanted to push the envelope.

We’ve always been driven by the idea that our content should help people create better, faster, smarter — whether with Webflow or any other tool. And we were getting tons of requests for more in-depth content focused on topics like freelancing, web design, team collaboration, and more. So we wanted to create a way to bundle all the disparate content we’ve been creating into one piece of strong content.

The obvious solution was some form of bundle, but how would we present it? At first we thought a physical book would be awesome — but we’re a web design company, so printing didn’t seem quite right (though we’re still thinking about it).

And that’s when it hit us: we build a website design and development platform. So instead of just another PDF ebook, we decided we’d build a web book. An “ebook” built specifically for the web.

The content before the horse

The design process started as it usually does around here: with content first. We already had a wealth of great content on the blog. But as we dug into our core topics and brainstormed what else we should cover, we realized that some of the existing content would need updating, while other subjects needed brand-new content.

So we added the new content to our editorial calendar. That way, these new chapters became one-two punches: first, we’d publish them on our blog, gather feedback, and then repurpose them as chapters in the ebook.

This is a powerful content-production method I encourage you all to explore: How can you repurpose your existing content, transforming it into something new, and hopefully, even better?

This was the backbone idea for our ebooks, and one that can work for just about any content type.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Get started for free
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Creating the content structure

Now, before we added even a single pixel to our ebook website, we knew we wanted to create a structure that would last for the long haul.

We didn’t just want to create one ebook: we wanted to build a whole elibrary.

Thus, setting up the CMS structure right played a crucial role in getting the ebook website going.

In the end, we created just three collections:

  1. Ebooks
  2. Chapters
  3. Authors

That may not sound like much, but between these three collections, dozens (and soon, hundreds) of Collection Template pages emerged.

The structure needed to be simple, so it would be easy to maintain, but it also needed to be scalable. We knew we wanted ebooks, but it took a while to come up with the idea of Chapters as a Collection.

In the real world — and in the reader’s experience of our ebooks — a chapter is intrinsically part of a book. 

But on the Webflow Ebooks site, Chapters aren’t connected to their ebooks at all (from a structural standpoint).

What we decided was that the ebook collection would act more like a category — a simple way to bundle together chapters. In the end, we simply bound the two collections together, so that each chapter needed to reference a single ebook for it to be published.

This structure gives us the flexibility and scalability to add all the chapters (which make up the bulk of the site’s content) to a single Collection (Chapters), instead of having to create a new Collection for each ebook.

Finally, we came up with a design

The third and final step in this process was designing the website itself. Now that we had our content created, structured, and ready to go in the Webflow CMS, we could finally start putting pixel to monitor.

Luckily, when we began this process, our amazing developer team had just finished building Webflow’s flexbox features. We were still a few weeks out from a public launch, but thought: What better way to test it than with a complex site of our own?

So flexbox played a huge role in building the site. In fact, without flexbox we wouldn’t have been able to create it in its current form at all.

And because we thought you might want to take a closer look at how we built our ebook site, I created a full website tutorial, just for you:

 

What ebooks would you like to see from us?

At Webflow, we’re always looking for ways to make our content better, and the ebook was just the first step. If you haven’t already, check out our ebooks, Web Design 101 and The Freelance Web Designer’s Guide.

Oh, and stay tuned for another new ebook — this one covering the art of content — coming soon!

Have a request for a future ebook? Feel free to tweet at us, or comment below!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.