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?"
The real solution (Score:1)
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 (Score:3, Insightful)
&
"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
Re:The real solution (Score:1)
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! (Score:2)
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 righ
Re:The boss is right (Score:1)
Re:The boss is right (Score:2)
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
Re:Use CSS fonts, but don't specify points/pixels (Score:3, Insightful)
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 (Score:2)
Also, a vector format such as Flash might have it's place if the interface is not embedd
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 codi
Re:Use CSS fonts, but don't specify points/pixels (Score:2, Informative)
Re:Use CSS fonts, but don't specify points/pixels (Score:1, Interesting)
Actually, pt works just fine, try it out. You specify pt sizes for everything, and it'll work.
No it won't.
Re:Use CSS fonts, but don't specify points/pixels (Score:2)
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 sh
Re:Use CSS fonts, but don't specify points/pixels (Score:2)
Re:Use CSS fonts, but don't specify points/pixels (Score:1)
Re:Use CSS fonts, but don't specify points/pixels (Score:2)
You're either a troll or a tool, either way...nuff said.
Re:Use CSS fonts, but don't specify points/pixels (Score:2)
Hmmm... I think wines age better than web browsers, but in this case your audience has vintage both.
My thoughts (Score:2)
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 t
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 var
Re:My thoughts (Score:3, Informative)
Not necessary (Score:2)
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 fo
Yes, it is important... (Score:5, Interesting)
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... (Score:2)
Re:Yes, it is important... (Score:1)
Re:Yes, it is important... (Score:2)
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... (Score:2)
Re:Yes, it is important... (Score:2)
Re:Yes, it is important... (Score:2)
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
Give the user the option... (Score:2)
Also, on entering the site, give people the option to choose the look they want.
Anyway.
Yeah, I've had the same problem (Score:4, Interesting)
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 (Score:1)
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 (Score:2)
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 l
ix-nay on the 8pt pixel fonts (Score:2)
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 philo
Up the font size (Score:2, Interesting)
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
easy! CSS! (Score:2)
problem solved!
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.
Re:Page Zoom, not Text Size (Score:2)
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 (Score:1)
Make One Largeish Element: A Selection Box (Score:2)
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 fon
Ouch! (Score:1)
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.
Ot
Re:Ouch! (Score:2, Interesting)
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 t
Not Just The "Elderly" (Score:2)
Is there a real need for this kind of solution? (Score:1)
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.
ISO std 40% delta luminosity (Score:1)
2 say
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:Make it ACCESSIBLE (Score:4, Funny)
Variable Sizes (Score:2)
Keeping in mind that 24pt font on 640x480 is about an inch high...
Re:Variable Sizes (Score:1)
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.
Oh yea? Prove it. What if they have a 21 inch monitor running at 640x480? Wh
Not necessary (Score:2)
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 (Score:1)
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... (Score:1)
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 small
BETSIE (Score:1)
The W3C has accessibility hints. Read them. (Score:2)
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 n
goto the great-grandaddy website for oldsters (Score:2)
looks pretty normal, but then again, I'm gettin old...
I hate when the fonts are screwed up by CSS (Score:1)
None of you know wtf you're talking about. (Score:1)
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 appe
Not just the elderly... (Score:1)
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