How to handle different screen resolution /screen size when developing a site ?

Question

I would like to develop a site using jQuery that will work with all major browsers. I thought to start with a basic layout (a header, a couple of tabs with content, and footer). I wonder how should I create this layout to support different screen resolution, screen size, or window size. Should I work in pixels / points / percents when defining width and height of the components ? Are there any jQuery plugins that can help me with this task ? Thanks !

Answer 1

There are a number of solutions to this problem, but they are primarily dependent on what kind of content you are wanting to share through the site (ie embedded videos or images which may have a finite size) and the look and feel you are going for.

For web layouts which work well in multiple browsers and across a wide range of window sizes, you should be looking at "Liquid Layouts". Below are a few links to tutorials about these layouts.

• Liquid layouts the easy way | Max Design
• Liquid CSS Layouts - Design Alternative to Table Based Websites
• Fixed Width Layouts Versus Liquid Layouts

You can also use Javascript (including jQuery) to tweak the styling/content based on the window resolution (for instance, changing from a multi-column layout to a single-column layout for smaller screens, such as mobile phones). This is called "Adaptive Content".

• Adaptive CSS-Layouts: New Era In Fluid Layouts?

Answer 2

This is some simple scripting I've used in the past (using jQuery):

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "css/blue-800.css";
 if (pageWidth > 900) { sizeSelected = "css/blue-1024.css"; }
 if (pageWidth > 1010) { sizeSelected = "css/blue-1280.css"; }
 if (pageWidth > 1420) { sizeSelected = "css/blue-1600.css"; }
 $("#screencss").html('<link href="' + sizeSelected + '" media="screen" rel="Stylesheet" type="text/css" />');
}

The page width values used in the code are arbitrary and were tweaked to work with a specific site, so feel free to adjust them as desired.

Also, inside of each of those CSS files is just a minimal amount of CSS that sets the width of major containers/wrappers and even the background image.

---

Update #2: If you are trying to maintain valid HTML. Then you can add all of the CSS stylesheets into the head of your page (include a title attribute in each one):

<link title="blue1" href="blue-320.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue2" href="blue-640.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue3" href="blue-800.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue4" href="blue-1024.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue5" href="blue-1280.css" media="screen" rel="Stylesheet" type="text/css" />
<link title="blue6" href="blue-1600.css" media="screen" rel="Stylesheet" type="text/css" />

Then use this script. You may get a flash of white if you have included background images in your CSS, so make sure to set a base CSS style.

$(document).ready(function(){
 $('body').append('<div id="screencss"></div>');
 adjustCSS();
 $(window).resize(function(){ adjustCSS() });
})
function adjustCSS(){
 var pageWidth = $(window).width();
 var sizeSelected = "blue1";
 if (pageWidth > 510) { sizeSelected = "blue2"; }
 if (pageWidth > 580) { sizeSelected = "blue3"; }
 if (pageWidth > 900) { sizeSelected = "blue4"; }
 if (pageWidth > 1010) { sizeSelected = "blue5"; }
 if (pageWidth > 1420) { sizeSelected = "blue6"; }
 var lnk = $('head').find('link[title=' + sizeSelected + ']').removeAttr('disabled');
 $('head').find('link[title]').not(lnk).attr('disabled', 'disabled');
}

Answer 3

jQuery itself cant help you do this. You have to get the hang of basic HTML and CSS. Use Javascript and jQuery if you need it, don't use it just to use it. You should work with pixels or percents when it comes to dimensions on the web. Points are for printing. Font sizes should be set in EMs or pixels.

A fixed layout is the most common for normal web pages, and by using grid frameworks like 960gs, you have an easy way making gthe proportions look decent while still supporting the vast majority of screen resolutions. It's also far, far easier adapting graphics to a fixed width layout, and at the same time make the page easy to use.

Keep in mind when/if using percentages that text lines longer than about 600-800 pixels is difficult or slow to read. Aka having a content area of 80% could be a nice idea for a viewport that's 1000px wide, but if you have a viewport of 1900px, the site becomes mostly unusable.

And one usually does not explicitly set a height on things, as the height will automatically increase as the content of the container increases. Of course, you can set the height on certain things, but it all depends on what, really.

So, using a dynamic or fixed width all depends on your content.

Answer 4

This article can be helpful for you. Different Stylesheets for Differently Sized Browser Windows

This also

http://www.maxdesign.com.au/articles/resolution/

Answer 5

Based on your described needs, I would highly recommend checking out the "Grids" css file from the Yahoo User Interface (YUI) library, you can find the file plus documentation here: http://developer.yahoo.com/yui/grids/.

The grids package's basic setup includes a header, body, and footer. You can remove the header and/or footer if desired. The body can be divided up using a nested grid model and a variety of templates are included.

Personally, I start off all HTML/CSS pages I make with the combined "reset-fonts-grids" file from YUI. It provides you with a cross-browser css reset file, the grids file, and some standardized classes for fonts.