Re: [css-d] Elastic layouts: want to confirm
idea for accessibility, it often leads to lots of horizontal scrolling What about a width limit (no, not a fixed width site) on the width of the main content in relation to the rest of the page (like an article) so as to allow the font scaling to occur vertically instead of horizontally? This seems like a better solution to me. Like this maybe? http://66.155.251.18/mlinc.com/test/ Scale up. No horiz scroll. -- -- Tom Livingston Senior Multimedia Artist Media Logic www.mlinc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
Tom Livingston wrote: idea for accessibility, it often leads to lots of horizontal scrolling What about a width limit (no, not a fixed width site) on the width of the main content in relation to the rest of the page (like an article) so as to allow the font scaling to occur vertically instead of horizontally? This seems like a better solution to me. Like this maybe? http://66.155.251.18/mlinc.com/test/ Scale up. No horiz scroll. In Firefox, press Ctrl-+ eight times. The page breaks, with content overlapping and unreadable. In case you're wondering whether anybody would use such extreme enlargement, the answer is yes, some people do. A friend of mine with a severe visual impairment resulting from diabetes needs at least that level of enlargement, and accepts as a normal part of life that he has to scroll horizontally. Your page would simply be unusable by him. (Well, he'd have to switch over to his screen reader, but that only currently works with IE, so he'd have to fire that up, then paste the URL... you get the idea.) HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
In Firefox, press Ctrl-+ eight times. The page breaks, with content overlapping and unreadable. In case you're wondering whether anybody would use such extreme enlargement, the answer is yes, some people do. A friend of mine with a severe visual impairment resulting from diabetes needs at least that level of enlargement, and accepts as a normal part of life that he has to scroll horizontally. Your page would simply be unusable by him. (Well, he'd have to switch over to his screen reader, but that only currently works with IE, so he'd have to fire that up, then paste the URL... you get the idea.) HTH, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ Just asking out of sleep-deprived curiosity, and because the issue has been raised with regard to my own site...what do you consider breaking? I went to your site and pressed ctrl + eight times and while I don't get scrollbars, the text is so large that it becomes one word to a line and five words to a screen. I did NOT do this so I could come here and call you a hypocrit, I was honestly just curious and the link to your site (in your sig) was the first I clicked. Even Google (granted, not a site of CSS wizardry) is unreadable for me at zoom factor eight. So, now I'm wondering...how does one define breakage? IMHO, if we try to account for every conceivable variable, including browser inconsistencies, every aspect of accessibility and the like, one is left with a completely unstyled page. In web design, as in life, one must take risks and in so doing, runs the risk of failure. The question I think is where the line of failure is drawn? --Bill || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
Nick Fitzsimons wrote: Tom Livingston wrote: idea for accessibility, it often leads to lots of horizontal scrolling What about a width limit (no, not a fixed width site) on the width of the main content in relation to the rest of the page (like an article) so as to allow the font scaling to occur vertically instead of horizontally? This seems like a better solution to me. Like this maybe? http://66.155.251.18/mlinc.com/test/ Scale up. No horiz scroll. In Firefox, press Ctrl-+ eight times. The page breaks, with content overlapping and unreadable. In case you're wondering whether anybody would use such extreme enlargement, the answer is yes, some people do. A friend of mine with a severe visual impairment resulting from diabetes needs at least that level of enlargement, and accepts as a normal part of life that he has to scroll horizontally. Your page would simply be unusable by him. Not necessarily. And I have no clue what this has to do with CSS, but have you, or /your friend/, tried that particular page at 800% in Opera9b? Personally I hate horizontal scroll bars... (Well, he'd have to switch over to his screen reader, but that only currently works with IE, so he'd have to fire that up, then paste the URL... you get the idea.) HTH, Nick. ~dL -- http://www.dlaakso.com/gustave/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 06/05/26 16:26 (GMT+0100) Nick Fitzsimons apparently typed: Tom Livingston wrote: idea for accessibility, it often leads to lots of horizontal scrolling What about a width limit (no, not a fixed width site) on the width of the main content in relation to the rest of the page (like an article) so as to allow the font scaling to occur vertically instead of horizontally? This seems like a better solution to me. Like this maybe? http://66.155.251.18/mlinc.com/test/ Scale up. No horiz scroll. In Firefox, press Ctrl-+ eight times. The page breaks, with content overlapping and unreadable. You're virtually guaranteed to make every page useless in FF with 8 times Ctrl++. That's a 1600% zoom level. If you started in an 800px wide window with 10px text, that much zoom would permit as little as 10 characters per full screen width line to fit. Try it here: http://mrmazda.no-ip.com/auth/zoomlevel.html With anything much bigger than 10px to start with, you'd be lucky to see more than half the words whole on one line at that zoom level. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 06/05/26 13:17 (GMT-0400) Bill Brown apparently typed: So, now I'm wondering...how does one define breakage? IMHO, if we try to account for every conceivable variable, including browser inconsistencies, every aspect of accessibility and the like, one is left with a completely unstyled page. In web design, as in life, one must take risks and in so doing, runs the risk of failure. The question I think is where the line of failure is drawn? Seems to me that has to be a judgement call. Since 12pt is the size most real web using people prefer, a site probably should accomodate somewhere between 150% and 200% of that at least, somewhere between 18pt real and 24pt real. With typical sites trying to cram as much as possible above the fold in an area less than 800px wide, 24pt may be unrealistic in many or most cases, yet something to try and shoot for anyway. If a site you're working on is one of those 76% or 12px body sites, probably 200% should be minimum. That nets 150%, typically 18pt nominal. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 06/05/19 09:32 (GMT+0100) Alastair Campbell apparently typed: Intending for layout's to scale based on font size isn't such a good idea for accessibility, it often leads to lots of horizontal scrolling for those who need it most. See this for more explanation: http://alastairc.ac/2006/05/accessible-layouts/ I strongly disagree. Lots of horizontal scroll need not occur in intelligent designs. Your em width elastic layout example http://alastairc.ac/code/blogged_examples/layout_test_em.html seems to fail your test because you didn't incorporate ideal line lengths, going just enough on the long side of ideal to make it easy to fail your test. When your testing maintains a reasonable relationship between text size and viewport width, a reasonable line length results, and the content fits. You may or may not get a horizontal scroll for peripheral content, but that shouldn't matter as long as the important content fits with a reasonable line length. The people who routinely need _really_ big text (18pt+) are familiar with horizontal scrolling, pretty much expect it to happen more than occasionally, and won't miss things because of it. About line lengths: http://psychology.wichita.edu/optimalweb/text.htm http://www.webstyleguide.com/type/lines.html According to the above, your em width layout's main content is somewhere between 20% and 80% excessive. If you redo your example page with a 50 character or less #content width set in em, instead of the current and arbitrary 63%, you'll probably have to try much harder to fail your test. You may need to follow the lead of the two examples you claimed work, http://www.svendtofte.com/code/max_width_in_ie/ and http://www.fu2k.org/alex/css/frames/ems, by not undersizing body at font-size: IE=80% other=13px. You should find that when your design respects your visitors' defaults, your designs will tend toward both shorter and more readable line lengths than what I see you using now, and for visitors to need little if any zoom to use them. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
Christian Montoya wrote: No. EMs provides the best scaling possible for a layout that is intended to grow as the font grows. When the height and width of the font characters is somewhat similar, doubly so. Intending for layout's to scale based on font size isn't such a good idea for accessibility, it often leads to lots of horizontal scrolling for those who need it most. See this for more explanation: http://alastairc.ac/2006/05/accessible-layouts/ I posted a couple of days ago about trying to get a font-based layout with a max-width of the window size. However, I couldn't get it working in IE, which is what most people with visual impairments use (like the general population). Kind regards, -Alastair -- Alastair Campbell | Director of User Experience Nomensa Email Disclaimer: http://www.nomensa.com/email-disclaimer.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 5/19/06, Alastair Campbell [EMAIL PROTECTED] wrote:
Christian Montoya wrote:
No. EMs provides the best scaling possible for a layout that is
intended to grow as the font grows. When the height and width of the
font characters is somewhat similar, doubly so.
Intending for layout's to scale based on font size isn't such a good
idea for accessibility
I never meant to imply that.
It's poor foresight on the part of the designer who forgets to
implement max-width in any layout that is not fixed. It's a really
basic thing.[1] As for IE, one does the best they can.
[1] { max-width:100%; } // see? basic
--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
I wrote:
Intending for layout's to scale based on font size isn't such a good
idea for accessibility
Christian Montoya wrote:
I never meant to imply that.
My apologies, I misunderstood.
Christian continued:
It's poor foresight on the part of the designer who forgets to
implement max-width in any layout that is not fixed. It's a really
basic thing.[1] As for IE, one does the best they can.
[1] { max-width:100%; } // see? basic
Agreed, but with font sizes and max-width, I've not found an answer for
IE 6 (unless it hasn't come through on digest):
http://archivist.incutio.com/viewlist/css-discuss/74715
I look forward to when IE 6 does actually go the way of NN 4 (i.e.
vitually no usage), but until then we need a practical strategy.
Kind regards,
-Alastair
--
Alastair Campbell | Director of User Experience
Nomensa Email Disclaimer:
http://www.nomensa.com/email-disclaimer.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Elastic layouts: want to confirm
I'm a little confused about my direction. I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? TIA Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 06/05/18 17:17 (GMT-0400) Tony Watkins apparently typed: On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? There are different kinds of accuracies. If you want total fluidity, you can't use px. % can give unexpected results when the viewport size and text size aren't what you expect. Em can work if you're careful, particularly if you simply stop thinking in px. When the default font size is 16px, 1px is equal to .0625em. When you set a 10px margin or padding as .625em, you keep the same proportion between text size and margin/padding size as zoom or default font size varies, maintaining a constant proportion between components. As example, both http://mrmazda.no-ip.com/SS/bbcSS.html and http://mrmazda.no-ip.com/indexx.html are entirely free from % and px sizing. -- All have sinned fall short of the glory of God. Romans 3:23 NIV Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://mrmazda.no-ip.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 5/18/06, Tony Watkins [EMAIL PROTECTED] wrote: Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? But you don't have a liquid layout if you use pixels . A px is a fixed measurement, but only for a given screen resolution. You have no way of knowing how much screen territory on your page is occupied by a px on the user's screen. If you use percentages you will know at least that the element will take up x% of the screen space at whatever resolution. The relationship between the screen size and the width of elements will remain constant as the user changes screen resolutions. If you use ems you know that the relationship between text size and the screen space use will stay the same if the user changes text size. With pixels you don't know either and have less control, not more. If you have a text heavy page it makes sense to size in relationship to the text size and use em's or ex's. With graphic heavy pages you might want to use percentages. -- Ed Seedhouse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Elastic layouts: want to confirm
On 5/18/06, Tony Watkins [EMAIL PROTECTED] wrote: On 5/18/06, Mark Fellowes [EMAIL PROTECTED] wrote: I know that with elastic layouts you set the element widths using ems. What about margins , would those also be in ems ? That or percentages, whichever looks best to you at various resolutions. Ed Seedhouse Hmm. Since ems is a measure of height for a given font, wouldn't percent or pixels be a better and more accurate measurement for both margins and width/height? No. EMs provides the best scaling possible for a layout that is intended to grow as the font grows. When the height and width of the font characters is somewhat similar, doubly so. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
