View Single Post
Old 03-19-2007   #25 (permalink)
notjustgraphics
Rusty Bio-Hazard!
 
notjustgraphics's Avatar
 
Join Date: Sep 2006
Location: Toronto, Ontario, Canada
Posts: 1,163

Send a message via MSN to notjustgraphics
Hey Andy!

Fluid layouts are designed generally in percentages rather than set pixel widths so that when a user resizes their window OR when users with different screen resolutions view your page, the intended proportions remain intact... It can also be achieved by using the "em" unit instead of "px" but this can cause some browser problems (IE<6.0)

Keep in mind though that, with anthing more than an ultra-simple layout, there will be a breaking point where the site gives... with care this can be kept to width's below 300px.

Another benefit to fluid layouts is accessbility... if properly coded, users can resize the text components to a comfortable size for them without causing the site to "break". This can also be attained with a lot of horizontally fixed layouts that are flexible to grow and shrink vertically.

Fluid layouts require extensive use of CSS and compounds the issues of cross-browser support, but it can be attained, even to the point the images resize with the screen width.

I am by no means an expert at fluid layouts... our studio has only been asked to a couple of them. An example of one can be seen at Adria Little - A. Little Gets You A Lot - About The Best Home Team
but in this case, we did not spend the time to make the images scaleable.

If this is a style you wish to pursue, let me know and I can point you to some helpful tutorials, but a firm grasp of CSS will be very helpful.

As for screen widths, the most common screen resolution is still 800x600... hands down. However, you can consider your market as well... if you're going after designers and artists, it's more likely the average screen size amidst that group would be higher.

Generally, if you're designing to 800x600 for example, you need to allow for the borders of the browser window and a scroll-bar, so you would design to 786px in width. Height can varry depending on the number of toolbars a person uses but it is common practice to set your height to about 558px which allows for the standard toolbars.

There are a number of css layouts available here Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! (thanks AgentXI) that you can use as a basis for your site... there are even a few Liquid (Fluid) layouts.

I'll try to help more if needed...

Best of luck!

Mike.
__________________
notjustgraphics is offline