"Fluid" Designs

Discussion in 'Web Design' started by kremo5le, Sep 20, 2011.

to remove all ads.
  1. kremo5le

    kremo5le New Member

    Messages:
    71
    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! :)
     
  2. DeatosLabs

    DeatosLabs New Member

    Messages:
    9
    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.
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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...
     
  4. DeatosLabs

    DeatosLabs New Member

    Messages:
    9
    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;
    }
     
  5. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    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...
     
  6. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    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.
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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.
     

Share This Page