, November 9 2010

The right to zoom

A couple of days ago, Peter-Paul Koch kicked off a debate concerning zooming on mobile optimized sites. 

Given the de-facto standard amongst mobile optimized sites on the web today is to prevent zooming, PPK is definitely swimming up stream with this opinion.  I love that! :) Has the mobile design world really been heading in the wrong direction all this time?  Since we spend pretty much all day thinking about the mobile web here at Mobify, his tweet raised some eyebrows here and led to a great discussion about the value of zooming.  I'll talk about our conclusions, as well as some new features Mobify has to empower site designers.

Before I weigh in on the subject, it makes sense to answer two questions.  1)  Why would a visitor to a mobile optimized site want to zoom on content?  and 2) Why would a mobile site designer want to prevent zooming?

Let's begin by addressing the first question.  The zoom metaphor was introduced in mobile browsers as a way to mitigate the small but pixel-dense displays available on mobile devices.  By zooming, the site visitor can make text more readable, and see more detail in images.  I'll leave out other rich media - if a video or flash element is consuming a significant chunk of visitor attention, these elements will tend to be full-screen.  Since all modern mobile browsers integrate zoom functionality, explicitly blocking it contravenes what is becoming an established convention.

So why would designers want to prevent zooming?  First, it makes navigation faster on touch devices.  When a mobile visitor makes a swipe gesture, there's only one axis for interpreting the input.  It prevents accidentally scrolling content offscreen in a horizontal way.  Children and young-adults may find precise swipe gestures trivial, but for the majority of adults, the swipe interaction method is very new, and inaccurate swipes are common.  Second -- unlike a desktop browser, designers of mobile sites can have complete confidence that the web browser is occupying the entire screen real-estate, and for modern smart phones, they can be certain the screen has a minimum virtual width of 320 pixels.  This lets designers custom-tailor the site, including navigation and site-branding for a specific size.  Tremendous effort is expended on desktop sites designing around not knowing how wide or how tall the browser will be.  Many sites don't even make the attempt and use fixed layouts.  You could say a fixed-layout on desktop is similar to a mobile site that doesn't allow zooming, but in fact that's not the case.  On mobile, at least in the case of 90+% of smart phones in use today, you can make safe assumptions about what will happen when you set a non-scalable device-width viewport.  No such assumption holds for desktop browsers.

If a designer does a good job with the type-face, is there a reason for zooming?  In some cases, there might be.  Site visitors with visual impairments, for example, might want much larger text than what would be optimal for a typical visitor.  An image might include high-resolution detail that a mobile visitor would like to zoom on.  (That said, most high-quality mobile sites lower the resolution of images for mobile visitors to speed up 3G load times.)

Can we have the best of both worlds?  Sure!  Mobify has created a widget designers can add to their site which allows visitors to enable and disable pinch/zoom on their mobile optimized site.  Mobify also includes a feature which when enabled, automatically wraps anchor tags around images and lets visitors click on the image for a full-resolution version.  These widgets will be available in the next release of Mobify Studio, look for the announcement soon.

How much faster could your mobile site go with automatically optimized images and scripts?

Subscribe to the Mobify Webdev Blog

Get regular updates to help you create amazing adaptive web experiences.

No spam — we promise!