Designing Ebooks with Web Standards
Upcoming SlideShare
Loading in...5
×
 

Designing Ebooks with Web Standards

on

  • 1,868 views

An overview of examples, frameworks, and techniques for using web standards to design a range of reading experiences for a variety of platforms and devices.

An overview of examples, frameworks, and techniques for using web standards to design a range of reading experiences for a variety of platforms and devices.

Statistics

Views

Total Views
1,868
Views on SlideShare
626
Embed Views
1,242

Actions

Likes
2
Downloads
8
Comments
0

6 Embeds 1,242

http://kristoferlayon.com 1217
http://www.webheadneeded.com 18
http://abtasty.com 4
http://thisninja 1
http://newsblur.com 1
http://www.365dailyjournal.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing Ebooks with Web Standards Designing Ebooks with Web Standards Presentation Transcript

  • 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, HIWelcome to my presentation about designing books with Web Standards. There’s a lot tocover on the topic in a 45 minute session, so I’ll do my best to explain the pros and cons ofthe book format, go over some sample projects, and cover a broad range of options fordesigning books.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012This is a demo of a project that I worked on last summer. For the past 3 years I’ve beencurious about the intersection of native apps for smartphones and tablets, and the web andhow 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 jQueryMobile 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012In this presentation I’ll provide a few demos of ebook as well as other book-like readingexperiences, highlight some tools, frameworks, and CSS techniques for making books, andbriefly highlight some steps to distribute books.
  • 1. Why ebooks? 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012First: 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”.Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • 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.Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • “But I love the web, so I can’t betray her!” Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012So you still might be thinking: I’m used to just designing for the web. I believe in the webbeing for all, and accessible from any device. Why would I venture beyond designing thingsfor browsers?
  • Luke W Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012There are two reasons. First, browsers are apps. They’re one kind of app, and there’s nothingwrong with designing for other apps. Second, if your product can be expressed better as anapp, that’s the right solution for you. Even someone who is as much of a web evangelist asLuke Wroblewski knows when a native mobile app is the best approach, as he recentlydecided with his Polar polling app.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012A few days ago, Luke also noted that while publishing content everywhere might be a greatsolution for accessibility and ubiquity, it is not necessarily a good business model. Hereagain, an app might be a better business model.
  • So… what are books? Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012So what are books, what makes them unique, and how does this inform whether a bookformat makes sense for a content type, user experience, and distribution method?
  • Pages Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012 www.wikipedia.orgFirst, like web sites, books have pages. But book pages are different. Book pages aretraditionally a bit more defined than web pages.
  • Control www.sil.si.eduIn fact, they’re often defined in such a way that they’re controlled more by a designer than aweb page typically is. In this example, especially, we see an elaborate but precise use ofspace for illustration and text.
  • Work www.wikipedia.orgConsequently, books are quite a bit of work. It takes effort to control the user experience of abook. And when books were new, they were all handcrafted one by one. This was anincredible amount of work, and was often done by monks.
  • Martin Luther (1483-1546) Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012In fact, the book was partly invented by a monk, Martin Luther. He and Gutenburg came upwith the concepts of the book and the press that continue to define traditional bookpublishing today.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Of course, as books production became more automated, monks in Europe and Asia weren’tneeded to design and produce books anymore. Which is why monks had to find alternativeways to earn a living.
  • Monetary value www.wikipedia.orgBut one of the most important differentiators for the book format is value. Content inherentlyhas value. This is why ads have worked on the web for years, and why Google exists as anenormous business. But if you want an ad-free user experience, it’s pretty challenging on theweb. Paywalls are pretty unpopular, but Amazon, Apple, and publishers have proven thatpeople will pay for digital media.
  • Market www.fanpop.comBut you can’t just hang out a shingle with your name on it and sell whatever you want to turna profit. It’s one thing to have a frictionless mechanism for sales and distribution, but as eventhe biggest app store in the world has proven, you need a market for your wares as well. Themarket 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. Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012So this is why books have had value and will continue to have value. Starting out 500 yearsago as a very rare and limited medium that everyday people could not own, books have beentransformed 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 agift or it’s an outdated edition.
  • www.amazon.com Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012You’ve probably all seen the stats. This summer Amazon announced that their ebook salesnow exceed their print sales by 14%, but they’re not just calling it a shift. They’re calling it areading renaissance.
  • When you see numbers from September such as ebook sales being up 188 percent, afterdevices like the Kindle and other tablets have been out for a few years already, it’s likely thatwe’re still in the beginning of this trend. So as web standards designers and developers, wecan still be early adopters in this space by digging in and experimenting today.
  • www.apple.com Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012My prediction is that with the smaller and more affordable iPad mini providing an evenstronger consumer focus on the small tablet space, this will fuel an ebook and tablet appmarket that is even stronger than today. Especially as school districts and parents see thesedevices as being solutions for education, it’s an enormous opportunity for designers anddevelopers to participate.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012So if you’re still not convinced, just take a look at these forms of books from the far andrecent past. Books have never meant one, static design that is unchanged. The commonthread is a familiar reading user experience for cultures of that time. But as culture andtechnologies change, the reading user experience changes with it. But the things we read arestill called books, no matter their size or shape.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Even in the gray area of apps, it’s clear that many of them are quasibooks because they’redesigned primarily as reading experiences. Take a sample of some common apps and lookat how many are designed for either brief or sustained reading users experiences. So do weput our ebooks on the web, in book stores or reading apps, or in app stores? The answer isyes. We’re still in the Wild West.
  • Future CSS 5 holographic hover! Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012But more importantly, there’s still plenty of room for design innovation. We’re not yet donedesigning reading experiences and integrating them with other things. At Capella EducationCompany where I work, we’ve been integrating ebooks and mobile solutions into ourcurriculum models for years. Now we’re working on integrating our courseroom discussionexperience 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 influence the book’s evolution. Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012In 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 participatein this space. We don’t need to draw a boundary around our skills and only design sites thatreside on servers and are viewed in browsers. App and book opportunities are enormous forthose who use web standards.
  • 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Next, let’s look at a really simple reading application. Three years ago as I was getting reallyexcited about mobile design, my entry point was iOS. At that time Apple was far and away atthe leading edge. They had the devices, the app store, and the extensive human interfaceguidelines that have pretty much defined a lot of what we still do today.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012I’ve been partnering with a medical author on a series of medical reference apps for iOS andAndroid. It’s been a great project: I have a shared code based to work from and just need todistribute to the app stores separately. We do 3-4 content updates per year, and an annualrenewal in the summer.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012I was able to get into this via a web standards based iOS framework called Nimblekit. Thereare other options for this out there, too. Phonegap is one of the more familiar ones, as it wasacquired by Adobe so it’s marketed pretty heavily whereas Nimblekit is out of the Ukraineand doesn’t get much attention.
  • <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" charset="UTF-8" > Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012The HTML and CSS required to use a framework like this are not that different from some ofthe techniques used in responsive web design. For example, setting the scale of the viewportto 1. And if you don’t want users to scale the entire page, setting user-scalable to NO.
  • @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) Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012After that, media queries can be used to customize your layouts per device if that’s yourchoice.
  • /* Rules for iPhone 3.5” landscape */ @media only screen and (min-device-width : 321px) and (orientation : landscape) { /* styles here */ } Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012The next few screens are what I use for iOS devices.
  • /* Rules for iPhone 4” landscape */ @media only screen and (min-device-width : 568px) and (orientation : landscape) { /* styles here */ }Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • /* Rules for iPad portrait */ @media only screen and (min-device-width : 768px) and (orientation : portrait) { /* styles here */ }Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • /* Rules for iPad landscape */ @media only screen and (min-device-width : 1024px) and (orientation : landscape) { /* styles here */ }Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • 1. Why ebooks? 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 painsDesigning Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Here’s another similar app that I designed with another medical client. This one has a slightlydifferent 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); } Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012The 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%;} Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • #commentForm #commentSave{ float: right; font-size: 0.75em; width: 5em;}#commentForm.show{ -webkit-transform: translate3d(0, 0, 0);} Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • .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; } Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012In the data record area, CSS is used to provide alternate row background colors to improvereadability.
  • 1. Why ebooks? 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Something that is newer to me is the HPub format that is used by the Baker EbookFramework.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012The Baker Framework web site includes a nice demo ebook that highlights how this formatworks.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012The framework supports iPhone and iPad, though I had to do some extra work to make it auniversal app for both devices (their standard demo is only for iPad).
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012There’s a similar web standards ebook framework out there for Android called Friar.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012There 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 hostingservice for these publications. It’s another option that has some similarities to reading inebook apps and devices, but the major shortcoming here remains business model (ad revonly; no way to sell content to customers).
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012If 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.
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Finally, if you want to fully participate in two of the main ebook marketplaces, considerlearning more about Kindle…
  • Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012…and iBooks. Even iBooks author, though a proprietary solution that ties only to the iBooksplatform, still generates books that are mostly built from web standards plus someproprietary tagging. Because the content creation side is so nice, we’re looking into how wemight have our online course production teams use the tool, then strip the extra tagging withscripts to distribute content more broadly.
  • 1. Why ebooks? 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 painsDesigning Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012
  • 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! Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012As 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 thathard to master.
  • As the “reading renaissance” continues, more people are commenting about theseopportunities. Just the other day, Jason Kottke of kottke.org wrote about a blog post on thistopic by Craig Mod.
  • I highly encourage you to read Craig’s piece. It’s really well articulated and highlights somegreat examples of standards-based reading experiences. It’s also a lovingly designed piece; Iwanted to screenshot the entire thing to show you.
  • One of the really nice reading products that he highlights is Marco Ament’s new Magazine foriOS. It’s a new experiment in small magazine publishing by Marco, someone who has dabbledin 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 avery interesting read that might help you get excited about the possibilities of using yourCSS, HTML, and JavaScript skills in the new reading renaissance.
  • To conclude, I’ve been working my way through Karen McGrane’s new book “Content Strategyfor 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012As Karen demonstrates in her great presentation about this topic, the best content strategyfor the web is multi-channel. This means creating and structuring content properly wayupstream, which allows you to consider a variety of market, platform, and deviceopportunities later. With reading experiences, apps, and platforms among theseopportunities, 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 Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012And do not underestimate what people will do on a phone’s smaller screen. As Rich, the CEOof Readability points out, people actually read more on their smartphones than on desktop oreven on tablets! It’s because then ten to have their phones with them more. And as Brad Frostnoted yesterday, anything that people can do on a desktop or laptop, they will try to do on asmartphone.
  • If you are interested in tools and techniques for determining markets, customer needs, andhow to measure product satisfaction with any book opportunities that you might encounteror dream up, I wrote an article about my other main area of focus, product management forthe web, on A List Apart this past summer. I also have presentations about productmanagement on Slideshare.
  • Thank you! @klayon kris.layon@gmail.com kristoferlayon.com Designing Ebooks with Web Standards | Kristofer Layon | @klayon | CSS Dev — Dec. 5, 2012Thanks for attending today, and please be in touch with questions, suggestions, or ideasabout using web standards to design ebooks and other reading experiences and products!