Firefox 4 Mockups, Linux, Windows & Mac (Quick Thoughts)

I’m quickly becoming a fan of Stephen Horlanders design work on Firefox 4:

FX4_linux FX4_mac FX4_windows

You may click to embiggen.

Some quick thoughts:

  • We should keep in mind these are mockups. There’s a very good chance not all these three images are updated with all the latest decisions being made at Mozilla. For instance, the “Page” and “Tools” buttons present on the Linux screenshot seem to have taken the back seat to the App button.
  • Which is interesting because it’s one button, something Chrome is also moving towards.
  • The App button isn’t present on the Mac. Perhaps that’s because the File menu is there anyway?
  • The Linux screenshot has an early mockup of the Mozilla identity manager which promises to sign you in to websites for you.
  • It’s both interesting and sad to think how much time was spent making sure Firefox 3 fit each individual platform  in icon style, when clearly the icons are more minimalistic (and therefore automatically cross-platform) today.
  • I’ve said it before and I’ll say it again: tabs should be on top. It’ll be interesting to see whether Safari gets with the program, or whether we’ll see iOS  and Android overtake desktops with their new interface paradigm before that happens.
  • The general interface layout of browsers, these days, seems to be very Chrome and Opera 10. Yet this is still visually very much Firefox with its keyhole back/forward and square tabs. Subtle, great design work here.

Despite the great work that’s going on here, I’m really kind of sad that Chrome will most likely remain my main browser come Firefox 4.

An Early Look At Google Chrome Web-Apps


It’s no secret that I’m a fan of Googles Chrome browser. Which is why I followed Google’s instructions on enabling web-apps in the newest dev builds of Chrome. Here’s what I found out:

  • Making a Chrome web-app is as simple bundling a  few icons with a URL in a .js file. Which incidentally is also how you build Chrome extensions.
  • The bundling of icons with the .crx web-app bundle solves the problem of small 16×16 favicons doubling as launch icons. This is clearly more elegant than the stylized 8-bit converted favicon approach Mozilla experimented with for Prism back in the day.
  • One immediate benefit of using Chrome web-apps is that once you’ve clicked “Install” on a web-app, you’ve automatically given it all the permissions it needs, such as access to notifications, geolocation and local storage.
  • Installed web-apps show up on your new tab page. As seen above.
  • When you open a web-app, it shows up as something other than a pinned tab. The design argument is for it to look distinct from your tabs, which you’re likely to have a lot of.
  • When you click a web-app tab, the entire addressbar including navigation buttons and even the extension shelf, are hidden, maximizing the available real-estate.

For those worrying about Chrome web-apps not being “open”, it’s worth noting that as of this version of Chrome, all a web-app consists of is a URL. Just look at this code sample:

  "name": "Gmail",
  "version": "3",
  "icons": { "24": "24.png", "128": "128.png" },
  "launch": {
    "web_url": ""
  "permissions": ["notifications"],
  "web_content": {
    "enabled": true,
    "origin": ""

This is still a very early look at Chrome web-apps, but I can see it working, if nothing else then for the fact that it’s so easy to create a Chrome web-app. So yeah, it may just be a super-bookmark, but it’s so convenient. Imagine a Twitter for Chrome web-app. You click “Install”, and it’s there on your browsers new tab page, synced to your Google account, and it’s got geolocation and notification permissions without any extra clicks.

Chrome Webstore

Announced at Google IO is a Google Chrome web-store, no doubt created to bring good content to Chrome OS. You’ll be able to — just like on the iPhone app store — buy web-apps which are then installed in your Google Chrome browser or later this year, Chrome OS.


  • They demoed Plants vs. Zombies. Which tells me the first Chrome OS hardware release will be a tablet, not a netbook.
  • Interestingly, Plants vs. Zombies was built in Flash, which kinda explains why Google chose to integrate the Flash Player in Chrome.
  • A Unity app was also demoed. Does that mean a Unity plugin is about to be included in Chrome?
  • So maybe Google realises their Chrome OS HTML5/JavaScript strategy may be a few years in the future, so they’re using Flash and Unity as transitory technologies for web-apps.
  • It’ll be interesting to see if the Chrome web-store will work in browsers other than Chrome. My guess is: yes.

VP8 Video Codec Rebranded WebM, Also Open Sourced

It’s what many of you hoped for: Google has open sourced VP8. It’s all documented on the new official webpage, The WebM Project.

Some quick thoughts and notes:

  • YouTube is converting all its video to the WebM codec, starting with 720p video. You can opt in to the beta HTML5 version of YouTube today, and play the videos using Google Chrome dev channel.
  • So H.264 is “patent encumbered”, WebM is not. Which is why this is a big deal.
  • Microsoft previously announced they’ll only support H.264 in Internet Explorer 9. With Opera, Chrome and Firefox supporting WebM, IE is further digging into irrelevance unless they adopt this.
  • The interesting thing is whether Safari will adopt WebM. My bet is they will, eventually.

The Branding Of Google Chrome

Google is firing all its cannons with its Chrome browser. It’s out for all the major platforms, and it’s even got a dedicated operating system in development. Part of such a cross-platform effort is a strong need for visual branding — a unique look which will subconsciously tell the user which browser they’re using. For two reasons, I’ll talk about Google Chromes branding today; first and foremost, to illustrate that a tab is not just a tab. Secondly, because Chrome has recently changed branding in a few key areas (which serves to illustrate the first reason).

A Tab Is Not Just A Tab

My good friend Chris called me on referring to Google Chromes tab design “unique” and “branding”:

@noscope It’s a tab. Of course that needs to be there. I don’t see what anyone could do to change that or, make it look brand specific.

Let’s look at Google Chrome at launch:


Google Chrome (development channel) today:


Aside from the addition of an extensions pane, we notice a number of changes:

  • The frontmost tab and toolbar is now monochrome as opposed to bluish previously.
  • The reload button is now integrated in the addressbar field, and the favourite star has been moved inside the addressbar.
  • I can’t recall if the old version would show the site favicon also in the addressbar, but in the newest version you’ll see the favicon only on the tab.
  • Did you notice the Google logo is gone?1.

What’s interesting here, is what Google did not change. And that is what I would argue is the most important branding. The tab design and layout.

Tintins Silhuette

Comic artists have worked for decades to create unique silhuettes for easily identifiable characters. Here’s comic artist Hergés Tintin:


If they made a movie, do you think they’d leave out this silhuette?

Games do it. Team Fortress 2, notably:


In the same vein, for software, the wireframe is the silhuette of the application. Here’s Firefox 4s wireframe look:


Clearly, the wave in browser interface design is tabs on top and minimal UI to save space for web-apps. It must’ve been a challenge for the Firefox designers (good job, by the way) to revamp towards this norm yet keep Firefox branding intact. Looking at the wireframe, the standout Firefox branding is now the App button and the Home Tab. The back/forward “keyhole” design not present on this wireframe is also an important Firefox branding element.

Usability Is Not A Jackson Pollock Painting

The design of the Chrome interface may be grounded in a rethinking of the browser — webpages are apps, tabs are app buttons — but the unique tab design is not an accident. Look:

Chrome_design ChromeOS_design

One of the above is a Windows app, the other is a standalone OS. Sure, it’s iconified, but it illustrates the uniqueness of the tabs. These images are from the Chromium project’s Visual Design article, which also gives the following explanation for the design:

While it doesn’t show through today, we drew early inspiration from The Designers Republic’s work on the then-Psygnosis games WipEout and WipEout 2097; the focus on blinding speed, and iconography that could be recognized instantly even in the depths of your peripheral vision were both key attributes we admired.

The word “branding” may be thrown around a lot, these days. But in the case of the mysterious Google  Chrome tabs, I would consider it appropriate.

  1. There’s a chance it’s gone because this is the dev channel, and that it’s present in the stable channel — I cannot say because I’m running only the dev channel. But my guts say it’s gone for good  

More On WebKit 2

WebKit2 is not a fork of WebKit:

WebKit2 is NOT a rewrite of the whole WebKit stack. Webcore will continue mostly unchanged, and all ports currently building on top of it will keep working. It is also not a fork – the code lives in the same tree as the current version of WebKit, which will allow us to progressively move towards using this new, improved layer. WebKit2 is not Apple-only, and it is not dropping Linux support. Initial builds of the code that is being landed will likely show up building on Linux in the near future (specially because us porters are already eager to play with it).