I am pleased to announce that Firefox for tablets has merged into our Aurora channel! This puts us one step closer to a general release, and we’re looking for more people to test it out. So if you have an Android 3.0 tablet you can download the latest Aurora build right now.

In addition to the features I wrote about last month, we’ve been busy polishing the UI and making more improvements to the user experience, including:

New tab bar behaviour

Placing tabs down the left column and web content on the right allows users the ability to browse with both hands: one hand can be used for switching tabs, while the other controls web content. In some cases though, using the full width of the screen can be preferable, so we added the ability to hide and show the tab bar. By default, your tabs appear on the left, and you can swipe them off the page when desired.

A more comfortable action bar

We’ve tweaked the style of the back button, and attached it to the URL bar, in an effort to streamline the design and make it feel even more like Firefox. We also stretched the URL bar across the screen to make longer page titles legible. This also pushes the  refresh and bookmark buttons closer to the right edge of the tablet, making them much easier to reach. The change to the URL bar is also reflected in the awesomebar. Now, you can scroll through your history without having to move your hand nearly as far. A small but noticably more comfortable detail.

You can use this QR code to download the build, or follow this link. Enjoy!

“I want to be able to hide tabs in landscape mode.”

Rest assured, this has been a topic of hot debate since the beginning of the project, with many people on both sides of the fence. And given how much feedback we’ve had about it so far, we will probably end up making the tab bar dismissable after all. Below is a design we are trying out in the near future.

Theming

Firefox looks right at home on Android 3.0, drawing its overall theme from Honeycomb’s minimalist design language. Of course, this is still Firefox, so we’ve made sure to keep familiar visual elements in place, like our signature big back button and a distinctive tab shape.

Awesomebar

Our Awesomebar uses the same tabbed menu to allow quick access to bookmarks, history, and your synced desktop activity. Users of the current phone version of Firefox will notice that the tabs have been moved off to the left, which makes them easier to reach and increases the number of results that can be displayed above the keyboard.

Tabs

On Firefox for phones, we meticulously tucked away all of our UI elements to free up the screen for unrestricted browsing. On a tablet, the bigger screen let us to bring some of those helpful elements back onto the screen, like tabs, for example. In landscape mode, tabs exist in a persistent left bar, allowing for quicker browsing. You can switch through tabs with your left thumb, and scroll through web content with your right. In portrait mode, this tab bar gets rolled up into a menu item at the top of the screen, to free up browsing space below. So whether you like keeping lots of tabs open and quickly switching back and forth between them, or if you prefer to just open a page and see nothing else on the screen, Firefox has you covered.

—

If you’d like to see more about our design process, check out these links:

• my ongoing Flickr set of tablet mocks
• Brian’s blog post on tab design
• Brian’s tablet wireframes 
• Brian’s first sketch of Firefox for tablets
• Madhava’s presentation on tablet design from April 2011

Some of you may know Firefox Home as the iPhone app that lets you bring your desktop Firefox’s open tabs, bookmarks and awesomebar content with you on your iPhone:

We wanted to take this idea and build on it. Our goal was to create a web app that still makes finding your content quick and easy on mobile devices, but also lends itself to sitting back in a chair and letting your web entertain you with very little typing and searching on your end. A visualization of your corner of the web.

Revisiting the UI

Touchability and visual interest were big driving influences of this design, a tile-based UI that pulls in data from your browsing behaviour, and displays it back to you using website thumbnails, icons, headlines, pictures, and content from other apps. The order in which content gets displayed is a combination of how recently and how frequently a site is visited.

Currently, our team is building a prototype that displays website thumbnails and icons. I’ve been playing with it, and I must say that browsing your web like this is quite enjoyable. Search results also use this view, and manages to find cool sites I forgot I ever visited. I for one spend so much time on the internet that I forget 99% of what I see, and Firefox Home seems to have a magical ability to remind me about all those great things.

Adding Features

Soon we’ll start adding more interesting content, like headlines  and pictures from sites you visit regularly, content from apps like Gmail and Flickr and Rdio and whatever else you’re using.

Down the road we hope to add pinning, and we’re exploring ways of displaying your apps and open tabs as a separate list.

If you’re interested in seeing some of the design explorations that led up to this UI, check out this Flickr set.

Back in the days of print, this was easy. You worked on your brochure or your business card, you printed it out, you checked your type sizes and margins, marked up your layout, tweaked your layout, and repeated. Designing for the web is also pretty easy: in Photoshop or Illustrator, set zoom to 100%. Maybe throw a browser chrome around the layout if you’re feeling fancy. Done.

Designing for mobile devices is trickier. You probably have at least 2 (usually more) very different screen sizes AND resolutions to consider, and they are never anywhere close to what your monitor displays. So your best bet is to put your layout on the device for which it is being designed.

I’ve done this lots of different ways, and I have found the following two methods work pretty well in most cases.

Slideshow

This works great for presentations and discussions. Export size-as jpegs, load them onto your device over USB / Dropbox / iPhoto / whatever, and browse your images as a slideshow. It’s a great way to show your work, and is helpful when trying to explain specific user interactions and flows. However, making slideshows can become extremely time consuming if you’re detailing a layout, and you just want to narrow down a colour or a font size. Which brings me to option 2:

Use your tablet or phone as a second display.

I first learned this trick from the smart folks at Teehan + Lax, who were using an iOS app called LiveView to test stuff on iPhone and iPad apps. Here at Mozilla, though, we spend much of our time designing for Android these days. Thankfully, there is an app for us, too. It’s called iDisplay, and it allows you to connect your phone to your computer over WiFi, and your computer treats the device as a second monitor.

1. Once you have iDisplay installed and running on your computer and device, open up your Illustrator or Photoshop document.
2. Go Window > New Window.
3. Set your zoom to 100%.
4. Drag this window over to your device, and hit F for full screen. You might have to pan around a bit with your hand tool to get your window aligned properly.

Bam. You’re done. Now, you can go back to the window that’s on your computer, work on the layout quickly and easily and zoom in and out and whatever you do, and you can check how it looks, in real time, on your device.

It’s awesome, and works like a charm!

I’ll be working primarily on Fennec, a kick-ass little mobile browser, and figuring out how to make it look great on all kinds of different phones and tablets. I’ll be blogging all about that here in coming weeks.

But before that, I’ll tell you a bit about myself:

——

LIFE STORY
Born in Detroit Rock City, moved around lots and currently reside in Toronto Canada with my wife, son, dog, and cat.

WORK STORY
Studied graphic design, worked as a print designer for many years, got into interactive design, and most recently found myself designing user interfaces for Kobo‘s eReading apps.

OTHER
I like playing lego with my son, baking pizza, learning guitar, and reading books on my phone. I’m also a bit of a compulsive mover — I have moved 13 times in the last decade…

——

Anyway, stay tuned for more updates!

Ian