Article Views:
46
Ezine ready page
Ezine ready page
Posted on July 16, 2008 by Robrt Thomson | Posted under Web Design
Solve The Problem of Low Vision Web Page Layouts
|
Modern browsers allow users to zoom in on the text to make it easier to read, but with the columnar layouts, this can get problematic very quickly if the text is zoomed too much. Columns can get pushed off the screen or become illegible if they are fixed width and the text is too big for them. How Do Web Designers Currently Solve This Problem? - Text Only Pages One of the more popular ways to make sites more accessible is to create "text only" versions of the page. The idea being that if there is just text there, the page will be easier to print or magnify. The problem with text only pages is that they are a maintenance headache, and they imply that the reader is getting something other than the page they actually want to read. There is an underlying question of "if they deleted the images, what else did they delete?" So customers don't click on those links. Plus, if they are difficult to maintain, chances are, you won't maintain them, and so the customers really won't be getting what they want to get. - Magnify Text Buttons The idea here is that the customer clicks on a magnify icon and the font size is increased. The problem is the same as when the customer uses the browser magnification. Text won't always fit in the screen and so on. Some other issues with both design and Web designer solutions are: - Screen real-estate Enlarging the text can force columns to scroll off-screen to the right or left and effectively disappear. - Headers When text is magnified headers and bold can become confused and difficult to distinguish. But these tags act as markers in the text to make them easier to read. Leaving them in the document is very important. - Color The most popular color scheme on the Web is black text on a white background, but this color scheme is very hard to read on a computer screen. I think my favorite description of this color scheme is "Black text on white is like looking at ants on a light bulb." Color schemes like white on blue (think WordPerfect) or green on black (think old computer terminals) are a lot easier on the eyes. Creating a Zoom Layout with CSS The simplest way to create a zoom layout is to simply create a second style sheet (usually called something like zoom. css) that incorporates the following: 1. A Single Column We're so indoctrinated to use multiple columns on Web pages these days, but as I've mentioned above, this causes a lot of problems for people who browse with magnified text. If you put all your content into a single column, you resolve this problem. 2. Flexible or Liquid Width Layout Since we're assuming that the font is going to be increased, and our customers might increase it even more with their browsers, making the column flexible in width is best so that it remains readable even if the screen is maximized with 3x font sizes. 3. A Big Font This is a layout that is trying to be accessible to people who have lower vision, so make it big. And use proportional font sizes like ems or percentages, so that your customers can increase the size if huge to you is microscopic to them. 4. Invert the screen colors It's tempting to go straight to white on black, but that has so much contrast that it's still hard to read. Think colors like blue, green or white on black or dark brown. 5. Prune your navigation Since we've moved the site into one column, you need to make sure that the first 5 screen full of text are not your navigation. Keep it simple. Use classes to hide sub-navigation and keep just the basic one or two levels of navigation at the top and bottom of the page. 6. Don't change the content Don't get rid of images, don't remove or alter content. The point of the zoom layout is that it's the same content as the standard page, just made more legible for low-vision readers. Making Your Zoom Layout Available Many modern browsers such as Firefox and Opera offer the ability to switch between alternate style sheets that are attached to the document. So, as the Web designer, all you have to do is attach your style sheet to the document: u. it is important that you know your customers and you know what they exactly need. About The Author: for more info:- http://www.reprintarticlesite.com http://www.thedesignbuild.com |
Tags: WEB DESIGN, WEBSITE, WEB PROMOTION, DESIGNING, DESIGNING TIPS
