It must be a really quiet day for this to make the front page! I can't believe I just wasted time reading that.
One single timesuck in a reservoir of timesucks? HN is hardly the place to spend time if you actually have things to do.
3px of padding makes all the difference in the world
11–20 of 92 posts
Re: 3px of padding makes all the difference in the world
#12Maybe the original design had the even padding but facebook A/B tested it and found that people are more likely to read the comments below if there is less padding on the bottom? While I agree that is visually looks more balanced, it takes more than my opinion to decide that facebook made a design mistake.
Per the CSS, the margin of the status text element is 5px on the top and bottom.
The margin on the "Like/Comment/Share" and Comment boxes is also 5px total. (Comment box is margin 1px, padding 4px)
Maybe it's symmetry of a different sort?
Re: 3px of padding makes all the difference in the world
#13I've noticed Facebook has been doing a lot of AB testing on me lately. [Example: My Graph Search bar is now White-on-Blue instead of Blue-on-Blue. Also, the sidebar with birthday notifications used to display Friend Requests that told you who Friend Requested you; now it's gone.] This spacing behavior is likely also a part of that. It just happened to me very, very recently, and there used to be sufficient padding in…
It's happening to me too. Every day something looks broken (read different). The Facebook logo was not centered before the graph search for a couple of days, the height of the chat box was changed and same goes for the padding.
All I hope for them is to remove (or shift) the video chat button. I've had lots of accidental clicks on it.
Re: 3px of padding makes all the difference in the world
#14He has a point that many interface designers will appreciate and others rankle at as nit-picking.
But I was struck by the irony of this particular observation being made via a blog that uses a body typeface with ever-so-slightly but definitely too-narrow tracking (letter spacing). Or maybe the kerning data is off. I would have it loosening by about 1/200em overall, with the most noticeable improvement becoming apparent on adjacent vertical strokes.
EDIT: the samples of this face, "Oxygen", that I see at the creator's site (Vernon Adams) don't suffer from the same issue so perhaps something has gone awry in the conversion to WOFF.
Re: 3px of padding makes all the difference in the world
#15Re: 3px of padding makes all the difference in the world
#16It's always tricky to adjust the padding/margin values because you need to take into account each case in which these 3 added pixels will have an impact. Maybe the style applied to this particular box is shared with other elements or maybe this box is used in other contexts where 3 pixels more will look odd. And I guess that for a website as dense as Facebook, it's easy to try to adjust something while breaking something else.
On a side note, whenever I set the margins of adjacent elements, I take some time to wonder if I'll put a margin-bottom on the 1st element or a margin-top on the 2nd one, or put both margin-top and bottom on the middle element and none on the 1st and 3rd. My rule of thumb ends up being the following one: use only one margin (top or bottom) on all adjacent elements, because some of them might disappear on some pages, so I need to provide some kind of flexibility in order to maintain a decent spacing for each and every scenario.
Re: 3px of padding makes all the difference in the world
#17This is the same obsessive minor attention to detail that turned Apple into a multi BILLION dollar company.
... and well deserved at that.
I say good on you Gary, its people like you who push the world forward, continually looking for ways to improve things no matter how minor.
Re: 3px of padding makes all the difference in the world
#18He has a point that many interface designers will appreciate and others rankle at as nit-picking. But I was struck by the irony of this particular observation being made via a blog that uses a body typeface with ever-so-slightly but definitely too-narrow tracking (letter spacing). Or maybe the kerning data is off. I would have it loosening by about 1/200em overall, with the most noticeable improvement becoming appare…
I noticed the exact same thing. It was rather annoying. For example, in the word "like" (as in "And here's what it would look like fixed") the "li" had joined into a single shape.
Re: 3px of padding makes all the difference in the world
#19A reminder that the imbalance of 3px may be intentional:
It means that the post is closer to the comments are closer than to the user, and it pulls your eye more naturally to the comments than if they were perfectly equal.
Sometimes asymmetry is a useful design element, too.
Edit: I noticed that lukeholder has said the same thing.
Re: 3px of padding makes all the difference in the world
#20It must be a really quiet day for this to make the front page! I can't believe I just wasted time reading that.
And to think you wasted even that much more time making this comment! Your time is leaking everywhere!