UI Wizards - Web Blooper of the Month

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>UI Wizards - Web Blooper of the Month</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="UIWizards.com-Web Blooper of the Month"> <meta name="author" content="Adam Chew http://adamchew.com">  <link href="assets/css/bootstrap.css" rel="stylesheet"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> <link href="assets/css/uiwizards.css" rel="stylesheet">    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="assets/ico/favicon.png">  <link href='http://fonts.googleapis.com/css?family=Tauri|Julius+Sans+One' rel='stylesheet' type='text/css'> </head> <body> <div class="affixed-nav-bg affix-top"></div> <div class="uiw-head"> <div class="container"> <div class="masthead"> <h1>UI Wizards</h1> <h2>Product usability consulting</h2> <div class="clearfix"></div>  <div class="nav-wrapper"> <a class="nav-toggle collapsed" data-toggle="collapse" data-target=".navbar" href="javascript:void(0);"> Menu </a> <div class="navbar"> <div class="container"> <div class="navbar-inner"> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li class="dropdown"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="portfolio.html">Portfolio <b class="caret"></b></a> <ul class="navdrop dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a role="menuitem" tabindex="-1" href="portfolio.html">Samples</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_clients.html">Clients</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_CV.html">CV</a></li> <li><a role="menuitem" tabindex="-1" href="portfolio_pubs.html">Publications</a></li> </ul> </li> <li><a href="services.html">Services</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="container">  <div class="row-fluid"> <div class="span9"> <h1>Web Blooper of the Month</h1> <h2>Tiny Fonts</h2> <h3><a href=http://www.stanfordbookstore.com target="Web Blooper Window" title="StandfordBookstore.com">StanfordBookstore.com</a></h3> <p>Below is a paragraph from the home page of StanfordBookstore.com, the website of Stanford University's campus bookstore. The image has not been rescaled or reduced in any way from what was displayed in my browsers (Netscape Navigator 4.76 and Internet Explorer 5.0).</p> <img src=assets/wb_images/WBloop2_Stanford.gif align="right" width="234" height="160" alt="www.stanfordbookstore.com"> <p>The obvious problem with tiny text is that many people can't read it. As people age, the limit increases. Most people over the age of 45 can be considered "visually impaired" for reading small-print text. Much of the text in many websites is illegible for a large proportion of the population. This is certainly true of the Stanford Bookstore website, which is probably used more by older people taking continuing education classes than by Stanford's college-age students, who mostly use the brick-and-mortar store on campus. Text that can't be read might as well not be there.</p> <p>Most Web browsers include controls for changing the font-size of text. In theory, this lets people choose larger fonts if they can't read text in the default size. In fact, most Web users have no idea how to adjust the fonts in their browser. Even knowing how to adjust the browser's font settings may not help, because many websites render the browser's controls impotent by either: a) explicitly setting font sizes, or b) embedding text in images. For example, the font settings have no effect on Stanfordbookstore.com (or any of the sites shown in this article).</p> <h3><a href=http://www.fractalcow.com target="Web Blooper Window">FractalCow.com</a></h3> <p class="sansa">Next, we have the home page of FractalCow.com, an online web "zine". Again, the page-image has not been rescaled or reduced from what was displayed in my browser (Netscape Navigator 4.76).</p> <img src=assets/wb_images/WBloop2_FractalCow.gif width="656" height="422" alt="www.fractalcow.com"> <p>This example shows that aging eyes aren't the only limit. The text at FractalCow.com is so small <em>no</em> one could read it. The small font is especially inexplicable given all the empty black space on both sides of the page's fixed-width content area. (Note: the text appears slightly larger in Internet Explorer.)</p> <h3><a href=http://www.microsoft.com target="Web Blooper Window" >Microsoft.com</a></h3> <p>Browser incompatibilities exacerbate the problem. Text fonts that are legible when viewed in one browser may be too small when viewed in another. Netscape Navigator tends to display text smaller than does Microsoft Internet Explorer. Unfortunately, many web-developers test their site using only their own favorite browser. Thus, they fail to notice that some or all of the text on their site can't be read in other browsers that visitors to the site are likely to use.</p> <img src=assets/wb_images/WBloop2_MicrosoftNN.gif alt="www.microsoft.com" width="668" height="339"> <p>Microsoft's website has tiny text fonts when viewed using Netscape Navigator. Above is only one of many such pages at Microsoft's site, viewed using Netscape Navigator 4.76. Of course, maybe Microsoft wants its site to be readable using only its own browser. The image below is the same page viewed through Microsoft Internet Explorer 5.0. Better, eh?</p> <img src=assets/wb_images/WBloop2_MicrosoftIE.gif width="670" height="376" alt="www.microsoft.com"> </div> <div class="span3 sidebar"> <h3>Posted: Jan 2002</h3> <h4> <a href="wBloop1.html">< Prev</a>       <a href="wBloop3.html">Next ></a> </h4> <p><a href="web_blooper_archive.html" title="Web Bloopers Archive"><button class="btn btn-uiwizards" type="button" alt="Link to Web Bloopers Archive page"><i class="icon-star icon-white"></i> Web Bloopers Archive</button></a></p> </div> </div> </div>  <div class="footer"> <div class="container text-center"> <p>© UI Wizards, Inc. 2013</p> <div class="foot-nav"> <ul class="nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="services.html">Services</a></li> <li><a href="classes.html">Classes</a></li> <li><a href="resources.html">Resources</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="privacy_policy.html">Privacy Policy</a></li> <li><a href="usability_policy.html">Usability Policy</a></li> </ul> </div> </div> </div>   <script src="assets/js/jquery.js"></script> <script src="assets/js/uiwizards-nav.js"></script> <script src="assets/js/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-alert.js"></script> <script src="assets/js/bootstrap-modal.js"></script> <script src="assets/js/bootstrap-dropdown.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> <script src="assets/js/bootstrap-tab.js"></script> <script src="assets/js/bootstrap-tooltip.js"></script> <script src="assets/js/bootstrap-popover.js"></script> <script src="assets/js/bootstrap-button.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> <script src="assets/js/bootstrap-carousel.js"></script> <script src="assets/js/bootstrap-typeahead.js"></script> <script src="assets/js/bootstrap-affix.js"></script>  <script type='text/javascript' src='https://count.carrierzone.com/app/count_server/count.js'></script> <script type='text/javascript'> </script>  </body> </html>

CINXE.COM

UI Wizards - Web Blooper of the Month