Does your website use a responsive design and did you ever wonder if it is a convention to disable zooming in or out?
After all, you took so much time to get the design just right. Surely, pinch-to-zoom was built for those old monolithic sites, where you had no other way to handle these beasts?
With many websites that I developed in the past, my opinion too was that when they are build responsive and everything is in the right place, the user doesn’t need to zoom and so you can disable it.
I now think I have been wrong. Here are four reasons that you shouldn’t make the same mistake.
1. You cannot know the user’s intention
Is your content problematic, hard to read, your text too small? Or does the user want to zoom in to show your awesome photo to someone across the room? There is no way for you to know.
Maybe someone wants to copy a paragraph of text. Maybe the buttons are large enough, but a particular user still is about to zoom in to better reach it.
If you cannot know that, don’t assume anything. Just disabling zoom capabilities, you would in fact assume that they aren’t needed.
2. Accessibility issues
You want everyone to access your content. People read a lot on screens every single day. Maybe someone wants to lean back to read and just make the text larger. Why shouldn’t they be allowed to zoom in?
There are also people with bad eyesight, you certainly don’t want to hinder them in using your carefully crafted website or reading your content.
3. Never disable device features
It’s never a good idea to disable specific features of a device.
That’s what zooming essentially is. Sure, it might have been invented to use “old” non-responsive sites on smartphones, but who are you to decide what it is used for nowadays? If device makers and browser vendors include this, why bother with the decision to enable or disable it at all?
4. Devices are different
Finally, you don’t know where your website will be displayed. It might be on the same smartphone that you tested it on. It might be on an old Android tablet, the latest iPad, maybe on a gaming console, or on a TV. Locking the zoom capability, you don’t know for sure that on all those present and even future devices, users can access your site.
How do I control zoom with responsive designs?
You control the zooming of the viewport with this meta tag in your HTML’s head section:
<meta name="viewport" content="width=device-width, initial-scale=1">There’s a bunch of options, but the easiest and most flexible is the above. It tells the browser to use the device-width for your site, and to not scale the site initially.
Finally, make sure your responsive design always fits the viewport and isn’t zoomed in by default or has elements hanging out to the side.