Jun 16, 2016

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.
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.

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!

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Mat Vogels

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

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Design process
Apr 19, 2017
How Webflow fits in the modern web design process
Some designers who've just discovered Webflow wonder: where does this web design platform fit into my design process? Here's your answer.
Oct 25, 2016
3 site search options for Webflow sites
If site search is a must-have for your website, here are three of your best options, compared.
Web design
Jun 24, 2016
9 ways to improve the UX of your website content
Content represents the heart of most websites. So the most powerful way to improve your websites' UX is to improve its content. Find out how.
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.