Designing Ebooks with Web Standards

Designing Books with Web Standards
Using HTML, CSS, and JavaScript
to build more than web sites.

Kristofer Layon // @klayon
CSS Dev // December 5, 2012
Honolulu, HI

Welcome to my presentation about designing books with Web Standards. There’s a lot to
cover on the topic in a 45 minute session, so I’ll do my best to explain the pros and cons of
the book format, go over some sample projects, and cover a broad range of options for
designing books.

Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012

This is a demo of a project that I worked on last summer. For the past 3 years I’ve been
curious about the intersection of native apps for smartphones and tablets, and the web and
how it is built. Coupled with this interest has been a focus on books and what they mean.
This is a demo of a handcrafted proof of concept that I built with PhoneGap and a jQuery
Mobile pagination plugin by Filament Group.

1. Why books?

2. A simple scrolling “ebooklet”.

3. A slightly less simple, book-like app (but
with fancier stuff!)

4. An ebook in HPub format.

5. App stores: new opportunities, new pains


In this presentation I’ll provide a few demos of ebook as well as other book-like reading
experiences, highlight some tools, frameworks, and CSS techniques for making books, and
brieﬂy highlight some steps to distribute books.

1. Why ebooks?






First: why books?

Isn’t “one web” a myth?

• Web standards have never worked with
perfect consistency across all browsers.

• Today more than ever, they don’t behave
consistently across all devices, either.

• Except for advertising and pay walls, no good
way to sell content in browsers.

• AOL, Flash, Facebook, and other frameworks
and platforms as the “web”.


Code Standards: HTML, CSS, JavaScript

• They’re web standards… but they’re more.
• Like notes, rhythm, and instruments used in
multiple genres of music, code standards are
used to build multiple genres of the web.

• Don’t limit your use of code standards to just
the web; be a cross-over artist.

• Use customer and client needs to drive the
best formats for web services and products.


“But I love the web, so
I can’t betray her!”


So you still might be thinking: I’m used to just designing for the web. I believe in the web
being for all, and accessible from any device. Why would I venture beyond designing things
for browsers?

Luke W


There are two reasons. First, browsers are apps. They’re one kind of app, and there’s nothing
wrong with designing for other apps. Second, if your product can be expressed better as an
app, that’s the right solution for you. Even someone who is as much of a web evangelist as
Luke Wroblewski knows when a native mobile app is the best approach, as he recently
decided with his Polar polling app.


A few days ago, Luke also noted that while publishing content everywhere might be a great
solution for accessibility and ubiquity, it is not necessarily a good business model. Here
again, an app might be a better business model.

So… what are books?


So what are books, what makes them unique, and how does this inform whether a book
format makes sense for a content type, user experience, and distribution method?

Pages

www.wikipedia.org

First, like web sites, books have pages. But book pages are different. Book pages are
traditionally a bit more deﬁned than web pages.

Control

www.sil.si.edu

In fact, they’re often deﬁned in such a way that they’re controlled more by a designer than a
web page typically is. In this example, especially, we see an elaborate but precise use of
space for illustration and text.

Work

www.wikipedia.org

Consequently, books are quite a bit of work. It takes effort to control the user experience of a
book. And when books were new, they were all handcrafted one by one. This was an
incredible amount of work, and was often done by monks.

Martin Luther (1483-1546)


In fact, the book was partly invented by a monk, Martin Luther. He and Gutenburg came up
with the concepts of the book and the press that continue to deﬁne traditional book
publishing today.


Of course, as books production became more automated, monks in Europe and Asia weren’t
needed to design and produce books anymore. Which is why monks had to ﬁnd alternative
ways to earn a living.

Monetary value

www.wikipedia.org

But one of the most important differentiators for the book format is value. Content inherently
has value. This is why ads have worked on the web for years, and why Google exists as an
enormous business. But if you want an ad-free user experience, it’s pretty challenging on the
web. Paywalls are pretty unpopular, but Amazon, Apple, and publishers have proven that
people will pay for digital media.

Market

www.fanpop.com

But you can’t just hang out a shingle with your name on it and sell whatever you want to turn
a proﬁt. It’s one thing to have a frictionless mechanism for sales and distribution, but as even
the biggest app store in the world has proven, you need a market for your wares as well. The
market can take a number of forms: individual consumers, B2B markets between companies,
and so on.

Books are a social construct,
not just a technology.

And people like them.


So this is why books have had value and will continue to have value. Starting out 500 years
ago as a very rare and limited medium that everyday people could not own, books have been
transformed many times since then to become an affordable way to consume information.
Yet they still retain value; the idea of a free book is not that attractive. It either means it’s a
gift or it’s an outdated edition.

www.amazon.com


You’ve probably all seen the stats. This summer Amazon announced that their ebook sales
now exceed their print sales by 14%, but they’re not just calling it a shift. They’re calling it a
reading renaissance.

When you see numbers from September such as ebook sales being up 188 percent, after
devices like the Kindle and other tablets have been out for a few years already, it’s likely that
we’re still in the beginning of this trend. So as web standards designers and developers, we
can still be early adopters in this space by digging in and experimenting today.

www.apple.com


My prediction is that with the smaller and more affordable iPad mini providing an even
stronger consumer focus on the small tablet space, this will fuel an ebook and tablet app
market that is even stronger than today. Especially as school districts and parents see these
devices as being solutions for education, it’s an enormous opportunity for designers and
developers to participate.


So if you’re still not convinced, just take a look at these forms of books from the far and
recent past. Books have never meant one, static design that is unchanged. The common
thread is a familiar reading user experience for cultures of that time. But as culture and
technologies change, the reading user experience changes with it. But the things we read are
still called books, no matter their size or shape.


Even in the gray area of apps, it’s clear that many of them are quasibooks because they’re
designed primarily as reading experiences. Take a sample of some common apps and look
at how many are designed for either brief or sustained reading users experiences. So do we
put our ebooks on the web, in book stores or reading apps, or in app stores? The answer is
yes. We’re still in the Wild West.

Future CSS 5 holographic hover!


But more importantly, there’s still plenty of room for design innovation. We’re not yet done
designing reading experiences and integrating them with other things. At Capella Education
Company where I work, we’ve been integrating ebooks and mobile solutions into our
curriculum models for years. Now we’re working on integrating our courseroom discussion
experience into ebooks and reading devices.

Books…

• Are cherished and people own them (buy) or
borrow them (library).

• Good books are often read more than once.
• The form of the book has continued to alter
for centuries since the day it was invented.

• As people who design and build content, we
can help inﬂuence the book’s evolution.


In summary, books continue to be cherished and the market for them seems to be growing,
not shrinking. Books have sustained value despite their formats changing. So let’s participate
in this space. We don’t need to draw a boundary around our skills and only design sites that
reside on servers and are viewed in browsers. App and book opportunities are enormous for
those who use web standards.

1. Why books?






Next, let’s look at a really simple reading application. Three years ago as I was getting really
excited about mobile design, my entry point was iOS. At that time Apple was far and away at
the leading edge. They had the devices, the app store, and the extensive human interface
guidelines that have pretty much deﬁned a lot of what we still do today.


I’ve been partnering with a medical author on a series of medical reference apps for iOS and
Android. It’s been a great project: I have a shared code based to work from and just need to
distribute to the app stores separately. We do 3-4 content updates per year, and an annual
renewal in the summer.


I was able to get into this via a web standards based iOS framework called Nimblekit. There
are other options for this out there, too. Phonegap is one of the more familiar ones, as it was
acquired by Adobe so it’s marketed pretty heavily whereas Nimblekit is out of the Ukraine
and doesn’t get much attention.

@media only screen and (max-device-width)

@media only screen and (min-device-width)

@media only screen and (orientation : portrait)

@media only screen and (orientation : landscape)


After that, media queries can be used to customize your layouts per device if that’s your
choice.

/* Rules for iPhone 3.5” landscape */

@media only screen and
(min-device-width : 321px) and
(orientation : landscape)
{

/* styles here */

}


The next few screens are what I use for iOS devices.

/* Rules for iPhone 4” landscape */

{

/* styles here */

}


/* Rules for iPad portrait */

(orientation : portrait)
{

/* styles here */

}


/* Rules for iPad landscape */

{

/* styles here */

}


1. Why ebooks?







Here’s another similar app that I designed with another medical client. This one has a slightly
different navigation pattern that leverages the standard iOS tableview navigation.

#commentForm
{
position: absolute;
left: 50px;
top: 10px;
width: 200px;
height: 60px;
padding: 10px;
background: #2b7c62;
color: #fff;
-webkit-box-shadow: 0 0 30px #000;
-webkit-transition: -webkit-transform 400ms ease;
-webkit-transform: translate3d(-480px, 0, 0);
}


The app also makes use of some CSS3 transitions.

#commentForm label
{
float: left;
display: block;
color: #fff;
margin-bottom: 4px;
}

#commentForm input
{
font-size: 1em;
width: 100%;
}


#commentForm #commentSave
{
float: right;
font-size: 0.75em;
width: 5em;
}

#commentForm.show
{
-webkit-transform: translate3d(0, 0, 0);
}


.data tbody tr {
background-color: #fff;
-webkit-transition: background-color 1s ease;
}

.data tbody tr:nth-child(odd) {
background-color: #D5F2E9;
}

.data tbody tr.current {
background-color: #b8d1c9;
}


In the data record area, CSS is used to provide alternate row background colors to improve
readability.

1. Why ebooks?






Something that is newer to me is the HPub format that is used by the Baker Ebook
Framework.


The Baker Framework web site includes a nice demo ebook that highlights how this format
works.


The framework supports iPhone and iPad, though I had to do some extra work to make it a
universal app for both devices (their standard demo is only for iPad).


There’s a similar web standards ebook framework out there for Android called Friar.


There are ways to do this without having to release your reading experiences to app stores.
Treesaver is a platform that delivers reading experiences to browsers, and Savory is a hosting
service for these publications. It’s another option that has some similarities to reading in
ebook apps and devices, but the major shortcoming here remains business model (ad rev
only; no way to sell content to customers).


If you’re interested in doing a bit more handcrafting of a browser-based reading experience,
another option to consider is this jQuery Mobile touch-based pagination plugin by Scott Jehl.
This is what I used last to create the demo that I showed at the beginning of this session.


Finally, if you want to fully participate in two of the main ebook marketplaces, consider
learning more about Kindle…


…and iBooks. Even iBooks author, though a proprietary solution that ties only to the iBooks
platform, still generates books that are mostly built from web standards plus some
proprietary tagging. Because the content creation side is so nice, we’re looking into how we
might have our online course production teams use the tool, then strip the extra tagging with
scripts to distribute content more broadly.

iOS Developer overview

1. It costs $99 annually to participate.
2. Install Xcode.
3. Create app IDs.
4. Deﬁne test devices.
5. Create development and distribution
certiﬁcates.
6. Test app in iOS Simulator.
7. Test app on devices.
8. Get a separate bank account for payment.
9. Release app to App Store!


As I wrap up, I wanted to run through the extra steps to release content to an app store.
Here I’m using iTunes as the example, but Google Play and other app stores are very similar.
These steps may be less familiar to you as a web designer or developer, but they aren’t that
hard to master.

As the “reading renaissance” continues, more people are commenting about these
opportunities. Just the other day, Jason Kottke of kottke.org wrote about a blog post on this
topic by Craig Mod.

I highly encourage you to read Craig’s piece. It’s really well articulated and highlights some
great examples of standards-based reading experiences. It’s also a lovingly designed piece; I
wanted to screenshot the entire thing to show you.

One of the really nice reading products that he highlights is Marco Ament’s new Magazine for
iOS. It’s a new experiment in small magazine publishing by Marco, someone who has dabbled
in web-based reading experiences for a long time with his popular Instapaper app.

Craig outlines a helpful manifesto around the idea of “subcompact” or micro publishing. It’s a
very interesting read that might help you get excited about the possibilities of using your
CSS, HTML, and JavaScript skills in the new reading renaissance.

To conclude, I’ve been working my way through Karen McGrane’s new book “Content Strategy
for Mobile” and there’s some great information in it about reading.

“Readability’s data shows that users
are even more engaged in reading on
their mobile devices than on the
desktop.”
Karen McGrane
page 12


As Karen demonstrates in her great presentation about this topic, the best content strategy
for the web is multi-channel. This means creating and structuring content properly way
upstream, which allows you to consider a variety of market, platform, and device
opportunities later. With reading experiences, apps, and platforms among these
opportunities, consider the role of reading in mobile.

“People read on their phones… a lot.
A device doesn’t need to be the size
of a book for people to want to
engage it.”
Rich Ziade, Readability
page 12


And do not underestimate what people will do on a phone’s smaller screen. As Rich, the CEO
of Readability points out, people actually read more on their smartphones than on desktop or
even on tablets! It’s because then ten to have their phones with them more. And as Brad Frost
noted yesterday, anything that people can do on a desktop or laptop, they will try to do on a
smartphone.

If you are interested in tools and techniques for determining markets, customer needs, and
how to measure product satisfaction with any book opportunities that you might encounter
or dream up, I wrote an article about my other main area of focus, product management for
the web, on A List Apart this past summer. I also have presentations about product
management on Slideshare.

Thank you!
@klayon
kris.layon@gmail.com
kristoferlayon.com


Thanks for attending today, and please be in touch with questions, suggestions, or ideas
about using web standards to design ebooks and other reading experiences and products!

Designing Ebooks with Web Standards

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Designing Ebooks with Web Standards

Similar to Designing Ebooks with Web Standards (20)

Recently uploaded

Recently uploaded (20)

Designing Ebooks with Web Standards