Maybe 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.
This is a perfectly reasonable explanation that is often overlooked by designers. This also happens to be why I don't particularly love design anymore. What looks right and what converts the best are two different animals, and I don't like purposely creating ugly shit with my name on it.
Sometimes when things are too much in proportion we're left admiring the structure and not bother with the content. If something triggers our OCD, the padding in this case, it forces our attention to that spot. It's similar to how we're drawn to faces on a page.
He 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.
Yes, and his blog’s title uses an ASCII straight quote in lieu of an actual apostrophe.
Before that, Posterous’ default template had tiny, light grey, non-subpixel-antialiased text for body copy. It was excruciatingly hard to read. I never understood that; the point of a blog is to making reading and writing easy, but Posterous only ever cared about the “writing” side of that, it seemed. (This point is further illustrated by the obnoxious headers Posterous blogs had. By far the most visually noisy part of a Posterous post page was the call-to-action at the top: Sign up for Posterous, yourself!)
Actually, Garry, I’m pretty curious about this. What was the reasoning behind that small grey body text? I’m sure I am just being naïve here. Please enlighten me.
The real irony lies in the fact that Facebook has these "issues" and it doesn't stop them from raking in millions of users, but the perfect (well, almost) typography of Posthaven's site does not seem to be helping (I am aware of the unfair comparison).
Perfect typography does not dictate the success of your product.
To be fair, the number of users that read his blog vs. the number of users that use Facebook is a little bit different, and the amount of attention that should be devoted to each should vary accordingly.
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.
I've never found a way to fine tune the letter-spacing using css, the smallest unit seems to be 0.07em which is usually too much. Would love to know how to do it if it's possible.
A 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.
For me, the current version is better. And in general, I don't get the obsession of designers to have text padded as much as possible. I like low padding and small fonts (unless it is put to extreme; but on good sites it never happens, whereas "overpadding" is more than common).
Perhaps it is about density of information.
Perhaps it is that I like to have a very different spacing between two lines of the same paragraphs and two lines with a paragraph break. (So my brain can effortlessly divide it into parts.)
Perhaps... it is just a matter of taste. But I guess I am not the only one.
I think it's less about padding-for-padding's-sake and more about maintaining symmetry in design. Notice that both the author's changes were fundamentally just restoring symmetry to elements within a box layout.
A lot of people (have and will) scoff at the idea 3 whole pixels? And I agree it does seem trivial, and will those 3 pixels really change the way users interact and make users happier? Who knows. I know as a designer it does indeed look better when it's visually balanced, but all that aside, I am a huge fan of craftsmanship and attention to detail in ones craft. More so with crafts made by hand (wood, metal, glass) but also it translates over into design and programming.
As a designer I want to put love and attention into all my designs and I want each one to be better than the last as to always be improving. Those three pixels may not mean much to you, or most, but it's those types of things that when you pull out the magnifying glass or really admire a piece of art, that really matter. A lot of times I fail personally at making sure each detail is right, but I would hope that someone could one day look at my work and say he really paid attention to the details and he wasn't just rushing or not caring about the projects he did.
So I think it's less of wow is this really worth all the fuss over 3 pixels but more of a testament to how Facebook values the details in design. Sure Facebook has design that's decently pleasing to the eyes, but you have to wonder why this went unnoticed. If it was me coding the feed, I would've caught it and fixed but I wonder whoever was doing the coding actually stopped to think about it or tried to fix it and got shot down or whatever reason it could have been. It could've been an honest mistake, or a purposeful one, or just someone trying to meet a deadline.
To send a note out to everyone for a thought to think about, really try to put some sort of personal attention to the details when you're working. Whether it's programing or designing, you may not think opening up your code editor and finding the right line in the CSS to fix those 3 pixels is worth it, but someone one day might see that and have to wonder why and if you care about the quality of your work and the image your putting on your brand, I would take it personally to make sure it was perfect. I think this goes a long way with moving up and getting noticed. Anyone could skip it and it's not the end of the world, but finding people that care enough to put such attention and detail in their work to make sure everything is perfect are the kinds of people that are worth having on your team.
I'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 that UI location.
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.
yeah, but over 1.8 billion page views.. thats 3px is a _lot_ of extra bandwidth.
Not to mention all those screen pixels gone to waste.. thats 3 times the screen width every time.. say 50x3x1280 px per page view.. jesus thats enough to power a small village in the third world.
Garry is wrong. What looks visually pleasing is not necessarily the right layout.
Historically, typesetters only had paragraphs to set in doing a book layout. Now in the age of post DTP, layout can be more expressive. That is exactly what the lesser margin of 8px does. In this case, it means that you are liking the status message only 8px away, and not liking the author.
It'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.
Facebook is probably built in a much mote modular way. I doubt fixing it would break anything else. Facebook engineers should be able to figure this out very quickly.
This is beginning to remind me of the colorists in Hollywood who color-time feature film. They will obsess day in and day out about the subtleties of a particular hue of some background out-of-focus trinket. Complete and utter minutiae.
I'm sorry, but as an average reader with decent visual tastes, I can safely say that those 3 pixels are not relevant to me.
I don't see how this is annoying and adding 3px is going to "make the difference in the world" Look at the authors blog. see how much space between the header and the "<Back to blog" and the content. Fix yours first. Its actually annoying than this
[+] [-] lukeholder|13 years ago|reply
While I agree that is visually looks more balanced, it takes more than my opinion to decide that facebook made a design mistake.
[+] [-] scrapcode|13 years ago|reply
[+] [-] pbz|13 years ago|reply
[+] [-] joshuaxls|13 years ago|reply
[+] [-] minimaxir|13 years ago|reply
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?
[+] [-] mikedwebdev|13 years ago|reply
[+] [-] spyder|13 years ago|reply
[+] [-] inopinatus|13 years ago|reply
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.
[+] [-] alanh|13 years ago|reply
Before that, Posterous’ default template had tiny, light grey, non-subpixel-antialiased text for body copy. It was excruciatingly hard to read. I never understood that; the point of a blog is to making reading and writing easy, but Posterous only ever cared about the “writing” side of that, it seemed. (This point is further illustrated by the obnoxious headers Posterous blogs had. By far the most visually noisy part of a Posterous post page was the call-to-action at the top: Sign up for Posterous, yourself!)
Actually, Garry, I’m pretty curious about this. What was the reasoning behind that small grey body text? I’m sure I am just being naïve here. Please enlighten me.
[+] [-] arnorhs|13 years ago|reply
Perfect typography does not dictate the success of your product.
[+] [-] garry|13 years ago|reply
[+] [-] austenallred|13 years ago|reply
[+] [-] eridius|13 years ago|reply
[+] [-] ollysb|13 years ago|reply
[+] [-] anotherbadlogin|13 years ago|reply
[deleted]
[+] [-] tealtan|13 years ago|reply
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.
[+] [-] stared|13 years ago|reply
Perhaps it is about density of information.
Perhaps it is that I like to have a very different spacing between two lines of the same paragraphs and two lines with a paragraph break. (So my brain can effortlessly divide it into parts.)
Perhaps... it is just a matter of taste. But I guess I am not the only one.
[+] [-] obstacle1|13 years ago|reply
[+] [-] hnriot|13 years ago|reply
[+] [-] jamesaguilar|13 years ago|reply
[+] [-] alanh|13 years ago|reply
[+] [-] eksith|13 years ago|reply
[+] [-] unknown|13 years ago|reply
[deleted]
[+] [-] joshmlewis|13 years ago|reply
As a designer I want to put love and attention into all my designs and I want each one to be better than the last as to always be improving. Those three pixels may not mean much to you, or most, but it's those types of things that when you pull out the magnifying glass or really admire a piece of art, that really matter. A lot of times I fail personally at making sure each detail is right, but I would hope that someone could one day look at my work and say he really paid attention to the details and he wasn't just rushing or not caring about the projects he did.
So I think it's less of wow is this really worth all the fuss over 3 pixels but more of a testament to how Facebook values the details in design. Sure Facebook has design that's decently pleasing to the eyes, but you have to wonder why this went unnoticed. If it was me coding the feed, I would've caught it and fixed but I wonder whoever was doing the coding actually stopped to think about it or tried to fix it and got shot down or whatever reason it could have been. It could've been an honest mistake, or a purposeful one, or just someone trying to meet a deadline.
To send a note out to everyone for a thought to think about, really try to put some sort of personal attention to the details when you're working. Whether it's programing or designing, you may not think opening up your code editor and finding the right line in the CSS to fix those 3 pixels is worth it, but someone one day might see that and have to wonder why and if you care about the quality of your work and the image your putting on your brand, I would take it personally to make sure it was perfect. I think this goes a long way with moving up and getting noticed. Anyone could skip it and it's not the end of the world, but finding people that care enough to put such attention and detail in their work to make sure everything is perfect are the kinds of people that are worth having on your team.
[+] [-] minimaxir|13 years ago|reply
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 that UI location.
[+] [-] shritesh|13 years ago|reply
[+] [-] TheBiv|13 years ago|reply
[+] [-] davidw|13 years ago|reply
[+] [-] eru|13 years ago|reply
[+] [-] fuddle|13 years ago|reply
[+] [-] _a2_|13 years ago|reply
[+] [-] coldtea|13 years ago|reply
It's not a bug -- by any stretch of the imagination.
Unequal padding is a legitimate design decision as any other other.
But I see how it can annoy the hell out of compulsives.
[+] [-] Smudge|13 years ago|reply
[+] [-] gridmaths|13 years ago|reply
yeah, but over 1.8 billion page views.. thats 3px is a _lot_ of extra bandwidth.
Not to mention all those screen pixels gone to waste.. thats 3 times the screen width every time.. say 50x3x1280 px per page view.. jesus thats enough to power a small village in the third world.
Not to mention the Carbon footprint...
</satire>
[+] [-] zimpenfish|13 years ago|reply
[+] [-] recursive|13 years ago|reply
No. I had to open the two images in separate tabs and rapidly toggle to even see the difference.
[+] [-] tome|13 years ago|reply
[+] [-] Kiro|13 years ago|reply
[+] [-] gridmaths|13 years ago|reply
[+] [-] josteink|13 years ago|reply
Not really. No.
[+] [-] calebio|13 years ago|reply
[+] [-] garry|13 years ago|reply
[+] [-] llort|13 years ago|reply
[+] [-] bbx|13 years ago|reply
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.
[+] [-] wellsjohnston|13 years ago|reply
[+] [-] matt-attack|13 years ago|reply
I'm sorry, but as an average reader with decent visual tastes, I can safely say that those 3 pixels are not relevant to me.
[+] [-] ruchirablog|13 years ago|reply