{"id":591,"date":"2008-07-04T13:13:44","date_gmt":"2008-07-04T20:13:44","guid":{"rendered":"http:\/\/wapreview.com\/?p=591"},"modified":"2008-07-04T13:36:39","modified_gmt":"2008-07-04T20:36:39","slug":"fit-to-width-or-pinch-to-zoom","status":"publish","type":"post","link":"https:\/\/wapreview.com\/591\/","title":{"rendered":"Fit to Width or Pinch To Zoom?"},"content":{"rendered":"

\"DesktopThe 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.\u00a0 But the iPhone feature that seems to excite people the most is “Pinch to Zoom”.\u00a0 Apple has given the\u00a0 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.\u00a0 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.<\/p>\n

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.\u00a0 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.\u00a0 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.\u00a0 Opera pioneered the use of fit to width, which they call “Small Screen Rendering”,\u00a0 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.<\/p>\n

So why is fit to width better? Simply because it requires fewer user actions to consume the content of a web page.\u00a0 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.\u00a0 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\u00a0 including the Nokia N95’s Webkit and Opera Mobile on Motorola handsets don’t.<\/p>\n

\"FitI’m concerned that Opera and other browser vendors, in an effort to mimic the iPhone, are moving away from fit to width.\u00a0 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.<\/p>\n

Opera Mini 4 is technical tour de force. It crams so many features along with increased performance and\u00a0 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.\u00a0 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.\u00a0 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\u00a0 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.<\/p>\n

It’s not just Opera that is ignoring fit to width.\u00a0 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.<\/p>\n

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,\u00a0 is even less usable than the iPhone’s continuously zoomable touch interface.\u00a0 I’ve heard it called keyhole view, it really is like viewing the web through a keyhole.\u00a0 I find I can read long news articles much more quickly and with fewer keystrokes and less frustration\u00a0 when using fit to width Mobile View in Opera Mini compared with Desktop (keyhole) View.<\/p>\n

What do you think?\u00a0 Do you prefer fit to width over interfaces where you zoom out to navigate and zoom in to read ?\u00a0 Comments <\/a>are open.<\/p>\n","protected":false},"excerpt":{"rendered":"

The 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.\u00a0 But the iPhone feature that seems to excite people the most is “Pinch to Zoom”.\u00a0 Apple has given the\u00a0 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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":14022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[38],"tags":[143,144,145,142,1418,95],"_links":{"self":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/591"}],"collection":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/comments?post=591"}],"version-history":[{"count":0,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/posts\/591\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media\/14022"}],"wp:attachment":[{"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/media?parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/categories?post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wapreview.com\/wp-json\/wp\/v2\/tags?post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}