Sitting with Alex and Sue outside a cafe in Windsor, we hatched a plan. We decided to make an online version of Transcending CSS which would be free for everyone to read. Then, we’d typeset the book into a new format and offer it as an ebook and PDF.
I didn’t intend to make this new book a second edition. In fact, I was keen to retain the original content, almost like a historical record of how we designed and developed websites in 2006. To highlight how things have changed between then and now, I decided to add a written commentary to the ebook and PDF.
Revisiting the content
The first step was to copy the content from the original. I didn’t have a PDF version of Transcending CSS, and the pirated copies I found online were impossible to copy from. Luckily, one of the translators of the original book had clean PDFs which they gave me.
Reading what I’d written in 2006 was painful. I hated my writing style, repetition, and vagueness. I started to rewrite every section, following the original outline, and the end result is a version of Transcending CSS where hardly a sentence is untouched. I changed spelling from American to British English, and switched to an active tense where I and telling you what I think.
I was thrilled when Rachel Andrew agreed to write a new foreword. I can’t think of a single person who’s done more for the web over the last fifteen years than Rachel.
300 new illustrations
Next came the examples and illustrations. I reinstated the full newspaper front pages, and retained the original screenshots of websites from 2006, including the CSS Zen Garden. But, I’d made my example designs and code overlays using Macromedia Fireworks and they were no longer fit for purpose. So I redesigned every example, keeping the Web 2.0 feel from the originals. Just like before, I included in-jokes and the names of my friends. At the end of the process, I’d made almost 300 new images for this edition.
In the commentary, I write about how we can implement my designs today. This involved developing new HTML and CSS for at least half the examples. I had most fun replacing the original Advanced Layout CSS examples with CSS Grid Template Areas, and will publish those at some point soon.
Developing the online version
People have published books online before, and I followed the format of Brad Frost’s Atomic Web Design. I wanted my online version to use today’s transcending technologies including CSS Grid, Flexbox, Shapes, and SVG. I also wanted the book to load quickly and be a great reading experience on desktop and mobile.
Typesetting and page layout
Sue transferred my newly edited text into InDesign and over a couple of months of evenings and weekends, we laid out the new book using InDesign. Although I’ve switched almost all of my print work over to Affinity Publisher, that app doesn’t (yet) have the ability to use GREP styles which automatically prevent orphans and widows. That’s an essential feature when typesetting hundreds of pages.
Services and software used
- Adobe InDesign
- iA Writer
Producing Transcending CSS Revisited took far longer and involved much more work than I expected, but I’m pleased I took on the job. I hope that people will read it and appreciate how much has changed, but also how many challenges have stayed the same.
Free to read online
Transcending CSS Revisited is now free to read online, and if you’d like a beautiful PDF and ePub version, I’ve made a bundle available for only £9.99+VAT (£4.99 for students.)