SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Whose Site Is It Anyway?

    A few weeks ago I was clicking-around in peoples signatures and found a site that roughly (way way waaaay roughtly) looked like this:



    Basically, the whole site scaled depending on the window size.

    I am now wishing I bookmarked this site because I think it would be a good example to point to when I am involved in one of those "fluid, fixed, elastic, xhtml/css" conversations.

    Anyway, got any ideas as to the site url?

    Many thanks in advance,
    Cheers,
    Micky

  2. #2
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you sure it was really achieved with XHTML/CSS?

    i would think that would be impossible - the angle of the rounded triangles should reduce when stretching

    if the site was exactly like that - then my only theory is probably a use of VML (on IE 6.0) and SVG on non-IE browsers (and some event scripting I would think)


  3. #3
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh ok I read it now - it was Flash.
    soz


  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for reply!

    Yeah, was flash... Obviously my graphic looks cruddy... I just like the innovation of the site... Everything scaled depending on window size. I think it was a blog-site.

    Every now and then I get into "relative vs fixed-width" or "fluid, fixed, elastic, xhtml/css" conversations and I thought that site would be a good example to bring-up.

    Thanks for responding.

  5. #5
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    flash will always be able to do things xhtml/css can't
    but always at a price

    i like deflashifying websites; where i try to get the overall effect as close as possible to the original (flash) version.
    i would be seriously stuck if i came across a site like the logo example above.


  6. #6
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol, I found it!

    www.nickcowie.com

    I was doing some research on EM-based layouts (specifically interested in learning more about EM's, Images, and Newspaper-based layouts)...

    Anyway, found the site via the comments section of this page.

    As stated in my original post, I think this site is a good example of, as Cameron Moll says, "fluid / liquid / elastic / call-it-whatever layouts."

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mhulse
    Lol, I found it!

    www.nickcowie.com

    I was doing some research on EM-based layouts (specifically interested in learning more about EM's, Images, and Newspaper-based layouts)...

    Anyway, found the site via the comments section of this page.

    As stated in my original post, I think this site is a good example of, as Cameron Moll says, "fluid / liquid / elastic / call-it-whatever layouts."
    This is very cool as example of some possible approaches for creating elastic designs.

    It does remind me that the more control I try to exercise as a desinger the less I really have - Nick's efforts at true cross browser elasticity are fairly involved and have their own unique problems.

    If you keep your/the site simple enough (which people need to realize why D%gg, for example, is so plain - it's just not yet practical to make it that much richer as it won't hold up in different display situations) you don't have to jump through so many hoops. That is the route I would go - or build the whole site in Flash and not use the browser - then you will really get some elasticity!

  8. #8
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @JW: Great points. I definitely agree.

    I do think Nick has done a fine job at pushing the envelope when it comes to "elastifluquid" layout.

    I think Nick mentions a few of the problems in comment 24, but I will gladly share the link as one unique example for future elastifluquid conversations/debates.

    Thanks for the insight John... your input is always helpful and appreciated.

    ...

    Off Topic:

    I wonder what the web would be like without comments??? Hehe.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Perth, Western Australia
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Other than the design being a rushed proof of concept that I never got round to finishing. I am happy that is has made an impression on some people.

    The current version does have problems with flash enabled *nix including OsX browsers. I have been assured by brothercake and Andrew K (sitepoint's new technical editor) that if I use an iframe shim it will fix the problem of the Adobe flash player rendering flash content behind HTML content when it should not. I just need to get off my butt and test it.

    The other issues with the concept are:

    1 What happens if visitors do not have flash plugin installed or the right version of the flash plugin.
    They get provided with alternate content, in my case no images, sharp corners instead of curves and plain instead of decorated text. The website works, it scales, it is just bland but everything is accessible.

    2. What happens if visitors do not have javascript enabled, they get the bland website that does not automatically scale. Again all the content is available and accessible.

    3. What happens if the visitor has the "flash block" plugin installed in Firefox, currently they get click to play flash buttons and that does not work with my footer, because it is overlayed by links. There are a couple of alternatives, I could force people by some trick css work to play the flash movies just to view the site, however that is not me. I would rather provide the bland non flash version, this just requires a little more thought in structuring the site and some CSS work.

    4. If a visitor has change their default browser font size to larger than 16 pixels, the site is wider than their browser window. This is rare and it can be fixed by modifying the javascript.

    5. People who browse the web with large monitors and their browser windows maximized, end up with large text they claim can be difficult to read. However, any liquid sites they view have extremely diificult to read long line lengths and fixed width sites are lost in the whitespace. On the other hand, people using the higher density screens popular in laptops should appreciate the font size proportional to browser width. I know, I have spent the past six weeks using a 15" laptop with a 1600 by 1200 screen. Almost every I web sites I viewed, I needed to increase the font size a couple of times just to read the text, and on occassion this broke the layout. Given the choice of supporting the increasing number of people using higher density (125ppi and above) screens in laptops against people who use large low density (96ppi and below) screens badly (they break most websites). I know who I should be supporting.

    I need to spend some working on the site, particularly rewriting and adding features to the javascript. At the same time I will produce a new design and hopefully some new features. However without a deadline to work to, I have no idea when it will be done.

    And thanks for all the kind words, it gives me an incentive to get it working properly.

    Nick
    _________
    Nick Cowie
    nickcowie.com

  10. #10
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woot! Howdy Nick, thanks for responding! (I thought I found your site via SP) I had a feeling you might come-by this post eventually! Hehe.

    Quote Originally Posted by nickobec
    Other than the design being a rushed proof of concept that I never got round to finishing. I am happy that is has made an impression on some people.
    Definitely! Like I said in previous posts, it is a great example of an "elastifluquid" layout. I wish I had bookmarked originally... over time I kept finding myself kicking myself in the butt for not bookmarking!

    Quote Originally Posted by nickobec
    ... that if I use an iframe shim it will fix the problem of the Adobe flash player rendering flash content behind HTML content when it should not. I just need to get off my butt and test it.
    Oh really? I did not notice any probs myself... Firefox does a good job on that tip (on a XP/PC). Also, I have always had probs with trying to get HTML content on top of Flash, not the other way around. Do you have any links to articles that talk about this phenomenon?

    Quote Originally Posted by nickobec
    The other issues with the concept are:
    1 ... The website works, it scales, it is just bland but everything is accessible.
    You know, that is cool with me. Main thing in my books is that it is accessible.

    Quote Originally Posted by nickobec
    2. ...Again all the content is available and accessible.
    IBID. At what width does the site default to? Or is the default javascript-less state liquid? Hehe, I did not test your site with JS turned off. But, still, it sounds like you covered all your bases ... graceful degradation.

    Quote Originally Posted by nickobec
    3. ... I would rather provide the bland non flash version, this just requires a little more thought in structuring the site and some CSS work.
    Ah, yes. This would be my choice. Alternate non-Flash content. Sounds like the best alternative.

    Quote Originally Posted by nickobec
    4. ... This is rare and it can be fixed by modifying the javascript.
    Ah, interesting. I found that the site was at the perfect resolution for my laptop (Dell WUXGA). No need to scale font bigger.... I mean, I did play around with scaling, but in terms of readability, things were perfect from the get-go.

    Quote Originally Posted by nickobec
    5. People who browse the web with large monitors and their browser ... who use large low density (96ppi and below) screens badly (they break most websites). I know who I should be supporting.
    For sure. I like your reasoning. I surf the net at high resolutions... I think I fit your target audience.

    Quote Originally Posted by nickobec
    I need to spend some working on the site, particularly rewriting and adding features to the javascript. At the same time I will produce a new design and hopefully some new features. However without a deadline to work to, I have no idea when it will be done.
    Hehe, I know the feeling.

    I think it would be cool (although, probably not practical for you) if you had archived versions of the site online for users to see the progression over time. Either way, I am looking forward to your next iteration.

    Quote Originally Posted by nickobec
    And thanks for all the kind words, it gives me an incentive to get it working properly.
    For sure, any time. I am stoked you actually commented.

    Keep up the great work.

    Cheers,
    Micky


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •