Tuesday, October 18, 2011

Formatting Mobile Compatible eBooks on the Web

With the Kindle version of my eBook published alongside the iPad and PDF versions, I thought I should go back and tidy up the web version of ICT Sustainability. As this is a "book" I decided to emulate the look of an eBook reader with the web version of the content. The Caliber e-reader displays two windows: a table of contents on the left (with the current chapter highlighted) and the book pages on the right. This was simple to reproduce using CSS.

As the web page has more room I have the book title and author's name on the top of the page. Unlike an e-reader, where the book will always be opened at the title page, a search engine may take the reader directly to a chapter of the book, so it is useful to have the title and author displayed. Also I included a description that this is an eBook, so that the reader will forgive the very simple formatting of the page.

One surprise was that when I checked the HTML validation of the page I found numerous errors (and some CSS errors). These errors don't stop the pages displaying on the average web browser, but may cause problems with mobile devices (and search engines). The pages scored only about 56 out of 100 on the W3C mobileOK Checker. Fixing the syntax errors, removing all the "critical" and "severe" failures, increased the mobile score to more than 80 out of 100.

No comments: