One thing I left to the end while on stage, in the interest of getting to the point quickly, was that pretty much everything in here is drawn from an amazing presentation by Paul Adams called The Real Life Social Network and a book called Connected, by Christakis and Fowler. Both are worth reading, if you're interested in this topic.

Onwards!

The point has pretty substantially been made by this point that "social" is a very big deal, and that a major part of our role [meaning Mozilla, here, but you should feel included! - ed.] is going to be to make the internet a better fit for the extremely social creatures that we humans are.

We've been taking some steps toward this in designing the next version of Fennec – Firefox on mobile devices – by introducing the ability to share, by which we mean the ability to take things you find or create on the internet and show them to your friends.

In doing so, we've found that it's critical to remember that social networks are not a new online phenomenon; we have always existed and acted within social networks. It's been very useful, therefore, to look at how we are social and share in the "real" offline world...

which is accurately depicted in this photograph. I'm sure you all recognize this from your own lives. [Laughter is suggested at this point - ed.] It turns out that we know quite a bit about how people behave, and a lot of it is quite universal, which makes it a great foundation for design.

First, people have multiple independent groups of friends. These groups tend to form out of stages of life or shared interests, so you might have your work friends, your college friends, your family, and your friends from that big event you go to every year. These groups don't tend to mix, and in fact you tend to show different aspects of your identity to each of them; in a sense, you are a different person with each. As a result, people get uncomfortable when, as in the current crop of online social networking tools, it's difficult to talk to just one group at a time, and the way you act is visible to everyone all at once. So - we should design for multiple groups.

Luckily, we know some things about these groups. People tend to have between 4 and 6 of them, each comprised of between 2 and 10 people. This helps to constrain the design problem.

Next, not all relationships are the same. Of course, every relationship is a unique and beautiful snowflake, but systemically they break down into different strengths of relationship. First, there are your strong ties. These are the people you are closest to, ask for opinions the most, and talk with, by far, the most. Most people have about 4 of these strong ties. What's interesting is that this seems to hold true across phone usage and Facebook. 80% of phonecalls tend to be made to the same 4 people, and, while people have on average 130 Facebook friends, they tend to interact the most with about 6 of them. We should optimize for these shortlists of strong contacts.

There are therefore also weak ties. These are people whose lives you are more or less up-to-date about, but with whom you don't speak weekly. Weak doesn't mean unimportant, though. It turns out that when, through contacts, you find new information, get a job, or find a partner, it tends to be through your weak ties. This makes sense in that, typically, if one of your strong ties knows about something, you probably do already as well. You have to go further out in your social network for things that are new. There's a also a limit on the number of these ties we can have – about 150 – and this limit doesn't seem to be related to the efficiency of our communication mechanisms. It an inherent cognitive limitation.

And then I closed by pointing out these two sources, both definitely worth reading.

Since the summit, Paul Adams has posted links to most of the references he used in research the presentation I mention; it's a great list, well worth going through.

Oh, if it helps, this is what I looked like while giving the original talk. Intense.

It's done! Firefox 1.1 for Maemo devices (Nokia N900, N810) is out in the wild, and it's packed with awesome.

Over the last several weeks of the beta, members of the mobile team have written blog posts about most of the new features and improvements you'll find in the browser. Here, with quick summaries, are links to all of them - enjoy!

Site Menu

When you tap on the Site Button in Firefox 1.1 for Maemo, you'll see more than just the site identity information you're used to from previous versions and Firefox on the desktop. You'll now also get a number of actions that will help you manage your relationship with the site you're currently on. Certain of these actions, like "Save As PDF" will always be there, because they're always relevant. Some others will only be there when there's need: "Add Search Engine" will only show up if the site offers a search engine that you can add to Firefox's search bar. "Forget Password" and "Clear Site Preferences" will be there only if you've previously told Firefox to save your password or to always behave in a certain way (always block pop-ups, for example). Read all about the Site Menu

Portrait Browsing

When you hold your mobile device in portrait, Firefox will automatically rotate and resize itself to fit. A number of designed-for-mobile sites prefer this orientation, and now they'll display as intended in Firefox. Read all about Portrait Browsing

Start Page

When you launch Firefox on your mobile, it now provides a couple of things that are often of particular interest at the beginning of a browsing session. First, the new Start Page presents you with a tappable list of of all the tabs you had open the last time you were using the browser, and also gives you a way to open all them (useful if you have a set of pages you always like to keep open). Second, if you have Firefox Sync installed, it gives you a quick link to the list of tabs you have or just had open on your desktop computer. Finally, it uses the opportunity to mention one or two recommended add-ons. Read more about the Start Page

Save as PDF

Do these situations sound familiar? you want to have a permanent record of a receipt or a confirmation page after booking something online? you want to be certain you'll have a copy of a page when you don't have network When you find yourself in either situation, you can now tap on the Site Button and select "Save As PDF." Read more about "Save As PDF"

Context Menus

Firefox now provides finger-friendly "tap-and-hold" contextual menus. When you want to open a link in a new tab or save an image, you can tap and hold your finger on a link or image, respectively, to get the actions you need. Read Mark Finkle's post about context menus here

Smart Tap

Smart Tap is what we're calling the system in mobile Firefox 1.1 that makes it easier for you to tap on small links, fields, and buttons. From your perspective, tapping on small targets should just work out the way you intend. Behind the scenes, there's a lot going on to make it feel this way. Two examples: the areas surrounding elements that will accept taps are larger and smartly positioned; and links you've tapped before are made easier to hit again Read all about Smart Tap

Zoom Buttons

One of the most requested features after we released Firefox on Maemo 1.0 was for a way to "free-form" zoom. Firefox 1.0 already lets you double-tap to zoom to a column of text or an image, but sometimes that's not enough. Now, on the Nokia N900, you can use device's rocker button to zoom freely in and out. Future versions of Firefox on devices with multitouch will support pinch-zooming. Read all about zooming with the buttons here

Form Autocomplete

Firefox 1.1 does even more than before to help you avoid having to type: it now does form field autocompletion. Using an algorithm similar to the one that powers the awesome bar, Firefox will suggest entries appropriate for the form-field you're on based on what you've entered before. For forms you use a lot — checking into a flight, entering your address — a single tap can replace a lot of messing around with a keyboard. The best part is that with Firefox Sync, your form entries from your desktop computer will automatically be on your mobile as well. Read more about form autocomplete

Viewport meta tag

Firefox 1.1 for Maemo has improved support for the <meta name="viewport"> tag. Previous version of Firefox on mobile devices supported the width, height, and initial-scale viewport properties, but had problems with some sites designed for iPhone and Android browsers. The browser now support the same properties as Safari, and Firefox now renders mobile sites more consistently on screens of different sizes and resolutions. Read Matt Brubeck's post about the viewport meta tag

Self-Updating Add-ons

Firefox for Maemo 1.1 introduces automatic add-on updating. Once a day, Firefox will check to see if there are updates to any of your installed add-ons, and, if there are, it will install them for you. The browser will notify you of what's going on, but you won't have to restart Firefox until you're ready. Of course, if you know there's a new version of an add-on and you want it right away, you can still go to the Add-ons Manager and press the "Update" button yourself. Read Mark Finkle's post about add-on updating

Crash Reporting

One of the key ways that Firefox gets better is by people sending in crash reports if something goes wrong. This is made much easier and quicker for you to do now, with a Crash Reporter app that launches if Firefox crashes. If you decide to send a crash report to Mozilla, and we really hope you do, you can see your crash, and other crashes, at the Mozilla Crash Reports web site. Read Mark Finkle's post about crash reporting

The browser will switch orientations automatically as you reposition the phone, as you would expect. Some browser screens are the same, only taller; others change their layout slightly to better fit the screen on which they find themselves, such as the tools screens.

If you'd like to lock the screen orientation - say you're lying down but want to read in portrait:

you can use the standard Maemo screen orientation lock key-combination to do so: Ctrl-Shift-O.

One twist that makes this even more helpful is that the Weave Browser Sync add-on will now synchronize form autocomplete data, with the result that Firefox on your mobile can help you complete forms that you've only ever worked with on your desktop computer before. With sync, you don't need to wear-in Firefox on your mobile - it can provide as much help as Firefox on your desktop system already does.

Devices that support multitouch almost all now use the pinch-to-zoom gesture for this, and that's what Fennec will do on such devices as well. The Nokia N900, though, is single touch only, so for version 1.1, Fennec makes use of the device's rocker button to allow free-form zooming in and out:

in landscape

and in portrait

Two interesting things!

1. The zoom rate isn't constant as you zoom in and out. If it were, the change in zoom level would seem tiny when you're zoomed all the way out, but huge when you're very zoomed in.
   
2. The rocker button adjusts itself for whether you're holding the phone in landscape or portrait to maintain natural increase/decrease mappings with up/down and left/right (for LTR languages, anyway). See the photos above for an illustration.

Ideally, you won't notice either of these things in day-to-day use; it should just feel like it works the way you'd expect.

From a user's perspective, tapping on small targets should just work out the way you intended more of the time. Behind the scenes, there's a lot more going on to make it feel this way: a larger and up-shifted invisible tap region around the point of touch-contact; favoring higher z-ordered elements; and favoring visited links over unvisited ones, to name a few. Read the full post for the whole story, and let us know how you find it working when you try out 1.1.

Sometimes it's because you need to have a permanent record of something you've done: a receipt after making a purchase, or a confirmation that you've filed your taxes or booked a rental car.

Other times, you want to be certain that a copy of a page that will be accessible when you're offline. This might be a boarding pass, a set of directions, or the simplest case: an article to read.

On current mobile devices it's rarely straightforward to print, and dealing with a saved folder of saved HTML, CSS, and images isn't really what's called for in the scenarios I've described. It also doesn't make much sense on devices that, for good reason, try to de-emphasize file systems.

Fennec 1.1 tries to fill this void with a Save As PDF option in the new site menu:

On the N900, selecting "Save As PDF" will bring up a save dialog:

The saved PDF will show up in the Fennec download manager, so that you don't have to go hunting for it in the file system:

Tapping "Open" will bring it up in the device's PDF reader:

Through the start page, the browser's providing a couple of things that are of interest particularly when you start up:

• It shows the tabs that you had open the last time you were using the browser, letting you open any or all of them again. This makes quitting (and restarting) the browser a much less consequence-filled undertaking. It's like a lightweight version of session restore on the desktop.
• The start page also provides quick access to the tabs you have or just had open on your other computers, like the one on your desk. This is useful when you first open your browser in the case where you leave your desk and now, on the road, need to pick up where you left off.

We're also taking advantage of having your attention for a second to show you a maximum of two recommended add-ons that you don't yet have installed. Tapping on one will open the add-ons manager and let you install the one you're interested in right there. While looking for add-ons is not necessarily a start-up task, add-ons are a huge part of what makes Firefox such a great fit for its users, so interjecting quickly to show people what's new and worthwhile seems like a reasonable thing to do.

Here's the page again, in landscape:

This page is a change from 1.0, in which the browser used to display the awesome screen immediately (Fennec's display of frequently visited pages and bookmarks, as well as from where you search the web). We were finding, though, that people were finding it disorienting - people were launching the browser, and expecting to see something that looked like a browser. Going to the start page instead helps with that problem and also helps with some frequent just-opened use-cases. Oh, and if you already have a start page that works for you, you can switch to using that over in preferences:

We're not done, of course. Heading towards version 2.0, I'd like to explore more of how we can use the start page to help people see what's new on the parts of the web they care about since the last time they connected with their online lives. I've written about some of this here before, but it's a topic I'll be writing about more over the next few weeks.

On desktop Firefox, and in Fennec 1.0, tapping the site button (the one with the site's icon on it, next to the URL or page title) brings up some site identity information — you can use it to get a sense of how much Firefox knows about who you're talking to, site-wise. In the smaller mobile interface, we wanted this button to be of broader use: to be the place you go to get information about and manage your relationship with the site you're on. So, when you tap on this button in mobile Firefox 1.1, you'll see actions as well as the briefing on what's known about the site.

Certain items, like the new 1.1 feature "Save as PDF," are relevant to every page (you can use it to permanently store receipts, boarding passes, or any page you might print if you were at a desktop computer). We're always trying to save space in Fennec, though, so other items will appear depending on the site and what decisions you've made about it.

For example, addons.mozilla.com provides a search engine that I can add to the Firefox search bar, and I have a saved password for the site, so menu-items to Add Search Engine and Forget Password are each present:

Another item that will sometimes appear is Clear Site Preferences:

On popuptest.com, I've told Firefox that I always want to block popups, but I can clear that site preference here. This works for a number of other site-specific preferences as well, including automatic location sharing, storing local data, and opting to never save a password.

Finally, add-ons are starting to hook into it as well (oh, and the menu reformats itself in portrait). Readability, by Fabrice Desre, is shown here.

It's out! Brad Lassey has an explanation of what's new and a walkthrough video on his blog. There are further details and download links over in the release notes.

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.