eReading Revolution
Apr 3rd, 2011 by Christopher Stein
We’re in the middle of an ereading revolution that is very prominently happening on the device front (Nook, Kindle, iPad) and happening in a much quieter way online. It’s the later revolution that’s happening under the covers I’d like to write about.
Text on the web is basically a function of two things. HTML, which defines the text content itself and provides information about what the text is (title, paragraph, list etc.), and CSS which determines how the text looks on the page (font size, color, line height, line lenght etc.). This system works pretty well as evidenced by the billions of words out there on the web. However, for people who really care about how text looks (publishers, typographers, designers) it as been inadequate to create an optimal reading experience and woefully inadequate when compared to the tools available to make a printed book.
Two new standards are changing that. HTML5 and CSS3 are the new web standards that, while more evolutionary than revolutionary as compared to their predecessors, have provided the base from which the quiet revolution in online reading has sprung. Truth be told they are not even official standards yet but they filled some needs well enough that they have been proven all but irresistable to people who put type on the web.
So, what changed? Or, even better, what pain points were addressed? One of the difficulties of marking up text (the process of putting HTML elements around sections of text) is that there aren’t that many elements to use. In fact most of the text that you read on the web is marked by HTML as one of the following: paragraph, title (there are six titles to choose from), list (two basic types), table or quote (two types). To signify something larger like say an article (which might have all of the other types of text inside of it) there was nothing to do but use a generic tag that loosely grouped the other elements and then devise a separate naming system and convention to denote articles, footers or whatever. This ad hoc system meant that it was practically impossible to write a program that could go to different web sites and find articles or whatever. In HTML5 a number of new elements have been added to allow for more semantic (meaningful) markup of text including: article, aside, details, summary, footer and header. This makes it much easier for someone mark up text in a meaningful way and for someone to write code that can aggregate or reuse HTML pages.
What does CSS3 bring to the party? One thing it brings is a much richer set of tools for styling text. Designers can now do things to text in CSS3 that were previously only possible in a tool like Photoshop. CSS3 also has a feature called media queries that allow developers to target different visual styles at different screen resolutions. This in turn has brought about a new design method called responsive design. The basic idea of responsive design is that instead of designing separate web sites for phones, tablets and computers, one site can be designed in a way that it is responsive to the devices that are accessing it. Ethan Marcotte has written the most widely read article on responsive design.
There is another big change that while not technically new to CSS3 has only just been happening since 2010. That change is web fonts. While they’ve been around for a decade or more it is only recently that ease-of-use and licensing have caught up with them. When they were first introduced it was the middle of the browser wars where Microsoft and Netscape and others were continually putting out features that were only supported by their browser. It made life hell for web developers and web fonts never really caught on.
But what are they? Web fonts are fonts that your browser can download along with all of the other files for a web page. I need to back up a bit to explain the signifigance for designers. Before web fonts were available the best a web designer could do is specify which font she would like to appear. Each user’s computer would check to see if that computer had the font installed on it and if it did would use the font, if not it would render an alternative or default font. The designer could specify some alternatives but that was about it. If a designer wanted to use a font that most people would not have the designer would make an image of the text with the desired font in Photoshop and then add that to the page. There are some other solutions and ones that made it easier for search engines to find the text (Image Replacement, sIFR, Cufon) but all had drawbacks.
With web fonts your browser will check to see if it has the font and use it if it does. If the font is not installed on your computer then the browser will download the font and display it, just as the designer intended. In addition to this technology being supported by the browsers there have also been major development in licensing for web fonts. Unless you have a specific license to use a font in this way, legally you are not allowed to serve a font to web browsers. Now there are a number of free sites that help with the process (Font Squirrel, Google Font API, The League of Movable Type) and a number of paid services that sometimes will host the font in their server for you (Typekit, Kernest, Typotheque). This means that designers can be sure that users (with modern browsers) will see the font they intended.
Adding fuel to this HTML5 and CSS3 fire is the fact that all of the new touchphones and tablet computers include browsers that can handle HTML5 and CSS3. This is another kind of stanardization that makes it much easier to design for mobile devices (at least the newer ones with capable browsers).
These new standards that allow for more precision and fidelity in how text is defined and displayed have opened up opportunities for new possibilities for text layout and text layout systems. One example of this that uses responsive design principles is the Less Framework. It’s a CSS system that helps a designer adapt how a single site will look on a phone, tablet, monitor or large monitor.
Another example of the kind of service that benefits from this is Readability. Readability is a service that allows you to save web pages and then reformats them for you for better readability. The people who made the service, Arc 90, had to write code to figure out what was the main content of a page and then save just that and not all of the ads and everything. HTML5 will make this a much easier programming task. The folks behind Readability have also innovated the publishing model. They offer a premium service, $5/month, but they give 70% of the funds they collect from this back to the people who write the content. So Readability allows you another way to make money off if your blog. Instapaper offers a similar save and read later in a new, more readable, format. It doesn’t have the same payment innovation.
Other innovations have begun to come on the level of entire publishing platforms. Treesaver is a framework for creating magazine style layout that automatically adjusts to any size screen. It uses HTML5, CSS3 and Javascript to pull this off. It’s also open source: http://treesaverjs.com/. An interesting fact is that this project is being developed by veterans of the publishing industry. Roger Black has been in the industry for over 35 years with publications like The New York Times and Rolling Stone and a recent redesign of The Washington Post. Filipe Fortes worked for Microsoft and also led the development of the Times Reader. For examples of Treesaver in action check out the publications at Nomad Editions
Bibliotype, created by Craig Mod, is focused just on tablet reading. It’s goal is to make it easy to design books for tablets with just HTML, CSS and Javascript. It does the job and looks good in a browser as well. It provides a system for setting type, footnotes, menus and more. It also simplifies the reading size issue by specifying sizes for reading at 3 different distances it names Bed, Knee and Breakfast. It is also open source.
Part of the idea behind Bibliotype is that the future of the book is HTML and CSS. Along the same lines you may not know it but the ePub digital book format is basically HTML with some XML thrown in. The new ePub3 will be based on HTML5 and CSS3 and include Web Fonts as well.
So, yet again, just as the original HTML did decades ago, simple, flexible, open standards are drivers of innovation. This is good news for reading and web experience in general. The final piece of the puzzle is that all of the latest versions of the major browsers interpret HTML5 and CSS3 in largely the same way (IE9, Firefox 4, Safari 5, Chrome 10, Opera 11) So make sure you are using the latest version of your favorite browser; now you know what you’re missing.
The future of digital reading is bright and it is based on HTML and CSS. Perhaps one day most written material, from books, to magazines to articles to term papers will be written in HTML and CSS. What I’ve described here is really the first part of the revolution. It’s the technical kinks getting ironed out. The second phase will come when tools are made that make it easy for anyone to take advantage of these technologies, much like tools such as WordPress did for blogging. Look out for more innovations in this area, I think we’re just at the beginning.
[…] For a long look at how they are effecting how we read you can view a post I did about the future of eReading. […]