Question

When designing the UI for a web application, what are the things to look out for to ensure the UI doesn’t break when someone zooms in or out with their web browser?

Also, how do the different browser zoom types play into this (i.e. I know IE6 zooms differently than Chrome, and I assume mobile browsers are different from that too)?

Answer 1

Most modern web browsers use proper zooming. By this I mean that the page zooms in an out as you’d expect if you were using a lense to zoom in and out.

IE6 and some older versions of Firefox etc use text increasing rather than proper zooming. For those browsers, the unit type you use to size your elements will change how the zoom affects the look of your site.

For example, in IE6, setting widths/heights in px will result in a fixed layout that once zoomed, only changes the size of the text and not the containers themselves. Setting these same elements to use % or em then allows the elements to resize.

With regard to “what do I look out for” I think it depends on what browsers you’re wanting to support. My own preference is to develop for modern browsers. If an IE6 user wants to zoom and it breaks the layout then I’m happy to live with that.