Coding with Jesse

Resizing a web layout based on browser size

May 19th, 2007

Some people thought that my new layout was too thin, and I had to agree. Originally, I wanted the width of the text on the page to be in a more narrow, more readable column. I also tried to stick to a layout that could fit within a browser on an 800x600 resolution. The result was a column of text that was less readable because it was too narrow.

Today, I added a bit of JavaScript to the page to resize the layout for anyone with a browser wider than 930px. The JavaScript looks like this:

var body_check = setInterval(function(){
    if (document.body) {
        clearTimeout(body_check);

        if (document.body.clientWidth > 930)
            document.body.className += ' wide';
    }
}, 10);

Every 10ms, this script checks if the body is available yet. As soon as it is, the checking is cancelled, and the 'wide' class is added to the body if the browser is wider than 930px.

I opted for a polling technique instead of using window.onload, or even instead of addDOMLoadEvent, so the design wouldn't noticeably jump when the class was added.

To go along with this JavaScript, I added the following in the CSS:

#body { width: 760px; }
#main h1 { width: 560px; }
#main .section { width: 444px; }

body.wide #body { width: 910px; }
body.wide #main h1 { width: 710px; }
body.wide #main .section { width: 594px; }

I isolated the 3 fixed widths that would need to change, and simply increase each of them by 150px whenever the 'wide' class is added to the body.

I hope this wider design is a bit more readable for the 98% of you with a higher resolution.


Comments

1 . Mauvis on May 20th, 2007

Mauvis

I dig it. I disabled JavaScript and I can see what you mean about it being a little too narrow (I'm 1280x1024.)

Yay for progressive enhancement.

2 . Nick on August 8th, 2007

Nick

awesome script
how could you resize an image as well?

3 . Kristine on March 21st, 2008

Kristine

surely there's a way to make it work the other way around - resizing it for everyone *under* 930px? if there is a way, PLEASE could you let me know? that would save my final project!!!

4 . Jesse Skinner on March 23rd, 2008

Jesse Skinner

@Kristine - that's simple. Just change the example above to check for a width less than 930:

if (document.body.clientWidth < 930) {
document.body.className += ' thin';
}

5 . Mohammed Jaffer on December 9th, 2011

Mohammed Jaffer

hi jesse,

im working in a company as a web-designer. last week ive got a project. in which i have to make webpage resize according to the browser resolution.do you have any idea ? please help.

thanks.

Comments are closed, but I'd still love to hear your thoughts.