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?"
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.
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.
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
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.
I would expect such blatant racism on Fark, but on Slashdot? Mods please ban this asshole.
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.
NZ Electronics Enthusiasts: Check out my Trade Me Listings
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.
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.
Anyway.
On Arrakis: early worm gets the bird. Magister mundi sum!
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.
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 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.
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.
problem solved!
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.
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.
US Democracy:The best person for the job (among These pre-selected choices...)
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.
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.
My Stack Overflow user
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.
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.
Mea navis aericumbens anguillis abundat
- Is there a real need for this kind of solution?
NoFirst 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/
A script with variable-fontsized text based on the screen resolution.
Keeping in mind that 24pt font on 640x480 is about an inch high...
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.
Can You Say Linux? I Knew That You Could.
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.
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.
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/ Especially see GPL-plus.html (for an example how how it helps layouts) and png-alpha/png-alpha-demo-hacked.html (for a demo of the transparency channel itself). There is also a really cool demo here, 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.
Cut that out, or I will ship you to Norilsk in a box.
I've found a good way to make text easy to read for people with eyesight problems is to use the BBC's BETSIE 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 website by clicking on the "Text Only" link in the top-left corner.
--Muzz
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.
Chelloveck
I give up on debugging. From now on, SIGSEGV is a feature.
looks pretty normal, but then again, I'm gettin old...
-- www.globaltics.net
Political discussion for a new world
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 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.
high contrast luminosity level is what you want
2 say
Any preoccupation with ideas of what is right or wrong in conduct shows an arrested intellectual development. (Wilde)
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.
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 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 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. 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.
Join Tor today!
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.
... use font-size: xx-large; instead of font-size: 24pt; or font-size: 50px;
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;
--Robert