Unfortunately, it seems quite hard to find good content about everything that happens around us and inside our heads when we are building user interfaces. This is what The Layout is about.

My intent is to create a space for high quality content discussing the principles, mindset, and practices that I believe shape the craft of UI engineering. It is meant to be a shared space with many voices—so, expect some awesome guest authors.

I’ve just posted the very first article, Mind the Gap. My plan is to publish a new article every other week-ish. For now, subscribe to the RSS feed or simply follow The Layout on Twitter or Google+ to get future updates.

I really hope you enjoy it!

Tabs

Details in the tabs UI can make a big difference UX-wise. We changed the tabs button icon (see image) to provide better affordance. The new icon also features a much cooler animation when tabs are added or removed.

Last but not least, we added a subtle parallax effect when you the open/close the tabs panel giving it a more fluid feel.

Address bar

As Wes has already reported, you now have the option to show URLs instead of page titles in the address bar. The domain highlight (see image) is a nice touch and gives us feature parity with Firefox on desktop.

The reader and stop buttons now have properly sized hit areas to avoid tapping other parts of the toolbar by mistake—a long overdue issue.

That’s not all

Reader Mode will get some nice style updates for serif fonts, doorhanger notifications now have a more polished animation, text selection handles have a more consistent style, favicons in the awesomescreen will look fancier, some visual glitches in the awesomescreen and toolbar were fixed, and more.

Not all these changes are in Nightly just yet but they will show up in the next days. Firefox 23 has everything to be my favourite release ever. Download and install our Nightly build on your Android and let us know what you think.

Up until now, one of the biggest limitations of the Smoothie API has been the lack of proper support for multi-part items. What is a multi-part item? It’s a ListView/GridView item composed by multiple parts that have to be loaded asynchronously with different priorities as you scroll.

Classic example: a list of photos with items composed by the photo image and the author’s avatar—both loaded from the cloud. With the existing API,  Smoothie would force you to load the whole content of each item in one go. This means you were forced to load both the main photo image and the avatar image for each item before loading the next item in the list.

What if you wanted to start loading the main photo image of all visible items before loading their respective avatars? The photos are probably the content your users are actually interested in after all. That’s what the multi-part item support is about. It allows you to split the loading of each item into multiple asynchronous operations with different global priorities.

So, how would you implement the above example assigning higher priority to the main photo image over the avatar using Smoothie? Assuming you’re already familiar with Smoothie’s API, just follow these steps:

1. Override the getItemPartCount() method from ItemLoader. Return the number of parts the item in the given Adapter position has.
2. Handle the new itemPart argument accordingly in loadItemPartFromMemory(), loadItemPart(), and displayItemPart(). These methods will be called once for each item part.

The item parts will have indexes starting from zero. e.g. for items with 2 parts, the part indexes will be 0 and 1. The indexes also define the relative priority between parts. Smoothie will load the part with index 0 for all visible items before loading part with index 1.

Important note: I had to break API backwards compatibility. If you don’t really need multi-part items, the only change you’ll have to make in your code is to subclass from SimpleItemLoader instead of ItemLoader. SimpleItemLoader is an ItemLoader specialized in single-part items that hides all the part-related bits from the API.

The updated documentation contains code samples and a more detailed overview of the new API. Grab the latest code while it’s hot. Feedback, bug reports, and patches are all very welcome as usual.

As an initial experiment, we’ll be doing the first hackathon this week from Wednesday to Friday and we’re going to focus on UI polishing bugs—those UI papercuts that are not so prominent in isolation but, when fixed en masse, make a whole lot of difference.

It’s important to have a good list of bugs before we begin. So, you can start nominating Fennec bugs for the hackathon now by tagging them with “ui-hackathon”. We’ll cleanup this list and maybe prioritize them a bit during the planning session on the first day of the hackathon.

As usual, everyone is welcome to participate. You can help us by tagging bugs, or better yet, fixing them. Have a look at the wiki page for more details on the agenda.

The goals with these changes are: keeping a clear distinction between different types of tabs; making better use of the screen real estate on different form-factors and orientations; and being more compliant with Android’s design language. So, what’s new?

Tab types

With the introduction of private browsing support in Firefox 21—now in Aurora—came the need for a clear distinction between regular and private tabs. We’ve done two UI changes to accomplish that.

First of all, the tabs tray is now divided into sections for each type of tab—regular, private, and remote—so that you always keep things separate and organized. Furthermore, once you select a private tab, the main toolbar becomes dark as a clear sign that you’re in a different browsing mode.

Two-way tabs tray

We now use a horizontal scrolling tabs tray whenever it improves our use of the screen space. This is achieved with a TwoWayView—announced a few days ago.

On phones, the tabs tray is vertical in portrait mode and horizontal in landscape mode. On tablets, the tabs tray is a vertical scrolling side bar in landscape mode and a horizontal strip in portrait mode. Small tablets (7″ or so) now share the exact same tabs UI than large tablets.

Holo-ish

The Firefox UX team has been working on streamlining the Firefox UI across all platforms—both on desktop and mobile. The idea is that Firefox should feel like the same product wherever you use it. Finding the right balance between cross-platform design consistency and native platform compliance can be tricky but I think we’re getting there.

We’ve recently landed a new skin for Firefox for Android that is more aligned with Android’s Holo design language. Almost all textures and gradients were replaced by flat colors giving a much lighter feel to the browser. I love it!

All these UI changes are now available in the Nightly build. Give it a try and let us know what you think—ideally in form of bug reports!

Unfortunately, the Android platform doesn’t provide any AdapterView with horizontal scrolling support nor could I find any non-naive open source implementation out there.  Enter TwoWayView.

TwoWayView is an AdapterView that can be scrolled either vertically or horizontally. Just set the orientation of the view and it will do the right thing for you. In its current state, it supports all the usual AdapterView APIs (selection handling, adapter, item click and long click listener, etc), view recycling, list selector, choice mode (single and multiple), edge glow, and scrollbars. Have a look at the sample app to see it in action.

The code is based on various bits and pieces of Android’s AdapterView, AbsListView, and ListView. It uses the necessary wrappers from Android’s Support Library in order to keep backwards compatibility.

The big missing features right now are focus handling, keyboard navigation, and accessibility. I’ll be working on those in the next few weeks besides all the necessary bug fixes—I don’t recommend using TwoWayView on production code just yet.

For now, feedback, bug reports, and patches are very welcome! Enjoy!

We’ll talk in detail about how we run Gecko on Android, the past and future UI iterations, our graphics/rendering platform, and more!

The schedule is pretty simple. The doors will be open at 18h30 and we’ll start at 19h. The talk will be followed by free drinks and pizza in our community space. Interested? Register now at the event page. Hope to see you next week!

Design

The main goal of the new design is to bring focus to the content, nothing else. My main source of inspiration was definitely Opoloo’s Squirel Park blog. You’ll notice quite a few similarities in terms of content structure. Other relevant sources: Signal vs. Noise, Simon Foster, and Ian Storm Taylor.

Typography

The new theme uses FF Tisa Web Pro, FF Tisa Sans Web Pro, and Futura PT. Tisa has a subtle modern character without getting on the way. I love it. The fonts are served by Typekit. Their Personal plan is not that expensive and I got to choose the fonts from a fairly large library.

Implementation

My previous WordPress theme had some serious issues: it was full of weird hacks, looked broken on certain browsers, and wasn’t responsive at all. The new theme is based on Bootstrap and adapts the content for different screen sizes nicely. Responsive images are implemented using picturefill. Some DB caching is done on the front page using WordPress’ Transient API. I’m using the Hypercache plugin for an extra performance boost.

Comments

I decided to disable comments as part of the switch to the new theme. I usually don’t get a lot of value from them anyway. Also, I don’t feel like spending any time moderating comments anymore. You can always find me on Twitter and Google+ if you got something to add or discuss.

The source code of the new theme is available on Github. Enjoy!

Sriram Raghuraman implemented a “set wallpaper” context menu option for images in web content. Greg Roodt added mouse wheel scrolling support. Mark Capella fixed a handful of bugs in different parts of our UI. Alex Nagacevschi implemented preliminary support for RTL content in Reader Mode. Ian Patterson fixed some weirdness in how downloaded images are named. Ravisankar Sivasubramaniam fixed  a bug on our input handling when switching tabs. And the list continues!

Want to have your name on this list? Here you go: bug 807990 is our second featured bug. It’s about a small but very useful feature in Reader Mode: adding a double-tap gesture to scroll the article a “screenful” distance. You’ll be mentored by yours truly. I’ve just added some background information to the bug report to get you started. Comment on the bug to take it!

I strongly recommend joining us on IRC (irc.mozilla.org #mobile) to get some support on setting up your development environment.

Smoothie provides a simple API to load ListView/GridView items asynchronously, off the UI thread. It does all the obvious things you’d expect—loading items as they become visible, cancelling item requests for recycled views, etc. But it does a bit more than that.

Smoothie is gesture-aware: it will avoid wasting item requests after a fling gesture and enable incremental item loading while you scroll the list with finger down. Furthermore, it supports offscreen item preloading to reduce the number of placeholder-type items as you scroll. Under the hood, Smoothie uses a thread pool executor backed by blocking queue with dynamic priorities. Offscreen item requests will dynamically get higher priority as they become visible on screen while scrolling.

So, how do you use it? It’s easy:

1. Add an AsyncListView or AsyncGridView to your layout. They only add one extra setter method to their respective parent classes.
2. Implement an ItemLoader with your app-specific logic for loading and displaying items. You’ll have to override four methods: getItemParams(), loadItem(), loadItemFromMemory(), and displayItem().
3. Build an ItemManager with your ItemLoader and set it on the target AsyncListView or AsyncGridView.

Think of Smoothie as a slim backbone for your ListView/GridView‘s asynchronous loading. You can easily hook up your own image loading/caching framework in it. For instance, one of the sample apps implements an ItemLoader backed by Android-BitmapCache with a simple fade-in animation to display images.

Besides the API docs in the code, have a look at the sample apps to get a better idea of how to use the library. Keep in mind that the API is not final yet. Feedback is very welcome! Enjoy!