Blog Post

Browser Wars: Pixel-Friendly Browsers on the Mac

Awhile ago, Kyle Dreger responded to a Lifehacker article comparing Windows (s msft) browsers based on pixel-usage by making his own version with Mac (s aapl) browsers. What struck me about his list was how few browsers he used: only four, and all of them were cross-platform. I figured I should throw in some more browsers, like Shiira, Camino, etc; some that only run on the Mac. I used the same application for measurement that he did, PixelStick.

I’ll be testing Safari 5.1, Safari 4 beta (thanks to its tabs-on-top design), Chrome 5 (s goog), Firefox 3.6, Firefox 4 beta 3, Opera 10.6, Camino 2, Shiira 2.2, Sunrise 2.1, and iCab 4.8 .

Testing so many browsers presents a problem: Not all browsers use the same UI conventions. For example, Opera doesn’t have a bookmarks bar; its bookmarks are contained in a sidebar. To remedy this, I’ve broken the tests into two sections, showing different parts of the browser chrome. Section one will be with the bookmarks bar hidden, so only the tab bar and toolbar are showing, so I’m able to include Opera. Section two will be with the bookmarks bar shown, so Opera will be excluded from it. I’ll also include a third section that shows the data overall. I omitted testing status bars because Chrome doesn’t really have one, and I’d argue that most people don’t use them.

Tab Bar and Toolbar

I’ll go ahead and say that there are two winners here: Chrome 5 and the Safari 4 beta. But why is Chrome also a winner when the Safari 4 beta so clearly trumps it? My reasoning is that Chrome is a current browser, and that I had to go through a strange rigmarole process to even get the Safari 4 beta running, and it still crashed every time I opened a new tab, so it’s not really usable.

The loser here, by a large margin, is iCab. This was using the default configuration, so I messed with it a little, used small icons and hid the text beneath them. It still came in last, right behind Shiira with 91 pixels, only beating itself. iCab developers, if you’re reading this, please make iCab less space-hungry.

What’s interesting about the comparison between Firefox is that tabs-on-top actually uses slightly more pixels than tabs-on-bottom. Also, using small icons will save you eight pixels.

Here’s a screenshot comparing the top six browsers in this section:

With Bookmarks Bar

Unsurprisingly, the winner here is the Safari 4 beta. However, I was surprised to find that the second winner was Safari 5. Yes, Safari 5 narrowly beats out Chrome by just one pixel. iCab is last in place, by a large margin, again.

I also figured out that, on average, you can save about 20 pixels without the bookmarks bar.

Here’s another screenshot showing the top five browsers in this section:


I’ve made two graphs that show the data overall: the first by number of pixels in ascending order, the second by browser. I’ve also included a couple of bonuses: I measured Internet Explorer 5 for Mac and Netscape 9. IE doesn’t have a tab bar, so I just measured it with the bookmarks bar. It makes a good watermark for big browsers. And yes, iCab still comes in last, even behind IE. Netscape was surprisingly small, with the minimum being 83 pixels, just behind Sunrise.

Is pixel-friendliness important in a browser? Does it affect which browser you use? Sound off in the comments.

Related GigaOM Pro Research: What Does the Future Hold For Browsers?

24 Responses to “Browser Wars: Pixel-Friendly Browsers on the Mac”

  1. penguirl

    The name of the post is “Pixel-Friendly Browsers on the Mac” and it closed with “Is pixel-friendliness important in a browser? Does it affect which browser you use?” Ultimately, it is usability that matters and for that reason it shouldn’t matter if the browser is of an unconventional design, it should be judged (in this comparison) solely on how much of a web page can be displayed.

    Usually, when browsing the web users are forced to scroll vertically, not horizontally. OmniWeb’s re-sizeable side tab bar maximizes vertical space which should be an asset when compared to traditionally designed browsers. Also, I find OmniWeb and Shiira’s tabs to be more useful than those of the other browsers because I can identify a tab better with an icon than I can with a few letters of text. Unfortunately, Shiira’s implementation reduces vertical viewing area substantially, and the browser itself does not function as well as you might expect it to.

    Adding OmniWeb to the comparison might not have been fair, but was the object of the comparison fairness or viewable space?

  2. Moritz Schmale

    I really hate that on Windows (thats not Microsofts fault at all), very much applications install some pixel-consuming toolbars(Google, Yahoo, AVM, ICQ and so on…). Some people just click next in the installer without checking wether there is some additional trash thats installed with the application. So I often see computers with firefox that has about three toolbars. That means 24*3=72 wasted pixels on the computer. Plus Bookmarks toolbar and other.
    Another thing is that these toolbars consume memory and cpu also, but this is not the topic here…
    Personally, I like it most when the website has the focus, that means that I deactivate all kinds of toolbars so the browser is just a minimalistic one. On Linux, I can customize Firefox that I put Address and Google-Search bars right beside the menubar so it just consumes 3 rows: Titlebar, Menubar and Tabbar. This can’t be done with Mac OS X but you can deactivate all that things in safari too, and it only appears when you type command+L or open a new Tab…

  3. 1) As others have noted, where is Camino in the charts? I too like minimum pixels but instead of this bogus comparison, why not a study of which browsers are the worst memory leakers and need to be quit frequently. Camino is the best I have found. Several days browsing, 150+ tabs open at one time and no more than 600-700MB. The web kit based browsers are the worst at it.

    2) iCab may be lower ranked but it has one feature no other browser has. It can take a pdf snapshot of a whole page even the offscreen part. Firefox may be able to do it with an extension but it is a kludge.

    3) Somewhere in the Firefox additions, there is a small font option that helps decrease the size of the various browser “bars”. Don’t remember what it is so search the web site though given all the cruft it can be daunting.

    4) The issue of pixel hogging space is less troublesome if you use a browser on a secondary portrait monitor. I’m using a 24″ HP in 1200×1920 that is especially nice.

    • It would have been unfair to test Omniweb against the others. How do I measure Omniweb’s tab-drawer, which is resizable and takes up more pixels than a horizontal tab bar? I’d have to create a new category with the tab bar hidden, and I don’t think many people browse like that, so it’d be a useless comparison.

  4. penguirl

    Uhm, in the beginning of your comparison you said that you would be testing “… Camino 2…” yet Camino is not indicated in any of the charts. What happened?

    Also, why not include OmniWeb? Development has slowed since it became freeware but it probably has more users than Shiira and iCab combined and it is still a feature rich browser that it’s users are very loyal to.

    Firefox? With no keyboard shortcuts, or even menu commands to create a keyboard shortcut for, to switch tabs it gets bumped to the end of the line, only to be used when nothing else will work.

    Update: You left out OmniWeb “because of it’s funky tab drawer”? Yes, that’s an unbiased comparison for sure.

    • Holy crap, you’re right! I did forget about Camino. I took measurements of it, but I must have forgotten to put them in the graphs. For what it’s worth, Camino takes up 88 pixels with the bookmarks bar hidden, and 108 when it’s shown. Sorry!

      As for Omniweb, I’d have to create a new section to even include measurements of the tab drawer, as there’s no option for a horizontal bar. Even then, Omniweb wouldn’t fit in the first or second section. I don’t have anything against Omniweb; it just didn’t fit my testing criteria.

  5. Supercharged

    Don’t forget about status bar. Safari has one which is permanently on the screen. Chrome is much more convenient with on-demand status bar which only occupies part of the bottom line.

    Though, newest Safari have extensions to choose from, and luckily there is one called chrome-like status bar, which I use.

      • “I omitted testing status bars because Chrome doesn’t really have one, and I’d argue that most people don’t use them”

        The thing is, Chrome does have a status bar. And it is the smartest status bar I’ve seen until now, because it only appears when you need it. So I’d say you should have taken into account the status bars. Chrome essentially has a status bar that takes up 0 pixels.

        I find it very handy to see the URL a hyperlink is going to before I click it. The Chrome status bar gives me just that, without taking up any pixels! Just brilliant!

        And yes, I also use the chrome-like status bar extension for Safari.

  6. pbass wil

    Yup, wasted space is especially annoying in the vertical, considering modern screens are squatter than ever.

    “Wide Screen” is one contemporary trend that I wish I could opt out of. As if the primary use of a computer was to watch movies! Much of my computer time is spent looking at documents; most of the time I’d actually prefer that my screen was taller than wide.

  7. I think you are dazed and confused Alex. You say you hate Firefox because it takes up or covers to much of your Desktop. Then you say you are worried about pixels because you want to see more of the web page. Further contradictions, “most websites don’t need your entire screen.” – Then your concerned about screen or Desktop real estate “the more space you have for viewing web pages.” Also I do not understand why you would want to see your Desktop while viewing a web page. After reading your article, I have come to the conclusion that fewer pixels probable benefits faster load speeds more than screen real estate. Think about what you are saying Alex. I say this with constructive intent.

    • Why is this so hard to understand? A given web page needs a certain budget of pixels to be seen properly. The more pixels a browser expends on UI chrome, the more real estate that web page requires on the screen, and the fewer things you can view and manipulate (such as your Desktop) while the web page is visible. You are deeply confused if you think this has any effect on load speed.

      Believe it or not, there actually exist web pages that are not important enough to warrant all your screen space! God forbid you should want to refer to something else while reading a blog.

  8. It would have been nice if you had explained what pixel usage is and maybe why it matters enough to test. I read the entire article and have no idea what you’re talking about.

  9. Where Safari fails for me is I have to resize the window so I can read and see everything. When I use Firefox I don’t have to do this as it does it automatically for me. Another disappointment is I continue to have to hit send when I go back a page when visiting some sites. For instance I sometime click on a picture in a for sale ad to make it larger and when I want to go back to the ad I have to hit resend… it is an annoying part of Safari. Why doesn’t Safari make full use of the screen when opening web pages? I’ve played with the text sizes to no avail. I also wish Safari had some colour to replace the dull grey appearance we have now and some of firefox’s themes. A google bar would be nice too.