Elastic layout – wrong term?

26 contributions to “Elastic layout – wrong term?”

1. How does setting min-width and max-width on a percentage layout makes it perform better?

   By setting max-width to an em or px value, I imagined it would reduce readability for the below users:

   • Users who require large text sizes and have wide browser size (1280px, 1600px, 1980px, and more). They’d end up with short line lengths relative to the width they set their browser.
   • Users with certain reading disorders who benefit from very long line lengths and are using a big screen. For example, my dad has mild dyslexia and always runs a maximised browser, even on our 1600px wide screen. He uses a default text size.
   • Combinations of the above, where a user needs large text size and long line lengths in a wide browser.

   I’ve got no means to test this in reality, this is just guesswork. Did the research you did include these user groups?

2. Oh crap, looks like I suck at HTML. Sorry. 🙁

3. Ach, I need to adjust the styling for lists within comments as well! You’d only missed a closing slash on one of the code bits, no worries.

   How does setting min-width and max-width on a percentage layout makes it perform better?

   Because (assuming there’s enough flexibility) you can get quite a wide range of widths, without horizontal scrolling. I had meant percentage with with a max px value.

   We were focusing on visual impairments at the time, but consider these scenarios:

   1. Someome with visual impairment, large fonts and a small screen. With an em width they can’t get at some of the content without horizontal scrolling (which on a screen magnifier is not easy to deal with, or even notice).
   2. Someone with a cognitive issue that prefers longer line lengths. At a large resolution and a max width of 1200px, the line length is less than they would like.

   Which is harder to deal with? I don’t want to put one situation above another, but how much trouble would your dad have with a content page on this site, or on Nomensa.com.

   There may some some reduced readability, but surely that’s better than not seeing content/navigation? I’ve not come across your first example, people who require larger text sizes don’t tend to run at high resolution – it makes things smaller!

   Bottom line: with an em based width and no max-width (in IE), none of the situations you outline are as good as with a percentage width.

4. Hi guys.

   I’ve had this one with Ben (I hope I can call you Ben now 🙂 over on Accessify. Although I don’t doubt his dad’s preferences for a second, unfortunately he’s in the minority, even for dyslexics. Most dyslexics (myslef included) can’t stand the veiwport bigger than the page thing that IE7’s Zoom does. In fact its an almighty pain, as I (we) get lost scanning across the line.

   IE’s propriatory Zoom method is still the best for most IMO, but is still not available through the browser itself.

   I’ve recently knocked up this free google gadget for folks to see what our stuff does:
   Talklets Google Gadget

   Our zoom, like all others ain’t perfect. But the IE scripting zoom zooms images, and text and rarely breaks the page, and doesn’t require scrolling left and right, hindering those with scanning difficulties (and annoying most other users).

   The tricky thing is Ben’s Dad won’t be alone, but like I say, its worth noting that if he like IE7’s zoom he’s not the “average dyslexic”.

   Happy Newyear BTW.

5. When you say proprietary zoom method, I assume you mean the CSS zoom thingy? I take it that it is what your gadget uses?

   From a quick look, it would be equivalent to Opera’s if it re-sized the images in the same way as the Opera/IE7 browser zoom. Still, better than the default IE7 zoom for most purposes.

6. Yes. or Javascript (boo hisss,I hear you jeer). As in

   document.body.style.zoom=1.5;

   I do like Opera’s and yes I think its better than IEs Magnifier Zoom, but Its still not quite my favourite. Mainly because it breaks more pages than the IE’s scripting zoom. I had a rather heated but eventually ammicable debate about that too over on the accesify forum. The images of note are towards the bottom of the page. I wish now I’d grabbed the image of when Opera actually SHRUNK the text, in order to fit it on the screen (I guess) after enlargeing elements to the left of it… Very bad. But yes, its still a good effort.

7. I wish I’d seen that thread, unfortunately forum’s don’t do pingbacks, so I missed that. I hope people don’t mind me re-opening it…

8. what about ‘proportional layout’ rather than ‘elastic’, since its size is proportional to the font-size ?

9. Rubberbands are elastic, Web pages are not.

   If you write something or draw a picture on a wide rubberband and stretch it out, the writing and drawing become distorted. This is a property of elastic and Web sites designed to accomodate various browser widths don’t behave like this.

   Dynamic width, Fluid width, etc. are more accurate terms describing the effect.

10. Manu3000: Unfortinately I don’t see ‘proportional layout’ as better because it doesn’t say what it is proportional to. Neither does ‘fluid’, but that has been estabilshed somewhat for any ‘flexible layout. It is the differentiator I’m looking for I guess. It doesn’t have to be (and probably won’t ever be) known by end users, but something for developers to get hold of.

    David: Yes, writing on a rubber band would be distorted, but that isn’t what I was getting at. “Elastic” as a term I intended to mean ‘stretch up to a limit then stop’ (or snap 😉 ), rather than the current meaning of ‘vary with font-size’, which has no connection to the off-line metaphor.

11. … And then there are Jello layouts (which IE7 also manages to solidify).

12. Phil: My dad doesn’t use IE7 zoom. He uses a very wide browser at a totally normal text size. I thought that’s what I wrote…

    Alastair, sorry but my question about layout performance wasn’t clear. What I meant was, how does adding size limitations via min-width and max-width to a percentage-based layout make it perform better than the same percent-based layout without those limits?

    Hopefully this clarification will make it easier to understand the potentional problems I outlined. By adding artificial limits you surely degrade performance for users outside of those limits?

13. oops

    Ah! I get you now. I missread lots. Even the stuff I write. 🙂

14. Hi Ben,

    Sorry for missing this for so long, GMail has been dropping the emails from my blog 🙁 .
    Thank you though, you really made me think about it, this was my thought process:

    how does adding size limitations via min-width and max-width to a percentage-based layout make it perform better than the same percent-based layout without those limits?

    This isn’t exactly what I was saying. I said: The best performing sites across various conditions were those that used a fluid+elastic layout

    Compared to a font based layout, they caused horizontal scrolling quickly for people with visual impairments. I have no doubt about that issue, in usability testing it caused massive problems on a bill paying type site that was otherwise quite normal.

    For the user’s you outlined, I do have to question who they are? Who requires regular text sizes and a wide browser size? (That is essentially what the requirements came down to.)

    If you didn’t apply a max-width, then many people would get a 100% wide site at regular size with massively wide reading width completely out of portortion with the intended design.

    A user style sheet of:
    * {max-width: 100% !important;}
    would sort that out, but it isn’t so easy the other way around.

    There are quite a few conditions here, I was initially talking about font based layouts compared to percentage layouts (without any min/max widths), where the outcome (performance) is clear.

    Horizontal scrolling takes font-based layouts of the useful equation. Without an effective max-width for IE6 or IE7, they are still not useful.

    If you take visual impairment for a moment (not the only thing to consider, but just for a moment), then the likelihood is that a design probably works at it’s intended size (font and layout).

    If you expand that design in proportion, the design works for people with visual impairments, until it expands out of the viewport.

    No one likes it expanding out of the viewport, it create horizontal scrolling which is difficult for everyone, but especially those with access issues.

    Therefore you need a ‘fit to width’ option, that tries to expand the size of elements and still not expand out of the viewport.

    I don’t want to discount any individual’s experience, but everything I’ve found points to smaller widths than I would prefer!

    • Dyslexic people find that the further text is presented from one side of the screen to the other, the more difficult it becomes to read.
    • There is nothing worse to read than unbroken text stretching right across your screen.
    • “Lines that are too long or short can put strain on eyes due to increased physical movement.” A Dyslexic Perspective on e-Content Accessibility.

    Yes, I would like to say the people should choose their own widths, and ideally I would like to be able to define some combination of percentage and font based widths, but if you get that complicated you have to be on the user agent side of the equation.

    E.g. Opera will expand a font-based width until it hits the viewport size, and if you ‘fit to width’, the proportions become percentage (in most cases I’ve tried).

    But in marketing terms (for the masses), a very wide size completely out of proportion with the design is not going to cut it. Flexing is good, but you can take it too far.

    (Phil, who were you talking to?)

15. So, you’re saying that max-width is useful on em-based layouts because it stops them overflowing the viewport? Yep, that sounds fine to me.

    But what I’m interested in is percentage layouts! 😀

    AlastairC wrote:

    I had meant percentage with with a max px value.

    The number of pixels on a typical monitor increases over time. Remember when 640x480 was the norm? :p Now the norm is gradually heading towards double that (1280x960). Some people’s hardware is way ahead of the norm.

    This means the size of 1px changes — mostly decreasing. So vision impaired users will need bigger and bigger text (when measured in px) for it to be the same physical size on their screen.

    For example:
    Text displayed at the same px size on a 1280x1024 pixel screen would be about 1.25 times physically smaller than on the same screen at 1024x768. So the user of the 1280x1024 setup has to bump the text size up 1.25 times further.

    Because their screen is the same physical width, setting a px limit of 1024px would force them to use line lengths about 1.25 times shorter than what they were comfortable with before. This less comfortable reading means and more scrolling.

    So the limit has made it less accessible?

    As I’ve mentioned, my dad always runs a maximised browser, even on our 1600x1200 monitor. He finds longer line lengths easier to read. I sometimes prefer long lines for long documents so I can skim them more quickly. Unlimited resizing is a usability bonus for me. An arbitrary limit removes the possibility of that bonus.

    Sites like @media 2007 show you can keep design lovelyness whilst still having unlimited resizing.

    So, I still don’t get why a px limit is needed. Maybe a follow-up article is in order…or do I need my head examined? 🙁

16. Hi Ben,

    You’ve actually hit the nail on the head as to why I prefer the zoom method compared to text-resizing: 1px has gotten a lot smaller, so images are smaller than they used to be (on many newer screens).

    More than ever, the pixel is a relative unit.

    Having long lines (e.g. more than this site allows) at standard zoom is fairly unusual, and because of the conflict with visual impairments it isn’t easy to design for both without the user-agent doing something special, or using a style switcher.

    Btw, check the @media site at 800 wide, it could do with a min-width.

    Some sites are fine at large sizes and regular font sizes, but some are not. If my company’s site (Nomensa) were expanded to 1900px wide with that design, it would be uncomfortable for the majority of people, and it wouldn’t look right (e.g. the boxes). It allows flexibility for fonts and layout up to a (quite high) point.

    I don’t think you will get far insisting that all sites have to be designed in a way that makes massive expansion look ok. Either the user-agent side of the equation needs to improve, or you need a more adaptive approach like the recent alistapart article.

    And yes, there will be an article about this (well, layouts and zoom), it’s been in my drafts longer than any other article!

17. The page won’t be uncomfortably wide at 1900px for people who like very long lines; it would actually be more comfortable. Also, setting the max-width to 1050px means even users who’d like modestly longer lines (such as 1280px) have their preference blocked.

    And then there’s the issue of text size. For someone browsing at a larger-than-default text size, 1280px lines (or even 1900px lines) may actually contain fewer characters than 1024px lines at the default text size.

    And as we agree, on a high-resolution screen 1px wouldn’t be as physically wide as you might expect. The dots per inch (DPI) setting for the monitor could be higher, so any browser which respected this would be using larger-than-default text. You could have the same number of characters per line in 1900px in this setup as you do at 1024px at default text sizes.

    Adding a px upper limit prevents a website from being resolution independent (aka device independent), something which is becoming ever more important as screens get more diverse.

    Am I making any sense at all? 🙁 I’ll wait for the next article…

18. The page won’t be uncomfortably wide at 1900px for people who like very long lines

    True, but not for the majority, and it isn’t something you can have both ways without a style switcher or something on the user-agent end.

    The dots per inch (DPI) setting for the monitor could be higher, so any browser which respected this would be using larger-than-default text.

    I don’t think any of them do, which kind of scuppers that line of thinking. Firefox used to have an option for it that worked to a degree, but that was dropped in 2.0 from what I can see. Basically, without a zoom, 1px is a static measure. In the scenario you are arguing for, you would have a situation (say at 1900 wide) where the text is enlarged but the images are not, which might be fine for text but would images tiny.

    In any case, if 1px isn’t static, then the max-width in px would be proportional, as that measure would be bigger. Basically you’d be in the same position as having a zoom, and I don’t think is what you are trying to get.

19. Hi, thanks for your useful article and clear definitions about layout kinds.

    I beg you to introduce me to some example of websites with flexible layout & font based layout & elastic layout& fluid+elastic layout.

20. Hi Saerona,

    Well, this site is fluid and (by my definition) elastic, as are the sites my company does (see Nomensa’s portfolio).

    For font-based, I can’t think of any off hand (that are public), but the alistapart example should show you what it’s like.

21. I don’t know if this is still relevant, but I was just searching on how to solve the max-width problem in IE and nowhere seems to have one for percentages… After reading other pixel based max-width I came up with this:

    img {
    max-width:98%;
    width:expression(
    this.width > this.parentNode.width ?
    “98%”:
    “auto” );
    }
    seems to work great. hopefully this helps (even if it is a bit late)

22. Hi Nikk,

    Thanks for that, I’m not sure it would work for a layout div with a width in EM values (due to the font-value in IE not changing with the user’s font-size), but I’ll certainly try it on this site for the pictures!

23. Actually, I take it back, it is not very consistent (and my not even work)… I think there was a caching issue that made it seem like it was working… I’m keeping at it though, so hopefully I’ll find something…

24. You’re completely right once again Alistair. At the time ALA printed the article on elastic sizing I stepped back and decided not to go down that path for very much the reasons you explain in this article. Although I have to admit the ALA article set a lot of people off making these elastic layouts.

    A funny tale is that I remember my first ever CSS layout adventure where I made an elastic layout almost by accident, naively, and everyone around me said it was wrong. I put my hands into special gloves and stopped touching myself there immediately!

    I tend to give IE a fixed width (stuff them) and everyone else gets a percentage based width using max and min widths. It seems to work the best with the least complaints (not sure what my personal site does at present as I’m reworking new templates etc).

    No elastic is the wrong name. How about pseudo-elastic design…???

25. Pingback: steven clark
26. Pingback: nortypig » Blog Archive » Using Elastic Design

Comments are closed.