Re: [css-d] Question about EM's
Jesper Brunholm wrote: I'll definitely second Georg here, em scaling is best when used to keep content inside the window on at least one axis (and, just for tradition keeps the customer's sake - make that the horizontal axis :-) ) I'm sorry, but I don't understand how em-based widths have anything to do with preventing horizontal scrollbars. It seems as if you and Georg want the following conditions to be met: 1. Text scales with the user's preferences. 2. All content fits horizontally on the page. #1 is accomplished by setting font sizes in a relative unit. #2 is accomplished by setting the width of a container in a percentage. So what do either of your goals have to do with em-based design? The point of using ems is: 3. To keep proportions of page elements the same so that line lengths remain the same (to keep them readable). But #3 is in direct conflict with #2. There's nothing wrong with this -- you just have different goals than Al. There are very probably designs where #2 is a more useful goal than #3, and very probably designs were #3 is a more useful goal than #2. I won't get into what my goals are in general -- that's irrelevant -- but I will say that I agree completely with Al's point: you completely defeat the purpose of using ems for widths if #2 is one of your goals. Again, there's nothing wrong with goal #2, but it has nothing to do with ems. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Zoe M. Gillenwater wrote: I won't get into what my goals are in general -- that's irrelevant -- but I will say that I agree completely with Al's point: you completely defeat the purpose of using ems for widths if #2 is one of your goals. Again, there's nothing wrong with goal #2, but it has nothing to do with ems. I think you have missed the original question somehow. Since that question was about using ems for dimensioning, then that's what responses should focus on. However, a well-working catch all solution should also be presented, since there is one. I don't think that has gotten through yet. Maybe better read up on how ems can be used, while avoiding horizontal scroll-bars and off-screen content... http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ ...and you can even test its proportional qualities if you have wide enough screens. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Gunlaug Sørtun wrote: Zoe M. Gillenwater wrote: I won't get into what my goals are in general -- that's irrelevant -- but I will say that I agree completely with Al's point: you completely defeat the purpose of using ems for widths if #2 is one of your goals. Again, there's nothing wrong with goal #2, but it has nothing to do with ems. I think you have missed the original question somehow. Since that question was about using ems for dimensioning, then that's what responses should focus on. I agree, which is why your suggestions to use percentages to keep the design within the horizontal constraints of the window were off-base, not mine. As I have explained, this goal of no horizontal scrollbars is incompatible with the goal of em-based layouts (preserving proportions for optimal readability). However, a well-working catch all solution should also be presented, since there is one. I don't think that has gotten through yet. How does your solution catch all? It does not meet goal #3 that I stated in my last email, which is to preserve proportions. There is not a catch all, as there never is in web design. You choose your goals, and by doing so, reject other goals. Maybe better read up on how ems can be used, while avoiding horizontal scroll-bars and off-screen content... http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ ...and you can even test its proportional qualities if you have wide enough screens. I'm very familiar with using ems for layout. I've used them myself in a couple different sites and written articles about their use for Community MX. However, I disagree with yourself and Roger of 456 Berea Street that they should be combined with percentages to prevent horizontal scrollbars. Doing such completely defeats their purpose, as Al and I have tried to explain. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
However, a well-working catch all solution should also be presented, since there is one. I don't think that has gotten through yet. Maybe better read up on how ems can be used, while avoiding horizontal scroll-bars and off-screen content... http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/ ...and you can even test its proportional qualities if you have wide enough screens. Much as I admire Roger's work, I don't think constraining the page to the width of the window is an ideal solution in all cases. I have a friend with severe visual impairment, who will attempt to view a page using his magnifier tool, only resorting to his screen reader if that breaks the design. Like many people in his situation, he can't afford to upgrade to newer, possibly better versions of his assistive software, which only works with IE. Nor can he afford a great big monitor. He couldn't care less about having to scroll sideways to view a page magnified to 800% of its normal size; what he doesn't want is for the design to break into single-word-wide columns, as Roger's site does because of the constraint to window width. If he went there, he'd have to use his screen reader, which depending on how bad his mood was that day would very probably result in him giving up on the site in minutes. Try looking at Roger's design zoomed to 800% in a 1024px wide window and you'll see what I mean. (The Firefox DOM Inspector is useful for checking out things like this; in Roger's styles, select the body element, view the CSS style rules in the rightmost pane, select the last entry in the top of the rightmost pane, double-click the font-size: 76% setting, and enter 800%. You probably knew this, but not everybody reading might, so I'll throw it in here :-) On the other hand, when he finds a site with an em-based layout - in the sense of Zoe's point #3, where the site remains in the same relative proportions across its layout - he's perfectly happy to scroll sideways; he just appreciates being able to see and read the site as nature (and the deisgner) intended. He sees the entire world through a very narrow viewport anyway, so why should he be bothered by a scrollbar? Just my 0.02GBP... Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Zoe M. Gillenwater wrote: I'll definitely second Georg here, em scaling is best when used to keep content inside the window on at least one axis (and, just for tradition keeps the customer's sake - make that the horizontal axis :-) ) I'm sorry, but I don't understand how em-based widths have anything to do with preventing horizontal scrollbars. It seems as if you and Georg want the following conditions to be met: 1. Text scales with the user's preferences. 2. All content fits horizontally on the page. #1 is accomplished by setting font sizes in a relative unit. #2 is accomplished by setting the width of a container in a percentage. So right and true, and exactly where I stand in this debate. I will gladly listen and learn when others present me with good arguments about how to overcome the trouble of double scrollbars, and by now I do certainly accept that some prefer these (even if it's hard to understand exept if one uses 400%+ zoom, in which case I think the use is so specialised that it is reasonable to use the browser that can do so as one whishes, namely Opera). So what do either of your goals have to do with em-based design? The point of using ems is: 3. To keep proportions of page elements the same so that line lengths remain the same (to keep them readable). Sorry, but - _the_ point? I thought it was just one of the possible advantages. The thread began with a question about when to use em and when to use percentages, and whether it could be reasonable to use ems throughout. It obviously _can_ be, depending on the overall design and the preferences of the user. Perhaps we should develop this further, to get a vocabulary for giving the user the choice of stylesheets with full scalability in the page design (meaning em design where the page-setup follows the font-size) VS Text scaling with one scrollbar only garanteed instead of the relatively poor small - medium - big style sheet that is currently available in some sites. Best regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Jesper Brunholm wrote: Zoe M. Gillenwater wrote: So what do either of your goals have to do with em-based design? The point of using ems is: 3. To keep proportions of page elements the same so that line lengths remain the same (to keep them readable). Sorry, but - _the_ point? I thought it was just one of the possible advantages. It's the only advantage I can think of. I'd be happy to learn of more. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Zoe M. Gillenwater wrote: So what do either of your goals have to do with em-based design? The point of using ems is: 3. To keep proportions of page elements the same so that line lengths remain the same (to keep them readable). Sorry, but - _the_ point? I thought it was just one of the possible advantages. It's the only advantage I can think of. I'd be happy to learn of more. When you put the text together like you've done above, I don't see any other advantages, I misunderstood you to be talking of ems for text and/or container elements, as that was my approach... Sorry for the misinterpretation though. What about my suggestion on a convention as to how we show and explain the two (valid) different approaches to page and font zooming? As far as I've understood your position, you can hardly find it useless because only one of the approaches is interesting/useful. Regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Zoe M. Gillenwater wrote: Gunlaug Sørtun wrote: However, a well-working catch all solution should also be presented, since there is one. I don't think that has gotten through yet. How does your solution catch all? It does not meet goal #3 that I stated in my last email, which is to preserve proportions. There is not a catch all, as there never is in web design. You choose your goals, and by doing so, reject other goals. That's one of your goals - not mine. My goals are defined at the bottom of this response, in case they got lost too. I'm very familiar with using ems for layout. I've used them myself in a couple different sites and written articles about their use for Community MX. However, I disagree with yourself and Roger of 456 Berea Street that they should be combined with percentages to prevent horizontal scrollbars. Doing such completely defeats their purpose, as Al and I have tried to explain. I have no problems with your explanation, but I am more, or rather only, interested in the user-experience. I don't want *any* design-methods to get in the way. I have also used ems for layout. That method has been around for many years. You will find one of my test-examples linked in to css-d around 18 months ago. They are nice for designers, but that's all - IMO. They are no good at the user-end without limits, which is why Roger's solution is better for users - visitors. The purpose with 'elastic' is that it has all the qualities of a proportional, em-based layout, on windows that are wide enough, and falls back and behaves like a normal, percentage-based layout, on narrow windows. One can even create 'elastic' with ems and percentages in reversed order - reverse the rules, and it will work almost the same way. The fact that this approach doesn't fall inside definitions that you and Al may agree on, has no impact on a working solution. It simply is *another* solution, that can be used by those who find it useful. Others don't have to care or like it or anything - and I personally couldn't care less since I never design for designers. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Gunlaug Sørtun wrote: Zoe M. Gillenwater wrote: How does your solution catch all? It does not meet goal #3 that I stated in my last email, which is to preserve proportions. That's one of your goals - not mine. I didn't say it was my goal. I said it was *a* goal that may be valid for some projects. I have no problems with your explanation, but I am more, or rather only, interested in the user-experience. But this is what I have a problem with, Georg: that you are implying that Al's solution of allowing em widths to create a horizontal scrollbar is a disservice to the user. It sometimes is, but it isn't always, and this is what you are saying. As Al and Nick Fitzsimons have pointed out, providing a horizontal scrollbar can be a *boon* to the user. So please don't say that your solution is a catch-all and doesn't get in the way of the user. Some users, you're right, other users, you're wrong. I have also used ems for layout. That method has been around for many years. You will find one of my test-examples linked in to css-d around 18 months ago. They are nice for designers, but that's all - IMO. How can you say this when both Al and Nick have told you about real users that find them nice? Please don't lump all users into one generic group. Accept the fact that some people find the behavior of expanding designs that cause horizontal scrollbars ideal over your method of constraining the design to the browser window width. You don't have to optimize your design for these people -- but don't pretend like they don't exist. Make your design choices knowingly. They are no good at the user-end without limits, which is why Roger's solution is better for users - visitors. Some, not all. There are newbies on this list -- let's not spread false or exaggerated information. Others don't have to care or like it or anything - and I personally couldn't care less since I never design for designers. Neither do I. I design for users, and realize that users come in many shapes and sizes with different preferences. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Georg: Tedd's example doesn't adjust to available window-width at all (except when forced in Opera), thus the solution is weak by design. I didn't spell that out, and I really shouldn't have to. Tedd's example wasn't designed to adjust to window-width -- it was designed to adjust to zoom levels and thus was a strong solution for the problem described -- by design. The point of my example: http://www.sperling.com/examples/zoom1/ was to show that the size of text and the size of graphics (images) could both accommodate zoom levels, not adjust to window widths. If you will note, the layout stays generally the same throughout all zoom levels, as it was designed to do. Now, considering that you think my solution was weak, because it didn't adjust to window-widths, then let's see you design a stronger page such that the size of a graphic adjusts to window-widths. Can you? I thought not. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Georg: tedd wrote: I explain the technique at: http://www.sperling.com/examples/zoom1/ I've seen good implementations of em-sized designs, and some really counter-productive ones. The good em-sized designs will also scale in relation to browser-window, so visitors are in control. Many weak em-sized designs will overflow the window and require sideways scrolling if font-size is bumped up a bit by the visitor. Your yardstick to measure the weak/strong value of a design is IF the browser's window generates a horizontal scroll bar? If so, then that's your opinion, and my opinion differs. The value of a good design should not be tied to browser's window. As I said before, let's see you design a page such that the graphic resizes as the window-sizes. To my knowledge, it can't be done just using css. Whereas, my example resizes graphics very nicely with different zoom levels. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Zoe M. Gillenwater wrote: ... So please don't say that your solution is a catch-all and doesn't get in the way of the user. Some users, you're right, other users, you're wrong. You're right. I should have used a phrase like catch more instead. That's closer to what experience has told me about the 'elastic' solution described at Roger's site. Neither do I. I design for users, and realize that users come in many shapes and sizes with different preferences. That's it then. Two different solutions that solve some dimensioning problems in different ways. Some visitors will always have problems no matter which solution we choose. A few visitors even create problems just for the fun of it, but that's another matter. For the record (once more): I have yet to find a case where I could make proper use of neither of the mentioned solutions. Visitors, and also my clients, didn't like them enough to proceed, although they wasn't really protesting against the 'elastic' one so I could have used that. I am sure some visitors also have problems with the one I use most often - fluid/fixed with min/max and artificial columns. Haven't received any complains, but that doesn't tell me much. Might have something to do with the fact that I always test my solutions and finished results to beyond breaking-point across a big part of browser-land though. --- I think I'll leave this subject with a remark: test - test - and test a few more times. Don't forget to test some more with all available options, in as many browsers as possible. That usually helps to catch more, regardless of solution. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Think I must have overlooked your comments for no good reason at all. Sorry about that, but I am not permanently on line. tedd wrote: Your yardstick to measure the weak/strong value of a design is IF the browser's window generates a horizontal scroll bar? If so, then that's your opinion, and my opinion differs. The value of a good design should not be tied to browser's window. Maybe you're right, but if I have a yardstick at all then that must be lying somewhere in the usability sector. The easier it is to use, the better it is - regardless of design and window-size. Part of that yardstick is that I don't look much at designs as a visitor. I just use the sites they are applied on, and am happy as long as the design doesn't get in the way. As I said before, let's see you design a page such that the graphic resizes as the window-sizes. To my knowledge, it can't be done just using css. Whereas, my example resizes graphics very nicely with different zoom levels. You won't see me launch any demonstration of anything, unless I am personally interested in the issue. I don't pick up challenges unless I'm interested in the result. I was interested in zooming a couple of years ago, but my test-cases never made it away from my hard-disks since I didn't like what I saw. I still don't like it when I look at them now, so I won't launch them for any reason. You may still find some references in the css-d wiki to demonstrations somewhat like yours. They are pretty old and I had a go at them before even entering the list itself. They get the job done, but I didn't like the results. Haven't looked for them recently. --- For my personal use: Opera has a somewhat decent zoom, and can break designer's dimensions if they get in the way. IE6 can be given a not so decent zoom that'll work. That covers all my needs for zooming of web images. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Georg: tedd wrote: Your yardstick to measure the weak/strong value of a design is IF the browser's window generates a horizontal scroll bar? If so, then that's your opinion, and my opinion differs. The value of a good design should not be tied to browser's window. Maybe you're right, but if I have a yardstick at all then that must be lying somewhere in the usability sector. The easier it is to use, the better it is - regardless of design and window-size. Easier to use for whom? For some, fluid layouts are easier to use, and for others fixed layouts are easier. But, I would guess, that most don't care as long as navigation is obvious and consistent. As such, I don't claim that one layout is better than the other because there are no facts to back up either claim. However, one of the benefits of using css is to cut down on the amount of bandwidth required to produce a page. So, for me one of the strong points of a web page is how fast it loads. In that regard, please note that your home page has load times exceeding 46 seconds for 56k modems -- does having 68 images improve something lying somewhere in the usability sector ? Also, I don't see a consistent navigation scheme for your site. For example, if someone selects Corners unlimited, the only option they have of getting back to home is to click the back button -- is that an example of your easier to use yardstick? Or, is that tiny home image (among the multitude of other images) supposed to be easier for those with vision problems to find? Also, is it just me, or is your medium font size larger than your small? It's hard to tell -- but, in any event, I'm not calling your site weak, am I? But I will say that we have a considerable difference of opinion on what defines ease of use. You won't see me launch any demonstration of anything, unless I am personally interested in the issue. I don't pick up challenges unless I'm interested in the result. Are you interested in backing up your claim? You said my solution* was weak. So, I'm asking you to provide better, if you can. If not, then what's the point of claiming someone's solution is weak when you can't provide a stronger alternative? tedd *(which isn't really mine, greater minds than mine thought of it long before me) -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Nice try. BTW: I didn't mention your site anywhere. I don't have a clue what that's all about since I haven't seen it. I wrote that your solution, presented in the form of one page, is weak by design, and I haven't seen any reason to back down from that claim. My site, however, _is_ weak all over :-) because there are at least 100 competing, old, designs there, which is why it is due for an update. That happens once every two years or so, regardless of the state of the designs, because I don't like to have outdated content archived on the web. There are more than 500 pages on my site, and it does take a bit of time to clear up since content must be evaluated, updated and/or deleted. CSS doesn't help much there. The page/section you mentioned won't survive at all, because both content and solutions have been outdated for a long time now. A few ideas *might* survive - that's all. OTOH: I don't have any CSS problems that I know of, so I probably won't bother the list. --- Great minds have launched worse solutions than the one you have borrowed your ideas from. It is an old idea, and I think I have already presented a better solution and linked to an example. Whether my claim that Roger's solution is the better of the two, is false or not, can be debated to death without reaching consensus. The example is very much on line, and can be evaluated by everyone. I don't think Roger will mind a few extra visits, although he will probably focus on more important issues for the next couple of weeks. --- Now, if you have a problem with your design(s) anywhere, then you may start a new thread and go ahead. This thread has gone into a repetitive mode, and should end. I just left. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
On 12/20/05, tedd [EMAIL PROTECTED] wrote:
Now, considering that you think my solution was weak, because it
didn't adjust to window-widths, then let's see you design a stronger
page such that the size of a graphic adjusts to window-widths. Can
you?
I thought not.
What's with this impossible talk?
img { width:100%; }
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Schalk: I use em's all the time. Oddly enough the only time I use a different measurement is for font sizes, where I use x-small, small, medium, large, x-large. That way I don't have to worry about nesting em's. Like nesting percentages, they accumulate (i.e., 80% of 80% is not 80%). Also, you might think about using em's so that your site remains constant when people zoom font sizes In that regard, check out: my site below, http://www.geophysics.com/ or http://www.earthstones.com/ or http://www.symboldomains.com for examples site's I've built using just em's. They don't fall apart when people zoom them. I explain the technique at: http://www.sperling.com/examples/zoom1/ HTH's tedd --- Greetings All When putting together a site/application, is it possible and reasonable to use EM throughout or are there situations where percentages or pixels are better suited? Like for instance in setting the widths of 'columns'? The layout will be liquid and should stretch to fill the screen at whatever resolution? Looking forward to everyones thoughts on this. -- Kind Regards Schalk Neethling Web Developer.Designer.Programmer.President Volume4.Business.Solution.Developers __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Schalk wrote: The layout will be liquid and should stretch to fill the screen at whatever resolution? Looking forward to everyones thoughts on this. Sounds good, and can be achieved by using 'em' and '%'/'auto-width' together. tedd wrote: I explain the technique at: http://www.sperling.com/examples/zoom1/ I've seen good implementations of em-sized designs, and some really counter-productive ones. The good em-sized designs will also scale in relation to browser-window, so visitors are in control. Many weak em-sized designs will overflow the window and require sideways scrolling if font-size is bumped up a bit by the visitor. Luckily Opera, the browser that em-sized designs are often imitating, does work like the good ones. Opera is also able to break the weak ones into submission, by forcing them to stay within the available window width - regardless of font size. Users of other browsers aren't that lucky. --- A site that demonstrates a pretty good em-sized design-method is http://www.456bereastreet.com/ which relates to window-width while scaling with em-sized max-width. IE/win doesn't understand anything when it comes to em-sized max-width, but the site works in that browser too because it understands the rest of the sizing-method. The method is described in an older article on Roger's site, so just look around for it. regard Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
From: Gunlaug Sørtun [EMAIL PROTECTED] A site that demonstrates a pretty good em-sized design-method is http://www.456bereastreet.com/ which relates to window-width while scaling with em-sized max-width. IE/win doesn't understand anything when it comes to em-sized max-width, but the site works in that browser too because it understands the rest of the sizing-method. That's not a very flexible page at all from what I can see. The whole idea of using ems would seem to me to favor spawning horizontal scrollbars to keep text columns at a readable proportion. Otherwise, the exercise would seem worthless. Educate me if I'm wrong - and perhaps on my own newsgroup if this is deemed off-topic. Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
The whole idea of using ems would seem to me to favor spawning horizontal scrollbars to keep text columns at a readable proportion. I understand it exactly the same way; em-sizing acts very similar to Opera's overall zoom (excluding px sized items like images and/or backgrounds), achieved only by bumping up the text size. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Al Sparber wrote: From: Gunlaug Sørtun [EMAIL PROTECTED] A site that demonstrates a pretty good em-sized design-method is http://www.456bereastreet.com/ which relates to window-width while scaling with em-sized max-width. IE/win doesn't understand anything when it comes to em-sized max-width, but the site works in that browser too because it understands the rest of the sizing-method. That's not a very flexible page at all from what I can see. The whole idea of using ems would seem to me to favor spawning horizontal scrollbars to keep text columns at a readable proportion. Otherwise, the exercise would seem worthless. Educate me if I'm wrong - and perhaps on my own newsgroup if this is deemed off-topic. Em based dimensions has to be on topic on css-d, if this list shall have any credibility at all in real world web development. An em-based dimensions may work quite well in that it keeps letters/words pr. line quite stable - regardless of font-resizing. IMO however, that method will only work well if it is applied in such a way that those lines stay within the browser-window and don't provoke a horizontal scroll-bar, which is what you also are saying if I interpret you correctly. --- Tedd's example doesn't adjust to available window-width at all (except when forced in Opera), thus the solution is weak by design. I didn't spell that out, and I really shouldn't have to. Roger's site does adjust to available window-width to a large degree, in all browsers I have looked at his site in - without any forcing. Thus it is working pretty well, IMO. --- I usually test design-solutions from 600px width to 3800px width in all relatively new browsers on windows, and somewhat less of a scale on Mac-OS since my iMac isn't equipped with such large screens. I also test within a range of browser-options in the major browsers. The most capable browser in my pack is tested down to around 160px width, but then the whole 'em-based dimensions' issue is thrown overboard since it doesn't make any sense on very tiny screens. --- The bottom line is that em-based dimensions doesn't have to fight visitors preferences and available browser-options. Em-based dimensions can be used intelligently within the framework of improved usability for all visitors. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Jan Brasna wrote: I understand it exactly the same way; em-sizing acts very similar to Opera's overall zoom (excluding px sized items like images and/or backgrounds), achieved only by bumping up the text size. Correct, but only if sites are preventing re-scaling to window-width. They don't have to - not even for s.c. fixed width layouts. Max-width can be set either to window-width itself and override all other dimensions. Min-width can also be applied at a reasonably low width, and the fixed width be applied by using max-width. Even IE/win can mimic that. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
From: Gunlaug Sørtun [EMAIL PROTECTED] Em based dimensions has to be on topic on css-d, if this list shall have any credibility at all in real world web development. An em-based dimensions may work quite well in that it keeps letters/words pr. line quite stable - regardless of font-resizing. IMO however, that method will only work well if it is applied in such a way that those lines stay within the browser-window and don't provoke a horizontal scroll-bar, which is what you also are saying if I interpret you correctly. --- This is where I'm confused. If you attempt to keep zoomed text inside the constraints of a brower's window width, then you suffer the flaw I see in many liquid designs - where content scrunches up to one word per line and/or overlaps adjacent columns. Tedd's example doesn't adjust to available window-width at all (except when forced in Opera), thus the solution is weak by design. I didn't spell that out, and I really shouldn't have to. I'm thoroughly confused now. To me, Opera has the best zoom. It simply magnifies the page. It always creates horizontal scrollbars when the magnified contents, at their natural column proportionss, grow wider than the available window width. This is good, in my opinion. Although you must scroll horizontally, the text is still readable. Roger's site does adjust to available window-width to a large degree, in all browsers I have looked at his site in - without any forcing. Thus it is working pretty well, IMO. It doesn't look good to me. If I resize text, the lines simply have fewer characters. Perhaps there was a problem and he's fixing it, because the site is currently unavailable :-) The bottom line is that em-based dimensions doesn't have to fight visitors preferences and available browser-options. Em-based dimensions can be used intelligently within the framework of improved usability for all visitors. I agree, except I think perhaps our definitions of what's intelligent use is different ;-) Here is my take on intelligent and useful use of ems: http://www.projectseven.com/products/menusystems/tbm/demos/design_grunge.htm You probably think it's broken, right :-) Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Al Sparber wrote: From: Gunlaug Sørtun [EMAIL PROTECTED] The bottom line is that em-based dimensions doesn't have to fight visitors preferences and available browser-options. Em-based dimensions can be used intelligently within the framework of improved usability for all visitors. I agree, except I think perhaps our definitions of what's intelligent use is different ;-) Here is my take on intelligent and useful use of ems: http://www.projectseven.com/products/menusystems/tbm/demos/design_grunge.htm You probably think it's broken, right :-) In Firefox: yes, completely broken by design ;-) It is fighting user-preferences, and Firefox doesn't have any real defenses. Think I'll have to give it some... In Opera: working just fine down to around 300px window-width, but that navigation becomes less user-friendly. Nice linear look on narrow windows. Not well prepared for smaller screens - yet..? --- On the intelligent part... I think we can live with those differences - see: http://en.wikipedia.org/wiki/Freethought --- BTW: your description of Roger's site is what makes it work, IMO. On wide browser-windows it will keep proportions. I have tested it to 3800 window-width, which is the space needed for around 500% text-zoom and em-based width. Suits me just fine. On narrow windows it will respect both _my_ font-size and _my_ window-width, and forget everything about proportions. I think he must have applied that width-method with visitors in mind :-) (I have no idea what Roger is fixing at the moment. I have parts of his site in an Opera-tab from earlier today, since Opera is a pretty aggressive down-loader by default.) regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
From: Gunlaug Sørtun [EMAIL PROTECTED] The bottom line is that em-based dimensions doesn't have to fight visitors preferences and available browser-options. Em-based dimensions can be used intelligently within the framework of improved usability for all visitors. I agree, except I think perhaps our definitions of what's intelligent use is different ;-) Here is my take on intelligent and useful use of ems: http://www.projectseven.com/products/menusystems/tbm/demos/design_grunge.htm You probably think it's broken, right :-) In Firefox: yes, completely broken by design ;-) It is fighting user-preferences, and Firefox doesn't have any real defenses. Think I'll have to give it some... In my opinion it works - especially for a family member with limited vision, which is totally logical to me. In Opera: working just fine down to around 300px window-width, but that navigation becomes less user-friendly. Nice linear look on narrow windows. Not well prepared for smaller screens - yet..? I'm not at all sure what you mean. The page works fine as far as I can see. If you are talkinig about the linearized sub-links, well, that would be a user (one of our customers) preference to either hide them from handhelds or not. It's none of my business. The rest of the page is fine as far as I'm concerned. On the intelligent part... I think we can live with those differences - see: http://en.wikipedia.org/wiki/Freethought --- I don't believe in using the wikipedia. I personally think it's a dangerous thing :-) I believe in classic reference sources developed by professionals. BTW: your description of Roger's site is what makes it work, IMO. On wide browser-windows it will keep proportions. I have tested it to 3800 window-width, which is the space needed for around 500% text-zoom and em-based width. Suits me just fine. And that's what makes it a failure to me. It might work fine for you or for other developers who perhaps understand how to work with browsers - and that might be fine because his site is meant for web developers but it's broken for the real world, in my opinion. On narrow windows it will respect both _my_ font-size and _my_ window-width, and forget everything about proportions. I think he must have applied that width-method with visitors in mind :-) Proportions are what count in terms of readability. I think you are just allergic to horizontal scrolling :-) People with poor eyesight might be willing to scroll to the right for a second or third column if they are blessed with a comfortable number of characters per line. (I have no idea what Roger is fixing at the moment. I have parts of his site in an Opera-tab from earlier today, since Opera is a pretty aggressive down-loader by default.) It's back up now, and I still don't like it. I think we'll have to agree to disagree, because I like my technique much better and the alternative does not move me one bit :-) Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Al Sparber wrote: IMO however, that method will only work well if it is applied in such a way that those lines stay within the browser-window and don't provoke a horizontal scroll-bar, which is what you also are saying if I interpret you correctly. This is where I'm confused. If you attempt to keep zoomed text inside the constraints of a brower's window width, then you suffer the flaw I see in many liquid designs - where content scrunches up to one word per line and/or overlaps adjacent columns. It is probably possible to recognise Opera's method as user-friendly, and then afterwards be able to deem double axis scrollbars user-friendly, but it is far from anything I've learned on that subject. The usual main explanation of the case is that double scrollbars makes it hard to get a good idea about the available contend, and are confusing as to where to go first. You do not have those problems when testing your site in big fonts, as you've already seen it with medium font size! But let my granddad enter the site (he's the one who needs the big font, and might have it as default in his browser), and you'll see one user gone faster than you can visualise the content that he's missing off screen on the horizontal scrollbar. I'll definitely second Georg here, em scaling is best when used to keep content inside the window on at least one axis (and, just for tradition keeps the customer's sake - make that the horizontal axis :-) ) Best regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Al Sparber wrote: From: Gunlaug Sørtun [EMAIL PROTECTED] http://www.projectseven.com/products/menusystems/tbm/demos/design_grunge.htm In Opera: working just fine down to around 300px window-width, but that navigation becomes less user-friendly. Nice linear look on narrow windows. Not well prepared for smaller screens - yet..? I'm not at all sure what you mean. General advice: web developers should know how browsers work. - see: http://en.wikipedia.org/wiki/Freethought I don't believe in using the wikipedia. I personally think it's a dangerous thing :-) I believe in classic reference sources developed by professionals. Who said anything about _using_ anything? Links are good when one does not want to spell it all out on a discussion-list. It is even recommended... Most professionals develop limitations for what can be done. I don't accept man made limitations in any field. (I have no idea what Roger is fixing at the moment. It's back up now, and I still don't like it. I think we'll have to agree to disagree, because I like my technique much better and the alternative does not move me one bit :-) Good. Even better that I wasn't even trying... :-) I was just responding to your questions. Others might be able to make up their own minds about the issue we have discussed: how to use ems for dimensioning in different ways, and achieve different results. Pretty powerful solutions can be created when em-based dimensioning is combined with other units and rules. --- FWIW: I don't use any of the mentioned solutions for anything other than to scale small non-text objects in a text environment. I know how to use them if I ever need them on a bigger scale though - because I am a professional. I do focus most of my attention on user-experience. Most users use browsers, and I don't want to put any limitations on how they use them, if that can be avoided. Thus I try to let browsers override my own preferences, without hurting usability. I win some, and loose some. No big deal as long as visitors don't suffer any major losses. I always collect information and build up my knowledge-base about various web design methods and related stuff, regardless of whether I find them useful or not. Prevents limitations from sneaking in, and me from asking too many questions on various lists. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Question about EM's
Al Sparber wrote: Traditions that count are dying. Horizontal scrollbars as tradition is trite. I could be closer to your grandfather's age than to yours, and my vision is no longer perfect. Constraining content to the horizontal viewport over the ability to actually read comfortably is obsessive behavior to me. Sounds like a phobia to me :-) So, it is preferable to have scrollbars on two axises, when that at least gives a neat page without the one-word-per-line problem. _IF_ we are to use that approach (I can see the value) then we have to solve it's problems? Shouldn't we make a solution to the orientation-in-the-page - problem, then? A small window like the Info in Photoshop, with a red box on the currently visible part, should solve that. If we make it position:fixed in a corner, and with a javascript (I don't know of any other method, to measure the screen size and position, inputs are welcome here ;-)) that disappears if non-supported, it can only improve matters for those who can see it? Best regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
