Fit to Width or Pinch To Zoom?

Desktop View exampleThe iPhone has done so much to generate interest in using the web on phones with its big, beautiful screen and powerful browser with full JavaScript and CSS support.  But the iPhone feature that seems to excite people the most is "Pinch to Zoom".  Apple has given the  UI, including the browser, a multi-touch interface that lets you use two fingers to zoom; you slide your fingers apart to zoom in and see more details, slide them together to zoom out for an overview of the full page. The zoom is continuous, not stepped as it is in other browsers.  Gesture based continuous zooming is an impressive feature which demos well and is certainly one of the most talked about elements of the iPhone user interface.

As cool as pinch to zoom is, I'm not convinced that it is the best user interface for using full web sites on screens smaller than the sites were designed for.  There is an older, simpler technology that I find is a lot more efficient for what most people use a web browser for; reading, filling out forms, and viewing images and videos.  I'm talking about "fit to width" which is simply resizing page elements like columns, text areas and images so that they are no wider than the physical width of the screen and re-flowing text to wrap at the screen's edge.  Opera pioneered the use of fit to width, which they call "Small Screen Rendering",  in mobile full web browsers and still has the best implementation. Netfront, the Blackberry browser, Mobile Internet Explorer and Teleca all offer mobile browsers with some sort of fit to width option.

So why is fit to width better? Simply because it requires fewer user actions to consume the content of a web page.  A zooming interface like the iPhone's forces the user to make constant adjustments; scrolling left or right to follow a column of text as it snakes around images (see top image) and through indents and out-dents, zooming out to find the next field in a web form and then zooming in to enter text, zooming out to see a YouTube video full screen, etc.  With fit to width (bottom image - note the absence of a horizontal scrollbar), it's just a matter of pressing the page down key to scroll through the entire page, not very sexy but a lot more efficient. Incidentally, a dedicated page down key is something every mobile browser on a non-touch screen device should have but which several  including the Nokia N95's Webkit and Opera Mobile on Motorola handsets don't.

Fit To Width exampleI'm concerned that Opera and other browser vendors, in an effort to mimic the iPhone, are moving away from fit to width.  With Mini 4, Opera introduced Desktop View which offers a miniaturized version of a full web page with the option to zoom in on an area on interest.

Opera Mini 4 is technical tour de force. It crams so many features along with increased performance and  stability and improved rendering into a 100 KB Java midlet that runs even on devices with very limited resources. However, the implementation of Small Screen Rendering, now called Mobile View, seems to be getting neglected in recent Opera Mini releases.  There are several bugs in Mini's Mobile View that don't exist in Desktop View and have persisted across numerous Betas and two general releases.  The bugs include web forms that don't work in mobile view but do in desktop view, pages where a screenfull of raw JavaScript code appears at the  top of the page in mobile view but not in desktop view and pages where selecting mobile view has no effect and horizontal scrolling is still needed to see the whole page.

It's not just Opera that is ignoring fit to width.  NetFront has had a bug with CSS relative positioning in their "SmartFit" implementation though at least three major releases. For years, Mobile IE has shrunk text fields to to an unusably small width in fit to width mode. Two new full web browsers, TeaShark and Skyfire have no fit to width mode at all and of course Nokia's otherwise excellent WebKit based S60 browser has never had a fit to width option either.

The desktop view style of web browser interface as it's implemented on non-touch screen phones, with two or more fixed levels of zoom and navigating using the keypad,  is even less usable than the iPhone's continuously zoomable touch interface.  I've heard it called keyhole view, it really is like viewing the web through a keyhole.  I find I can read long news articles much more quickly and with fewer keystrokes and less frustration  when using fit to width Mobile View in Opera Mini compared with Desktop (keyhole) View.

What do you think?  Do you prefer fit to width over interfaces where you zoom out to navigate and zoom in to read ?  Comments are open.

7 thoughts on “Fit to Width or Pinch To Zoom?

  1. Fit to width is essential for me. I tried the iphone, and the pinch zooming is nice, but not really great on the browser, because you have to continue to scroll sideways to read stuff. Very annoying (unless there is a setting to fix this?). Tried the G1 at a Tmobile store, and the fit to width worked perfectly--in fact, i think it is the best browser i have seen so far--i think it is better than opera mini. I don't have a G1 now, but from what i've seen, i'd lean toward the G1 just for the browsing experience.
  2. Fit-to-width is THE only way to mobile browse.

    For all the shortcomings of Blazer on the Treo, the ONE redeeming feature is fit-to-width.
    Horizontal scrolling is sooo unacceptable (this is the problem with some pdf documents - even on ample, full-size PC screens).

    Fit-to-width might be the best argument of function over form!
  3. Imagine doing a shift-click on an object in something like PowerPoint where the proportions are maintained when enlarging. Pinch and zoom does the same where the proportions are maintained as you zoom in on a given area.
  4. Does the iPhone modify the width of text columns to fit the screen width in the zoom in state? This combination would be the best (for big screen devices at least).
  5. As an iPhone user, I love the ability to pinch and zoom...but it is also a constant, and at times annoying, process. In most cases, I find myself zooming in to read the text, with 20/20 vision mind you, but then backing out to navigate or take in more of the page. So in the end this pinch and zoom is only to compensate for the lack of a properly designed mobile site without scalable material/fonts. But to ARJ's point, even smart fitting is going to fall down without good content adjusting which I can at least compensate for by pinching and zooming.
  6. Smart fitting of content would be something that would not be an issue if websites were designed better for such types of content adjusting. For the most part, percentage and pixel based designs just do not scale well. And in many cases, table-based layouts make re-rendering something were more AI work has to go into the browser than what really should be necessary.

    No use crying over it though, this is what the web is.

    To make smart fitting technology work, the UI has to be as "fun" and understandable as the pinch/zoom method has been proported to be. Opera Mobile seems to be going at it with a bit of double tap and reflow kind of format and that works for some of the larger devices. Smaller devices need more, and probably something a bit more innovative such as fitted and re-fonted in order to make them work best. But again, code needs to be written so that it can be independent enough from the presenation layer so that these things can happen.
  7. First of all i dont have a touch screen or a big screen smartphone, its just the dumb w810. Hence i cant comment on the browsing experience of browsers other than OM.
    IMO, the 'mobile view' experience in Opera Mini 4+ browser is not as good as OM 3.
    I wish either my OM 3 could save files and pages or my OM 4.1 could take me to the OM 3 server(as i am on mobile view).

Leave a Reply

Your email address will not be published. Required fields are marked *