I just published an essay about the recent design trends and skeuomorphism entitled “Flat Pixels“. Here’s some more info about why I decided to publish it and how I did it.

If you’ve ever watched anime or read manga, at one point or another you probably encountered a depiction of a traditional Japanese matsuri (festival), with girls dressed up in the traditional yukata (light summer kimono) and strolling along between yatai (mobile stands).

One of the most popular activities you can do at a matsuri is kingyo-sukui, fishing for goldfishes. You get a thin paper scooper and then try to fish as many goldfishes as you can before the flimsy scooper breaks.

The reason I’m mentioning this is that last week we went to such a festival and managed to win three goldfishes. Since then, they’ve been happily swimming around a small fish bowl, doing whatever it is fish do all day.

But yesterday my wife told me we were getting a proper fish tank. When I asked why, she told me it was because fishes will grow larger in bigger tanks. Even if this might not be true (according to fish experts it’s a myth), it intuitively makes sense that environment would affect growth.

Writing & Fishes

By now you might be wondering why I’m going on about fishes. No, I haven’t given up design for ichthyology, and I have a point to make: writing is like fishes.

OK, that probably need a little more explaining.

I’ve written a lot in the past year. Between this blog, my newsletter, my ebook, my other blog, and a few guest posts I probably spent more time writing than actually designing.

And one thing I’ve realized is that just like fishes’s growth (supposedly) adapts to their tank’s size, your writing will adapt to its context.

By that I mean that knowing who I’m writing for and in which context they’ll read it in has a huge influence on the text itself. So if I wrote about the exact same topic for my blog, my newsletter, and Smashing Magazine, I would produce three very different articles.

A Bigger Fish Tank

So when the article about flat design I was writing started becoming too long for a simple blog post, I decided to give it a bigger “fish tank” of its own.

My main inspiration for this was the writing of Craig Mod, notably his essays on subcompact publishing, book covers, and working at Flipboard.

If Craig had published all these as simple blog posts they would already be outstanding for the content alone. But the harmony between content and form takes the whole thing to another level of awesome.

So I wanted to see what’s possible when you remove the contraints of writing inside a blog, app, or site, and just let the words themselves shape their environment instead of being shaped by it.

Technical Stuff

This was also a good occasion to brush up on my responsive coding skills. Now I’ve designed and coded many responsive layouts, but I’m still struggling to find a good workflow.

I’m slowly getting more comfortable with it though, mainly through getting used to how Susy works. Susy is a SASS/Compass responsive grid plugin and I believe it’s vastly superior to “traditional” CSS grids which impose presentational classes in your markup.

But the main benefit of using a system like Susy is that it makes your grid completely flexible. Modifying column or gutter width (or even the number of columns) is always only one variable change away.

Choosing a responsive layout also provided an unexpected benefit: the eBook version uses the exact same layout as the mobile version, which means the HTML page was ready for eBook conversion right out of the box!

I also used a jQuery plugin for footnotes. While hyperlinks are the fundamental building blocks of the web, they can become distracting when peppered throughout a page (especially if they’re bright red…). So for longer articles, footnotes are a good solution to get the benefit of links without overloading the page visually.

On the subject of footnotes, manually updating them and keeping them in the right order proved to be a pain. While the essay is simply static HTML, next time I will definitely use something like Jekyll to help me manage them automatically.

On the typography side I’m using Proxima Nova Soft served via Typekit for the body copy (just like on this blog), and Add Standard Bitmap for the title.

Selling on Amazon

This essay also marks my first time publishing a book on Amazon, more as an experiment than anything else really.

My impressions: while Amazon makes it extremely easy to get your book listed, the tools and ecosystem to do so are by far the worse I’ve used to accomplish anything in the last five years.

To give you an idea, here’s what Amazon’s own Kindle Previewer tool’s UI looks like:

Please realize that this is software put out by a company that people routinely mention in the same breath as Apple, Microsoft, and Google.

And this is what the main digital publishing app on Mac OS, Calibre, looks like:

My point with this is not to make fun of bad design. My point is that bad design is a symptom of a young and underserved market.

And looking at how much I made selling my own eBook without even providing an e-reader version at all, I also believe it’s an extremely lucrative one as well.

I know there’s a couple startups trying to do something in that space. Hyperink wants to help you with publishing your book, Nathan Barry’s ConvertKit is focusing on marketing it, but as far as I know only Pen.fm it taking on actually making the thing (and I’m not even sure what they actually do).

iBooks Author is also promising, but so far it seems too focused on the Apple ecosystem to work as a general solution.

So I’ll be curious to see what new solutions emerge in this space in the next couple months. And since I’m in the process of writing another book, I’ll have plenty of occasions to try them out!

Thanks

Thanks to Vincent Le Moign, Tom Coleman, and Marcelo Somers for reading drafts of this article and giving my their feedback.

I’d also like to thank The Verge for never getting back to me about publishing this essay on their site, which pushed me to publish it myself!