Tech Tip Tuesday - Browser Zooming

Browser Zoom

There are quite a few things that can throw off the look of a webpage. Screen size and resolution is one of the biggest factors and is probably the most unpredictable for a developer. Often developers design their websites to accommodate a very low resolution (usually 800 by 600) so as not to leave out those with the lower end computers (this practice is changing with some of the newer dynamic coding being used).

What this means for most of us is that a lot of the websites we visit look very small on our screens because we run our computers at much higher resolutions. You can tell if a website was designed for lower resolutions when you see a lot of un-utilized screen real estate. Not only do these sites just look plain inadequate, sometimes they can be hard to read because the font appears so small.

Now you could just adjust your screen resolution so that the site looks the way it should. In fact, I have not seen this much recently, but there was a time when you would venture upon a website that had a notice stating, "This site best viewed at 800 x 600 resolution using Internet Explorer". Very tacky then, and very lazy now since there are ways to accommodate every browser and resolution including mobile phones, but I digress. Changing your screen resolution is not convenient, and fortunately there is a better way.

Just about every browser out there now is capable of zooming in and out of a website, essentially changing the resolution of the site itself rather than changing the resolution of your screen. In most browsers this is accomplished by holding the Ctrl key (command on Macs) and then using the plus (+) and minus (-) keys to zoom in and out respectively.

Just to give you an idea of what this does: My Windows laptop has a 15" screen with an 8:5 aspect ratio and I have it set to a resolution of 1280 by 800. This blog viewed from that computer looks okay, but I prefer to have the browser zoom level set to 125%. This brings the edges of the side bars almost to the edge of the screen and makes the font much easier to read. Now, my iMac has a 27' screen with a 16:9 aspect ratio, running at a resolution of 2560 by 1440. This high resolution makes this blog page look almost tiny. In addition, the additional width of the aspect ratio makes the distance between the side bars and the edge of the screen even greater. Therefore, on my Mac I have the browser set to view this blog at 200% zoomed (250% brings the side bars all the way to the edge of the screen).

Most browsers will "remember" the zoom level for the pages that you visit, so once you set it you can, for the most part, forget it. Browsers vary and as such, so will your results. I prefer using Google Chrome and this works as advertised in this post. If you use a different browser and have a different experience using this tip with that browser, post you results in the comments so that others will know what to expect when using that browser.