Slashdot Mirror
Large Print Graphics for Older Eyes?
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?"
Instead of using
p { font-size:11px; }
Use
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:
http://www.georgiancourt.com.au/
Mike
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)?
--That's the point of being root, you can do anything you want, even if it's stupid.
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.
People couldn't type. We realized: Death would eventually take care of this.
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.
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.
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.
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.
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.
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. 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.
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...
"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. Play with the stylesheets. Now go back and look at it in Netscape 4.75. Isn't that elegant?
Oddly Draconis
Too cynical to live, too stubborn to die.
First look at this stuff:/ www.w3.org/WAI/
http://diveintoaccessibility.org/
http:/
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.
Jilles
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
Mark Pilgrim's excellent "Dive Into Accessibility"
The W3C's web accessibility guide
The UK Disabled Rights Commission website, paying particular attention to the superb Interactive Demos (e.g. Inaccessible Website Demo).
Buy these books:
Constructing Accessible Websites
Building Accessible Websites
Oh, and a copy of Zeldman's Designing With Web Standards for good measure.
Write your pages using validating HTML or XHTML, and style the pages using CSS.
Validate your webpages using the W3C Validator and your CSS using the W3C CSS Validator. Use Watchfire's Bobby 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/
http://www.w3.org/WAI/References/QuickTips/
http://www.mezzoblue.com/
http://www.meyerweb.com/
http://www.simplebits.com/
http://www.whatdoiknow.org/
http://www.stopdesign.com/
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!
Thelma, I'm not making ANY deals.
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.
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.
Lalala