Hacker News new | past | comments | ask | show | jobs | submit login
Designing blogs for readers (mattgemmell.com)
123 points by ingve on May 23, 2013 | hide | past | favorite | 68 comments



I disagree with the opinion that comments are completely unnecessary. It does depends on your readership, the topics you discuss and the popularity of your blog. If you find too many of your comments to be rude, or that you're overwhelmed by the sheer number then, sure, consider turning comments off.

However, many blogs don't attract comments in their hundreds. For me, disabling comments would feel like saying to blog readers that I'm not interested in what they think about my blog post (and I am). You might write for yourself as you compose posts, but when you publish your post you want others to read it. Are there blog authors who can honestly say they aren't interested in the views of their readers about what they've written?

I would rather a conversation take place on my blog than telling users to take the discussion elsewhere. (You can't really discuss things in a 140 character tweet).

Related to this discussion is another viewpoint about getting rid of social media buttons http://ia.net/blog/sweep-the-sleaze/


"Writing is inherently about its author, and is a product of their personality and opinions – that’s not something to be shy about, and we shouldn’t try to change it either. So, write for yourself – and hold yourself to an appropriate standard, because you’d better believe that others are judging the person as well as the piece – but as soon as you publish your views, you’re inviting readers to take a look."

Matt comes very close to one of my beliefs about writing... Creative writing is a way to give yourself an opportunity to think through an topic or story and give the rest of us an insight into how your mind works. That's the kind of writing I love -- the kind where I can see the gears moving to a certain degree and I know the author is honestly putting an effort into analyzing a subject or putting something difficult into words.

As an example, I think this is why the recent "Hyperbole and a Half" (http://hyperboleandahalf.blogspot.com/2013/05/depression-par...) about Allie's experiences with depression is so valuable and compelling.

And it's why I find listicles and articles that purport to be delivering glorious nuggets of truth from the top of Mount Bullshit to be boring, frustrating, and obnoxious. (If you look at my comment history, you'll probably find a fair amount of bitching about articles that are nothing but (often wrong or over-simplified) conclusions with no evident thought process behind them.)

I think it's actually something that's hard to fake. Like Matt says, your personality and opinions are integral. And it almost forces you to start writing about something you're not so sure about, which can seem uncomfortable. Because you might come to wrong conclusions. But if you write to edify yourself and to give yourself the chance to meditate and process the world around you, then suddenly sheer audience count will matter much less and (if you're a good thinker) you might find yourself writing much more compelling pieces, anyway, since, like I said, I think people appreciate being able to see the mental processes of another person at work.

So. I've diverged a bit from Matt's initial point, but his words made me think of this so I thought I'd share...

(Before someone else says it: No, I'm not talking about technical or instructional writing. That's different.)


Stephen King[1] relates a similar idea:

"Write with the door closed, rewrite with the door open. Your stuff starts out being just for you, in other words, but then it goes out. Once you know what the story is and get it right -- as right as you can, anyway -- it belongs to anyone who wants to read it. Or criticize it. If you're very lucky, more will want to do the former than the latter."

[1] Stephen King, "On Writing" (chapter 20)


I couldn't agree more with his claim that comments are an unnecessary feature for a modern blog. Back in Web 2.0 times comments were an absolute must-have. I think the web in 2013 has largely moved on from the notion that "everything must have a comment form below it".

People generally don't put as much work into their comments as you did into your blog post, so the comment section is a tangible dive in written quality. And they tend to be quite "fire and forget", because although somebody might disagree with something in the five seconds after reading a post, they are unlikely to remember that disagreement two days later and return to see if anyone responded.

Personally, if somebody felt strongly enough about something I wrote to want to say something to me something about it, I'd prefer an email anyway.


I think the web in 2013 has largely moved on from the notion that "everything must have a comment form below it".

It's definitely true that a lot of people don't put much energy into their comments, but when they do those comments can be very valuable. For example, I wrote a post about why physicians assistant or nursing school is a smarter choice for most people than med school (http://jseliger.wordpress.com/2012/10/20/why-you-should-beco...), and some of the comments are really good. Do I delete the dumbest? Yes. But the occasional really good comment outweighs the many really bad ones, at least in my experience.


Also, if people today are going to comment on something you write on a blog its more likely they'll comment on your FB link to the post, or they'll link to the post on FB themselves, or mention it on Twitter. Before I killed comments with my redesign I'd have maybe 2 comments on the blog when there was often robust conversation happening on FB. I'm not particularly happy about those conversations being locked up on FB, but there doesn't seem to be much I can do about it.


Putting my new application here that serves comment threads to the browser. Curious about feedback and general utility.

https://chrome.google.com/webstore/detail/hey-nice-jacket/gl...


I disagree with two points:

1. Comments are still necessary. Tweeting a link and a short comment doesn't cut it; not everyone has a blog (or wants to make a public post to a different audience about another blogger's post) just to respond - to assume people will blog about you is sheer arrogance. Maybe Matt doesn't care what others think, or want a discussion and discourse, but I certainly do.

2. Opening links in new windows or tabs is OK if your blog has a very non-technical audience. Most people don't know the keyboard shortcuts for opening in a new tab, and even though they can right click... don't. It's always fun to see people's enthusiasm when I show them the shortcuts, and to watch them start opening links in multiple tabs!


Opening links in new windows or tabs is OK if your blog has a very non-technical audience

Have you tested that, or is it an assumption... because every time I have tested this I have found the opposite ;-)

(i.e. that opening stuff in new tabs automatically will confuse more than it helps, and folk have trouble returning to the original post often leaving it unread - especially for non-technical folk).


I had Disqus comments on my blog for a while. However, I noticed that the good discussions took place on Hacker News and Reddit.


Yes, which suggests that what the Web needs is proper support for aggregating / merging comments on a story when those comments are spread across multiple domains. Ideally, you should be able to go to

http://www.example.org/blog/a_post_about_something.html

and see in the "comments" section the comments from HN, reddit, G+, and elsewhere.

From what I remember when I started looking into something like this a few years ago, from a technical perspective, SIOC[1] and FOAF[2] give us some of the building blocks to do something like that. But it'll probably never catch on just due to the economics...

At least if you blog on Blogger, they have integrated G+ discussions now, which turns out to be kinda nifty.

[1]: http://sioc-project.org/

[2]: http://www.foaf-project.org/


Microformats are a more pragmatic approach.

http://microformats.org/wiki/rel-in-reply-to


Don’t make links that open new windows or tabs; it’s grossly hostile to the reader.

I don't really agree with this one. From my perspective as a reader, I prefer when links have target="_blank" set, because it means if I forget to (or couldn't be arsed to) ctrl+click or right-click -> open link in new tab, I still don't lose my place on the current page, and can go poke around at the linked content at my leisure.

Maybe I'm weird (OK, obviously I'm weird in some regards) but I prefer to open links as I go, but read the main text-stream first, then go back and read linked articles, posts, citations, etc. If they are conveniently opened in a pile of tabs, it makes my life easier.

Curious how the rest of the HN readership feels about this...


I don't really agree with this one. From my perspective as a reader, I prefer when links have target="_blank" set, because it means if I forget to (or couldn't be arsed to) ctrl+click or right-click -> open link in new tab, I still don't lose my place on the current page, and can go poke around at the linked content at my leisure.

Obviously @mindcrime find's it useful ;-) However whenever I have done user testing of links opening in new windows it has never helped. At best there's no difference. Very commonly it confuses and does the opposite of what the site designer wanted (that people find it easy to get back to their site).

For example I've see the following happen on ecommerce sites on multiple occasions:

* On site we're testing, tasked to buy a Foo

* Find some external link that opens in a new window

* User views the link, hit's back button - back button fails (it's a new window)

* They then just Google for "Buying Foo" of similar

* Pick a new site - probably amazon or some other familiar name

* Continue with the purchase elsewhere

People understand how to return to your site when they visit another. You hit the back button. Break that behaviour and you make it harder not easier for most people. Especially in mobile & tablet browsers where tabs are often much less visually obvious.


Don't break my browser defaults for your preferences.

If I want it to open in a new window I'll shift+click and if I want a new tab I'll ctrl+click or middle mouse click.


Same here, I pretty much open every link in a tab, but then when I'm ready to leave I want the last link in the same tab. So I prefer they all open in the same tab and I decide when clicking.


Fair enough. What would be nice would be if there was an easier way of making the behavior optional, besides:

A. making the user right-click and select from a context-menu

B. making the user remember (or not) to ctrl+click / middle-click

C. putting the infamous Here Is A Link (open in new tab) parenthetical thing next to the link.


It depends. I usually prefer to stay on the same page. There are use cases however when i am ok with a new window. For example, a help window/pop-up, details on a field while filling out a form (you need it sometimes) etc. Sidenot, the worst thing that I hate: clicking on a link only to find out that the new page now has no menu/link to go back to anything else and rely on the dreaded browser back button.

oh btw, if I prefer a new window, I can always right click and say "Open in new tab" etc.


I've independently come up with the same decisions on many of these points and, weirdly, a very similar blog design:

http://jmoiron.net

I decided even to dispatch with the header bar, putting navigation at the bottom of the main page; presumably, people will only care to see more of my writing if they've read the article. Not as good for people revisiting the page, but they can likely remember http://jmoiron.net/blog or bookmark it in order to get to the search.

My fonts are slightly smaller and slightly less contrast, and after looking at Gemmell's blog I wonder if I should change that decision. I wanted to have emphasized elements of the text easily distinguishable from the body while not distracting.

Also, I agree with Gemmell's "The basic tenets of hypertext should be left alone". One of these basic tenets, to me, are the semantic meanings of Blue, Purple, and Red text for normal, :visited, and :active hyperlinks. If you want to chose a link color, do not invert or violate these classical meanings.


>I've independently come up with the same decisions on many of these points and, weirdly, a very similar blog design

Yea. I feel the same way, though strangely a lot of this is recent and I didn't have the same opinion a few years ago. A portfolio site I made just 3 years ago looks quite immature now. I just put this together with a little static generator a few weeks ago and it's the first time I've posted it anywhere:

http://www.jere.in/

I do disagree with the post on links. I don't see why underline is necessary and personally I don't like the look. Also, I don't find :visited that useful when reading articles; having it on something like Google is another matter.

I did think about an option to toggle off the highlighting of links completely to reduce distraction.


Nevertheless, you seem to disagree with Gemmell about underlining links. In my opinion the underlining is more important than the color.


Yeah, I think that bold looks better with sans serif typefaces than underline, so that was a design rather than an ergonomic decision; perhaps not a correct one. I think underlined blue text is probably the "most linky" looking text, given the history of the web.


Personally, as long as they stand out from the text and are in color, I don't much mind. Maybe I've gotten used to non-underlined links because many designs seem to use them.

For what it's worth, on my design I've made the compromise of underlining them on hover.


Somewhat off-topic, but as long as this discussion is on blog design:

What are good options for presenting significantly longer works? For example, a 30-page paper, or a 100-page book?

Is it best for readability / usability to break things out into short blog posts? Or ditch the blog format altogether and just upload some HTML files that use a totally different style? Or something else?


How do you want it read and what's the audience? Assuming it's technical material for an HN type audience, realize that no one's going to sit and read through it at once, so you need to think about making digestible chunks and having good navigation. I like the GNU Make manual a lot and it's absurdly low tech. git-scm.com is much more modern looking but has essentially the same structure.

For tablets PDFs can work really well. If you want to be read straight through or be an offline reference (printed or tablet) that might be better but not if you're going for random access.

Man pages are a nice model too.

Edit: typo I'll attribute to autocorrect


I'd say have good typography, and use headings with anchor links (href="#foo") with a button next to it, so people can save their position, and return to it later. You can also help with this (for non-touch devices) by using the NYT's emphasis.js: https://github.com/NYTimes/Emphasis.

Manual (not automated) pagination is also an option for letting people know when to breathe.

Otherwise, it's also going to be really hard for people to link to more specific parts of it.


(off-topic to off-topic) For long papers / books, think about learning LaTeX and compiling your files to PDF (unless it must be an HTML).

LaTeX and its packages/templates have man-years of development invested into readability. All the scientific papers are produced with TeX/LaTeX. The program and packages for it solve numerous problems like proper spacing, citations, bibliography, dealing with orphan paragraphs etc. etc.


This is from 2001/2003:

http://www.nngroup.com/articles/avoid-pdf-for-on-screen-read...

Still true? Or are users okay with PDFs now? When browsing the web on my iPad, PDFs seem quite acceptable.


I prefer websites to PDF, but when we're talking about 100 pages, PDF is the way to go (unless you want to split into chapters and subchapters).


If you're on a tablet, I think you would much appreciate an ePub. I most definitely would. It's mainly for reflowing text. I know reflowable PDF is possible but I have never seen one in the wild.


It's still true from all I've seen in user tests.


Unless things like equation numbering are important, using pandoc to convert markdown to PDF via latex will be much easier and get you 80% of the way there. Then you get decent HTML for free as well.

org mode is another option for that too if you prefer their markup or like outliners (and use Emacs)


I am currently working on horizontal scrolling blog with columns. It is a real pain. But it is very much readable.

http://jsbin.com/azayum/1


I wished the "column" layout extension would get more love.

Column layout with horizontal scrolling is somewhat unintuitive for newcomers, but It's really much more readable. And, after you actually get used to it, horizontal scrolling is so much better than reading through a PDF article with multiple-column layout.

I was actually trying to make use of the column layout to layout text, but it seems that the column layout is aimed to replace div layouts, not really at formatting text. I cannot set a column limit height, which makes it totally useless to format text. I wished I could have "pagination" (ie: break the column height to the browser height), so that pressing page-down would bring me to the next screen-full of two-column text. THAT would be good.

But having two-column reflow of text is totally useless for text. I don't want to go up/down the text like I have to do with PDFs.


nice


To my mind even this contains unnecessary elements, and I hate fixed-width narrow columns. I've tried to push the limits of the absolute minimum of distraction in my own blog (http://m50d.github.com); I'd be interested to hear of people taking similar approaches.


A couple of Matt's complaints might apply to the design of your blog: tiny fonts and long lines. Long lines are a readability problem because the eye tends to get lost when jumping from the end of a line to the start of a new one. Small fonts are a problem for obvious reasons.

The very first thing I did when your URL loaded was to increase the browser text size. A good rule of thumb when it comes to typography on the web these days is to be very cautious about setting a font-size smaller than the usual 16px browser default.


Agreed. The second thing I would be forced to do it shrink my window so the lines aren't so long.


Agreed, when reading a blog with long lines I usually have to resize my browser to keep it readable.

If the content is very short (like comments on HN) then I don't mind the long lines though.

And small fonts are definitely a problem, I have set my browser's minimum font size to make HN more readable :)


You may hate "fixed-width narrow columns" but I find Matt's blog FAR easier to read than yours. Your line length really is too long.


I'm not quite as stripped down as you, but clicking through to the story on mine gets you to mostly text on a white background. http://odonnellweb.com/anchor/


You weren't actually asking for comments, so sorry if I'm just being annoying, but:

* I love the font size and content column width. More line height than 140% might be good, but I then again have extreme preferences for line height (160%).

* Consider not paginating the posts, or picking a higher limit. You currently have 1 more than you show on the first page, so why not show it on page 1?

* The big image on the search page is funny, but takes a very long time to load. Removing it or moving it to a CDN will make loading that page faster.

* text-align: justify is your friend! Thin columns look weird with right-aligned text.


I like it. I'd maybe adjust the split to favour content over the left image slightly more and clean up a few things, but the design is nice and I love the image panel. Been meaning to do something similar in a few ways.


Having columns too wide hurts readability though: the eye has difficulty tracking which line is next when it flicks from the extreme right of the screen back to the left (or vice-versa for RTL writing systems).


I wonder if he ever A/B tested his preference for narrow columns? When I ran 2 A/B tests on my own site some time ago ( http://www.gwern.net/a-b-testing#max-width-redux ), both turned in 1000/1100px as the top width, and the narrower widths like 800/900px did not do well.

Admittedly, my site is not a blog but long-form content, which makes me wonder how well my results might generalize.


Some thoughts that occur:

* Was that test just on new users - or subscribers in general? If the latter you're going to self-select for folk who are interested enough in your stuff to read regardless, which will skew the results somewhat.

* Also - judging by the blog topic - you've got a pretty technical audience. One of the few groups that do have the knowledge to use tools and preferences to get around the problem. I'd be leary of generalising that to other markets.

* You're a/b testing on max-width setting - not line length. So a bunch of your users in both groups are going to get exactly the same experience if they're on smaller displays. This will make the improvement on larger displays seem less significant.

* Tests like this can be really skewed if you have audiences that shift device over time (e.g. getting popular link tweeted and retweeted can push sometimes push up the mobile portion of a site enough so that certain display types work better/worse.)

* The line length is something that has interactions with other typographic features like line spacing and font size. Optimising on one alone can lead to poor results.

I'm not saying that you're wrong - but those are things that occurred ;-)

In general what the research done by others indicates is that users prefer shorter physical line lengths, but read faster on some longer line lengths (within limits obviously - backup http://www.usability.gov/articles/newsletter/pubs/082006news...)


> * Was that test just on new users - or subscribers in general? If the latter you're going to self-select for folk who are interested enough in your stuff to read regardless, which will skew the results somewhat.

I don't have 'subscribers' or 'new users'. Just people visiting the site. (I suppose there's people visiting from the RSS feed, but they're well under 1% of page views.)

> you've got a pretty technical audience...I'd be leary of generalising that to other markets.

OP's blog seems rather technical.

> This will make the improvement on larger displays seem less significant.

True, but this still wouldn't explain why the smaller max-widths - the max-widths that would hit the most viewers - would not win.

> * Tests like this can be really skewed if you have audiences that shift device over time

Certainly, but the 2 tests were separated by something like a year. Is it really likely the audience changed in both a/b tests in the same way?

> * The line length is something that has interactions with other typographic features like line spacing and font size. Optimising on one alone can lead to poor results.

Sure, but in the absence of any specific reason to suspect an interaction...


Don't define your text width in pixels.


What's your beef? Seems to work fine.


For me if I hit one of your posts my experience would roughly:

* Wow... that type is small (zoom to 125% - something that I know that the vast majority of users do not know how to do)

* Wow... those lines are still too long for an easy read (zoom to 200% - which gets line length sane for me, but the font size is now huge and killing lots of my vertical real estate)

* God damn that fixed header is annoying and cutting into my already limited vertical real estate as I scroll

* Hit close or the readability button.


My blog is similarly minimalistic (http://beza1e1.tuxen.de/articles.html).

However, I do have an bigger footer, because after reading an article the reader should have various options like reading more of my articles, comment via email, flattr me, etc.

I also want a date on every article.

The titles on your overview page are hard to scan, because of the dates in front of them. I put the dates after the titles and dimmed them down.


I actually like this quite a lot. I might have to steal some ideas.


Please tell me when you are finished. Maybe I can steal some ideas back. ;)


Your page shows no content when Javascript is disabled (CSS is display: none). Why don't you do the Markdown to HTML conversion statically, or on the server?


Mostly I like the fact that the page includes the post in its original format.


Since this seems to be the blog-feedback subthread... I don't have a blog yet, but I've been tinkering with a design for a bit. Feedback is appreciated.

I'm aware that many people hate light-on-dark, and I'm trying to find a solution that makes both me and such users happy.

Also, try resizing it or viewing on a phone.

http://qu4z.net/blog/


Your columns are too wide for the font size and so you have minimized readability rather than distraction.


oh god giant block of closely-leaded tiny text that stretches across my entire browser (which currently is about a foot wide) with no inter-paragraph spacing ABORT ABORT ABORT hits back button


I applaud the emphasis that is given to written text, that definitely is something that deserves the attention and has been lacking on many sites.

But I kinda feel that this goes a tad over on the minimalistic side, which isn't too bad, but I wouldn't like if applied in dogmatic way to all sites.

I don't know if the “most popular posts” lists are the most optimal for content discovery, but having none seems a bit harsh. No, I'm probably not looking for blog posts on specific date, but I often look couple previous or next posts and the latest if they happen to relate to same subject, or if there is more interesting content to be had.

Comments, I'm torn over them. I feel like it's an lost battle to have discussions coherently in one place, but still many times I've found comments on top ranking posts about problems I've had to be invaluable, with corrections, alternative suggestions and updates to later versions of software. Also doesn't mesh well with statically generated sites unless something like disqus is used, which I generally don't like that much..

Social media buttons I value just about as much as I value any random ads on pages. Even if I share page I do it by copying the address anyway — but I guess it's a bit different on more mainstream oriented sites where the median user might find address bars exotic and intimidating.

Also I would be interest on thoughts on how images relate to this. Should they also be constrained within the text column bounds, should they be lightboxed or link directly to the original picture? I find myself a little conflicted on good use. This author seems to like linking to non-working flickr pages.

Hmm, I sound perhaps a little negative, but my overall impression was still on the positive side.


I find that page hard to read due to its huge font-size. Also when I am somewhere in the text and there is a headline, I have a hard time guessing its level. Some additional decoration or indicators on the side might be nice. The screen highly limits the overview as you cannot scroll away and quickly refind your position, you lost the position. So additional marking of the place in the text would help a lot with those "very few of many lines visible on the screen" pieces.

edit: There is a similar problem on several of the namedropped sites too, http://www.marco.org/ http://shawnblanc.net/ and http://www.loopinsight.com/ all have a weird mixture of title formatting of the posts. Sometimes it is big, sometimes small, I have trouble seeing where are post starts or ends and what are just smaller headings within one.


Differently, did you know that readability is not always good for all types of content? If an article requires some thought and concentration then less readability is preferable - see this video of Adam Alter on something he calls 'disfluency' - http://edge.org/video/disfluency


Sound advice...I'm viewing the OP from a tablet so I don't know if I'm seeing something different than the norm, but whatever sparked the trend toward single column content design...thanks! When I was mucking about in my original blog's CSS, I wasted a ton of time thinking I needed multiple columns (in the blog content) for floating images, boxes, etc.

Now I'm happy with just single columns...much less work to maintain, much more readable for users, and more time to think about the actual words rather than CSS.

Moving to Markdown helped expedite my preference for simplicity, too.

As our viewing surfaces only get more diverse, I hope single columns are a long lasting trend


Agree with most of his points. Unknowingly, my blog has followed the same kind of timeline. My current design is not quite minimal, but the content has nothing on the side, I don't have a huge header with a calendar and god knows what else. The worst thing I have is a single ad in the header, but this actually works quite well for content because usually the beginning of content will be at the upper-middle of your screen, where the eye is usually resting..

The one thing I disagree with is comments. Comments are hard to get right, but they're not replaceable by social media alone.


Completely agree with everything. That's also why I use readability ( https://chrome.google.com/webstore/detail/readability/oknpjj... ) which transforms the article I want to read into a very well designed and readable format. Just by pressing `.

In addition it has an Android app which is done very well. About 80% of the posts that I see here on HN, I simply safe for later and read at home in the garden with this app.


I agree with almost all of your points, the exception is the sidebar.

Not in the traditional sense, but in the sense of quotes, images, supporting items - that are called left, right, or full width.

Using your site as an example and lets pretend its 12 columns with 3 empty, 6 for the blog, 3 empty. That space could be well served with links, resources, images, quotes that serve to enhance the writing. These resources could stretch into the 6 for the blog or remain isolated in their sidebars.


I get a lot of people reading my recent 5 posts and my top 10 (by readers) posts so I kept the sidebar. But there isn't much else in it. I considered having it slide in or something but this is simpler.


My opinion towards enhancements is split. Footnotes in dead-tree publications or sidenotes on the web. If something is important for the reader it should be in the main text. If it is not important, why distract the reader? I have not found a good rule when something is not important enough for the main text, but still important enough for putting it somewhere near the main text.


I love the readability of your blog. Is there an equivalent theme for WordPress?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: