The problem with tab thumbnails

Why thumbnails are not enough, and how Opera's solution is already better.

The beta releases of Internet Explorer 7 have generated a lot of buzz, and one new feature that the browser has is the "Quick Tabs" function that allows one to view the contents of all open tabs onscreen at the same time. This is also possible in the Shiira browser, and is made possible in Firefox through extensions such as foXpose. Omniweb and Firefox (through an extension) also support page thumbnails in the sidebar/panel. There has been news that Opera 9 will have thumbnails displayed when you hover over the tab.

All of these solutions are interesting, but as far as I'm concerned, Opera already has a working solution that is very similar to and is even better than the ones I just mentioned. Opera has a leg up on the competition because of its MDI (multiple document interface) and ERA (extensible rendering architecture) capabilities. Before getting too technical, let's compare full-size screenshots of what can be done in Opera compared to what you can do in Firefox using the popular foXpose extension, which people say is very similar to the IE7 Quick Tabs feature. (I don't run XP on my laptop, so I can't install IE7). (The screenshots were taken on my computer running Windows 98 SE using Opera 9 technical preview 1 and Firefox 1.5.0.1. I'm using a 19 inch LCD monitor running at 1280 x 1024).

Using Opera, here is what it looks like when I have 9 tabs open and tiled:


(click on the image to see the full-size screenshot)

Here is what it looks like when I have 9 tabs open and thumbnailed using foXpose in Firefox:
(click on the image to see the full-size screenshot)

Which is more useful? In my opinion, I would go with the Opera solution every time. Why? Unlike the thumbnails, which are just fuzzy and unreadable zoomed out versions of the webpages, Opera actually rerenders the pages to fit smaller windows sizes. That rerendering changes the zoom somewhat, but not equally for all elements. Opera, using its "Fit-to-window-width" feature, shrinks certain elements while keeping other elements large, especially text. Unlike the thumbnails in foXpose, you can actually read the text in the tiled Opera windows.

Also, it's important to note that Opera's rendering prevents or at least drastically reduces the need for horizontal scrolling. In addition to the text being readable, the individual windows are actually active, meaning that you can scroll through them in their tiled state, click on links, refresh, go back and forth in their history, fill in text fields, and even view video without remaximizing the tiles. Notice that foXpose cannot display Flash animations, whereas in Opera, you can view multiple animations simultaneously in the different tiles. I can't demonstrate it without the benefit of video, but Opera tiles windows much faster than thumbnails are generated in Firefox, at least on my computer. Even with fewer tabs, Opera's tiles are still better looking than foXpose thumbnails:


Opera (click on the image to see the full-size screenshot)


Firefox (click on the image to see the full-size screenshot)

The advantages of using Opera's tiled windows instead of thumbnails:

• Tiled windows are clear and readable, as opposed to fuzzy thumbnails
• Tiled windows are active webpages, and not just static images
• Tiled windows are generated faster

It's true that not every webpage will look perfect when rendered in a small window, but I consider that an acceptable tradeoff, especially considering the fact that switching from "Author mode" to "User mode" fixes most usability problems that occur.

Tiles versus thumbnails, in practice

You might ask, why do these differences matter? Do they really enhance the browsing experience? It's really about how a person wants to use tabbed browsing. Fuzzy thumbnails are enough if you just want to remember what pages you have open. Usually, though, when I keep several pages open for long periods of time, I can easily remember what they are just from reading the text on the tab.

Another way to use tabbed browsing is to open many pages at once (most modern browsers allow you to open many links simultaneously). When I do this, I don't actually want to read every page I just opened. I want to look through them quickly to decide which ones to read and which ones to close. In order to quickly scan the pages to make that decision, it is very useful to be able to read the text on each page. I think it makes more sense to evaluate a page based on its text rather than just an impression of its layout.

Also, with unreadable thumbnails, how do you distinguish between two different pages from the same site that have very similar layout? In the first two screenshots above, compare the two Digg pages I have open. Using foXpose, the only text that is readable is the page title, but anyone can already see that just by reading the text on the tabs. Using tiles in Opera, I can read the actual story and decide if it's worth my further attention.

How does Opera do it?

The technologies in Opera that make this possible are MDI (multiple document interface) and ERA (extensible rendering architecture). MDI is what allows Opera to display multiple pages simultaneously in the same browser window. Most Opera users use tabs most of the time, but MDI is still a feature of Opera, allowing the possibility of tiled windows.

ERA is what makes the tiled pages look good. Opera is well-known for its excellent mobile browser, and the strength of that product is its small screen rendering (SSR) feature--which is part of Opera's Extensible Rendering Architecture. Using the same technology, Opera can make small tiled windows on the desktop that are both good looking and usuable.

Here are some resources about ERA:
Opera's rendering modes
Setting the default rendering mode

How do I set it up?

The most important thing to do is to set the rendering mode so that "Fit-to-window-width" is always activated. If you use Opera 9tp1, you can type opera:config into the address bar to access the large list of preferences. Under "User Prefs", find "Rendering mode" and change it from 0 to something else. I typically use rendering mode=4, but 3 and 5 might also work [edit (2/3/06): see the first comment below]. Click "OK" at the bottom. When you open a new window, that rendering mode will be in effect for any page or pages you open.

If you use Opera 8.51, you have to edit the opera6.ini file which is found in the "profile" folder which is a subdirectory of your Opera folder. There, look for "rendering mode" and change it to 4. Make sure you don't edit the file while Opera is in use. [Note: ERA has been a part of Opera since November 2004, and MDI has been a part of Opera from very early on, so it should be possible to do the same thing in some earlier versions of Opera]

That's all the setup you have to do! To tile your tabbed pages, just right click on any tab, select "Arrange" and then click on "Tile vertically". When you want to remaximize the pages, select the page you want to be active, and then click on "Maximize all" (instead of "Tile Vertically"). As you can see in the screenshots above, I created a "Tile" and "Maximize" button to make this easier. You can use The Opera Custom Button & Command Creator. When creating the "tile" and "maximize" buttons, you want to use the "Tile vertically" and "Maximize all" commands, respectively.

As with other things in Opera, you can also use custom keyboard (and possibly mouse) shortcuts to do the same thing.