Added By: Feedage Forager Feedage Grade B rated
Language: English
android  beta  blog  browser  button  desktop  find  firefox mobile  firefox  form  lot  mobile  new  page  tap  zoom 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics

Published: 2012-05-25T14:33:46-05:00


Here's a thing that would be awesome


Here's a conversation I just had in IRC. Is anyone interested in building this?

madhava:   hey
madhava:   would anyone like to build me an addon where when I enter some hotkey combination
madhava:   will bring up some sort of HUD awesomebar
madhava:   that I can search through
madhava:   and then when I hit enter it will insert the matching URL in my current textfield
madhava:   or put it in the copy buffer?
madhava:   I reference a lot of URLs in emails and bugs
dietrich:   quickfind-that-url. that'd be nice.
madhava:   and I have to open a new tab, use the awesomebar, select, copy, switch back, paste
madhava:   dietrich: yeah
mitchell:   history viewer?
madhava:   mitchell: sort of -- but too heavyweight
dietrich:   i do the same thing. have to navigate open tabs, all kinds of crap to find a url.
madhava:   in some ways, even a dropdown as soon as I type http:// would do it
madhava:   like in a IDE
madhava:   but then I'd have to type http
mitchell:   I just begin typing the url to have it come up, hit down, hit right, hit ctrl a, ctrl c
dietrich:   all the pieces are there for doing this
dietrich:   it works even with open tabs
dolske:   sounds like dietrich knows how to do this... ;)
dietrich:   hotkeys + panel + Awesomebar sarch (from
dietrich:   dietrich cannot do this :)
madhava:   maybe I'll blog this
dietrich:   jono and gozala and i were just lamenting the lack of Ubiquity, which could easily do this :(
mitchell:   what is hot key / hotkeys?
dietrich:   mitchell: jetpack build-in api for registring keyboard combos with function callbacks
mitchell:   dietrich: thx.  mind sending link to api doc?
madhava:   ok - dietrich, mitchell, dolske - I'm more or less going to paste this conversation into a blog post
madhava:   any of you want to be anonymous?
dietrich:   clipboard api is the final piece, and that's built-in too
mitchell:   I don't mind my nick going in
mitchell:   dietrich: that's what I wanted to find out
dietrich:   anonymity is for the anonymous
dietrich:   this is a public channel, it's too late!

If you are, you can email me (image) , or @madhava on Twitter.

Meanwhile, in Firefox User-Experience


It's been a few months now since we merged the mobile and desktop Firefox user-experience teams into one supercharged all-platform Firefox design juggernaut (in the good sense). In that time, we've been hard at work digging into the next set of features and improvements, as well as pursuing one of our major goals for the year: getting Firefox to feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.

I presented an overview of what we're working on at the Firefox Toronto Workweek last week. Here are the slides (and a direct link, just in case). I had a fair bit to say about them, so I'll be posting a video of the talk soon, but the mockups and wireframes in the slides are too awesome to wait. The team will be posting about each of these projects, individually, in more depth.

Ux overview fxworkweek_april2012 src="" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
View more presentations from Madhava Enros

This presentation makes reference to the Kilimanjaro project, a set of short-term priorities around integrating the browser and ecosystem projects (identity, apps, marketplace) that Mozilla is working on right now. You can learn about it on the Kilimanjaro wiki page.

Many thanks to the team (see slide 2!) for all their hard work.

Firefox on Android (native) - UI Polish


The mobile UX team's recently gone through a big top-to-bottom review of the in-progress native UI for Firefox on Android, sanding down rough edges and making sure that things all fit together. Here are some slides from a walkthrough I'm about to give of the current state of the designs. The nightly builds are getting closer to these every day!











Credit to Patryk Adamcyk and Ian Barlow for these mockups

Firefox on Android - Native UI in Nightlies


If you're watching the nightly builds of Firefox on Android, you'll have noticed that a lot just changed. What you're seeing is the first wave of basic function and interface revisions as we rebuild Firefox as a native Android application. This is very much a work in progress — a lot is there already, but there's even more still to come. Oh, you can get it here. What have you done to my browser? Firefox, overall, is being rebuilt to be faster and more responsive. We wanted to match this with a rework of the UI that will make us feel quicker, more natural, and a better fit on Android. Our goals have been, primarily, the following: a simpler Android-based UI model being more recognizably Firefox incorporating things we've learned from our tablet UI, due out in Firefox 9 easier one-handed use continuing to provide fast access to tabs and minimizing the need for typing working with froyo/gingerbread, but also ICS We're still revising, tweaking, and, well, wholesale throwing things out and redoing them, so please pipe up with your suggestions, but here's what you should be seeing right now. A simpler, Firefoxier, thumbier UI What you'll notice right away, I think, is that the browser controls have been pruned back and, overall, they're laid out more simply. The browser is continuing on its path of doing things the Android way, whether that's through use of the system back button or standardizing on the Android menu system. Things should be where an Android user would expect to find them. This consolidation has also let us put everything you frequently need under the arc of your thumb when you're using your phone in one hand; hopefully you'll seldom find yourself reaching and stretching, even as Ice Cream Sandwich phones get bigger and bigger. Tabs are kind of a big deal We've kept our Firefoxy focus on quick access to tabs, where you don't have to leave your current context to see and choose from what else you currently have open. We're also trying to leave you with better ambient sense of when tabs are getting created or closed, in the background or foreground, through the use of some subtle animations and transitions. Pulling in visual cues from Firefox on tablets and desktops The team has spent a lot of time looking at how we can have consistency across our many platforms. Firefox should feel familiar no matter where you're using it, even if the constraints of the particular device mean some structural changes. We've had a lot of great feedback about the upcoming release of Firefox for tablets, and you can see that this new Firefox on phones is its close sibling. There are also a lot of places where the phone UI references that of the desktop, like in the position of the new tab button (though it serves more purposes here), our icons and glyphs, and in certain UI elements like our notification "door hangers": Optimized for Froyo / Gingerbread, and Ice Cream Sandwich Of course, people out there are on a lot of different versions of Android, and we want to look right for all of them: Coming Soon All of that is what you can have in your Firefox-nightly-clutching hands today. But there's more! Here's what's in the UI-design pipeline, coming to the nightly build soon: an all in-content add-ons manager — Mockup Sync — Setup and prefs flow Start Page — on its way! I need more stability in my life If you like to wait for the new native Firefox to stabilize a bit more before you start using it, you can switch from Nightly builds to the Aurora release channel. You may particularly want to do this if you're using a Honeycomb tablet — the new Firefox tablet UI that everybody's talking about is stabilizing there, getting ready for final release later this year. [with many thanks to Mozilla mobile UX designers Ian Barlow and Patryk Adamczyk] [...]

If you can't say something nice


The internet has increased our ability to express ourselves. In no place is this more obvious, unfortunately, than in the leaps and bounds we've made in our ability to be unkind to each other in blog comments. This increased capacity puts Moore's Law to shame, and then anonymously calls it an a*#$@*e, LOL. Inasmuch as we recognize this as an issue, we mostly seem to accept it as inevitable. We resort to the "grow a thicker skin" or "can't stand the heat..." bromides, shake our heads at our cruel and ungrammatical world, and strive to become less sensitive, as if this were a good thing.

Accepting this situation ignores that, by and large, we are thousands of times (I've measured) more civil to each other in the physical world. If putting up with our online behavior were a requirement for interacting with strangers offline, none of us would ever leave the house. Why call out the difference? It suggests that our current online situation doesn't have to be the way it is, which is tantalizing: incivility worsens the quality of our online lives, and, from a more immediately practical perspective, I think it lessens online participation.

An example: After years of free-for-all commenting on my blog, I started pre-moderating comments to keep the rage out; it wasn't really a solution, though, in that it didn't do anything for my quality of life. When my blog (on blog software so out-of-date that Gutenburg would have thought to himself "what an a*#$@*e, LOL") broke such that comments stopped working, I just never fixed it. And... I liked it. After a while, my pro-participation conscience kicked in, so I started, in each post, directing people to a discussion group to give me feedback. The tone of conversation improved, but only in the "silence is golden" sense -- people just didn't bother. The baby, unfortunately, was gone along with the acrid, stinging bathwater (note: do not bathe a baby this way). Clearly, there is value in the immediacy of on-blog commenting. But how much does this ease of action contribute to unkindness? To what degree is anonymity the problem? If it's a major part of it, how much of it would we trade off for a more civil internet?

So, internet -- what can we do about this? I'm interested in short term blog-specific solutions, but the problem is an even more interesting one in general. If caring for the health of a participatory internet is our mission, and incivility harms participation, perhaps we should be thinking about this.

I'm really interested in what you think. Email me - the address is my first name at mozilla dot com.

Welcome, Ian Barlow!


The Mozilla mobile user-experience team has grown by an astonishing 50%!

A few weeks ago, Ian Barlow joined the mobile UX team, focusing on the visual design end of the UX spectrum. In his first few weeks, he's already been digging deep into our design work for Firefox Home, tablet versions of the Fennec Awesomescreen, and theming for Gingerbread and Honeycomb. Ian's based in the Toronto office.

Before coming to Mozilla, Ian was responsible for much of the UI design for the Kobo eReader, as well as Kobo's apps for the iPhone, iPad, and Android.

You can find Ian as "ianbarlow" in #mobile, #UX, and many other fine IRC channels. He's also blogging a blog about his Mozilla activities.

Welcome, Ian!

Firefox 4 for mobile - Release Candidate


The Release Candidate for Firefox 4 for mobile (Maemo and Android) is out, and, if I may be so bold, this is a pretty darned good one. I last wrote an update about what was new, user-experience-wise, 3 pre-releases ago for beta 3. As you would expect, the focus has been decreasingly on new features since that time, concentrating more and more attention on speed, size, responsiveness, and stability. These latter areas have benefited enormously; Firefox starts faster, pages render faster, you can pan more smoothly, and there's far less "checkerboarding." You can move the app, including your browsing profile, to your phone's SD card, meaning that the browser, already much trimmed down, is nice and svelte on your phone's internal memory. On top of all of this, though, there are a view visual and behavioral changes in the RC worth pointing out. Here they are! Text reflow on zoom A fundamental problem with shrinking big-screen-designed webpages down for viewing on small screens is that their text is often just too small to read. Zooming in helps, but, often, by the time the text is big enough to read, the block you're interested in has expanded past the screen-edges. There are a couple of approaches that browsers can take to remedy this; the one commonly used on Android is reformatting the text, on double-tap zoom, to be of a more readable size and layout. We've included a version of the zoom technique in the RC: You can turn on the Reformat Text on Zoom behavior in Firefox's preferences, here: Slimmed down Form Helper and Find In Page A touchscreen phone's on-screen keyboard and its accompanying suggestion/auto-correction bar(s) take up a lot of the available screen-space. To help users retain more of what remains for web-content, we pared back the on-screen presence of Firefox's form helper and find-in-page bar. The form helper went from a full-screen-width bar housing previous/next buttons and occasionally-present Firefox form history entries to just the two buttons floating in the bottom right-hand corner; form history, when available, floats above or below the form field in use. Similarly, find-in-page has gone from a full-screen-width bar to a floating widget in the bottom right-hand corner. Form helper with form history Find-in-page Copy and Paste in form fields We've had copy, paste, and select all in mobile Firefox's URL field for a while, but now you can use them in HTML form fields as well. Just tap-and-hold to bring up the menu: Character Encoding For speakers of a couple of the world's languages, it's extremely useful to be override the character encoding that a page claims to use, usually because the page is mistaken, rendering the page unreadable. Now, if you need to, you can specify the character encoding you'd like to use to display a given page:   This is a great example of a a split in Firefox's worldwide userbase: it's a feature that is never used by a large percentage of Firefox's users, but is absolutely essential to another large percentage. To keep the Site Menu down to minimal set of options, Character Encoding isn't displayed by default. You can turn it on in Preferences, here: So, those are the big ones. Somewhere along the way from Beta 3, the team has also added support for restartless add-ons more sensible UI scaling for MDPI screens some UI layout adjustments for small tablets like the Galaxy Tab scroll indicators iframe scrolling a more informative design for the "New Tab Opened" pop-up Android-style toaster alerts a revised style for the Sync setup dialog Get the Release Candidate (Android | N900 and try it out if you'd like to help test![...]

If the shoe Fitts


With Firefox 4 for Mobile to be released very soon indeed, we've naturally been getting things moving on what comes next. There's a lot to consider, ranging from already-concrete refinements of the product to larger and still-forming ideas around what a mobile browser can and should be. That is, as they say in the business, a lot of mockups.

So, I'm very pleased to announce that our mobile user-experience team is growing by one and to welcome Brian Dils to Mozilla.

Brian has several years of user-experience design behind him, including product work at PayPal, Squeezebox at Logitech, and, most recently, Adobe, where he worked on the design of Acrobat and Reader for Android. He has a Master's in HCI Design from Indiana University - Bloomington.

You can find Brian as "briandils" in your favorite UX- or mobile-themed IRC channel, on his blog, and by the small-star-equivalent radio output of his many mobile devices. Please join me in welcoming Brian!

Firefox 4 beta 3 for Mobile


It's only been about a month and a half since the last beta release, but it's already time to announce Firefox 4 beta 3 for mobile.   The beta is now available in the Android Market, which you can find by opening the Market application on your phone and searching for “Mozilla Firefox.” The Maemo builds are available for download here. There are more instructions over at the official blog post.The QR code to the left will take you to Firefox in the Android Market. This beta improves performance over what's come before, and it also brings with it a long list of visible changes. In two areas in particular – Android integration and Sync – I think you'll notice a lot of improvement. Here's a list of what's most exciting! Android integration With beta 2, Firefox introduced a new more Android-like look; in beta 3, Firefox has taken more steps to have an Android-like feel. Notification icons in the system barFirefox now puts its own notifications, with icons, in the Android system bar. For now, the notifications pertain to add-ons and downloads (progress and notification of completion):    Android keyboardsThere are a number of variants of the Android virtual keyboard that are optimized for particular cases. In beta 3, Firefox lets you use the one that's appropriate, depending on what you're trying to do. For example, when you're using the URL field on the awesomescreen, the Android keyboard with a "Go" button will be used. Similarly, when searching for add-ons, a search button will be present.    It goes beyond fields in the browser "chrome," too. The appropriate android keyboard will come up for field types like email, number, telephone, and URL in HTML5 forms. A native Android menuAndroid users have the benefit of a permanent hardware menu button, so it makes sense to let them use it to get to secondary browser functionality. Everthing accessible through this menu is also available somewhere on the on-screen user-interface, but the Android menu button can provide quicker and more convenient access to these tools. (The menu can also be extended by add-ons, of course, as in Matt Brubeck's Full Screen.) File pickers for uploadingAndroid phones don't come with File Manager apps, and smartphones in general these days try to de-emphasize the idea of a file system. This means that when a website asks you to browse for a file to upload, the browser has to offer something a little different than a desktop-style file picker. In Firefox on Android, you'll see a list like the one on the left below. If I select the Gallery because I want to upload an image, I get something like what's below on the right.    Wrap text on zoomI'm cheating with this list a little, in that this item doesn't quite fit here — it's not actually in beta 3. If you're a fan of the Android "reflow/wrap-text on zoom" behaviour, and would like it in Firefox, you can get something very similar by using an add-on called Easy Reading. We're looking into adding this behaviour to the browser, but you can get a head start and help test it out with the Add-on. Simpler Sync Firefox Sync is one of the best things about using Firefox on your mobile, so we wanted to make sure that it was convenient to set up and completely simple to use. Fast SetupIn the past, signing into Sync from your mobile has meant remembering and entering your username and password (to identify yourself) and your Sync Key (for encryption). This is great for privacy and security, but makes for a lot of fiddly typing on a small keyboard. In Firefox 4 beta 3, we've streamlined this process. To get going with Sync, you tap on "Connect" in the Sync prefs section (see below left). What comes up is a passcode (below right); you take this and enter it under "Add a device" in Firefox on a d[...]

What's new: Firefox 4 beta 2 for mobile


Beta 2 of Firefox 4 for mobile is out, and with it comes a lot of exciting change in the browser. Others will be writing more about how the browser runs JavaScript faster and loads pages more quickly; that battery consumption, memory footprint, and install size have all been reduced; and that we have a built-in crash reporter and app updater. These all contribute directly to a great user-experience and are huge improvements. As usual, though, the changes that are closest to my heart are the ones that affect your immediate interaction with the browser - what it looks like and how it behaves. In addition to important foundational improvements like more responsive pinch-zooming and clearer text rendering, there are number of things that I'd like to point out in particular. Revised Android-inspired theme The "theme," or look, of Firefox on mobile has undergone an overhaul. We've tried to make something that feels appropriate on Android, borrowing, for example, from the platform's flat square toolbar button look, its bubble popups, and context menus styles, while still maintaining a connection to Firefox for desktop platforms. We're still fine-tuning, but it already feels, to me, much cleaner and clearer than our last version.       Reorganized awesomescreen In many ways, a browser's most important job other than rendering the web is to help you find your place in it. The web is huge and, without some help, finding the sites that matter to you can be very difficult. This is the rationale behind Firefox's awesomebar (or awesomescreen, in mobile) — it helps you make sense of your parts of the web without requiring you to do a lot of filing, configuration, or management. You wear it in just by using the browser; it gives you quicker and quicker access to the sites you visit often and have visited recently, while also minimizing the amount of typing you have to do. On mobile devices, we decided to concentrate all the ways you find your sites into one place. The awesomebar's algorithm curates a default "all pages" list based on what you tend to do, but you can also get right into your organized bookmarks if you know exactly where you're looking. If you want to find a site you've seen recently, and that's all you remember about it, your history is right at hand. And, finally, you can see the sites that you already have open on your desktop computer, via sync, right here as well.         When you type, the awesomescreen pulls up your best matches from across all the categories, as usual. Bookmarks and sites on your desktop machine are marked with icons to give you some context — for example, if you type "wombat" and many results come up, you can quickly recognize the one you're looking for because you can see that it's the one you just had open before leaving your desk. To make room for more awesome results, especially when a virtual keyboard is present, we've moved the multiple search engines available in Firefox to a search button, next to the field. You can access all of the built-in search engines, as well as any you add from the web, here. Undo close tab The ability to reopen an accidentally closed tab is as useful while mobile as it is on the desktop, where this feature is very popular. We've found an elegant way to surface this feature here: until you navigate away from the tab sidebar, the most recently closed tab will appear, reopenable, at the bottom of the area. One tap brings it back.    Sharing Taking something that you've found or created on the internet and showing it to others is now a basic act of web-use. In Firefox 4 for mobile, and now more fleshed out in beta 2, you can share links and images from almost wherever you find them, and do so through the Android sharing sys[...]

Designing for Sharing - Moz10 Lightning Talk


I gave a Lightning Talk at the Mozilla Summit 2010 called "Designing for Sharing." A number of people came up to talk to me about it afterwards, so while the 5 minutes of it is still lingering in my brain, here it is in blog form. 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 [...]

Field Guide to Firefox 1.1 for Maemo


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 againRead 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 havi[...]

Fennec 1.1 - Portrait Browsing


Firefox 1.1 on Maemo lets you browse with your phone in a portrait orientation as well as landscape.

(image) (image)

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.

(image) (image)

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.

Fennec 1.1 - Form Autocomplete


Firefox tries everywhere it can to minimize the amount you have to type; this is especially true on mobile devices, where typing is usually so much harder than on a full-scale keyboard. In Firefox 1.1 on mobile devices like the N900, we've added a finger-friendly version of something you're used to on the desktop: 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 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.



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.

Fennec 1.1 - n900 zoom buttons


One of the most requested features after we released Firefox on Maemo (Fennec) 1.0 was for a way to "free-form" zoom. Fennec already supported what I call a "structured zoom" - that is, double-tapping that zooms to fit the part of page structure (a column of text, an image) that you're tapping on. That method doesn't help you in every circumstance, though, and that's where a free-form or arbitrary zoom mechanism is useful.

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.