Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

Large Print Graphics for Older Eyes?

Cliff posted more than 10 years ago | from the if-you-can't-read-this-you-are-too-close dept.

Graphics 67

random_nickname asks: "My lovely wife is a Graphic Designer with a small company which specializes in custom-made wine labels. She is re-designing the current site, to bring the code up-to-date and a little more shnazzy. Her boss is insisting that, due to their primary market - the elderly - she needs to create overly 'large-print' graphics, to make the site easier to browse for that demographic. My wife feels that this is unnecessary due to resolution control and monitor sizes, etc.. Are there sites out there that currently employ over-sized graphics for the elderly and has it made a difference in business? Is there a real need for this kind of solution?"

cancel ×
This is a preview of your comment

No Comment Title Entered

Anonymous Coward 1 minute ago

No Comment Entered


The real solution (1)

Dancin_Santa (265275) | more than 10 years ago | (#6821112)

The solution is to make the site more graphics-oriented and less text-oriented.

As much as possible use large graphics to convey the message of the site. Put appropriate captions under each picture, even duplicating the text of the graphic, in order to enable text2voice software to be able to read the site to visually impaired visitors.

Large text may be useful so long as the font is limited to 16pt. Any more than that and you'll likely offend the elderly more than help them.

Re:The real solution (2, Insightful)

Oddly_Drac (625066) | more than 10 years ago | (#6822171)

"more graphics-oriented"


"enable text2voice software"

Idiot. The first thing to do is check out the available options for visually impaired users. Turn on the text to voice and check out a webpage for a real eyeopener in how difficult this market is to design for. Simulate visual impairment by sitting a way from the screen, and check that demographic directly by checking for the browsers that people use. If you have screen readers in there, consider switching stylesheets for them. View the site in Netscape 4.75 for that real primitive viewpoint of what the site will look like to a more basic piece of software and move away from tabling code.

Visit CSS Zengarden [csszengarden.com]. Play with the stylesheets. Now go back and look at it in Netscape 4.75. Isn't that elegant?

Re:The real solution (1)

Gudrow (533040) | more than 10 years ago | (#6827431)

That's the exact opposite of the correct answer.

A more text-oriented site will allow the visually impaired to adjust the size of the print they're looking at to suit them.

Just make sure you don't specify absolute text sizes in your css.

As for the graphics question, why not just add a 'click here for large view' to each picture, and point it at a very large version of the respective image?

Graphics don't scale! (1)

WoTG (610710) | more than 10 years ago | (#6828862)

Graphics don't scale on monitors! Who knows what the viewers are seeing if you use images for everything? Some folks still run at 800x600, while others are at much higher resolutions - all of this is semi-independent of actual monitor size. At least with fonts, people will often scale up their font sizes if they are running their screen at a high resolution.

Text is definitely the way to go, or in this case, stay. I really like the way wired.com [wired.com] does things. A nice clear list of "A"'s in the top right corner that somehow (DHTML?) changes the font size with a single click.

Barring that, in Moz, "Ctrl" + "+" and "Ctrl" + "-" do wonders. Similar features exist in other browsers, I suppose.

The boss is right (0)

Anonymous Coward | more than 10 years ago | (#6821138)

People read sites as they encounter them. Sites like MSNBC.com have bludgeoned people into believing that viewing at anything other than the default settings will leave the screen in a huge disarray.

Use larger fonts (14pt works for me) where possible.

Re:The boss is right (1)

camelrider (46141) | more than 10 years ago | (#6821486)

As important as font size is to use clear fonts on the site and be sure that they are not obscured by background colors/details.

Re:The boss is right (2)

neillewis (137544) | more than 10 years ago | (#6822076)

The point about backgrounds is agood one - a friend of mine is a designer on a weekly women's magazine with an ageing readership, and she told me they have a strict rule not to use more than a 20% background colour because they get complaints about the readability. Even I sometimes find Wired difficult to read, even if it does look good...

Use CSS fonts, but don't specify points/pixels (4, Informative)

BladeMelbourne (518866) | more than 10 years ago | (#6821148)

Instead of using
p { font-size:11px; }

p { font-size:size; }

Where size takes any of the following values:
xx-small, x-small, small, medium, large, x-large or xx-large

That way visually impaired users can alter their browser's text setting to enlarge the fonts. This does not work with fonts set to pixel heights.

Try it out on this site:


Re:Use CSS fonts, but don't specify points/pixels (2, Informative)

Bitsy Boffin (110334) | more than 10 years ago | (#6821193)

You can also use percentage specifications..
span.note { font-size:90% }
body { font-size:100% }
h3 { font-size:105% }
h2 { font-size:110% }
h1 { font-size:115% }

and "smaller"/"larger"..
em { font-size:larger }
address { font-size:smaller}

It's also worth pointing out that you shouldn't make the "base" font size (i.e the size of normal text on your site) anything different than the default -- if somebody in thier browser settings says they want thier normal text to be 17pt, we shouldn't then go and say body { font-size:xx-small } !

Re:Use CSS fonts, but don't specify points/pixels (0)

Anonymous Coward | more than 10 years ago | (#6822297)

Unfortunately the percentage font sizes are more buggy than xx-small to xx-large (though, don't use xx-small if you want compatibility with Netscape 4 as it's too small to be readable).

It's perfectly acceptable to make the default size anything other than the default, as when they increase their base font size then xx-small and xx-large will resize around this.

Remember that pixel font sizes, percentages, ems, and words all should - as per the standard - be able to be resized and it's only shoddy implementations (particularly pixel units in IE) that stop this. Considering all the implementations it's well known that xx-small - xx-large is the most reliable (in that at least it won't freak out like percentages/ems in any browser).

Re:Use CSS fonts, but don't specify points/pixels (3, Insightful)

Tuxinatorium (463682) | more than 10 years ago | (#6821309)

You forget that 80% of computer users (and 99% of elderly computer users) don't even know how to change the text size in their browser. Hell, a lot of them don't even know how to set their homepage.

Cardinal rule of commercial website design:
Don't assume the users know jack shit, because the majority of them won't.

Re:Use CSS fonts, but don't specify points/pixels (1)

cei (107343) | more than 10 years ago | (#6821726)

Sure, but if a user has poor vision, your site is not the only one they'll have problems with. If they're legally blind and have their own machine, they will use things like OS X's Universal Access settings to magnify parts of the screen at the system level. No need to do anything special with the site, per se, though keeping it text based rather than with graphical navigation elements would keep more options available.

Also, a vector format such as Flash might have it's place if the interface is not embedded in a fixed height/width.

Re: Not knowing how to set (2, Informative)

cloak42 (620230) | more than 10 years ago | (#6823461)

You forget that 80% of computer users (and 99% of elderly computer users) don't even know how to change the text size in their browser. Hell, a lot of them don't even know how to set their homepage.

So make it really easy for them and include a link on the page to change the font size larger or smaller. It's easy to do and it makes the choice very easy for them.

I'm a firm believer in taking a little extra time to make the viewer's job a little easier. It works in programming and it works in webpage coding as well.

Re:Use CSS fonts, but don't specify points/pixels (2, Informative)

SilentDissonance (516202) | more than 10 years ago | (#6821479)

Actually, pt works just fine, try it out. You specify pt sizes for everything, and it'll work. The targent audience is using Windows and either Netscape or IE. Both of these browsers under windows will resize font size if you specify pt. Now, px is another matter, of course, and you are quite right about that.

Re:Use CSS fonts, but don't specify points/pixels (1, Interesting)

Anonymous Coward | more than 10 years ago | (#6822460)

Actually, pt works just fine, try it out. You specify pt sizes for everything, and it'll work.

No it won't.

  • Browsers rarely get the accurate monitor DPI - so the text won't be the size you request.
  • People using Internet Explorer won't be able to resize the text to something larger if they need to.
  • You have no idea what size font I find readable, or what display I have. When you use pts, you are guessing, and you will be wrong for quite a few people no matter what you guess.

Re:Use CSS fonts, but don't specify points/pixels (1)

GeckoX (259575) | more than 10 years ago | (#6823118)

pt is the recommended standard by the w3c.
Not only that, but it does indeed work and is totally overrideable by the users browser just as xx-small, x-small etc are, except that with pt you get more than 7 options.

px and em don't and never will because they are supposed to be absolute sizes by definition. But they do have their place. Sometimes there is a legitimate need to size something absolutely, and know that it is going to be that size when it is rendered...but obviously caution is needed and these should be avoided whenever possible.

And no, I don't have any idea what size font you find readable, or what display you have. I don't, and shouldn't care because by using pts you can override it to your hearts content and have everything as big or as small as you like.

As for the browser getting the correct DPI, and whether pt will be rendered at the size requested...it doesn't matter. And that would be the point. (No pun intended ;-) When using pt, the developer needs to know that there is NO guarantee as to what physical size will be rendered. BUT, there is a guarantee that something rendered at 20pt will be a hell of a lot bigger than something rendered at 10pt...as expected.

So, can we step down from the soap box until we fully understand what we are ranting about? Tx.

Re:Use CSS fonts, but don't specify points/pixels (0)

Anonymous Coward | more than 10 years ago | (#6824321)

Small correction... "em" is not an absolute unit the way that "px" is; it is defined in terms of "pt". One em is the width of the glyph for capital "M" in the current font and point size.

Re:Use CSS fonts, but don't specify points/pixels (1)

GeckoX (259575) | more than 10 years ago | (#6824345)

Point taken, that is correct. Unfortunately, em comes from the paper-print world and has been implemented incorrectly in almost all web browsers, if not all.

Re:Use CSS fonts, but don't specify points/pixels (1)

no toys in the attic (637286) | more than 10 years ago | (#6830630)

pt is the recommended standard by the w3c. Not only that, but it does indeed work and is totally overrideable by the users browser just as xx-small, x-small etc are, except that with pt you get more than 7 options. Actually, no; you might be a Mozilla user, in which case, yes, pt can be scaled by changing the text size, but IE won't change text size unless you use the "size" attribute. Just another reason to use the better browser...

Re:Use CSS fonts, but don't specify points/pixels (1)

GeckoX (259575) | more than 10 years ago | (#6849216)

Why? Because it implements this wrong we should all use it? Because it implements this wrong it is the better browser?

You're either a troll or a tool, either way...nuff said.

Re:Use CSS fonts, but don't specify points/pixels (1)

David Leppik (158017) | more than 10 years ago | (#6826655)

That's a great idea in most cases...

... but in the case of older people, who may be using older, hand-me-down, or whatever-they-could-find-in-the-store computers, they're likely to be running Netscape 4 or a similar vintage AOL or IE. My advice would be:

  • do the CSS thing
  • AND use vintage browser workarounds

Hmmm... I think wines age better than web browsers, but in this case your audience has vintage both.

My thoughts (1)

revmoo (652952) | more than 10 years ago | (#6821155)

My vision is pretty good, though it has worsened a bit in the last couple years(I assume from staring at computer displays so much), but I use a 19" monitor, and I run 1600x1200 resolution. Before I tweaked anything, almost all websites were impossible to read. I upped the dpi of my fonts, and it made all the difference.

Now, pretty much all sites are clearly readable. In fact, I think the fonts are a little larger now with the larger dpi settings than they were before when I used 1024x768.

The only thing that bothers me, is sites that attempt to be "trendy", and lock the font sizes to 10(On Helvetica, without fail of course). As long as the fonts on your site are scalable, I don't really think that you need to make any adjustments. Just make it clearly laid out, with a cohesive style. Those with disability issues will(should) have their computers adjusted accordingly.

Re:My thoughts (2, Informative)

Babbster (107076) | more than 10 years ago | (#6821431)

I'm a relatively young man (31) but I have poor vision and browse the web with a keyboard on my lap and a 17" monitor (1024x768) about 2-1/2 feet away. My biggest pet peeve is size-locked fonts. I don't think style is a good excuse to put up small fonts on text-heavy sites - rather, I think it's a mark of HTML laziness.

Fortunately, I dropped IE which does the absolute worst job of any of the browsers at scaling fixed fonts (most of the time it won't allow any scaling at all). I use Firebird now for various reasons, but I've found Opera is actually the best at scaling.

My main recommendation, if you're concerned about elderly eyes' ability to read your site, is (as has been stated above) to use scalable fonts and relatively large icons/graphics for most things. My secondary recommendation is to provide a link to get Opera, perhaps even with a description of why that would be a good idea - Opera is good for those with poor eyes because not only does it provide all the modern browser bells and whistles (gestures, tabbed browsing, etc.) but their "zoom" function is universal and allows people having a tough time looking at web sites to scale not only the text but the graphics too. It's sad to think that there are probably a lot of people browsing the web who have little to no idea that there are advantages to using a browser besides IE.

Re:My thoughts (2, Informative)

Echnin (607099) | more than 10 years ago | (#6823554)

Don't forget Opera's user-specified style sheets. Can easily get a white-on-black screen with only text at 20 px height, which is actually very comfortable to read. I use this feature on poorly designed web pages.

Not necessary (1)

Bitsy Boffin (110334) | more than 10 years ago | (#6821160)

I don't think it's necessary for the same reasons as your wife. People who have visual impairments will already have thier browser, and computer in general, setup in a way that aids them for use with sites/software that is not designed with them in mind. If you then provide them with larger graphics, they are gonna see something hella-huge!

As long as you design your site so that it doesn't force the user into something (i.e don't force the user to use a specific font size, just leave it at the default for ordinary text, and use CSS to provide relative font-sizes for smaller/larger text) with regard to text, have alt tags on images, and don't rely on graphics, flash, java etc for navigation - you should be fine.

Yes, it is important... (5, Interesting)

innosent (618233) | more than 10 years ago | (#6821165)

The other thing you have to remember is that the vast majority of the elderly users don't have 21" monitors. Most probably have 14-15" CRTs, because that's what came with their $300 computer that their kids gave them for Christmas/Channukah/Kwanzaa/whatever. Also, most don't know how to change the default font sizes, and large print could really make your site stand out. If they struggle to read your competitors' sites, but find yours easy to read, and intuitive to navigate, they will visit your site more often.

Design on a 15" monitor, with 1024x768 resolution, and make the site easy to read from about 6' away, and you should be just about right. It will make a difference, and as long as the layout is intuitive, it will bring more people to your site. Web design for most sites out there is horrible, and many elderly find it hard to understand (hell, many of college kids have trouble with some).

In other words, increase the print size a little, but don't forget that the #1 thing that will help the older members of the population (and in fact younger people, too) is an intuitive interface and navigation. Also, no matter what you do, some people are going to need help, so make sure that the contact information is easy to find, and be sure to list a customer service phone number. A person that has trouble with a good web page will be more likely to also have trouble emailing a question, so why force them (like too many other sites do)?

Re:Yes, it is important... (1)

sweetooth (21075) | more than 10 years ago | (#6821184)

Don't you mean 800x600? I can't believe how many people with 17" monitors still use 800x600 as thier resolution. Unless the computer shipped with 1024x768 default I wouldn't expect to see that as the default resolution, and I certainly wouldn't expect it with a 15" monitor.

Re:Yes, it is important... (1)

PainKilleR-CE (597083) | more than 10 years ago | (#6822587)

Not to mention: check it at 640x480, because that's the default pre-WinXP. Anyone that has a hard time reading text on the screen is not going to be using 1024x768 on a 15" monitor (or a 17" monitor for that matter).

Re:Yes, it is important... (1)

Echnin (607099) | more than 10 years ago | (#6823614)

I got an IBM Aptiva in '99 with a 15" monitor and 1024x768 default resolution. So, er, I guess this would at least be common these days..

Where can you get 15"s these days, though? All the stores here have stopped selling them, except for LCDs. 'Course, that won't come with a $300 computer anyway.

Re:Yes, it is important... (1)

sweetooth (21075) | more than 10 years ago | (#6824998)

I have no idea. The parent poster mentioned 15" monitors so that's what I went with. 17" is becoming very standard for low end CRTs and 15" appears to be the entry level LCD.

Re:Yes, it is important... (1)

Bishop (4500) | more than 10 years ago | (#6821312)

Agreed. It is important. Not only do few people know how to change the font size, sites that are not designed with a large font size in mind don't display well.

Re:Yes, it is important... (1)

reallocate (142797) | more than 10 years ago | (#6826659)

This seems like a silly and futile argument to have with your boss.Let's remember which way the money is flowing here. Geez, it's not like it's her personal web site, right?

More to the point, you don't have to be "elderly" to have vision problems. (In fact, I'd say her boss was engaging in a bit of ageism.) Very few people have both perfect vision as well as the kind of hardware many designers use. If it looks great on your 21-inch Apple flatscreen, why not try looking at it using a cheap 15-inch monitor and an e-machine?

Re:Yes, it is important... (0)

Anonymous Coward | more than 10 years ago | (#6848060)

Design on a 15" monitor, with 1024x768 resolution, and make the site easy to read from about 6' away

What?! And screw over all those Pakistani brickmakers who are surfing the Internet with half a burnt-out matchstick? Go to hell, you insensitive imperialist clod!

All sites must be designed for 640 x 480, 16 colors and no images. Just in case.

Give the user the option... (1)

dJCL (183345) | more than 10 years ago | (#6821172)

One solution I have seen for this problem is to have a few font size controls in the upper corner. I think wired uses this in the upper right of some of their articles. Basically, click the button and it changes the CSS with a dash of javascript(like 1 line I think could do it). Just one of many ways...

Also, on entering the site, give people the option to choose the look they want.


Yeah, I've had the same problem (3, Interesting)

skaffen42 (579313) | more than 10 years ago | (#6821183)

Though my vision problems usually occur while drinking the wine, not when buying it. :)

But seriously, as a wine lover I really don't like these new-fangled labels the wine makers are coming up with. Give me something classic, you know, something with fonts that take a while decipher. And don't get me started on artificial corks. They might be better in all ways, but they are still wrong! And the next guy who tries to sell wine in a novelty bottle is going to need help from a proctologist to remove that bottle from his person.

OK, so that was completely off-topic and doesn't address your question at all, but at least it'll give you an idea of the level of logic you can expect from your target audience.

Re:Yeah, I've had the same problem (1)

Dancin_Santa (265275) | more than 10 years ago | (#6821201)

What wines are you talking about?

I guess there's the fish-shaped Italian wine bottle, but aside from that, I am hard pressed (pun!) to think of any strangely-labeled or unusually shaped wine bottles.

Re:Yeah, I've had the same problem (1)

skaffen42 (579313) | more than 10 years ago | (#6821275)

Well, I think that the most exciting a wine label should look like is this [wine.com]. This [wine.com] is even better. But nobody should be allowed to do this [wine.com] or this [wine.com].

I can't find any pictures of novelty bottles, but I do have one downstairs that my girlfriend (bless her heart, but she is a comlete wine pleb) bought because she liked the bottle!. Picture a normal burgundy style bottle that looks like it has been heated to point where the glass began to droop. Then it had fine sand or something sprinkled on it to make it look like it has a permanent coating of dust. Add to this a lable that is fraid around the edges and you get a true abomination. I'm sure some marketing firm somewhere is still telling people about the amazing wine bottle they designed.

ix-nay on the 8pt pixel fonts (1)

realgone (147744) | more than 10 years ago | (#6821325)

Way back in the mists of history -- figure the mid-'90s, give or take an IPO or two -- I used to do some odd bits of print design for a blindness-related non-profit [blindness.org] here on the East Coast. One day, when conversation turned to the org's web presence, they mentioned how they had been quite deliberate in "oversizing" everything on their site to cater to users with failing eyesight -- mostly the elderly, as it turns out. Taking a look at the site today, it appears that not much has changed, so I guess the philosophy must still be working for them.

Mind you, this was a destination with an already assumed audience of seniors/others with vision problems. Should the same thinking be carried over to a more general-interest site that caters largely to a 50+ demographic (wine, opera, public radio/TV)?* Sure. Perhaps in not so drastic a manner as that first example, but hey, it never hurts to remember that those users most likely to need oversized type/graphics -- seniors -- are also the ones are least likely to understand client-side fixes like text-zoom and adjusting monitor resolution.*

My best guess is that some clearly marked CSS controls on the page might be the best compromise between wanting a clean, elegant design and offering maximum readability to users. Worth thinking about, at least...

*This and all other groundless generalizations in this post are the property of the Poster. And Major League Baseball.

Up the font size (2, Interesting)

grayrest (468197) | more than 10 years ago | (#6821401)

First, why ask /.? Wouldn't this be better posed to a group that knows something about graphic design? IANAGD (graphic designer), but I'm currently studying digital design and reading books on the subject. The following is basically lifted from > type < for the internet and other digital media by Veruschka Gotz and the Web Style Guide [webstyleguide.com].

The problem with graphic designers used to working with paper is that the lower resolution of the screen severely reduces the legibility of fonts. You basically have to take off one or two points to get a paper-equivalent font size. Since the wife's employer KNOWS that the elderly tend to buy his wine, it behooves her to 1. obey the desires of the client and 2. design for the audience.

I would think a nice 12pt sans or a 14pt serif would do for the body copy. Be sure to keep the lines short and up the leading (css2 property: line-height) to at least 120% and possibly up the letter spacing (letter-spacing). The resulting text takes up a lot of screen space but is considerably easier to read.

easy! CSS! (1)

croddy (659025) | more than 10 years ago | (#6821425)

just write two stylesheets, and let them pick.

problem solved!

Re:easy! CSS! (0)

Anonymous Coward | more than 10 years ago | (#6822315)

Unless you have text in images, in which case you need to make a choice.

Page Zoom, not Text Size (2, Informative)

TomGroves (622890) | more than 10 years ago | (#6821564)

If you know someone with poor vision, I suggest you have them use a browser that actually zooms the page content. Try Opera or Mozilla.

And for all you web designers out there, use EMs for setting your font (and everything else) size.

Re:Page Zoom, not Text Size (1)

Oddly_Drac (625066) | more than 10 years ago | (#6822152)

"And for all you web designers out there, use EMs for setting your font (and everything else) size."

The EM unit is related to the width of a letter 'M'. So how big is that if you're just using EMs?

Re:Page Zoom, not Text Size (0)

Anonymous Coward | more than 10 years ago | (#6822308)

How can Mozilla zoom the page? (I saw a bookmarklet but it didn't stick across pages).

Re:Page Zoom, not Text Size (1)

Stevyn (691306) | more than 10 years ago | (#6845082)

"Please download Mozilla because it is open and if you use Internet Explorer you are stupid and contributing to the end of the world." Yeah, that'll work. Great marketting strategy. Why does every article have to have a comment thrown in like this. These people make the open source community sound like the taliban ranting about america.

Make One Largeish Element: A Selection Box (1)

BrynM (217883) | more than 10 years ago | (#6821650)

I say, make a GUI element that lets a user choose between small, medium and large text easily. If you have to, make the GUI element large enough to read for the elderly or make large text the default. I can't stand when a site ignores the browser's text controls. This would be a nice middle ground in my opinion.

No text in graphics! (2, Informative)

driptray (187357) | more than 10 years ago | (#6821660)

HTML is a wonderful tool for making text that easily accessible by people with poor eyesight. This is because it allows the reader to set a default text size that suits them and/or to increase font size whenever they want.

So don't throw this advantage away. Here's how:

  • Don't put text in graphics. This makes it impossible or impractical for the user to resize. If you make the text big for your elderly users, then it will be too big for everybody else.

  • Don't use <FONT SIZE=>. Leave the font size alone, and then the user will get whichever size they have configured as their default.

  • Don't use pixel or point sizes in CSS. These tend to override user defaults.

Basically, leave the font size alone for all normal text. For headings etc., specify the font size using ems or percentages, as this way they will remain in proportion with all the normal unsized text.

Ouch! (1)

Sklivvz (167003) | more than 10 years ago | (#6821844)

She got herself into a mess! :-O
My company developed a site targeted for 50+ year olds, a couple years ago. I can tell you it was one of the worst problems we've ever had!
First of all, even if her boss thinks that the primary age range is the elderly, it is quite unlikely that it will be so. Most elderly either don't browse or have someone help them browsing.
On the other hand, when they do browse, they are already used to the way pages are currently laid out (small fonts), and have accepted this paradigm.
Other problem, sites with large fonts look very bad! We've had to use 12pt fonts for all the site and it looked like total shite!
Lastly, she is going to have a LOT of problems with third party code: e.g. forums, content management and so on... these do NOT look good unless you put a LOT of work into changing the CODE... because usually they make an efficent use of screen real estate - meaning they display a lot of info - and if you increase the font size, it's just not gonna fit.
I would also forget the font size combobox if i were her - that's gonna be a total nightmare!
I know this will make me unpopular here, but in the REAL WORLD, CSSes are NOT used for these things, they are used to make SURE that the site looks exactly the same on all computers... Basically to take away flexibility from the user. And there's a reason for it.

Re:Ouch! (2, Interesting)

cathouse (602815) | more than 10 years ago | (#6823025)

Whatdahell's this 'Ouch!' shit?? You ain't even come close ta be'in hurt yet, Woose! Parent post is actualy about half right; very rare on /. when the subject touches on a human reality. Yes, I hit 60 a couple of months back! Yes, I've been seriously visualy impaired since an encounter between my slow head and a fast landing gear strut resulted in assorted minor trauma and detached the retina in my right eye. But I am NOT and never will be the doddering, half-senile object of the maggot-gagging stereotypes put forth in damn near every post in this thread. And the ONE thing that pisses me off even more than the general run of fools, it's when some HALF WIT LOP screws up on their job AND SLOWS ME DOWN! Which is the exact case when I click on 'LARGER' and have a third of the page vanish sideways. While it's only rarely enough to provoke spambombing the PUKES so that no-one can spend money there, THAT IS A BUSINESS THAT WILL NEVER GET .01 from me!

Make layout scalable too (2, Informative)

Rich Dougherty (593438) | more than 10 years ago | (#6821860)

You may wish to avoid fixing the size of layout elements too. One way to do this is to define element widths, heights and positions in ems [htmlhelp.com]. An em is a standard typographical measurement defined as the width of an "m" character. In CSS an em is the width of an "m" in an element's font.

I usually use both px and em when laying out a web page. I use px to position elements accurately and I use em to define spacing that relates to text. For example, I would use ems to set paragraph spacing and padding around text. This keeps things looking nice at a variety of different text sizes.

Not Just The "Elderly" (1)

Detritus (11846) | more than 10 years ago | (#6821982)

Some of us younger folks have less than perfect eyesight. It is very annoying to try to read text on a web site that was designed by some 20-year-old with 20/10 vision and a desire to pack as much text as possible on the page.

Is there a real need for this kind of solution? (1)

muirhead (698086) | more than 10 years ago | (#6822089)

  1. Is there a real need for this kind of solution?
No [upshawinst.org]

just follow accessibility guidelines (4, Informative)

jilles (20976) | more than 10 years ago | (#6822174)

First look at this stuff:
http:// www.w3.org/WAI/

People already gave some advice on fonts. Here's some additional advice:

- provide an alternate stylesheet with increased font-sizes (specified in em), high contrast colors and if needed increased graphics sizes.
- specify sizes of other stuff in em as well (e.g. margins and paddings). This will make sure that the content will still look good if the fonts are resized.
- do not 'optimize' your site for a particular resolution.

Make it ACCESSIBLE (4, Informative)

ManxStef (469602) | more than 10 years ago | (#6822654)

Hehe, Slashdot's not really a shining example of web accessibility, but it's a good place to ask for help none-the-less.

The first stops for help (as someone's no doubt pointed out already) should be:

Section 508 [section508.gov]

Mark Pilgrim's excellent "Dive Into Accessibility" [diveintoac...bility.org]

The W3C's web accessibility guide [w3.org]

The UK Disabled Rights Commission website [drc.gov.uk], paying particular attention to the superb Interactive Demos [drc.gov.uk] (e.g. Inaccessible Website Demo [drc.gov.uk]).

Buy these books:

Constructing Accessible Websites [webaim.org]

Building Accessible Websites [amazon.com]

Oh, and a copy of Zeldman's Designing With Web Standards [amazon.com] for good measure.

Write your pages using validating HTML or XHTML, and style the pages using CSS.

Validate your webpages using the W3C Validator [w3.org]and your CSS using the W3C CSS Validator. [w3.org]Use Watchfire's Bobby [watchfire.com] to validate your pages, and aim for AAA rating (also note that Bobby has some helpful hints when it does find errors).

Other excellent resources (in no particular order):

http://www.webstandards.org/ [webstandards.org]
http://www.w3.org/WAI/References/QuickTips/ [w3.org]
http://www.mezzoblue.com/ [mezzoblue.com]
http://www.meyerweb.com/ [meyerweb.com]
http://www.simplebits.com/ [simplebits.com]
http://www.whatdoiknow.org/ [whatdoiknow.org]
http://www.stopdesign.com/ [stopdesign.com]

Variable Sizes (1)

man_ls (248470) | more than 10 years ago | (#6822901)

A script with variable-fontsized text based on the screen resolution.

Keeping in mind that 24pt font on 640x480 is about an inch high...

Re:Variable Sizes (1)

Jerk City Troll (661616) | more than 10 years ago | (#6845758)

A script with variable-fontsized text based on the screen resolution.

You know nothing. Trust me. That's not how you make web sites more accessible. This is how you defeat accessibility because many screen readers and specialized browsers don't understand JavaScript. You use stylesheets and standards compliant mark up. Get out of the web business, please.

Keeping in mind that 24pt font on 640x480 is about an inch high...

Oh yea? Prove it. What if they have a 21 inch monitor running at 640x480? What if they have a 12 inch monitor running at that 640x480. In any case, what if they have their DPI set to something other than "standard" screen resolution? 72, 75, 100 are all very common. What if they use a custom stylesheet? What if the browser is set to magnify fonts?

As I said, you don't know anything about this.

Not necessary (1)

macemoneta (154740) | more than 10 years ago | (#6823264)

Those that are visually impaired have the tools to view the site appropriately. For example, my 89-year old father-in-law uses the magification feature in Opera, which (correctly) magnifies both text and graphics.

The only thing you have to do, as others have pointed out, is make sure that the code is accessible (for use with text-mode browsers, for the seriously visually impaired), and browser neutral.

SVG (1)

schepers (462428) | more than 10 years ago | (#6824349)

This is a perfect use for SVG graphics. For any (non-photographic) images or logos, use an SVG graphic, and scale it according to the fonts size needed.

By embedding the font you need in the SVG graphic itself, you are not limited to the fonts on the user's system, either.

About resolutions... (1)

jonadab (583620) | more than 10 years ago | (#6826026)

Regarding screen sizes: the same people who complain about small type will insist they need a small screen, that 18" is too large. They cannot coherently explain why smaller things are easier to see, but a large percentage of them insist on it, including almost everyone who wears bifocals. Many of them use 14" viewables and don't totally maximize the browser window.

In order to compensate for the small size of their screens, they will cut the resolution to 640x480, and I'm convinced they'd set it smaller than that if Windows would let them. Then on top of that they will only effectively use about half of the screen, saying that they can't see the top part, the bottom part, or whatever. The implication is that if this is your target market, your site needs to be usable at about 600x200. Whee. If you plan it right from the start, it is entirely possible to design a site that looks decent at that size and still scales and looks okay at much higher resolutions, but with bitmap-type graphics there are limits; it's going to look quite stretched at 1600x1200.

There are two ways around this: one is to make your graphics scale, and the other is to build your site mostly out of text, maybe using graphics for borders and backgrounds and stuff.

Making graphics scale *properly* means vector graphics. When you run across a vector graphics format with wide browser support please let me know, as I'd be very interested. As a kludge, you can use bitmapped graphics (PNG or whatever) and assign relative widths. I have done this once or twice (width="100%" in my case) in a pinch, but if you try it you will immediately see the problem. Depending on the graphic it might be okay for some things, but it's definitely not a general solution to the whole issue.

At this time, my recommendation for sites that need to scale well to different resolutions is to make heavy use of text and style sheets and use a few strategically-placed graphics to spruce things up without interfering too much with scalability. For example, a background graphic that can be tiled will accomodate different resolutions fairly well. Narrow borders that scale or repeat in one direction are another fine example. A medium-sized logo that can be centered at the top, above the rest of the content, may be designed such that it looks fine surrounded by varying amounts of whitespace. And so on.

As far as text, use the relative size attributes to make some text larger than the rest as necessary, but don't fix hard sizes, as some legacy browsers[1] then won't let the user scale the text; with relative sizes the browser will pick up and use the user's base font size.

Some of your layout problems can be lessened by use of alpha-channel transparency. This doesn't work with all browsers, though; it works with all browsers based on Mozilla.org code, recent versions of Opera, and possibly certain others, but not for example with old versions of Netscape. There is a kludge to make it work with some versions of MSIE, but this fails sometimes depending on the user's settings and in any case will not work with old versions of MSIE. If you are interested in pursuing alpha channel stuff, I have some examples up here: http://cgi.galion.lib.oh.us/test/ [lib.oh.us] Especially see GPL-plus.html [lib.oh.us] (for an example how how it helps layouts) and png-alpha/png-alpha-demo-hacked.html [lib.oh.us] (for a demo of the transparency channel itself). There is also a really cool demo here [mozilla.org], but that one has not been hacked to work with MSIE.

One final piece of advice: test your site at at least three resolutions, including 640x480 and 1280x1024.

[1] Notably Netscape 4 and all versions of MSIE.


bastardsquadmuzz (573762) | more than 10 years ago | (#6826118)

I've found a good way to make text easy to read for people with eyesight problems is to use the BBC's BETSIE [bbc.co.uk] program. It's a perl script that takes any graphical page and strips it of graphics, making the text large and easy to read. Check it out on the BBC [bbc.co.uk] website by clicking on the "Text Only" link in the top-left corner.

The W3C has accessibility hints. Read them. (1)

Chelloveck (14643) | more than 10 years ago | (#6826297)

Sounds like the boss probably has a grasp of the requirements, but not really a grasp of the underlying technology. Asking for "large-print graphics" sounds to me like it's just a general request for accessibility, made by someone who knows what he wants, just not quite how to ask for it. Points given to the boss for asking. Points deducted from your wife for being too literal and not adequately translating from "non-techie speak".

Okay, so the request is for an accessible page. Cool. First rule, do not put text into your images! No, no, no! Don't do it. Following this rule will get you 90% of the way there. And before anyone complains to me about making a boring text-only site, take a look at some of the compositing effects you can do with CSS. Don't make your navigation button a GIF with the word "HOME" hard-coded onto it. Make a text-less button and let the browser render the text "HOME" over the image. Tastes great, less filling, and degrades gracefully.

Next, don't mess with the body font size or face. EVER! Users, especially those with poor vision, set up their default fonts because those are the most readable. DON'T MESS WITH THE FONTS! If you want to get fancy, add a "large type" button to your page that loads a style sheet specifying "x-large" or something similar for the body font. This is done as a convenience for users who would like larger text but don't know how to configure their browsers to do it properly.

I hate when the fonts are screwed up by CSS (1)

Stevyn (691306) | more than 10 years ago | (#6845139)

I have a laptop with a 15 inch screen running at 1600 X 1200. When I got it I had to get out a microscope and adjust windows settings and IE (don't even start with that shit, i don't want to hear it) settings to get the fonts to a readable size. But when i go to some web site that use CSS to keep the space between each line of characters i get pissed off. When the browser adjusts the font size but not the space between all the words are on top of each other. This results in a page I can't read, or I shrink the font down and I can barely read it.

I like the fonts slightly large so I don't have to stare at the screen and I can sit back and relax while enjoying the internet. And no, I'm not an old person by any means, i just don't like to squint.

None of you know wtf you're talking about. (1)

Jerk City Troll (661616) | more than 10 years ago | (#6845730)

It's simple: adhere to web standards. There is nothing to be done about making big fonts or using graphics over text as some other idiot suggested. Use strict XHTML and use pure CSS to layout it out and control appearance. Here's why.

When you develop by web standards, which also implies separation of content from structure, you get content which is marked up based on what it is and not what it should look like. You never have any guarantee as to what size, shape, or color your content is going to appear as. The best you can do is describe it. For example, headers should be marked up with header tags, emphasized text should use <em> as opposed to <i>. How do you know a user has emphasized text set to italic? They may not. Publishers sure as hell don't do that when reviewing manuscripts. This is, of course, only the tip of the iceberg. I highly suggest everyone go over and read Jeffery Zeldman's site [zeldman.com] for more details.

So what does this get you? Since we're dealing with accessibility, I'll concentrate on that aspect of standards compliant web design. If your content is properly marked up, it gets properly interpreted by screen readers and other software and devices that allow poor/no eye-sign view to get the content. A screen reader doesn't know what the hell <font size="+3">Title</font> mean. It doesn't know how to address it or "present" it to the user. However, if you use <h1>Title</h1> to define the text, the screen reader knows it's a top-level header. Based on the programmed behavior, the content will be far more intelligible.

But it goes further still. Many people who have tough time using web sites due to small fonts or bad colors will supply their own style sheets. (This is why good browsers give you this option in the first place.) People should be able to override the stylesheets provided with your site so it can become more accessible to them. If doing this breaks your site in some way, then its your fault and you should lose that customer.

At any rate, I highly recommend that everyone who is about to embark or is in the business of web design and development read this book: Designing With Web Standards [amazon.com] by Jeffery Zeldman. This guy knows what he's talking about and if more people followed his advice, we'd have a web that was usable by everyone, regardless of their sensory disabilities.

I also recommend scoping out the CSS Zen Garden [csszengarden.com]. It's a site built with XHTML strict and styled with pure CSS. You can even switch stylesheets on it and it's visual appearance gets completely overhauled without any modification to the mark up or structure. Now imagine how easy it would be to supply your own CSS to the site to make it more usable.

Yes, this is definitely a rant. I hope many of you take it to heart, nevertheless. Browsers are becoming more and more standards compliant all the time. The web as a practice is becoming more refined and serious as opposed to being laden with idiots who pirated a copy of Dreamweaver or Frontpage and are out there polluting the scene with crap.

Not just the elderly... (1)

Ramses0 (63476) | more than 10 years ago | (#6855865)

I've got a nice big flat-panel monitor with natural resolution of 1280x1024. After too damned many of those "artsy cool" sites (even business/news sites!) stuffing the font size to 6px tall, I changed konqueror settings to minimum 10pt, medium 16pt, and life is much better.

My rules:

1) NEVER NEVER NEVER hard code the font size. You are teh suck if you do this.

2) Try to include buttons or graphics with in the previous rule. It does no good that your 6px font size is not created with [small][/small], but with photoshop instead. Hard to read is still hard to read.

3) Think: With JavaScript mojo, you could make your site use different stylesheets for older people and have a "large print version". So you design your site to look alright with a large print version, and default to small print. STOP! What happens if you default to the large-print version instead? Less maintenance, less hassle, and easier to read for everybody. Plus less to write since bigger sized content needs less actual content.

One day you will be old too, and hopefully by then, your children will realize that hardcoding font sizes is dum. Use margin: 1em; instead of margin: 10px; ... use font-size: xx-large; instead of font-size: 24pt; or font-size: 50px;

Check for New Comments
Slashdot Account

Need an Account?

Forgot your password?

Don't worry, we never post anything without your permission.

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>
Sign up for Slashdot Newsletters
Create a Slashdot Account