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?