Large Print Graphics for Older Eyes? 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?"
Use CSS fonts, but don't specify points/pixels (Score:5, Informative)
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
Re:Use CSS fonts, but don't specify points/pixels (Score:3, Informative)
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:My thoughts (Score:3, Informative)
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:Use CSS fonts, but don't specify points/pixels (Score:2, Informative)
Page Zoom, not Text Size (Score:2, Informative)
And for all you web designers out there, use EMs for setting your font (and everything else) size.
No text in graphics! (Score:2, Informative)
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.
Make layout scalable too (Score:2, Informative)
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.
just follow accessibility guidelines (Score:5, Informative)
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.
Make it ACCESSIBLE (Score:5, Informative)
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]
Re: Not knowing how to set (Score:2, Informative)
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:My thoughts (Score:3, Informative)