"Fluid" Designs

[kremo5le]

Hey everyone,

I'm working on a new project for a photographer. We want to develop a site that is "fluid." What that I mean that when users re-size a screen, the image or content does too. We do not want to use Flash.

Here's a non-Flash example: http://www.thesixtyone.com
Here's one Flash example just for functionality and ideas: http://nickonken.com

As far as I know, this can be achieved with JavaScript or JQuery like with the first example.

Have you done a site like this? What would you use to do it?

Please don't bother telling me why you would not do it. We will do it; we want opinions that will make us reach our goal!

Thank you!

 

[DeatosLabs]

Whenever I have to do anything like this I try to specify everything in percentage of the screen instead of pixels, However with js you could determine the pages width/height and from that specify different images to load that are different sizes, render different sized content etc.

 

[Phreaddee]

Deatos is right, u should use %. Image resizing can be done with css, although u might want a script for older browsers. And ie will need its own rules as well as it resizes differently. Definately best to avoid flash...

 

[DeatosLabs]

Deatos is right, u should use %. Image resizing can be done with css, although u might want a script for older browsers. And ie will need its own rules as well as it resizes differently. Definately best to avoid flash...

Flash isnt a problem, just a bit more complex and may not play well with all browsers when resized. add a listener for when the page is resized and call this function with the params.

function resizeObj(xx,yy,elid) {
var swfObj = document.getElementById(elid);
swfObj.height = yy; swfObj.width = xx;
}

 

[Phreaddee]

Yeah but flash sucks on so many levels that I wont even go in to. Show me one flash page (that isnt just a massive animation) that I cant duplicate in half the time, with twice the accessibility, and only a quarter of the load time...

 

[ronaldroe]

I would use media queries, and scale the images using CSS, as Phreadee suggested. Nick La from web designer wall has a great article on media queries.

 

[PixelPusher]

I would use media queries, and scale the images using CSS, as Phreadee suggested. Nick La from web designer wall has a great article on media queries.

Yeah media queries is a good method. This is based along the concept of responsive web design. And yes as others have mentioned, there maybe issues with inferior browsers.