10 Tips for Creating an EPUB for Mobile Learning

Create Your First EPUB Using This Guide

Mobile Development, Pedagogy and Learning Comments (2)

In an earlier post, I looked at the benefits of using EPUBs for mobile learning.

Now that you know those benefits, you might be asking yourself, “How do I begin?”

Below are 10 tips that will help you create your EPUB, ensuring an easy path to success.

1. Increase Your Understanding of HTML and CSS

You probably know the tools already, but EPUBs are just different enough that you’ll need to do some homework to ensure you are up to speed.

An EPUB is similar in some ways to a Web page in that it is based on HTML markup. If you have never created webpages before, I have listed below some resources on how to get started. These resources will help you get familiar with HTML and CSS.

W3Schools teaches you everything about HTML and how to get started. There are examples and lesson that guide you through the step-by-step process.

This short W3C tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.

The Mozilla Developer Network has tutorials aimed at complete beginners, this CSS tutorial for beginners introduces you to Cascading Style Sheets (CSS). It guides you through the basic features with examples that you can try.

You will need to consider the device capabilities, location, and other contextual information. As a result, it is important to validate your EPUB using FlightCrew and create your CSS with W3C standards in mind.

Matthew LeBlanc and Joshua Tallent emphasize that it is important to test and retest while working through the project to ensure consistency between devices, and that the EPUB styling is rendering correctly.

To ensure the EPUB is consistent across multiple platforms and formatted correctly, create one file for style rules with external stylesheets. These methods will help ensure the best user experience on a mobile device.

2. Select The Right Font To Ensure A Consistent Look and Feel

When creating an EPUB, you may find that your fonts are not appearing, even though the markup was validating.

Some technical considerations need to be addressed when creating an EPUB that you need to be aware of. For example, according to the International Digital Publishing Forum, TrueType fonts (.ttf) are sometimes not supported on all readers. To solve this issue, it is good practice to convert your TrueType fonts to OTF (.otf) fonts. You can convert your fonts using an online font converter.

Before you include fonts in your EPUB, you need to make sure that you have a license or permission to use them. While some fonts cost money, many other free fonts are available online, such as Google Web Fonts.

3. Use Common Layout Design Principles

It is important to have a designer who possesses design skills when creating your publication.

Some elements to keep in mind for legibility:

  • Use one serif font family with various styles for large amounts of body copy.
  • Use a sans-serif font family with various styles for main titles and subtitles.
  • All links should be the same color to help the user know what content is or is not a link.
  • Color contrast between the type and background color must be considered, otherwise the user’s eyes will tire and they will struggle to read the content.
  • According to Infogrid Pacific, it is recommended to not add left and right margins in the EPUB stylesheet for standard trade books. Readers automatically add margins when viewing EPUBs.
  • Much of an EPUB is often large amounts of content as body copy. If users struggle to read the content, they will become frustrated. Some items that may prevent that from happening are to use 12-point for body text, and 14-point and higher for main titles and subheadings.
  • You need to consider the font scaling on devices. The font scaling will affect the look and feel of the layout, and it helps if you use standard font sets for the visual size differences on all platforms.

4. Use SVG Images As Much As Possible

SVG images render much better on e-readers than bitmap images, no matter how large they are scaled on a device. Because bitmaps are composed of individual pixels, they tend to scale poorly. That is, when you try to increase their size, their edges become blurry. SVG images are vector images. As a result, they scale well, because they rely on mathematical equations to determine their appearance. Below are some examples of how an SVG graphic scaled would appear on a tablet on the left, and on the right is how a scaled bitmap graphic would look on a tablet. Select each one to view a larger version.

svg-example1
svg-example2-300x200

svg-example3

5. Create Cover Images At The Largest Tablet Size They Will Be Viewed On

 If the cover is saved out at a lower pixel ratio than the largest tablet used by the user, it will be blurry.

Extra large Android tablets and iPad Retina sizes should be the aspect ratios prepped to consider the largest-viewed tablet size for the user. The retina iOS size is 2048×1536 pixels, and the current largest Android tablet size is 1600x900px.

6. Use The Right Tools for the Job

Two great free programs to create an EPUB that is viewable on multiple platforms are Sigil and Calibre.

Ultimately, it is up to you what tools you use to create your EPUB. However, these applications will allow you to easily create consistency with the least amount of errors.

You can use Sigil for design, layout, and CSS and HTML. Then, use Calibre for conversion, exporting and placing an EPUB on a Kindle if not sold on Amazon.

You can also use Adobe InDesign for initial wireframe layout and then export it as an EPUB to begin the design and layout of the EPUB, but it’s not recommended to polish your product. Even though Adobe InDesign exports out an EPUB, the CSS can be cumbersome and cause inconsistency throughout devices. This is why you want to use Sigil for the markup and final layout.

The Calibre manual, tutorials and FAQs, as well as the Sigil manual, tutorials and FAQs are extremely helpful. Sigil and Calibre walk you through the step-by-step processes to create an EPUB from scratch with many tutorials, FAQs and tips.

It can be tricky to learn how to create any media on your own. I found that sometimes just reading the manuals and tutorials isn’t enough. Discussion and dialogue with peers in online forums are great ways to get those questions answered. I highly recommend the Mobile Read website to review and ask questions to other EPUB creators. It is a great resource to collaborate with your peers in the industry about EPUBs.

The Adobe Creative Forum is helpful in getting your specific questions answered for InDesign. However, being an Adobe product website, it fails to provide information on how to create an EPUB with Adobe InDesign along with other programs such as Calibre.

7. Separate Content and Presentation

The visual appearance of content isn’t the only consideration when creating an EPUB.

You need to take into account that many readers are not gong to be reading visually. For example, they might be doing text-to-speech playback. The markup must convey meaning to be useful to all readers and that the visual rendering is just one aspect of that markup.

When readers are accessing content through reading, do not use visual-only cues – for example, colored text, font size or positioning as the only method of placing importance on a section or element.

Using images with text to control the appearance of the content is not recommended by the IDPF. The meaning of the content should be the same with or without styling or formatting.

The use of semantic styling is encouraged by the IDPF as it ensures focus is kept on how the data is represented, not just how it looks when rendered.

8. Changing iOS’s Default Settings

Easily create EPUBs for iOS by changing these settings in order to mitigate small discrepancies you might have with your styling.

There are default settings that I prefer to change when creating an EPUB in order to have a more stylized layout that is visually appealing and consistent between an iOS and Android device. The Type setting for iBooks on an iOS device that is automatically set to justified has to be turned off. Below is a screenshot from my iPad with the setting circled in yellow.

iosSettings-300x225

iBooks automatically renders default purple link colors in publications. You have the option to choose the color the links appear or use the default render color. If you want to choose the color, you will need to use a color code name within the CSS, rather than a hex color or RGB value, in order to create your own custom link color. However, it is important to consider that you may risk harming your legibility if the users have non-default color combinations or night mode enabled on their reader.

9. EPUB Distribution Considerations and Recommended E-readers

There are many e-readers to choose from for your mobile device. When distributing EPUBs to coworkers or clients that aren’t sold on an online store, you can view them with an e-reader. These software tools are not bound to any bookstore or online library, which allows you to distribute your EPUB without a store connection. This can be very helpful when wanting to be selective on who views your EPUB.

For the Android and Kindle platforms, I recommend Mantano and EPUB Reader. These e-readers have a lot of flexibility in how the user chooses to view the EPUB. Font scaling, page numbering and the table of contents flow are very intuitive for the user.

Mantano is a free e-reader that has many great features. It allows you to:

  • Create textual notes attached to a page, annotations, highlights and bookmarks.
  • Browse the table of contents.
  • Search words.
  • Customize the display of EPUB documents through changing the default font, line height, colors, and more.

EPUB Reader for Android is a free and open e-book standard that manages the .epub files you imported from an SD card or downloaded from a website. The reader lets you read the EPUBs by flipping as books or by browsing as Web pages.

There are items you need to consider if an EPUB is not sold from an online store such as Amazon. “Amazon has made it really hard to download and read DRM-free e-books on the Kindle Fire HD,” writes Nate Hoffelder. “You can download an e-book and open it, but if you want the e-book to show up in your personal docs you will need to use a file manager to copy the e-book from one folder to another.”

Also, let’s say that you want to distribute your EPUB for free to clients, but don’t want to have it available on the store. Calibre is a tool that allows you to do that with ease. You can use Calibre for placing EPUBs not for sale on devices. This is great for internal distribution within a company between employees or with clientele.

10. Let Your Publishing Program Number Your Pages For You

It would distract and confuse your users to have multiple page numberings when viewing their EPUB.

Infogrid Pacific recommends using the default page numbering. You should only create a table of contents since e-readers use their own page numbering system, headers and footnotes. In other words, depending on your device, creating your own page numbers could cause inconsistencies.

Summary

I’ve provided you with some of the methods, techniques and tools you need to create your first successful EPUB. These tips will help you with your layout, functionality, tools to use and some technical and multiplatform considerations. Please leave a comment if you’d like more detail about any of these tips, and I’d be happy to help you.

In the meantime, you can see an EPUB in action by downloading “Putting Learning Into Motion,” Float’s free EPUB on implementing mobile learning strategies, including:

  • How to Build a Business Case for Mobile Learning
  • The Six Ps of a Mobile Technology Strategy
  • Seven Easy and Inexpensive Ways to Launch Mobile Learning

Plus more!

Follow Float
The following two tabs change content below.
Heather is a UI/UX specialist for Float. Heather takes the lead on all aspects of the user interface process including design and testing. She is responsible for providing the data layer design, resources and alternative paths in order to accomplish objectives using in-depth Web and application design and development experience.

» Mobile Development, Pedagogy and Learning » 10 Tips for Creating an...
On August 20, 2013
By
, , , , , , ,

2 Responses to 10 Tips for Creating an EPUB for Mobile Learning

  1. […] Ben­e­fits of EPUBs for Mobile Learn­ing 10 Tips for Cre­at­ing an EPUB for Mobile Learn­ing Deux arti­cles de Heather Ford (Float Mobile Learn­ing) sur le for­mat ePub (qui n’est […]

  2. […] EPUBs can be created for and sold on iBooks and/or Amazon for the Kindle among other monetization paths and digital publishing stores. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

« »