Step 1: Swipe over to the right sidebar and select Browser Tools (the gear button).

Step 2: Switch to the Add-ons Manager (the puzzle piece), and pan down to the Get Add-ons section

Step 3: Tap on the recommended add-on "YouTube Enabler", press "Add to Firefox" button, and restart Firefox when prompted. (If you don't see it there, just type "YouTube" into the Search Catalog field).

Step 4: Go to YouTube.com and play Flash videos!

But wait, there's more!

You can make your YouTube experience even better by adding a YouTube search button to Firefox.

Step 1: Go to youtube.com, tap on Firefox's site button, and tap the "Add Search" button.

Step 2: From now on, search for your favorite videos on YouTube directly from Firefox! Enter what you're looking for and tap the YouTube Video Search button.

You'll need a nightly build of Maemo Firefox and the most recent beta of Weave Sync to see much of this, for the moment, but now, when you open your bookmarks on your mobile, you'll see this:

Your mobile bookmarks are still at the top level of the bookmarks list, so they're close at hand, but your bookmarks from Firefox on your desktop system are in a folder at the top. When you pop it open, you get the following:

Which is the top level of your bookmarks hierarchy on the desktop. All your bookmarks, in whatever folders you've set up, are all in there!

There's more, though. When you go over to Firefox on your desktop machine, your mobile bookmarks will show up in a new top-level bucket, as seen here:

Which means that you can do more complex bookmark management, if you need to, where you have a larger screen and better keyboard.

One interesting side-effect of this better organization that I've found — I use my bookmarks toolbar on desktop Firefox mostly just for bookmarklets. With Weave Sync and this organization, they're pretty easy to find while mobile, and they work there too:

In case you want to see, I took some screenshots of the interesting bits of installing and setting up Adblock Plus in Firefox on an N900. Here they are (they've all been scaled down by flickr - you can click and get the large size if you want the full resolutions ones):

When you tap on the most recent .xpi file, Firefox confirms that you want to install.

You get a couple of transient alerts over the course of installation, but this is the one the browser shows when it's done. You can tap on this to go immediately to the add-ons manager, or go later, at your convenience.

In the add-ons manager, you tap to restart the browser.

On restart, Adblock Plus is installed, and in your list.

And tapping "Options" lets you do the configuration in place.

New York Times without ads! Very cool.

Having stripped it down to essentials, though, we found that we wanted to add some new abilities as well. As we tried to find places in Fennec's much-smaller-than-desktop-Firefox's UI-space for some existing Firefox capabilities, the Add-ons Manager started presenting itself as a sensible home. The two major ones, which I'll show below, are 1. managing search providers, and 2. add-ons' options.

Search Providers

In the Add-ons Manager, add-ons of all types are in one list, but their types are indicated by a label at the right of each row. After the extensions, at the bottom of this screen, you can see the first of the default search providers, Google.

Panning down reveals all of them, the default ones as well as some I've added (Facebook and Bugzilla@Mozilla):

If you want to disable or remove a search provider from the list on the "awesomescreen", you just tap on the row to reveal its buttons:

Oh, incidentally, the way you add a site's offered search provider in the first place is via the site button (we're still working on the final look of this panel):

A place for add-ons options

On the desktop, add-ons use a variety of mechanisms for presenting their options or preferences. Some use in-content pages while others provide a button that opens up a window of prefs; sometimes, a combination is used. Given that we've tried to avoid use of dialogs and windows as much as possible in Fennec, we thought it would be helpful to provide add-ons authors with an easy-to-use alternative that follows a usable mobile design-pattern: pannable lists. From the user's perspective, it looks like this:

A user opens the Add-ons Manager:

and taps on the add-on of interest (here, GraffiTwit, by Fabrice Desré, which is already using the options system):

When the user taps on the "Options" button, the set of options for that add-on emerge as part of the current pannable list:

Mark Finkle has written an overview of how to make use of this system on his blog, and there are further code snippets here.

Mobile add-ons tips

While I'm at it, Mark Finkle has been creating a great compendium of resources for add-on authors interested in mobile. You can find it here:

And I've contributed a probably-too-long write-up about designing for mobile in general and about adapting your add-on for Fennec in particular:

I hope it's helpful! Please get in touch if you have questions or suggestions.

This happened last night, but good news is worth savouring. The fourth beta release of Fennec for Maemo is out, ready for downloading and trying out. Mark Finkle has a blog post about what's new in this release, but, in short, there's been a lot of progress made on polish and the general user-experience of the browser. I'll be posting again about some particulars in the next day or so.

In the meantime, try it for yourself! If you're looking at this on a N900 or N810, you can install directly from here. If you're not on a Maemo device, you can also download desktop builds for Windows, Mac, and Linux.

We're still grinding down a number of rough edges, of course. You can get a sense of what I'm paying attention to here, if you're interested: http://bit.ly/fennec-polish.

Fennec 1.0 Beta 3 for Maemo is out! Stuart has a post in which he explains a lot of what's new. For me, the most exciting part (other than the performance improvements) are the many, many revisions and fine-tunings of the user-interface. I'll be doing a full video walkthrough early next week, but, in the meantime, I've created a set of screenshots with notes as a flickr group here: Fennec maemo beta 3.

Or, if you just want to see the new screens, here's a slideshow:

Download beta 3 and try it out! In addition to Maemo build, you can also download desktop builds for Windows, Mac, and Linux.

I had the great pleasure of attending the Maemo/Mozilla Danish Weekend last weekend, where I gave a talk on user-interface issues and tips to think about when creating add-ons for Fennec. The high point for me, other than getting suggestions from some of the first people to try building add-ons for Fennec, was getting to see the results of the Fennec Add-ons Developer Challenge, including the winner: Fabrice Desre's GraffiTwit.

Brian King wrote a great overview of the event, with links to the winning Fennec add-ons, so I'll cheerfully refer you over there rather than recounting everything again.

I will link to my slides, though. Here they are:

In Firefox, by default, we show a Google search field when you start the browser, but also give you the option to change it to whatever homepage you want. Occasionally, as on the very first time to run the browser, we show you a welcoming message instead. Recently, there's also been work to try to further refine what shows up when you open a new tab. All of these "start page" variants are attempts to speed you on your way to whatever it is you'd like to do with the web.

Let's break it down a bit. I'm thinking about three cases, the last two of which aren't addressed separately in Firefox today, but could be.

1. First run page – shown the very first time the app is launched
2. A start page that is shown each time the app is launched
3. A new tab page – shown every time the user opens a new tab

What should we do in Fennec? Where does the usage landscape differ from how Firefox works on the desktop?

1. First-run page

The first-run page is our big chance to get the user started with using the browser and the web quickly and pleasantly. It's a particular opportunity, in that we have some important things to communicate, and it's also when the user will forgive us the most for getting between them and whatever they were setting out to do. I think that users more or less expect, the very first time they open the browser, that we'll have something to say.

At the moment, Fennec uses this point of contact in a fairly limited way; we say hi and put up a little bit of pictorial instruction about how to use the browser:

There's more we can do here, and other ways to introduce the location of controls (zooming animation!). This is a separate topic from the one I'm thinking about right now, though.

Skipping to 3. Opening a new tab

A lot of thinking has been going on into what to show when you open a new tab in desktop Firefox. There's a good overview of the design issues and goals here, with a lot more detail here. In a nutshell, though, the ongoing work is trying to provide three things:

1. Links to sites you probably want to go to, drawing that list from the browser's knowledge of where you go often and have been recently (also offering links to recent updates on those sites, drawn from RSS)
2. If you opened the new tab immediately after closing another tab, the page offers a chance to reopen the tab (undo)
3. If you copied something before opening the new tab, the page provides a means to do something contextually appropriate with whatever it is that you've copied — a dictionary lookup if it's a single word; web search if it's a phrase; map if it's an address

And all of this on a page that's as spare and clean as possible.

The key insight here is that everything offered is an attempt to speed the user towards whatever it was he or she was setting out to do. None of it is general, though possibly interesting, information like "the current weather." Instead, the browser makes its best guess about what you're doing, and tries to help. When a user opens a new tab manually it's almost certainly with some specific goal in mind, so this start page, more than the other varieties, must not derail that train of thought with a lot of non-targeted distractions.

What about Fennec? Of those three types of interventions, I actually have another idea for a way to undo an accidental tab-close that's more tightly tied to the closed tab (more on that in a future post). Easing the taskflow for something copied is something we should figure out how to incorporate, though, for the moment, the incidence of general purpose copying is fairly low on smartphones (another issue for another day).

What remains is the "let's let you just tap on the link you probably wanted" functionality. It turns out, though, that this is something that Fennec already does — the navigation screen (what comes up when you tab on the titlebar) contains a set of awesomebar-educated guesses as to where you're trying to go. Rather than duplicating this in a start page, it seems to me that we should, on a new tab opening, skip the user right to the navigation screen for those suggestions. You can also search from that screen, which covers a major mobile new-tab use case.

Still interested and following along? You win a free trip!*

Back now to 2. Start page

What about a start screen that comes up when you launch the browser?

Unlike the case of a new tab, it's more plausible that a person might open the browser without a specific destination or search in mind. The likeliest cases, I think, are (a) just wanting to be entertained and kill some time; and (b) wanting to check in on what's new on your sub-section of the web since the last time you looked (from news to the latest tweets). This got me thinking about having a really light-weight and zero-configuration page that just presents some recent things that, awseomebar-style, we know the user might be interested in. Here's a quick mockup of the kind of thing I've been thinking:

I'm borrowing some ideas from some interesting stuff that's been coming out of Mozilla Labs -- most notably Atul Varma's Ambient News experiment (a video here). You can read more about it on his blog post, but, essentially, it addresses my relevance and low-configuration criteria by assembling the list of news sources automatically awesomebar-style and draws in the latest articles via RSS transparently. The user never goes through the still overly-jargon-filled (eating? molecules?) process of subscribing to feeds -- from his or her perspective, the article titles are just there. Ideally, we could use the same method to generate the entries in the section above for number of new emails, unread tweets, and so on.

Anyway - lots of details to work out yet, so please get to it. :) Or, rather, please let me know how you think this could be made simpler and more useful. What would you want to have come up when you launch a browser on your phone or mobile device? Or would you just want the browser to launch with the tabs you had open last time? Under what circumstances would you launch the browser manually rather than following some other path to it (like a link in an email or a search initiated through a widget on your phone's desktop)?

Please discuss here!

* to another thousand words on the subject of start pages! Not redeemable for cash value. Which would be huge.

It's quite minimal, out of necessity; when there's so little screen space to work with, everything there has to really earn it's place. What's there -- the page title/URL (all a tappable control itself), the site identity button, the stop/reload button, and the bookmarks button -- are all there because either they are important (1) immediately on app launch, (2) when a page is first loading, or (3) as a user begins to use a page.

Recently, though, we've been coming up against even tighter constraints than those that led to the current titlebar design. While everything you see above can reasonably fit on a screen like that on the Nokia n810 held in landscape orientation, it starts to get a little cramped when in portrait instead. On devices with smaller or lower-resolution screens, the problem starts to become acute.

There are a number of small things we can do to get back some horizontal space. For example, if you look at the work going on with our theme, you'll notice that we're starting to replace some of the interior curves with straighter edges -- it's saving us about 20 pixels at the moment, which may seem small but is a big deal on screens that are only 240px wide.

It's still not enough, though, and that's where this new idea comes from: moving the bookmarks button out of the titlebar. Given all the talking I do about the value of awesomebar results, you might wonder why we need a separate list of just bookmarks at all. It turns out that it is valuable, though, and that's because sometimes you're browsing, where the awesomebar is for search. Some examples:

• using a particular organization of bookmarks as a to-do list (either for a task or "here's my stack of every-day morning news sources")
• "I remember I've got it here somewhere... but what was it called?"
• and the big one: sometimes, you just can't type – maybe you're on the go and have only a thumb free – so you forgo the speed that searching would give you and just swipe through the list to the bookmark you want

That "See all bookmarks" item is the first item in the list, so as you pan down the list, it scrolls off the top. Also notice that this simplifies the titlebar – there's now just one place to tap when you want to go somewhere.

What's interesting (and effective, I think) about this design is that it adapts to your current usage type. When you're in can't-type browse mode, access to all your bookmarks, in a browsable format, is right there alongside our suggestions of where you probably want to go. When you're in the mood for search, at which point you're typing, that item gets out of the way because it's not a match for your search terms.

Am I concerned about taking up a whole row of vertical space that could be allocated to another awesomebar suggestion? I am, but on the whole I think it's worth it. No placement will be ideal for both screen orientations -- when landscape, the extra space we have is horizontal, whereas, when a device is portrait, the extra space is vertical. It's not quite a deadlock though -- we're more constrained in portrait than we are in landscape, which makes this seem like the best option.

What do you think? If you've got thoughts about this and/or ideas for alternate approaches, I'm very eager to hear them. Please pipe up in the discussion, over here.

We just released Fennec Beta 1 for Maemo devices like the Nokia n810. If you don't have one of those, you can also get a build for a desktop OS like Windows, Mac, or Linux. Download it and give it a try! Performance is much better than in our previous alpha releases, the user-interface is coming along as well.

In the time-honoured tradition of my people, I have recorded a video walkthrough. If you don't want to install the beta, or just want to have a guided tour first, click on through:

Of course, there's more going on around Fennec as well. People have been creating new add-ons for Fennec, which you can install either from addons.mozilla.org or directly from within Fennec's add-ons manager.

Stuart mentions a couple of particularly cool add-on projects in progress in his beta 1 blog post, as well as detailing some of the back-end work that's been a major focus for this release.

You can get instructions and a download via the release notes. If you don't have a Nokia n810, desktop versions are available too (Windows, OS X, Linux).

For a quick introduction, I've recorded a short video walkthrough of alpha 2:

For more information on what's new and what's underway, there are a number of other blog posts related to alpha 2:

• Taras Glek on Alpha 2 performance
  
• Mark Finkle on what's new in the front end
  
• Jono DiCarlo on Weave in Fennec
  
• Stuart Parmenter announcing the release
  

Please tell us what you think, or, better yet, get involved!

From an interface perspective, this chunk of Fennec is still a work in progress (see some design wireframes here); what you see in alpha 1 is more or less straight out of desktop Firefox. Still, it gets the job done, which means that we can walk through the process:

Above is the AMO page for URL Fixer. Soon AMO will recognize Fennec and offer direct installation, but for the moment, I just had to feed Fennec the XPI. When I did so I got the following:

So, clearly here's a dialog that needs some mobile-design attention. Still, when I tapped "Install Now," it actually went and did so. When I then moved over to the add-ons manager, URL Fixer had already finished installing. (Yes, we need to get some of our browser-level notifications in (as demonstrated over that link in a downloads context), so that users will know that things have happened.) So:

Tapping "Restart Fennec" did what it should. When it came back up, I went and looked in the add-ons manager again, and there it was, safely installed:

And it works!

So, much cleaning up to do interface-wise, but add-ons work, and that's great. Thanks Chris! (And Mark, of course!)

Fennec alpha 1 is here! If you have a Nokia N810, please install it and try it out! If you don't, though, you can also install Fennec on your Windows, OS X or Linux desktop.

The release notes give a good overview of what's new and how to get started with Fennec. Jay and Mark have posts about it, too.

As I mentioned in my last post, Fennec's user-experience is really coming together — it still needs tweaking and tuning, but you can get a real sense of how Fennec dedicates screen space to web-content and minimizes the need for typing. If you want to get a sense of how it works, before you install it yourself, I've recorded a quick video walkthrough:

I'm eager to know what you think, so keep the feedback coming!

Screenshots

The following are actual screenshots from an N810 running M8 rather than wireframes or pixel-perfect mockups.

A Fennec entry, with icon, in the Application Manager:

Fennec, just opened, non-full-screen:

Switched to full-screen, and on a new page. The titlebar has some more room to spread out:

As you pan down the page, the titlebar slides off the top:

Here, I'm panning past the right-hand edge of the page to get at the control strip:

Or, off the other side to see my tabs:

Less look, more feel

Of course, there's UI work, both theme and interaction-design, still very much ongoing. One critical part of the UI, the navigation screen that comes up when you tap on the titlebar, is in as of M8. It has yet to be themed, but is starting to behave as it should.

Here's that screen, filled with awesomebar-based suggestions of where you might want to go before you've even begun to type. Search engines are also in place, so you can send your search terms off to the engine of your choice with a single tap. Obviously this is still undergoing theming (to look more like this), and needs to be tweaked so that each line is taller and more finger-tappable.

And, as you begin to type, the awesomebar provides better suggestions:

My blog comments are still broken, so please help yourself to the discussion group

He's posted some of the recent work to his blog, and he'll be posting more there as we go. This is a effort still very much in progress, so please jump in with your suggestions (generally or even about specific glyphs/icons). There's a Fennec UI discussion thread ripe for contribution.

This first set takes us through some basic Fennec operation.

1. Initial page load
When a page first loads, and you're still at the top, you see a Title Bar at the top, with an identity button and a reload button. You also have access to your bookmarks.

2. Movin' on down
As you pan down the page, the Title Bar scrolls off the top. The entire screen is dedicated to web content.

3. Take a step to the right
Panning to the right of a webpage causes the Control Strip to snap elastically into place — it provides most of the primary UI, including a starring (bookmarking) button, back and forward, and access to page actions (e.g. SMS this page to a contact) and browser tools (Preferences, Add-ons, and Downloads). There's more how these sections work in the wireframes, with pixel-designed screens on their way.

4. What about the other side?
Similarly, panning off the the left of the webpage gets you to your tab area, which also snaps into place. The bottom button, on the left, creates a new tab. The idea behind the button on the right is that you should be able to pull up, via Weave, a tab that you have/had open on your desktop.

More to come!

Update: My comments are broken, so please leave your thoughts in the Google group or on Sean's post. Sorry and thanks!