Producing Transcending CSS Revisited

Earlier this year, New Riders gave me back the publishing rights to my first book, Transcending CSS: The Fine Art of Web Design. I’d originally intended to post a PDF of the original book online, but the terms of my contract meant that I couldn’t simply give away a copy of the book New Riders had produced. I needed a new plan.


Transcending CSS Revisited
Left: 2006 cover. Right: A new cover for 2019.

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.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

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.

Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign Right: Transcending CSS Revisited HTML guide.

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.

Bethany Andrew converted the HTML from the online version into XHTML and then into ePub for the ebook version. This, and the PDF, are hosted on SendOwl which also provides payment processing.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

Services and software used

  • Adobe InDesign
  • Grammerly
  • iA Writer
  • SendOwl
  • Sigil
  • Sketch

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.)


Buy ebook from £4.99*

 
Experience EXPERIENCE

Working with clients for over 25 years

Articles ARTICLES
Contact us OK, LET’S TALK

Press to call 01745 851848

chocolate.chimp@stuffandnonsense.co.uk