100

When it comes to a responsive design: should users still be able to zoom in or out?

We are currently working on a responsive design and one of our testers found it awkward that he wasn't able to zoom in or out. When I check some responsive designs (such as Boston Globe, Polygon and Currys.co.uk), it's not possible to use pinch-to-zoom. Is it a convention that when a website is properly scaled, the ability to zoom in or out is disabled and does it still provide a good experience?

On one hand, I say that zoom abilities should be disabled, since if a user needs to zoom in or out, there's probably a different reason for it (text is too small, images aren't good) and the problem lies elsewhere (your RWD isn't properly formatted). On the other hand: to use zoom or not is a decision made by the user, it should not be forced by the designer. It's a standard capability and something that users are frequently using when viewing other websites that aren't properly formatted for that viewport.

Any ideas?

Improve this question
16
  • 14
    So how will you handle the different reasons for a user wanting to zoom because he finds the text too small? Will that be obvious to the user? For most users zooming is the first line of defense against text that is too small. If not available and alternative not obvious, they'll just turn away. And why not offer it? It's not like it is going to cost you heaps and tons in development effort.
    – Marjan Venema
    Apr 3, 2013 at 10:13
  • 12
    @Mohit - I have bad eyesight I need to alter the size as needed. I am the customer I have to be able to decide on size/zoom you as a designer do not know what I need
    – mmmmmm
    Apr 3, 2013 at 12:11
  • 3
    Some icons are too small - sometime the designer wants the page to fit to the width of the screen including the sidebar so I enlarge the page to get the info across the screen not the page so in general it helps. But the CUSTOMER MUST decode on the view. The designer gives a suggestion that can be overridden
    – mmmmmm
    Apr 3, 2013 at 13:13
  • 6
    I hate when developers spend efforts to limit me. Let the user decide how he wishes to use your tools. You just provide the default layout.
    – Val
    Apr 3, 2013 at 15:54
  • 3
    @Mark And on the reverse side, I prefer to zoom out so I can see all the text at once on my smartphone. Horizontal scrolling has always been considered bad, but way too many sites nowadays make assumptions about screen size then disable zoom - so I accidentally pull up the menu when I try to swipe to the side to read more.
    – Izkata
    Apr 3, 2013 at 16:14

4 Answers 4

Reset to default
145

Yes, you should allow Zooming.

I have changed my mind on this from having worked on RWD projects in the past. Originally my opinion was 'people only used to zoom on mobiles because the site wasn't designed to work on a mobile, but that's not the case with a well designed RWD site' however I changed my opinion, partly from some user testing that was happening but also from the general principal of putting the user first.

You don't know why the user wants to zoom. It could be any number of reasons, as you have suggested:

  • They want to view an image in more detail
  • The are trying to select a word / paragraph to copy and use elsewhere so zoom in to get a closer view and make selection easier
  • They want to read a particular area of content that is too small for them to view so zoom in to do so
  • The resolution of different mobile devices is not standard, so just because it's a 4" screen doesn't mean the text is as clear on all 4" devices.

There is any number of reasons why they may want to, but if they do want to and can't then that's a worse User Experience than if they weren't bothered about zooming but accidentally do so.

Aside from some minor development work required to allow it there is very little overhead in adding that functionality in. (Don't forget that people can zoom any page they like if they're using a desktop browser).

Also, some responsive sites do allow zooming. http://smashingmagazine.com/ or http://clearleft.com/ being some of them.

Improve this answer
9
  • 7
    I'd +2 this answer if I could. Very helpful.
    – JohnGB ♦
    Apr 3, 2013 at 11:36
  • 2
    Not only is resolution not standard, but DPI is not standard. I couldn't tell you how many times I've wanted to Zoom out on a mobile website but was unable to.
    – user606723
    Apr 3, 2013 at 15:14
  • 2
    The first bullet point alone is enough to allow zooming. I don't care how pretty your layout is. If I want a better look at an image, give me the ability to do so. I hate when an image is fixed and I can't zoom in on it.
    – Frank B
    Apr 3, 2013 at 15:30
  • 1
    Facebook is the worst offender of this. @user606723 On my Nexus 7 Facebook photo's in stream are massive, and they do not let me scroll out to make them a normal size... I HATE this.
    – Ryan
    Apr 3, 2013 at 16:03
  • 1
    Some of us are old enough to need larger text.
    – boatcoder
    Apr 5, 2013 at 21:47
21

As Kyle Schaeffer put it:

You should only disable the zoom feature if it enhances users’ ability to consume content on your site. If you’ve formatted your design layout so that users don’t need to pan or zoom, the zoom feature actually impairs the user from navigating your content (which only needs to scroll vertically). If you’ve incorrectly formatted your layout, however, disabling the zoom feature will only further infuriate your users, as you are removing a very important navigation capability of the browser.

An article on HTML5Rocks says about a particular implementation:

In order to accommodate for sites not optimized for mobile screens, many modern mobile browsers set a larger browser viewport, which allows for better viewing of non-mobile-optimized sites. Users can then pinch-to-zoom in on the content they want. That's fine for non-mobile experiences, but because we're optimizing our experience for mobile browsers, we'll use the viewport meta tag to set the screen width to the device width.

It's important to note that we're not disabling the user's ability to zoom the page (which you could do by adding user-scalable=no to the content attribute), even though we're optimizing the content for small screens. It's recommended to keep user zooming enabled to keep things as accessible as possible. However, there are use cases to disable user-zooming, such as if you're including fixed positioned elements

And a quote from Luke Wroblewski is relevant here too:

Just because my screen is small doesn’t give anyone insight to my behaviours, desires and needs.

i.e. why should you restrict the user if you don't need to. Let the user decide!

It's not impossible for users to zoom within a responsive web design, in fact it's very easy to allow it (or rather not disallow it) - it's just the resulting appearance and interaction can seem awkward at times, depending on how well/badly the content is structured.

One option is for users to pinch zoom until the next media query hits - such as described in this REMux proof of concept on CSS Tricks.

Improve this answer
2
  • 1
    I'm confused. Zooms with pinch aren't triggering media queries on iOS. Are they doing that on other devices?
    – Roland Studer
    Apr 3, 2013 at 10:24
  • +Roland that may be true for safari on iOS. I have encountered several apps from the app store which don't allow that for websites embedded into their app (e.g. from the Google+ timeline). Of course, most of those allow you to open that page in safari but that's quite annoying when you just want to increase the zoom level.
    – mbx
    Apr 3, 2013 at 18:03
3

I am attending An Event Apart right now and a question like this came up - can you prevent or disable features for the user that they are otherwise used to having on their device. The answer was unanimous that best practice is you should not do this, but you can anticipate and build in ways to respond to it. By the way another part of the conference brought up just how many devices at how many screen sizes and resolutions are coming out right now. So my question for you is how can you possibly insure that zooming will never make sense for your site on a particular device? Screen sizes across devices now range from 3" to 27" and beyond.

Improve this answer
-2

Yes, users should be allowed to zoom and use the page at their convenience.

People, however, have set norms:

  • they are used to lists
  • when viewing on the desktop, they like a little 'distance' rather than being immersed
  • more is indeed more in the mind (or, bigger is indeed better)

So we're now exploring the ability for users to zoom out on the grid, to suit themselves.

It is challenging to keep your template from going nuts when a user zooms in, but if you have a text heavy site, you should expect this (and set your columns to be zoom-able and comfortable for reading).

Pinch-to-zoom can also be problematic. You might want to constrain zooming to pre-defined zoom levels (see everything, zoom into a photo or text) and maintain the ability to smoothly scroll around without your template breaking.

Improve this answer
1
  • 6
    None of your three bullet points in this post really make sense it regards to the question. Can you say what you mean?
    – JonW ♦
    Apr 3, 2013 at 12:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.