What does the book look like?
Here are two things that may or may not be related:
- I get to create the entire layout of this book.
- The tutorial is running a little bit longer than I expected.
The length of the tutorial is due to one or more of the following:
- I’m being too long winded and making this too complicated. This tends to work itself out as I go through several drafts.
- I’m getting caught up in the weeds and details of the actual application that don’t relate to testing.
- The page layout that I’m using is not putting enough content on a PDF page. This doesn’t affect the amount of content, but could make the book less useful.
In the past, my thoughts about book design have mostly been limited to complaining about the design of the Pro Rails Book—I’m not a huge fan of Wrox’s layout.
It seems like a good idea to try some user-testing on the book layout, since it’s under my control and relatively easy to change. So here are two screen shots of pages from the current version of the tutorial PDF:
I’m looking for your thoughts on issues like the font size, sidebar layout, code coloring, and the like. The basic layout comes from the boom! CSS microformat and has also been used by PeepCode and Envy Casts, but I’ve modified the fonts and layout quite a bit. (The overall work flow is based on these scripts, but again, I’ve messed with them a bit.)
If you’re a font, layout, and design geek, I’d love to get your opinion.
- The body font is 12 point Lucida Grande
- The code font is 12 point Inconsolata, and coloring is handled by Ultraviolet.
- The header and footer font is from Comicraft—it’s their Dave Gibbons font.
Thanks for looking—I’d love to know what you think.
December 30, 2008 at 11:37 AM
That header font is a bit silly.
December 30, 2008 at 12:00 PM
I usually turn my nose up at informalish designs, but this works well, I think. It's not too dry and stuffy, which would be a disaster when teaching something that is reasonably dry itself.
It's not the sort of thing O'Reilly, Apress or whatever would put out (forgetting the Head First series) but I think that's a good thing. It looks quite unique. I like that the code is very strong and of a readable size. I'm not so sure about Lucida Grande. It looks a bit cheap for some reason, but would probably work well on paper. I'd be intrigued to see it with Lucida Sans instead.
December 30, 2008 at 12:01 PM
The blue background on the infoboxes is a bit too bold. Maybe just a blue border, and/or a sky blue or light grey background?
December 30, 2008 at 12:13 PM
The header font - although a little silly indeed - works for me. However, I agree with Joe that the box background is too dominant.
December 30, 2008 at 12:18 PM
Hi there.
I'm not familiar with "the book", having arrived via a link in RubyFlow, so please excuse me if you have already commented on these issues earlier on your blog.
First question: is this going to be printed?
If yes, you can happily reduce the font size. It looks too big for paper (it's OKish for screen, though)
I'm not too keen on "informal" fonts myself, and I'd rather stick with one family for text and one for code, making use of the bold weight (and bigger size) for headings.
Second thought: I understand you are not a designer, and with all due respect, it shows.
If I were you, I'd try to find a decent designer and hire him/her. Quick comments on your blog might help you tweak small details, but if you want a book to look like a book, hire a specialist.
If you have no time and/or money to hire one, or want to design the book yourself (I know the feeling, sometimes I also go beyond the call of duty and end up coding my own designs : ) you can make yourself a *big* favour and get this book: Detail in Typography
You can read it in an afternoon, and it will make you a better designer, a better programmer and, dare I say it, a better person. Think of it as the "Zen and the Art of Motorcycle Maintenance, Applied".
Good luck with your book, it's looking good : )
December 30, 2008 at 12:52 PM
Noel here -- thanks for all the comments so far.
1. I'm not intending to offer this in print, at least not at first. I am worried about the body font being too big -- I like it, but I tend to use a bigger font than most programmers. I'm a little worried about the page size and big left margin as well.
2. Agreed on the blue box, I'll tone that down.
3. I'll try it with Lucida Sans as the body font. I've tried a couple of others, but I haven't found one I love yet.
4. Ale: Access to designers is not the issue -- I have access to people that I haven't really used yet. I'm somewhat limited by the HTML/CSS to PDF tool I'm using, though admittedly it probably could be tweaked a lot more than I've done so far. What kinds of details are you noticing?
5. The header font, which is also used on the site, is supposed to kind of evoke handwritten prescription forms without actually being illegible. Plus, I like it. Though I also see the benefit of having the header be consistent with the body font. Need to play around some more.
December 30, 2008 at 4:25 PM
FYI - IE chokes on your site (see comments on this article): http://www.subbu.org/blog/2008/03/ie7-deflate-or-not
December 30, 2008 at 5:06 PM
As mentioned before, the blue background on the infoboxes seems way too dark, it might work out in a more "baby blue" tone or just plain white with blue borders.
I'm not a fan of the header font, at all. I think it cheapens the overall look of the book.
The code listing seems a bit unstructured and I think it would benefit from a layout similar to the ones in the book jQuery in Action.
An example of said listing can be found on page 11 in the example chapter (pdf)
Good luck with the book!
December 30, 2008 at 8:04 PM
I think Myriad Pro would look better for the body font, and maybe a variation of it for the headings using a color. Also, the current body text looks too much like the code text; you want some variation. Maybe use Monaco for the code text. Here's a sample I threw together really quick, let me know what you think (email me at brandonmartinez A-T gmail D-O-T com).
http://files.brandon-martinez.com/Rails%20Prescriptions.pdf
December 30, 2008 at 11:01 PM
Line numbers for code snippets seem so vain and unnecessary, but, for me, line numbers make code much easier to read, be it screen or print. The way CodeRay (http://coderay.rubychan.de/) does it (by default) is pleasing to me, as is GitHub's way (using Pygments). (Not surprisingly, it appears that CodeRay takes some inspiration from Pygments.)
It also seems to me that your layout needs some sort of grid. I am bothered by the boxes sticking out to into the margins.
Um, do make note that I have the tendency to comment on design issues, and then ask you to make note that I am not a designer, by any stretch of anyone's imagination.
Good luck, Noel! I appreciate your courage in inviting criticism.
December 31, 2008 at 12:20 AM
Me again --
Mark (7), it works for me in IE 7 in a VMWare box. I'll ask around, though.
Peter (8), I'm going to lighten the side box, everybody is unanimous about that, I actually also dropped the font size down in the sidebars to see how that looked.
Manning-style code callouts are probably beyond the abilities of the PDF generation toolchain I've got going (I guess I'll describe that more sometime soon). Plus, as an author, they were kind of a pain to deal with
Brandon (9): I like your sample -- I particularly like the floating sidebars, I may try that, although if the sidebars get too long, I'm not sure how that will go. The combination of Myriad Pro and Monoco looks a little light on the page to me. (The original version of the style sheet that I inherited used Gill Sans, which also looked light. That said, what I have now is probably too heavy. Thanks for the effort on this! I probably will block off the code blocks with a border or slight shade.
Mileszs (10): Line numbers seem like a great idea, I'll try to incorporate CodeRay into the toolchain. I see your point about breaking the grid -- I did it on purpose to give the sidebars a bit more room. But it may not be needed if I drop the font there.
It's fun to play around with this -- and very time consuming. Thanks, everybody!
December 31, 2008 at 1:46 AM
Brandon hit the nail on the head there. It's nice. The light color of the text is good, the contrast in font weight is extremely helpful on a display.
December 31, 2008 at 7:34 AM
I don't want to bore you with too much writing here, but I was a book designer and publisher before I got into programming and web development, and I wanted to give a bit of feedback on these samples.
I can't wait to see the content that you're developing, but I've got to say that, in terms of legibility, the design is currently overwhelming. For example, the multiple colors in the test make me want to skip over the whole thing ... and reading the tests is the entire point of the book.
I really really liked Brandon's sample. A lot.
I can appreciate your desire to carry the "prescriptions" theme through it, but as a reader, I don't really care about the "prescriptions" theme — I care about legibility and a clear explanation of the content. Brandon's was great for that.
I know you're somewhat constrained by your HTML-to-PDF tool. Is that a necessary process? If you want to focus on the writing of the book, I'd be happy to lay it out via Brandon's general layout (or my own, or whatever) in InDesign for you.
Again, to reiterate, I'm very much looking forward to the book. I don't want you to feel like I'm slagging on you. I'd just hate to see what promises to be excellent content hampered by a book design that isn't up to the same standards.
December 31, 2008 at 11:06 AM
As a note, I did use InDesign CS4 to lay out the sample I made. I could make a style sheet to get a similar effect; but as with any publication, it is best to use a real typesetting tool.
If you would like my InDesign files, just let me know.
(also, thanks to those that enjoyed my mockup; it could have been better, but that's what five minutes gives you)
December 31, 2008 at 11:45 AM
Actually, I don't think that there is anything in Brandon's design that I can't basically replicate using what I'm doing -- although I'm sure that InDesign is probably better at the details of managing page flow.
That said, the tool chain I'm using has several other benefits for me, and I'd be reluctant to give it up to move to InDesign or something similar, though I appreciate the offers.
Meantime, I'm experimenting with lighter weight fonts, and more consistent header fonts. I also switched to CodeRay, which gives me line numbers in the code samples and, I think, a slightly less garish code syntax scheme. I'll try and have another sample up shortly.
December 31, 2008 at 7:08 PM
As you noticed, I'm a fan of formatting ebooks for the screen (horizontally). So thumbs up on that!
February 07, 2009 at 1:58 PM
tfregwve http://oihqwyow.com kvremmql jeawlnzm <a href="http://qqvrhroe.com">cxnpurcb</a> [URL=http://xgjollgq.com]rlfbepop[/URL]
June 20, 2009 at 1:30 AM
Good morning. What is the use of a house if you haven't got a tolerable planet to put it on?
I am from Vanuatu and too poorly know English, give please true I wrote the following sentence: "Order of decreasing frequency using the following definitions evaluate you for heart disease in order to determine if imitrex is appropriate for you."
THX :-(, Borden.
June 20, 2009 at 4:14 AM
Hello. Anyone who has gumption knows what it is, and anyone who hasn't can never know what it is. So there is no need of defining it.
I am from Liberia and learning to read in English, please tell me right I wrote the following sentence: "Providing online discount prescription drugs from canada candrug your how to order."
Thank :-) Aphrodite.
June 20, 2009 at 11:59 AM
Good morning. It's a dangerous business going out your front door.
I am from Grenada and also am speaking English, give true I wrote the following sentence: "X rays are fioricet vs imitrex as the significant side around buy fioricet medication online."
With love 8), Ham.
July 02, 2009 at 5:38 PM
Badly need your help. Never read a book through merely because you have begun it.
I am from Tanzania and also am speaking English, give please true I wrote the following sentence: "Slowing the growth rate of outlays for medicare and medicaid is the central long term challenge for federal fiscal policy."
With respect :D, Koen.