designing ebooks with web standards

Designing Books with Web Standards

Using HTML, CSS, and JavaScriptto build more than web sites.

Kristofer Layon // @klayonCSS 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.

http://www.youtube.com/watch?v=rKqpjhkaCc8&feature=plcp

http://www.youtube.com/watch?v=rKqpjhkaCc8&feature=plcp


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 briefly highlight some steps to distribute books.


1. Why ebooks?





First: why books?


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

Isn’t “one web” a myth?


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

Code Standards: HTML, CSS, JavaScript


“But I love the web, soI 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?

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

Pages

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

http://www.digitalextraordinaire.com


www.sil.si.edu

Control

In fact, they’re often defined 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.



www.wikipedia.org

Work

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 define 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 find alternative ways to earn a living.

www.wikipedia.org

Monetary value

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.



www.fanpop.com

Market

But you can’t just hang out a shingle with your name on it and sell whatever you want to turn a profit. 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.


• 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 influence the book’s evolution.

Books…

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 defined 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 */


}


/* Rules for iPad portrait */

@media only screen and(min-device-width : 768px) and(orientation : portrait) { /* styles here */

}


/* Rules for iPad landscape */


}



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.


1. Why ebooks?






iOS Developer overview

1. It costs $99 annually to participate.2. Install Xcode.3. Create app IDs.4. Define test devices.5. Create development and distribution certificates.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 sizeof a book for people to want toengage 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.

@klayon

kristoferlayon.com

[email protected]


Thank you!

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!

mailto:[email protected]

mailto:[email protected]

designing ebooks with web standards

Design

web standards kristofer

web pages

web sites

web services

web andhow

klayon css dev

web standardsusing html

css techniques