Skip to content

Auto zooming browser for better accessibility

October 10, 2011

Now days, it is common for a computer user with large monitors to set the resolution higher than 1024 pixels in width. However, a lot of web pages are still designed with a fixed 980 or 960 width layout.  It creates waste of space on left and right margins. I’m using Yahoo as an example.

Most of the time when I visit a site, I use browser’s zoom function (ctrl + +++) so that the page fits my screen. But not every user knows this option, and it is a hassle to zoom in the every time I visit a site. Taking care of site display should be part of website design, not a user’s task. Why doesn’t a website just auto zoom for the user? Zooming is supported in IE, Firefox, and Chrome through style.zoom and style.MozTransform. I wonder how yahoo would look if it had an auto zoom feature. I prototyped the code with jquery to test it.

     function loadjsfile(filename, filetype){
      if (filetype=="js"){ //if filename is a external JavaScript file
      var fileref=document.createElement('script')
      fileref.setAttribute("type","text/javascript")
      fileref.setAttribute("src", filename)
      }
      }
      if (typeof fileref!="undefined")
      document.getElementsByTagName("head")[0].appendChild(fileref)
    }
    // load
    loadjscssfile("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js", "js")
    var currentWidth = $(document.body).width();
    var targetWidth = 1050; // experiment for your self
    var scrollWidth = 10; // need to make it dynamic
    // if the screen is not bigger than the target, then don't mess with zooming
    if (currentWidth > targetWidth) {
      if (typeof document.body.style.zoom != "undefined")
        document.body.style.zoom = currentWidth / targetWidth;
      else if (typeof document.body.style.MozTransform != "undefined") {
        document.body.style.MozTransformOrigin = "left top";
        document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
      }
      else if (typeof document.body.style.WebkitTransform != "undefined")
        document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';

      $(document.body).width(targetWidth - scrollWidth);
   }

Then, I inserted it through developer tools in IE, Firefox, and chrome. (Chrome and FF require running the code twice.) Here is how they looked.

Chrome

Firefox

IE 9

With auto zooming, the font is bigger and no space wasted on left and right. The down side is there is less content displayed at a time and more vertical scrolling. In a portal site like yahoo, where it is important to optimize user experience on content selection, it may be beneficial to display as much content as possible. So I can see why they don’t auto zoom in for users.

On the other hand, auto zooming would make sense in a blog type of site, where it is important to optimize on content consumption. Bigger font means easier on the eyes for readers. (Readability point is along the lines of this article – http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/) Wouldn’t it be great if everyone’s viewing experience is consistent? The site could also place the auto-zoom command on window resize event so that the site fills the width.

Try auto zooming for your favorite site. Please share thoughts on the result. Here is what reading this blog looks like with auto-zoom. I like it better when it’s auto-zoomed.

Hacker’s News Original

Hacker’s News Zoomed

About these ads

From → Uncategorized

9 Comments
  1. Jason permalink

    Hi,

    Are you able to tell me where to put the code to make this work?

    Thanks

    • is was an experiment i did, so i didn’t package up any code. are you are web master trying to implement this for your own site or just try to enable zooming from your own browser?

  2. Matt permalink

    Hi

    I am a webmaster and would like to use this on one of my sites. Can you tell me how you implemented it?

    • First, you will need to include jquery library to do this. (A javascript expert can make this work without jquery, but I’m not a javascript expert.)

      Then put this code in every web page of your site:

      <script>
        $(function () {
          autoZoom (1050); // experiment for your self
        })
        
        function autoZoom(targetWidth) {
          var currentWidth = $(document.body).width();
          var scrollWidth = 10; // need to make it dynamic
          // if the screen is not bigger than the target, then don't mess with zooming
          if (currentWidth > targetWidth) {
            if (typeof document.body.style.zoom != "undefined")
              document.body.style.zoom = currentWidth / targetWidth;
            else if (typeof document.body.style.MozTransform != "undefined") {
              document.body.style.MozTransformOrigin = "left top";
              document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
            }
            else if (typeof document.body.style.WebkitTransform != "undefined")
              document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';
      
            $(document.body).width(targetWidth - scrollWidth);
          }
        }
      </script>
      
  3. Weichuan permalink

    It seems only works for text. If your page contains a dropdown list. It totally off the position.

  4. muslimbodybuilding permalink

    Hey this worked for me, however it does not zoom in my iframe I have on a page :( Becomes like this:

    Any suggestions?

    • you probably need to put the zoom code inside the iframe. ask on stack overflow if you need technical help.

  5. muslimbodybuilding permalink

    I thought I’d add that happens in chrome but does not happen in firefox with your script

Trackbacks & Pingbacks

  1. Auto zooming for web page. Why or why not? #usability #ux | UXWeb.info

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: