Designer and product manager

Menu

A responsive ebook built with web standards

I’ve been tinkering with a responsive, standards-based ebook prototype for a neighbor who works for a publisher. Their goal is to self-publish ebooks online, to be viewed in a browser, and also self-publish to app stores. They’ve tried a more traditional Kindle route, but sales haven’t been spectacular. And after chatting more about their goals, I also pointed out that a web-based ebook could probably be pushed to do a lot more over time with a variety of enhancements. After all, browsers and in-app webviews can do a lot these days.

The prototype I’ve been working on isn’t quite done, but I’ll share the not-fully baked version via video. The tools used include jQuery Mobile, some responsive layouts and styles that I designed, and Phonegap to package it as an iPad app. Special thanks to Scott Jehl at the Filament Group for his pagination script — that was a key ingredient.

18 thoughts on “A responsive ebook built with web standards”

That’s a great looking app/reader. Looks like it doesn’t in any way need to be limited to the iPhone or iAnything else for that matter. Seems to be a good way to view ebooks on any laptop, PC or tablet.

Very true, the layouts are all CSS and the foundation is jQuery Mobile, so it’s quite cross-platform and could be very device agnostic. My current demo runs as an installed iOS app only because that’s one of the requirements of my particular project.

Hello Krsitofer,
I’m IT student from Brazil, and I’ve sudying several uses of PhoneGap + jQuery.
Do you mind or already thought in share the code that you’ve used to build this aplication?
I meand because it’s gonna be super important to my studies.
Thank you

Hi, I’d love to share more and plan to. But it will depend on what my collaborator prefers, too, as well as how far we take the work. There are a few technical things I’d like to work out better, for example, before I’d feel like sharing the CSS for the layouts and styles. I’m getting things to work pretty well, but some of it just needs more improvement. Thanks for your interest, and stay in touch. =)

Sure, this could certainly include a page flip animation. But in this version, we’re kind of straddling the notions of ebook and app, so we’re trying to figure out what is too book-like or traditional for our purposes. But because it’s all standards-based, a designer could make this more or less book-like with their choice of transitions, layouts, typefaces, etc. I think there’s support for a wide spectrum of output that ranges from very-book-like to less.

Well done app. I just happen to have found your article via zite on my iPad but I thought of commenting when you mentioned that the publisher had no success with amazon. I hope you’re not doing this work for free because if a publisher cannot make money on amazon they will have almost zero chance making money on their own platform and therefore may become disappointed with you for not creating an even better app.

Thanks for your comment. I’m not really able to discuss all of the details about the publishing business, but they have had success with Kindle, just not enough that they think that should be their only focus for digital books or apps. That, and they’re open minded and innovative about thinking about other ideas and opportunities, as I am. So it is experimental, at both the format and platform levels. And I’d agree that we both would be disappointed if these alternatives don’t make any money. =) I like the design challenges and solving them is fun, but after a while it’s nice to have something emerge from hobby to business status. That’s certainly a goal, as I like finding ways to validate the inherent value of content besides advertising.

Great work! It’s good to see more people are trying to find their way in the ebook jungle.
I have been thinking about a similar setup together with a publisher: to have a base layout in HTML and to be able to repackage this in several formats (ePub, apps for iOS/Android, KF8,…). It looks like a reasonably future proof idea.
One of the concerns we had though, is that Apple has been said to discourage “book apps” (apps that are just books in an app wrapper), trying to steer publishers to the iBooks Store instead of the App Store. Any ideas on that?

Thanks for your comment and feedback! Re. Apple and “book apps”, I’ve been selling web-standards-based medical reference apps in the App Store for two years. That said, these apps aren’t trying to be especially book-like. They have tables of contents and indices, but aren’t presented with the level of pagination that my new ebook prototype has. Also, I know that Apple has a page curl effect (that they use in iBooks) built into iOS and available to app developers. So I’m not sure what this all means, but my experience coupled with what Apple provides to developers would suggest that they can’t be too averse to people designing book-like apps.

Thanks! Yes, I’ve heard of Titanium and have experimented with it a bit. It’s quite established so don’t question that aspect at all. My general assessment is that JavaScript developers prefer it, because nearly all of the work involved in using it requires JavaScript proficiency. PhoneGap allows you to leverage HTML, CSS, *and* JavaScript, so that is a bit more attractive to me. I’m just knowledgeable enough in JavaScript to be dangerous, whereas I’m more proficient using HTML and then CSS, and then only as much JavaScript as necessary.

Nicely done, sir! I had been thinking about something similar using CSS regions (or something less bleeding edge) and appropriate JS to give a non-scroll magazine-like layout for content that was responsive down to hand-held. It was/is still at the ideation stage without any practical prototypes. Glad to see someone that knows what he’s doing develop a similar concept.

Thanks for your feedback! This prototype hasn’t been developed to scale to handheld very well yet, but that’s really just a matter of being responsive to a smaller screen size. So nothing too technically challenging, just more of a UX question. For example, I do a fair amount of Kindle reading on my iPhone and my experience there has been always in portrait orientation, one “page” at a time. Whereas this prototype has a goal of treating landscape orientation differently with two “pages”, or columns, for both aesthetic and readability purposes. But again, these matters are less technical in nature and have more to do with UX goals.