- From: Laura Carlson <lcarlson@d.umn.edu>
- Date: Mon, 12 Sep 2005 07:54:52 -0500
- To: w3c-wai-ig@w3.org
> I was wondering what your guys' thoughts and opinions were. > > Any help, thoughts, or resources that you could point me in the > directions would be greatly appreciated. My take is that designing accessible web sites sometimes requires a paradigm shift. It can be a big hurdle (I'm speaking from experience here) that can be agony for some classically trained graphic design people to accept. All too often, web designers, especially ones from graphic or print backgrounds, focus on how to control a web site to display exactly the same from one browser to another. They get caught up in developing a fixed pixel-perfect design for Internet Explorer and Netscape/Mozilla, running on a desktop machine. There are so many variables related to screen resolution, user font size options, device or browser selection, etc., that you must come to accept that your design may look somewhat different in various circumstances. As the Internet grows, and more devices become web-enabled, designers need to take into account what happens when a user tries to access a site with an alternate device. By its nature, the web forces designers to give up control over the very things designers are traditionally responsible for controlling, such as fixed page size, alignment, fonts, and colors. The experience is a shock until you get used to it. Becoming a good web designer requires a solid understanding of the web environment in order to anticipate and plan for these shifting variables. The web is not print. Web design is a different animal. It is a flexible medium. The web simply does not have any one fixed height/width, or aspect ratio, or even resolution, that can be used as a constraint when designing. Now that we are able to build one site that can work everywhere, we need to rethink any aspect of old design habits and ways of designing that perpetuates rigidity, inflexibility, and now invalid assumptions about the nature of the medium. Fixed width designs are perhaps one of the more glaring signs that such habits are still present. Liquid design is a more accessible approach. When web designers learn to stop trying to control the pixel-perfect display of their pages and accept that forces beyond their control will cause their design to display differently, sometimes radically different in certain situations, life becomes so much easier. Rather than focusing on how pages display in a particular browser, it is better to be concerned with how the information/content is structured and making sure it accessible to all user agents. Web designers need to learn to let go. Relax. The goal of a web site should not be to look identical on every screen that displays it. Something to take into consideration is that liquid design helps support device independence. A key to accessibility is to design for device independence, so that pages work on any device which supports openly published standards. For Web content to be device independent, it should be possible for a user to obtain a functional presentation associated with its web page identifier via any access mechanism. With the growth of PDAs, and even Web site content delivered to cell phones, having accessible content is becoming more important. The existence of standards such as HTML 4, XHTML and CSS makes this a possibility. CSS 2 allows for a max-width setting but at the same time we must realize that some users think breaking a line at any length shorter than their browser window width is a waste of space. With paper a designer has to pick one fixed line length to inflict on everyone. On the web a designer has greater flexibility. One philosophy is if a designer is not going to use the web's inherent flexibility, why not use PDF instead of HTML? With that said though, in CSS 2 you can specify max-widths in CSS for blocks of text...that way, the line length won't exceed whatever you specify...say in percent or ems (to support relative sizing). Example: #content { max-width: 400em; } You can also add min-width, max-height, min-height. IE/win doesn't understand this, but there are javascript work arounds to get it to play nice. For more info visit: Minimum and maximum widths. [1] As for desktop computer monitors running GUI browsers...in "Optimal Line Length" [2] Bob Bailey, Ph.D., Chief Scientist for HFI, discusses the optimal line length when reading prose text from a monitor. He says: "Users tend to read faster if the line lengths are longer (up to 10 inches). If the line lengths are too short (2.5 inches or less) it may impede rapid reading. Finally, users tend to prefer lines that are moderately long (4 to 5 inches)." With the browser stats that are cited at W3schools, it would be more relevant to see the widths of the browser windows for users of your own local site rather than the screen resolution of a global audience. I have a 1280 x 1024 monitor resolution but my browser window is typically 800 wide and about 950 tall. I do however feel that designing for 800 x 600 is not a bad thing but I will usually make my pages use up the full width of the browser window. I think that if someone out there has their browser set to 1280 x 1024, almost every site they see will have very long lines of text and that must be what the user is used to and/or prefers. Let us not forget those users with low vision. If we make our pages fixed at say 800 wide and an individual with a large screen comes to our page and has the font size bumped way up, they will be stuck with only a couple of words per line all over to the left of their screen because we deemed they did not need to use the right half. With all that said, I don't believe that accessible websites have to be dull and boring. Web sites can look visually attractive and still be accessible on a whole range of equipment, screen sizes, color perceptions etc. Presentation should enhance the content, making it more appealing, but more importantly, more usable and accessible. Web sites can be beautiful AND flexible. Embrace the flexibility. Some References: Liquid Design http://www.d.umn.edu/goto/usability#liquid http://www.d.umn.edu/goto/css#liquid Line Length http://www.d.umn.edu/goto/usability#linelength Relative Sizing http://www.d.umn.edu/goto/accessibility#relative Font Sizing: http://www.d.umn.edu/goto/type#size All the Best, Laura [1] http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths [2] http://www.humanfactors.com/downloads/nov02.asp#bobbailey ___________________________________________ Laura L. Carlson Information Technology Systems and Services University of Minnesota Duluth Duluth, MN 55812-3009 http://www.d.umn.edu/goto/webdesign/
Received on Monday, 12 September 2005 12:59:00 UTC