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.