Should users be able to zoom in a responsive webdesign?

  • 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, 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?

    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.

    As a designer, you are a curator too. You design an experience which you think is optimal for users. You may not want user to tinker with it too much as it may affect his experience unknowingly. I don't find the idea of giving too much control in the hands of users enticing other than perhaps the control over font-size which can easily be done.

    This possibly links into a previous question I asked a few months back RWD what should happen when the mobile device is rotated

    @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

    @Mark - Accessibility options in modern mobile phones don't help much? I am only against scaling up of design elements rather than text.

    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

    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.

    @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.

    If you insist on RWD - yes.
    But in a world of higher bandwidths on daily bases, new and smarter browsers every few months and new versions of smarter smartphones every year - does it really worth the effort? how long till browsers on smartphones will be able to load reduced quality image from high quality image selectively?

    I am not too much against any of the suggestions you people are giving here but I would like to know how many people use the accessibility options provided these days in the modern phones. Especially @Mark , have you ever used Accessibility settings in your phone? I just researched and my iPod Touch has accessibility options for implementing system wide zoom using three finger touch. Have you used it ever? I mean if there is already a system in place for implementing zoom, there would be a less need to implement zoom based features on per-application basis.

    This question makes me wonder about the implications for "zoom" and how it might replace antiquated link-clicking to take a user to various site "territories" (somewhat like Google maps). A pretty interesting children's book:

    @Mohit Most (all smartphone?) mobile browsers have pinch-zoom built in, but responsive designs actively disable it because ideally it shouldn't be necessary (which is wrong, as the answers and comments show). It's not being built by the developers.

    Two points to consider - native mobile apps don't allow arbitrary zooming and browsers don't provide appropriate hooks and behaviors to maintain intended layout on pinch zoom. So, even though allowing zoom is the right thing to do, in some cases it simply results in a broken app experience for the user.

    Also, if allowing zoom is not an expectation for native apps, why is it so for web apps? The same issues with user intentions and accessibility would apply, right?

    Unless you have a very specific reason to disable zoom, then there is no benefit for the user. So why would you still do it? I get so frustrated on sites that assume they know how I want to view the page. Maybe I WANT to hold it far away and read more comfortably. Or whatever. WHY can't I? In my experience, zooming doesn't break the layout - it doesn't affect it at all. It literally just lets me zoom in/out on the page. Ugh. This seems like such ridiculous logic... "I don't think the user NEEDS to use this already built-in browser function, so I'm going to disable it".

  • JonW

    JonW Correct answer

    8 years ago

    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. or being some of them.

    I'd +2 this answer if I could. Very helpful.

    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.

    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.

    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.

    Some of us are old enough to need larger text.

    This is a GREAT reminder to make sure our next release is zoomable. I've always hated not being able to zoom into an image; conversely, I've always loved zooming in to see lots of detail when available, particularly in product images.

    Nicely enough this site itself is a nice example of responsive site that is zoomable. And appropriately so - a great example is that some user might put images with arbitrary small details in his question or her answer. The zoom is mandatory here.

    Confused about statement, "some minor development work required to allow it". On static HTML+CSS pages, there is zero development work. It's free since it's a standard browser function. Do code-generated pages default to turning it off?

    @DocSalvager Well, this answer is now about 5 years old, so I guess the tech has moved on in that time. But it's never been a complex task to enable zooming even 5 years ago. In-fact I believe you had to explicitly *prevent* zooming, so the solution would be 'just don't lock out zooming'.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM