A Damn Good Day to be a Mozillian…

Browsers, Firefox, Innovation, Internet, Mozilla, Mozilla Labs, Open Source, things that are awesome, Web, Web Development, Work 4 Comments

Skimming back through my Twitter stream, it turns out that yesterday was a pretty great day in the ol’ salt mine. Sometimes when you’re right in the thick of it, it’s hard to really notice all the awesome that’s going on around here, so here’s a quick roundup of some of it.

Zarro Boogs!

We hit zero blocking bugs for Firefox 4. This is a pretty big deal for anyone and everyone who has been working on this release, and means we’ll be rolling out a release candidate Very Very Soon…

Demos!

We launched a demo site that includes this fully interactive HTML5 poster (grab a copy of the latest Firefox 4 beta to get the full effect). I’m biased, obviously, but this is one of the coolest things I’ve seen on the Web in a hell of a long time…

Web Apps!

We announced the availability of the first developer integration release of our Open Web Apps project (along with a neat video that explains what the heck we’re actually talking about when talk about “web apps”). ReadWriteWeb says that we make “a better case for web apps in minutes than Google did in months,” so if you’re still not sure what Web Apps are all about, you chould check out the post over on the Labs blog.

If you’re a web developer, there’s also a bunch of documentation over on the Mozilla Developer Network, and a gallery of apps that people have already built.

The best part? We’re just getting warmed up. 2011 is going to be a ridiculously amazing year.

Zenji: towards a simpler web browser (from 2007!)

Browsers, Innovation, Mozilla, Mozilla Labs, Open Source, Ramblings, Web, Work 8 Comments

Robcee and I spent a bunch of time thinking and talking about alternative browser designs back in 2006/2007. He recently posted his idea from back then, so I figured I’d dig through the archive and post mine. I call it Zenji.

Note: Where it says “[EMPTY PAGE]” that’s where the actual Web content or Dashboard would be. So that’s just a lie.

zenji1

Zenji was an attempt to re-envision the browser as something smaller and simpler. Some of the ideas have actually shown up in modern browsers, which is gratifying. Other ideas are just terrible (no back button? whuck?). Were I to sit down now and put together ideas for Zenji 2, I would do a lot of things differently.

That in mind, here’s a quick overview of Zenji. The long version is a 13 page PDF which you can download.

Goals
The primary goal of Zenji was to be “as simple as possible, but no simpler.” It encompassed a pared down feature set that would let most users use the vast majority of the Web without being overwhelmed.

While Zenji was to be as simple as possible, it also had to be able to grow with the user. Novice users become expert users over time, and what they need in a browser evolves as well.

Features and UI

What Zenji doesn’t have:

  • Traditional tabs
  • A URL bar
  • Any form of bookmark organization
  • Back/forward buttons (2010 editorial comment: yeah, what?)
  • A “home page”
  • Context menus
  • Most preferences or customization options
  • Traditional “addons”

What Zenji does have:

Search: Search is the primary focus of Zenji, with the main search bar stretching across the entire top of the window.

Toolbar: The Zenji toolbar does not appear at the top of the window, but rather on the side. Default toolbar buttons are: Dashboard, Stars, Timeline, Subscriptions, Zoom, Widget bar. Additional buttons include: Downloads and Archives.

Dashboard: The dashboard was envisioned as a new breed of “start page” that is local on the users’ machine, but that pulls information both from the browser and the web. It could include things such as: recently starred pages, most frequently visited pages, latest subscription updates, Zenji tips & tricks, help/support info, new widget promotion, user polls & feedback requests, etc.

Stars: Stars are Zenji’s simplified bookmarks. Clicking the “Star” button opens/closes the Stars sidebar, which includes the user’s starred pages sortable by recency and/or frequency. Includes a search box.

zenji-stars

Timeline: Timeline is a hybrid of history & tabs that can be viewed as a list (with favicons) or thumbnails.

zenji-timeline

Subscriptions: Subscriptions are essentially fully integrated feeds. If you subscribe to a page, Zenji shows you the most recent updates to your subscriptions in this sidebar.

zenji-subs

Zoom: Apparently I thought zoom was important enough to have on the main toolbar. This would probably be different now :)

Downloads: Sidebar of stuff the user has downloaded through Zenji, all neatly organized. Everything goes into a single directory, which can be sorted in Zenji in various ways.

Archives: Archived pages (basically saved web pages) are stored in a single Zenji archives directory.

Widget bar: This is where the user can add things to Zenji’s UI and functionality. Widgets were envisioned as a new breed of add-on, being small, very task-specfic, and allowed to change nothing about Zenji’s UI beyond, at most, displaying a panel when clicked. Examples would include: Gmail bookmark/icon with new message count overlay, Facebook w/ overlay, Current weather + temp, Flickr RSS stream and uploader, Personas, etc. Widgets would be a simple drag/drop to install and uninstall.

zenji-widgetbar

Page actions: Star, Subscribe, Archive.

zenji-pageactions

And et cetera. There’s more detail (and more craziness) in the PDF. Turns out thinking about browser design is a lot of fun :)

Check out the Mozilla Labs Chromeless browser experiment if you haven’t — the team is working on making zany experiments like this as fast and easy as possible, which I think could lead to an amazing period of exploration and innovation.

Why I love Readability, with screenshots

add-ons, Design & Usability, Firefox, Innovation, Productivity, Reading, Web, Work 5 Comments

Readability is a Firefox add-on that improves the experience of reading long articles in your browser by getting all the extraneous cruft out of the way. I use it every single day and love it to bits.

Here, for example, is a screenshot of what a typical Harvard Business Review article looks like in Firefox (Persona: Save the Bees Plz by monorail cat):

Old Crufty
before-readability

With the Readability add-on installed, all I have to do is hit a quick keyboard shortcut (alt-cmd-R) and the page will reload and be reformatted by Readability. It looks like this:

New Clean
after-readability

It’s just so, so much better. arc90, you have made a great thing. Thanks :)

Feedly – Awesome feed reader add-on for Firefox

add-ons, Firefox, Innovation, Internet, Web, Work 2 Comments

I read a lot of web feeds. Hundreds of feeds bring me thousands of stories on all manner of topics every day — Mozilla stuff, food and cooking, photography, gaming, news, technology, literature, writing, politics, business, innovation, design, etc. Feeds are how I get almost all of my news, whether it be local, national, or international. It’s how I view my friends’ blogs and my Flickr contacts’ photo streams. Feeds keep me up to date on most forums and newsgroups I follow, and they’re the first place I turn when I want to waste some time catching up on my entertainment news or to see what’s up at the renovation/interior design blogs I read. Feeds are, by and large, how I access the vast majority of the Web content I consume.

Until a few days ago I have been using the Vienna feed reader for Mac OS X. It’s a pretty decent workhorse of a reader with a standard email-client-like user interface, the ability to group feeds into folders and subfolders (and sub-subfolders), and all that. It has always frustrated me, however, that my feedreader — through which I consume the majority of my Web content — wasn’t part of Firefox. In fact, I could go so far as to say that Vienna was on close to equal footing to Firefox as my core tool for accessing the Web. This has always struck me as somewhat ridiculous, so I’ve played with all sorts of tools for reading feeds via Firefox, whether they be add-ons or web-applications or what have you. None have ever been compelling enough to switch me away from Vienna until now.

Feedly Screencap

I’ve discovered Feedly, you see, an incredibly slick Firefox 3 add-on that’s been in development for quite some time.

While I’ve only been using Feedly for just over a week now, it has already completely streamlined how I manage, view, and deal with my feeds. Brilliantly, Feedly leverages the existing Google Reader web application as its back end, and throws in added functionality, other service integration points, and a significantly improved UI for good measure. It installs as quickly and easily as any Firefox add-on, displays your feeds in their own tab, and essentially integrates your entire feed reading experience right into your Firefox. Feedly is almost exactly the sort of tool I was hoping to find, and while it does still have a few bugs and rough edges, it’s by far the best feed reader I’ve used to date.

Check it out: Feedly at Mozilla Add-ons.

Education evolving…

Education, Innovation, Internet No Comments

Cool article over on Ars Technica: Prof tweets about course, ends up moving whole class online.

AwesomeBar is awesome

Firefox, General, Innovation, Mozilla, Work 41 Comments

In Firefox 3 the URL bar is being completely revamped in extremely exciting ways. In Firefox 2 the URL bar is fairly staid and plain, giving you a drop-list of recently-visted URLs and partial page titles. If you started typing in the Firefox 2 URL bar, it would generate a drop list of URLs whose domains matched what you were typing, like so:

Firefox 2's URL bar - less awesome than AwesomeBar

It would only match the start of the domain, however, so typing “mozi” would only list URLs that started with “http://www.mozi…”, which doesn’t include things like “http://developer.mozi…”. Those would only be listed if you started typing “developer” in the URL bar:

Firefox 2's URL bar - less awesome than AwesomeBar

This is OK behaviour. If you happen to know the URLs of the pages you’re looking for, the Firefox 2 URL bar will help you out by giving you a list of URLs whose starting bits match what you’re typing. Saves a little time, and becomes a quick way to get back to sites whose URLs you have at least partially memorized. If you were hoping to revisit a site but you didn’t know how the domain started, you’d be out of luck and would have to resort to using one of the major search engines to look for it.

Enter AwesomeBar

In Firefox 3, however, the staid and plain URL bar has been transformed into a much, much more powerful and useful tool. Dubbed the “AwesomeBar”, it lets you use the URL field of your browser to do a keyword search of your history and bookmarks. No longer do you have to know the domain of the page you’re looking for — the AwesomeBar will match what you’re typing (even multiple words!) against the URLs, page titles, and tags in your bookmarks and history, returning results sorted by “frecency” (an algorithm combining frequency + recency).

Not only that, but the drop-list results show you the page’s favicon, the full title, the URL, and whether you have bookmarked and/or tagged the page in a richly formatted two-line display.

Here are some screenshots illustrating the magic. I tend to look up a lot of recipes on the internet, and the other day I wanted to find the recipe for a spicy ginger carrot cake I’d seen somewhere in my surfing. Here’s how the new AwesomeBar makes this unbelievably simple:

I start by typing “ginger”, and AwesomeBar searches through my history and bookmarks to return everything that matches that keyword, showing the first six and letting me scroll through the rest. You’ll notice here that several of the results are bookmarked (blue star icon on the right), and tagged (tag icon). The sites’ favicons are displayed on the left, making it really easy to scan through the results if you know what site you’re looking for in particular:

Firefox 3's AwesomeBar in action - one keyword

Instead of scanning and scrolling, however, I just add another keyword, “carrot”. AwesomeBar updates the list to show only the three results that match both these keywords:

Firefox 3's AwesomeBar in action - two keywords

Adding one more keyword, “cake”, narrows the list to just a single option:

Firefox 3's AwesomeBar in action - three keywords

Et voila. Out of thousands of entries in my bookmarks and history, AwesomeBar has found the single “ginger carrot cake” recipe I had read somewhere online in the past year. I had no idea which site it was on, so wouldn’t have been able to search by the site’s domain. Even Google wouldn’t have helped me here since this recipe doesn’t appear until the 8th page of results when searching for “ginger carrot cake”. AwesomeBar searches only my personal, local bookmarks and history, making it an incredibly powerful tool for finding pages that I’ve visited before and want to find again.

I’ve been using the Firefox 3 nightly releases for some time now, and I can honestly say that the new AwesomeBar behaviour has absolutely changed how I use the Web. Not having to remember URLs or resort to global web searches to find pages I’ve visited before has made using the Web a whole lot easier and more efficient.

So, yeah. AwesomeBar? Awesome. If you’re willing to play with not-quite-fully-baked software (by which I mean “beta”), you can experience the awesome yourself by grabbing the Firefox 3 Beta 5 download and testing it out.

Want to read more?
Edward Lee, the primary AwesomeBar developer, has written a bunch of blog posts over the course of AwesomeBar’s development:

Most interesting, useful, or innovative add-ons?

Browsers, Firefox, Innovation, Web, Work 24 Comments

There are a lot of add-ons available for Firefox now, and I was wondering which you think are the most interesting, useful, innovative, or otherwise awesome. These don’t have to necessarily be your “favourite” or “must-have” add-ons (although they can be), just those that you’ve seen and played with and thought were particularly neat, useful, smart, or well designed.

Post a comment here (moderation is on, so it could take a while for your comment to show up) or email me privately at deb-at-dria-dot-org.

Quote of the day

Innovation No Comments

Technically quote of the day a few days ago, but I just read it:

“So the most creative people don’t have higher hit rates. They just make more stuff.”

This courtesy of the ever-fascinating Bob Sutton in his article The Power of the Prototyping Mind-Set.

Interesting blog

Design & Usability, Essays, General, Innovation No Comments

I’ve been reading bits and pieces of the Design Observer archives all day, and expect to continue doing so for quite a while. Good stuff.

Coolest shopping cart ever

Innovation, Web Development 2 Comments

Every once in a while I stumble across some random bit of a web application that honestly causes me “surprise and delight”. Today was one of those days, and the thing in question is the shopping cart at the Panic.com Apparel store.

The concept is basic, simple, and brilliant — create a shelf at the bottom of the page to which the user can simply drag the items she wants. If she makes a mistake, simply drag the items off. When finished, there’s a nice obvious “Check out” button. It works extremely well, and they’ve gone so far as to add size bubbles to the items in your cart so it’s easy to check that you’ve selected the correct sizes. Very nicely done.

Here are some screenshots. First is the clear shelf:

Clear shelf

This is dragging an item on to the shelf (you can’t see it, but my mouse pointer was over the little transparent t-shirt):

Dragging a shirt

The last is dragging an item off the shelf — instead of just disappearing, it actually vanishes in a poof of smoke (exactly like the OSX dock, if you were wondering). Again, my mouse pointer was in the middle of the little poof of smoke there but my screencap cleared it:

Poof

Anyhow, kudos to the panic.com designers. I really like your shopping cart.

Icons by N.Design Studio. Designed By Ben Swift. Powered by WordPress and Free WordPress Themes
Entries RSS Comments RSS Log in