Quick Tip: Different Layouts for Different Widths
videos

Quick Tip: Different Layouts for Different Widths

on Feb 12th 2010 with 78 comments

It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions.

In this video quick tip, we’ll learn how laughably simple it is to do this with a touch of jQuery, and the resize() method.

By utilizing jQuery’s “resize()” method, we can easily listen for when the user changes the width of their browser window.

function checkWindowSize() {
	
	if ( $(window).width() > 1800 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
	
}

$(window).resize(checkWindowSize);

Then, subsequently, we target our desired CSS properties accordingly.

#container {
	width: 800px;
	height: 1000px;
	background: #e3e3e3;
	margin: auto;
}

/* Change container size for larger windows. */
.large #container {
	width: 1000px;
}

#nav {
	
	width: 100%;
	height: 100px;
	border-bottom: 1px solid white;
	background: #999999;
	
}

.large #nav {
	float: left;
	width: 200px;
	border-bottom: none;
	border-right: 1px solid white;
	height: 1000px;
}

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://www.broof.de BroOf

    Hehe nice tip thank you jeffrey! This is awesome for mobilephones!

    • Commenter

      Except for the fact most mobile phones do not have javascript hencce this doesnt work :/ (most smartphones do however)

    • http://www.BryanWatson.ca Bryan Watson

      Instead of working with Javascript to try to customize mobile devices, you should implement mobile-specific CSS by choosing an appropriate “media”.

      http://www.w3.org/TR/CSS21/media.html#media-types

  • kuldeep

    Hey really nice tuts I hope i am gone use this sooner or later……………….

  • http://hdesignsPlus.com Hooman

    useful tip. tnx jeff

  • ryan

    yea great tip for all those readers out there using old monitors. they aren’t as lucky as us web designers to have huge monitors. =D

  • http://www.nefariousindulgence.com Tim

    That’s a pretty awesome tip. I love how it seems complex but only requires a few additional lines of code. Thanks!

  • http://nolasnovelties.com dixie

    You have taught me SOOOOO Much,,, I learn best by watching the results,, but could I ask a favor,,,,on your demo’s you use a black background,,, it makes it hard to see the code as you type it in,,,,,could you use a white background,,?

    Thank you for teaching an old dog the new tricks,,,
    Dixie

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Dixie! Sure – I’ll try to remember to default back to the basic TextMate skin when I record.

  • http://akiweb.eu/ Áki

    That’s really a quick tip.

    Thanks

  • http://elasticss.com Sergio de la Garza

    Everybody should checkout Elastic CSS Framework, to accomplish this in a simpler way

  • http://www.samswitzer.org/ sam

    or you could drop the dumb fixed-width websites and make one that actually works at multiple resolutions! It’s not that hard!!

    • oconn96

      Fluid websites have been done before but some screens now are close to 2000 pixels wide. Would you want to read a line of text that wide? because with fluid layouts the potential is there. Designing for 1024 is what I go for now, always put in one of these tricks to compensate for widescreen users.

  • http://www.gregbabula.com Greg Babula

    Thanks, this could be very useful soon

  • http://emanuelesala.com ema

    thanks Jeff, what happen to ur blog? http://www.jeffrey-way.com/ getting goddady default page

    • http://net.tutspus.com Jeffrey way

      Yikes! I must have screwed up with the forward. You can go to jeffrey-way.tumblr.com for now. :)

      • dave

        FYI, your site is still not forwarding.

        Also, what’s an “almost wife”?

        ———-

        You are providing great little screencasts!

  • Wanyax

    Just as I was scratching my head over how to get this effect. This site is a godsend! Thanks Jeffrey. :)

  • http://www.thecssninja.com/ Ryan

    You could use media queries for the better browsers to accomplish this without javascript. I did an article on orientation detection for the iPhone using CSS3 media queires http://www.thecssninja.com/css/iphone-orientation-css. This could be modified to do what you’re demo does and fallback to javascript when it’s not available.

  • Retnuh

    Nice Tut…

  • http://adrusi.com Adrian

    never thought of that but it’s a great idea. anyone have an idea of how to animate that?

  • Alexcsandru

    Nice man ! tnx for this! you are the best !

  • http://www.shabithishan.com shabith ishan

    nice tip Jeffrey, thanks for sharing. :)

  • http://davidfitzgibbon.com David Fitzgibbon

    Great as always Jeff!

  • khaled

    This is A useful tip jeff!: Thanks a lot!

  • jmarreros

    very nice tip, thanks for sharing Jeffrey

  • http://mokshasolutions.com Moksha

    good tutorial, thanks

  • http://javatutor.net Java developer

    nice tut, thnx

  • http://www.chimera-studios.co.uk/ Chimera Studios web design

    Great stuff Jeff well done!

  • Mofoo

    Hey nice tut but the if statement in checkWindowSize has the same code for both branches…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Right – because it’s calling toggleClass – which will remove the class if one is present, or add the class if it’s not.

      • Mofoo

        it’s the same as this:
        var a
        var b

        if (a == 1)
        b = 5
        else
        b = 5

        no matter what a is, b will always get set to 5.

    • http://envexlabs.com Matt Vickers

      I think it was just supposed to be a quick example.

      99% of people would realize to switch the code.

      • Jeffrey Way

        No. It checks the size of the browser when resized. ToggleClass
        performs a different operation dependent on whether or not a class is currently set.

  • http://www.websiteperks.com John

    Hey Jeffery great screencast.

    Do you or anyone else know of a Windows Editor that auto completes your lines of code like yours? That’s a huge time saver!

  • http://www.webtechwise.com/ Omer Greenwald

    Beautiful way to maximize your site’s compatibility to different resolutions. simple and great!

  • http://owenconti.com/freedom Owen

    Hello Jeffrey, I have been following a lot of your jQuery tuts lately, but for this one, my page only resizes after I shrink and then click refresh. I have it set to

    $(function () {

    rather than

    function checkWindowSize() {

    because with the latter option my page won’t resize at all, with or without refresh

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    Thanks for the tips

  • Roger

    your are the best teacher I have…
    everyday I learn something new and very useful!

    thank’s a lot!

  • http://ilopezdeaudikana.com mutiu

    quick and tasty…

  • http://www.lifesub.de Stefan

    Very cool tip! I like it so much. I’m working on a Mac with a very high resolution and all my Designs look very chaotic on a windows pc… Helpful!

  • http://www.keetee.com Allison

    Nice. Thanks Jeff!

  • http://pollfa.ir abdollah2

    Thanks Jeffrey.

  • http://bleddz.com Adel

    Great tip. thank you jeffrey!

  • http://www.emanio.se Jonas Brauer

    Nice walk through!
    One of the best I’ve seen. Quick, simple and great information.

  • http://www.jordanwalker.net/index.php Jordan Walker

    That is great, I know some clients still use 800×600 on a 22 inch monitor :-)

  • http://www.andrislinz.ch Andris

    This is a great tip. Especially because it degrades fine. Thanx Jeff!

  • http://www.designstudio16.com Saurabh Shah

    woot ! what an awesome tip … Thanks Jeff !!!

  • http://www.twitter.com/edMaga edMaga

    Awesome! Very helpful

  • Jhon

    That’s a big one! Thank you very much!

  • http://spotdex.com/ David Moreen

    I always had a problem similar to this, when I try to make a bar type thing with an iframe. The only issue is that I have thought myself to always assume that the user has javascript off… :/

  • http://www.stevendavisphoto.com Steven Davis

    Cool. I’ve been doing exactly this on a website I’m doing at work. I basically listen for users resolution on page load and window resize. If below 1280, nothing, if above, it adds a “wide” class to the body :)

  • http://www.BryanWatson.ca Bryan Watson

    Great Tip!

    Also, this is a good way to incorporate some advertising space in your websites for those who sufficient screen real estate to show it.

  • Lea

    Very cool.. these webdesign studies are so muchfun since I found this site – Caution highly addictive ! Thank you so much

  • Norguad

    Hi,
    I have just one question. The resizing function works great, but if I have my browser window maximized, the code does not add the large class to the body. Is there a way how to solve it?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Are you sure? It seems to be working for me. What browser are you using?

      • Norguad

        I tested in FF3.6, Safari 4, Opera 10 – it is not working in the moment, when the browser starts in maximized window. If I resize the window, it works, even if I maximize it from not maximized window.

      • Norguad

        Btw. Using PC Windows Vista.

      • Norguad

        No one has the same problem as me?

      • Rogier Borst

        I’m working on Windows 7 and have the same problem. No matter what browser I use (Firefox, IE, Opera, Safari or Google Chrome), when the window is maximized and I load my site, it doesn’t apply the large class.
        It seems that the script used for the Nettuts site (tutsResize.js) is different and it works even when you start out with a maximized browser window. I’m no Javascript / jQuery expert, but I think that script works better because it also fires when the page is loaded.
        I’ll see if I can come up with a solution, because I’d love to get this working properly. Great tip, Jeffrey :)

    • Rogier Borst

      I found the problem.
      There’s a difference between the code in the screencast and the code on this page.

      In the screencast you’ll see the following two lines:

      checkWindowSize();
      $(window).resize(checkWindowSize);

      The first line fires the resize function on window load. The second line fires the resize function whenever the window is resized afterwards.

      In the snippet on this page, that first line (checkWindowSize()) is left out, so the function won’t be fired when the window loads. Add the line, and everything works fine again.

      • Norguad

        Great! You are right Rogier! It is now working fine:-)

  • SAMY

    I don’t Knopw anything about javascript but i think if you help me to do that i’ll really Thank you , i say that because i try it but without any succes .
    my probleme that i want to do that but me when the size is begger than 1800 put to my #Header a background else put an other background can you help to do that Please !?

  • SkipSoft

    WOW!!!!

  • http://tacogames.org Marcus

    Great tut!
    I’d love it if you could make a tutorial how too make like rounded corners for internet explorer & opera!

  • http://www.privateserverybk.com private serverlar

    That’s a pretty awesome tip. I love how it seems complex but only requires a few additional lines of code. Thanks!

  • http://www.dmcgames.co.nz DMCGames

    Great tips. It is particularly useful when adjusting the site’s layout for different screen sizes.

Newer Comments →