UPDATE 3/3/13: I wrote this post over a year ago and it’s now outdated. Instead of following the instructions in this post, I recommend buying this book instead: The eBook Design and Development Guide by Paul Salvette. It goes into great detail and covers so much more than I could in one blog post. I’ll keep my instructions up for posterity but really encourage you to buy Paul’s book instead.
I’m going to show you how to make a Kindle ebook using HTML 5 and CSS 3. This tutorial cuts through a lot of the confusion out there by providing a step-by-step recipe and the boilerplate Kindle files you’ll need so you can start making your own Kindle books within less than 10 minutes. Amazon’s KF8 (Kindle Format 8) opens up new opportunities for designers by supporting all the wonders of CSS 3 and HTML 5 on Kindle devices. It’s an exciting (and, yes, still nascent) time for electronic book designers and I hope this tutorial gets you up and running.
I run Perry Garvin Studio, a design firm in Brooklyn, New York and we specialize in Kindle book design, publishing, and conversion, web design, user interface design, branding, and development. Learn more about us at http://perrygarvinstudio.com and email email@example.com if you need help with your project.
Also, note that this article has translated into Serbo-Croatian by Vera Djuraskovic.
Step 1: What You Need to Know
This tutorial is written for people using Macs. If you’re on a PC, keep reading, but you’re going to have to be on a Mac to make this recipe work. It will also be helpful if you know HTML 5 and CSS 3 and are familiar with XML. And we’re going to do a little stuff in Terminal. Some people get nervous when the command line is involved, but don’t worry. Stick with me and you’ll be fine.
Step 2: The Big Picture
To make a Kindle book, you assemble a bunch of files and run them through Amazon’s processing engine called KindleGen. The file that pops out is a .mobi file. That’s the file that gets dropped onto your Kindle for reading.
Step 3: The Files
First, you need to make the files that comprise the book.
1) Download this ZIP of sample files that I’ve made for you
2) Unzip it and put the resulting folder called “My Kindle Book” on your Desktop
3) Trash the ZIP file
4) Open that folder and let’s go through these files one-by-one.
This is the cover of your book.
This is the content of your book – what your readers will read. Keep the HTML simple and refer to Amazon’s documentation for details on how they want you to write your markup.
This is the table of contents. You’ll see that each link points to a part of the Kindle book using anchor points.
This is your stylesheet and it’s how you’ll design your book using CSS 3. I’ve styled my book so text is green (cripes) and images float to the right. Amazon’s support for CSS 3 is new as of January 2012 and pretty darn exciting because of the new design options it brings. You can learn more about the CSS 3 tags Amazon supports on its various devices here.
This is an XML file that tells the Kindle how your book is structured. Go ahead and open it up (you can use TextEdit if you don’t have a code editor).
The stuff between the <metadata> tags defines the metadata for the book using standard Dublin Core elements: title, creator, date, etc.
The stuff between the <manifest> tags tells Kindle where things are. For example, you’ll see that it has references to all the files we’re currently reviewing: the cover image, the book HTML file, the table of contents HTML file, the stylesheet, and the NCX file (I’ll explain that in a moment).
The stuff between the <spine> tags tells Kindle the order of how those HTML files should be read. Using this file, for example, when you open your book on a Kindle you’ll first hit the table of contents. Then you’ll hit the book contents. See how the “idref” in the <spine> elements match the “id” in the <manifest> elements? That’s how the spine knows what HTML files to present. That matching is required, of course, otherwise Kindle won’t know what to load. You can create multiple HTML files and define the order they will be accessed in the <spine>. Be sure to also make reference to those HTML files in your <manifest> so that Kindle knows where they are located!
You know that bar along the bottom of a Kindle that has points that allow you to skip to various parts? The NCX file tells Kindle where those points are. The <navPoint> elements within the <navMap> tags define those points. For more details, check out this post: http://www.cjs-easy-as-pie.com/p/create-ncx-file-by-araby-greene.html.
I also put a folder called “img” in the download and I threw in a nice de Kooning picture that you’ll see embedded in mykindlebook.html file.
And that’s it. These are the minimum files you need to build a Kindle book. So what’s next?
Step 4: Putting it all together
Go through this with me step by step:
1) Download and install this shareware ZIP creation app: http://www.yellowmug.com/yemuzip/ Unfortunately you cannot use Mac OS’s built-in ZIP creation tool otherwise you’ll get errors. Annoying but true. Other ZIP creation tools like Rucksack might also work but Mac OS’s definitely will not (as of this writing, Mac OS version 10.7.2).
2) Zip the “My Kindle Book” folder through YemuZip or your other third-party ZIP creation app and be sure it’s saved to the Desktop.
3) Find that ZIP file and change its name to “book.epub” (without the quotes). You’ll probably get a warning asking you if you want to use that extension. Yes, you do. So your file should now be called “book.epub”. It was a ZIP, now it’s an ePub. If only switching identity in real life was so easy.
4) We need to convert that ePub file to a .mobi file – the format the Kindle uses. Luckily for us, Amazon made a program called KindleGen that does this for us. Time to download and install KindleGen.
What follows is what’s correct as of this blog post in January 2012. If you’re reading this in the future, the process may have changed a bit. Always value Amazon’s KindleGen documentation over mine. This recipe works as of this typing, but I can’t promise it will in the future.
5) Download KindleGen at http://amzn.to/wYEogJ . This is a tutorial for Mac users so download the one for Mac.
6) Unzip it and change the folder name to “KindleGen” (without the quotes)
7) Move it to your Home directory – the place where your “Documents”, “Movies”, and “Pictures” folders live.
8) Open Terminal
9) At the command prompt, type “~/KindleGen/kindlegen” (without the quotes) and press enter
10) Now you need to navigate to your ePub file using the command line. This is the trickiest part of the tutorial because it requires a tiny bit of UNIX knowledge. Let me try to help. Type (always without quotes): “cd ~” and press enter. That gets you to your home directory. Now type (again, without quotes), “cd Desktop” and press enter. Now you are in your Desktop! See? You’re a UNIX pro already. Type “ls” (without quotes) and press enter. You’ll see a list of whatever is on your desktop and in that list will be “book.epub”. Great. Now type (without quotes), “~/KindleGen/kindlegen book.epub” and press enter. A whole bunch of code should appear (hopefully without any warnings or errors). Now go to your Desktop and look: you’ll see a file called book.mobi.
You just made your Kindle book!
Let’s look at it.
The easiest way is to download Amazon’s Previewer application which is a software version of a Kindle. You can get it here: http://amzn.to/w3jJLP
Once you’ve downloaded Previewer, open it up and go to File > Open and select your .mobi file from your Desktop. And there you have it: your Kindle book. You can also drag and drop the .mobi file onto your Kindle and read it there.
Something doesn’t look right? Typo perhaps? Well, you’ll have to trash your .mobi file and your .epub file and repeat Step 2.
Step 5: Final Thoughts
Here are a few helpful links:
Amazon’s Kindle Publishing Guidelines : The official Amazon guidelines on how they’d like you to produce your Kindle books. It’s full of all sorts of geeky details which will help you craft the perfect files.
About Kindle Format 8 : Amazon’s new file format for its Kindle devices
About KindleGen : Amazon’s application for producing .mobi files
About Amazon Previewer – Amazon’s application software for previewing how Kindle books look