Cameron McEfee wrote a great case study on Github's process for building Octicons, their new icon font, on the Github blog:
Design is in the details. With all our icons designed, it was time for us to create our font. We decided we needed two sizes of each icon. One size, 16px, would be optimized for its exact size. At 16px the details are limited so every pixel was important. Since the icons were designed for such a small space, they don't really scale well. To take care of that our second size, 32px, would be designed with more detail so that it could be scaled up for many purposes.
This is a great case study showing the tradeoffs Github made in order to optimize automatic antialiasing when pixel-fitting their new icon font. Unfortunately, because browser font rendering systems are optimized for typography and not icons, using that system to display icons doesn't work very well (or, at least, very consistently). It's interesting that they optimized the font to render perfectly at the most common size. Neat hack.
In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually extremely important. This is something everyone should know, especially people who are not designers.
Most icons and logos are stored in vector image files that specify perfect mathematical representations of their shapes. Unlike JPG and PNG images, vector graphic files don't tell the computer how to display their contents in pixels; for a vector graphic to be displayed, the computer has to perform a translation from the mathematical vectors into something that can be displayed with pixels.
This translation process is relatively simple: the computer takes vector lines, lays them on top of a pixel canvas, and then fills in each pixel that the lines enclose. The result looks like this:
The S vector path is perfectly smooth because it is defined using math that is not constrained by display technology. The rasterized S has jagged edges because there are simply not enough pixels to faithfully show what the vector lines represent. Display technology is the limiting factor here, and it has been for many decades. To get around the problem, computers use a signal processing technique called antialiasing, which hacks your brain into perceiving more definition than can be displayed on the screen.
A gift from signal processing
Antialiasing repurposes pixels into building blocks that approximate what should be displayed on the screen instead of what is displayed on the screen. Instead of filling in boxes (pixels) with “on” or “off” states based on how they are enclosed by vector lines, antialiasing uses some visual and perceptual tricks to get closer to the real mathematical image. The most common trick uses things called half-pixels, which are pixels at the edges of paths displayed at different intensities around shape edges, to mimic the effect of having higher resolution. Here's what antialiasing with half-pixels does to our S glyph:
As you can see, some of the pixels that were not quite enclosed by the vector path are now displayed as shades of gray. When you zoom out, those different intensities simulate the look of a sharp edge. These half-pixels can fill in gaps that solid “on” pixels cannot. But don't let this trick fool you; the antialiased S is still not actually sharp. Antialiasing is a hack. It tricks the brain into perceiving a sharp shape when in fact it is looking at a gooey form. This is why reading on Retina displays feels so much better; you're not looking at blurry shapes.
Until we have Retina displays everywhere, we're going to have to live with antialiasing techniques. The problem is that computers are terrible at doing it automatically. Because the computer doesn't know what is in the resized image, it doesn't know where to optimize using half-pixels. This is why I included manually antialiased images with the Markdown Mark. Look at the demonstration below. The right side of the image shows icons that were automatically antialiased by Photoshop and the left side shows the manually fitted ones I included with the Markdown Mark:
The difference is subtle, but the comparison makes it very clear. There are several major problems with the computer-created icons that leaves them looking blurry and unimpressive. For example, in the transition from 66x40 to 48x30 pixels, the human version drops the border down to exactly 2 pixels but the computer drops it to 2.8 (that's two solid black pixels, plus one half-pixel at 80% intensity), which gives it an incorrect soft edge. The computer has no way of knowing that the border should always be sharp, so it ignorantly tries to maintain the ratio of the originally-specified image at the expense of sharpness. The result is not great.
Let's get a closer look so you can see exactly how the problem is presented in pixels on the screen. The top image in the figure below, which was fitted by a human, shows the correct border size of 3 pixels, while the computer-resized image shows 3.3 pixels. Zoomed out, the 30% half-pixel makes the edge look blurry (this is the 66x40 version of the Markdown Mark from above).
Also notice that similar issues occur when computers antialias typography. I pixel-fitted the M glyph to solid edges in my version, while the computer made poor choices in its attempt to maintain ratio at the expense of clarity.
Fitting
Now that you've seen the importance of pixel-fitting, you probably want to know how to do it yourself. If you're not a designer, it's not entirely straightforward and it requires a bit of patience and knowledge of the vector tools in image editing software like Photoshop. But the process is easy to describe: after you resize a vector image onto a raster plane (like a Photoshop canvas), you should zoom in to the pixel grid and manually refit the paths to pixel edges where it makes sense. In Photoshop, you should use the Direct Selection Tool to select the vector edges and then nudge them slowly until they fit perfectly to the edges of physical pixels. This only really works to sharpen straight lines and to define the furthest edges of rounded paths. To display a curve, you have to use antialiasing because there are simply not enough pixels to show a soft curve on the screen (see the very first, jagged S image above).
Sometimes, the difference is incredible. For example, here is Hulu.com's logo, taken directly from the website. It is a badly antialiased graphic that is seen by millions of people every day:
The top image is the logo currently live at Hulu.com. The bottom version is a pixel-fitted mockup that I made (I probably overcompensated, which resulted in some lost some detail in the P and S). The difference is obvious. A closer look makes the human changes even more apparent:
The Hulu logo is a gooey, blurry mess that is seen by millions of people every day. Because it is at the top of every page on the entire site, it sets the tone for the quality of the experience. It should have been pixel-fitted.
What this means
Using automatic antialiasing when resizing vector graphics leaves a lot of important decisions up to computer graphics software. While the results are generally decent, they're not perfect. So, for important icons and logos– really, for all rasterized vector images–you should fit the pixels to the grid and ensure they are as sharp as possible.
We're slowly starting to see displays with higher pixel densities that can more faithfully reproduce vector paths on the screen, like Apple's retina displays. But they're not widespread, and most software doesn't optimize for those kinds of screens. Until they are commonplace, pixel-fitting is an essential task.
Mr. Stephenson said he worried about services that could replace the company’s own offerings. For example, free Internet-based messaging services like Apple’s iMessage are eating into the company’s revenue from text messages.
“You lie awake at night worrying about what is that which will disrupt your business model,” he said. “Apple iMessage is a classic example. If you’re using iMessage, you’re not using one of our messaging services, right? That’s disruptive to our messaging revenue stream.”
The future of wireless networks is very clear: they will be used for everything. AT&T Mobility and Verizon will very soon be providing your sole connections to the rest of the world, including your home internet, mobile internet, voice communications, television, and ambient devices. They are slowly transforming from phone companies into communications companies. The longer they try to hold on to stupid revenue streams like text messages and marketing monstrosities like “vCast”, the longer this transition will take.
The speed and quality of wireless networks are vitally important for the development of future generations of technology. The sooner we have a company that focuses on the network, as a technology company instead of as a sales and marketing company, the faster technological innovation can take place.
If Randall Stephenson is kept up at night by iMessage, he is a very shallow thinker. Text messaging was dead the second a mobile phone connected to the internet.
Arianna Huffington acknowledged Thursday that her portfolio at AOL Inc. is being scaled back to include only the Huffington Post, undoing a structure put in place when her website was acquired by AOL last year.
After buying the Huffington Post for $315 million, AOL gave Ms. Huffington editorial oversight of all its properties, including tech-news site TechCrunch, the patch.com network of local news sites, MovieFone and MapQuest.
First, Engadget's editor left. Then, some of Engadget's writers left. After some incredibly damaging–and very public–fighting, Michael Arrington was fired. Yes, the most powerful man in tech journalism was fired from a company that is trying to become the future of journalism. In the months that have followed, practically the entire TechCrunch team has left.
People don't get in the lifeboats unless they think the ship is sinking. Something was clearly wrong at AOL. But nothing was done. It made no sense to me, but it appeared from the outside that AOL was willingly making absurd sacrifices that led its own employees to abandon ship.
It can be hard to come to terms with the fact that something you bought doesn't meet your expectations, especially if that thing is expensive. But when you're the CEO of a company, it's your job to see through that. Sunk costs are sunk. It takes good leadership to identify trends and seize them. It takes great leadership to fail fast, to recognize when you've made a mistake, and to reverse your decisions before any serious damage is done.
I like to look at raw numbers every once in a while, without external influence, to recalibrate my ability to judge the magnitude of things. Here are some of the numbers from Facebook's most recent S-1 filing (published on May 3rd) which I think are important as metrics to compare against when thinking about relative success and opportunity. (Sources are at the bottom.)
Total users and engagement
125,000 M Friendships 2,000 M Likes per day 1,000 M Comments posted per day 901 M Monthly active users 526 M Daily Active users 488 M Monthly active mobile users 302 M Photos uploaded each day
User penetration
85% Chile, Turkey, and Venezuela 60% India, the United Kingdom and the United States 30%-40% Brazil and Germany 20% Japan, Russia, and South Korea 0% China
Daily active users
526 MWorldwide total 152 M Europe 129 M US & Canada 126 M Rest of the world 119 M Asia
Monthly active users
901 MWorldwide total 242 M Rest of the world 241 M Europe 230 M Asia 188 M US & Canada
Revenue (last quarter)
$1,058 MWorldwide total $525 M US & Canada $328 M Europe $118 M Asia $87 M Rest of the world
82.42% Revenue from advertising 17.58% Revenue from payments (and other)
15% Revenue connected to Zynga
Ages of Facebook directors and officers
27 Mark Zuckerberg, Chairman and CEO 37 Mike Schroepfer, VP Engineering 39 David Fischer, VP Marketing 40 Marc Andreessen, Director 42 Sheryl Sandberg, Chief Operating Officer 42 David A. Ebersman, Chief Financial Officer 44 Theodore Ullyot, VP & General Counsel 44 Peter Thiel, Director 50 James Breyer, Director 51 Reed Hastings, Director 66 Erskine Bowles, Director 66 Donald Graham, Director
Executive compensation in 2011 (cash+stock)
$30,957,952 Sheryl Sandberg, COO $24,804,472 Mike Schroepfer, VP Engineering $18,761,293 David Ebersman, CFO $7,082,294 Theodore Ullyot, VP, General Counsel $1,712,362 Mark Zuckerberg, CEO
Board member compensation in 2011
$618,067 Marc Andreessen $610,067 Erskine Bowles $16,667 James Breyer $16,667 Donald Graham $16,667 Reed Hastings $16,667 Peter Thiel
Ownership after IPO
23.550% Mark Zuckerberg 7.632% James Breyer (and Accel Partners) 6.253% Dustin Moskovitz 4.912% DST Global Limited 3.258% Sean Parker 2.109% Mail.ru 1.729% Peter Thiel 1.660% Elevation Partners 1.560% Meritech Capital Partners 1.387% Greylock Partners 1.227% Microsoft Corporation 0.309% Marc Andreessen 0.201% Mark Pincus 0.112% David Ebersman 0.107% Mike Schroepfer 0.095% Theodore Ullyot 0.089% Sheryl Sandberg
Frequency of words appearing in S-1
404 Users 169 Mobile 124 Payments 38 Zynga 34 Microsoft 32 Games 18 Phone 14 Google 6 iOS 4 Android 2 Apple
Sources: All numbers are from Facebook's most recent S-1, filed on May 3rd, 2012. Ownership percentages: Page 145, and calculated based on the number of beneficially owned shares against 2,138,085,037 total expected outstanding shares after the offering. Disregarded voting difference between Class A and Class B shares. Ages of Facebook directors and officers: Page 108. Executive compensation in 2011: Page 125. Board member compensation in 2011: Page 114. Ownership after IPO: Page 141. Total users and engagement: Page 2. User penetration: Page 48-49. Monthly active users: Page 48. Daily active users: Page 49. Revenue: Page 51.
Disclosure: I am considering purchasing Facebook stock after the IPO.
I just went to Bing for the first time in a very, very long time, and saw something that I am not sure how to interpret. It knew who I was. It knew who my friends were. It knew my name, and it had my profile photo.
I'm not sure how much information Facebook is actually giving to Microsoft for this kind of integration to happen; at least with the Yelp integration, as far as I know, Facebook doesn't actually send Yelp any information about you. But the Bing integration felt more personal, for some reason.
The feature that Yelp uses is called Instant Personalization. It's interesting. And while at first I was shocked to see myself logged in on Bing, I'm going to reserve my judgement for a while. Because it's also kind of awesome.
Some of AOL's shareholders are angry at the company's management for being… well, bad at their jobs. One of AOL's biggest shareholders is staging a coup d'état, and trying to win control of the board. AOL is fighting back, with press release from earlier today:
Dear Fellow Stockholder:
Since AOL became an independent public company in late 2009, AOL's Board of Directors (“Board”) and senior management have successfully charted a new strategic and financial course for the Company. This new approach has significantly improved AOL's results, enhanced the prospects for sustained growth, and created value for all stockholders.
You now face an important decision about the future of your investment in the Company. At our Annual Meeting of Stockholders on June 14, 2012, Starboard Value L.P. (“Starboard”), an AOL stockholder, is seeking to elect its own slate of three Director candidates to your Board in order to advance its own interests. We urge you to continue to support the AOL Board and our strategy for success.
Apple is apparently rejecting apps that merely link to mobile webpages from which a user can sign up for a subscription service. Goran Daemon P, in a post on the Dropbox support forum:
Reason for rejection is the fact that if the user does not have Dropbox application installed then the linking authorization is done through Safari (as per latest SDK).
Once the user is in Safari it is possible for the user to click “Desktop version” and navigate to a place on Dropbox site where it is possible to purchase additional space.
Apple views this as “sending user to an additional purchase” which is against rules.
From the Hacker News thread, a similar story about Rdio integration from starnix17:
I had a simliar rejection because of my app's Rdio integration.
If the user had Rdio installed, my app would open the song in the Rdio native app. If the user didn't have the app installed, my app would open the song on the Rdio web site in MobileSafari. Apple didn't like this since you could purchase an Rdio subscription on that webpage bypassing the IAP and Apple's 30% cut.
This is insanely stupid of Apple. It angers me that they have not yet solved these problems.
Rupert Murdoch is “not a fit person” to exercise stewardship of a major international company, a committee of MPs has concluded, in a report highly critical of the mogul and his son James's role in the News of the World phone-hacking affair.
The Commons culture, media and sport select committee also concluded that James Murdoch showed “wilful ignorance”. […] “We conclude, therefore, that Rupert Murdoch is not a fit person to exercise the stewardship of major international company.”
There's a thick line between respectable sleuthing and invasion of privacy. Unfortunately for News Corporation, that line is much thicker than the one between reporting and propaganda.
BlackBerry 10, which was released today at BlackBerry World in Orlando, was RIM's last chance. It was their Hail Mary pass, to save the company. You'd think they would have spent the time to make sure they got it right, and that they would have focused on radically improving the user interface and experience to bring BlackBerry up to par with Android, iOS, and Windows Phone 7. It is almost impossible to comprehend, but they didn't do that.
Instead, they released something uninspiring, uninteresting, and unfinished. That no one at RIM had the guts and authority to recognize the seriousness of their situation–the company is literally dying!–and say, “Hey, maybe we should wait until BlackBerry 10 is awesome before we release it,” is an ultimate demonstration of how RIM's culture will lead to its now inevitable demise. This is what happens when the sales people are in charge.
Sure, BlackBerry 10 is being released as a developer preview today, and RIM is being very clear about how it's “alpha” software. But really, who cares? The things that RIM's designers should have been focusing on, like innovating on fundamental user interactions, should have already been present long ago, as a guide for building RIM's internal apps. BlackBerry 10 is boring. It's devoid of any finesse, and it has no character. It is flat. It doesn't feel physical, even though it is. The small size of some screen elements, especially in the settings areas, are a testament to how poorly thought out the OS is on a high level.
These are huge issues, of course, but they are nothing compared to something else that caught my attention during the introduction keynote. The horrific course of events that must have occurred for this feature to be developed is hard to think about, but BlackBerry 10 has a radically new camera that lets you step backwards in time after you've taken a photo. This is cool, and maybe it's even a worthwhile research project, but who in their right mind, when faced with RIM's current crisis, would spend the resources to design, build, and perfect a camera as complex as that?
Probably the salespeople. But no matter how it came into existence, the camera shows that RIM is focused on the wrong things. Despite a complete management overhaul, and several embarrassing delays, nothing has changed. BlackBerry 10 is not a revolutionary operating system. RIM has failed once again.
