http://www.tigerheron.com/category/graphic-design The taxonomy view with a depth of 0. en-US http://www.tigerheron.com/article/2007/10/alternative-noscript-tag <p> Ideally, when you use &lt;script> to create dynamic Web pages, you will also support browsers where scripting is disabled or unavailable. The &lt;noscript> tag lets you supply the alternate code. But while &lt;script> can be used inline, &lt;noscript> is strictly a block element, potentially forcing you to duplicate large amounts of code. I'll show you an easy alternative to the &lt;noscript> tag for inline uses.</p><!--break--> <p> If Javascript is your scripting language, insert the following code into the &lt;head> section of your Web page: </p><xmp> <script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script></xmp> <p> When you need to use &lt;noscript> inline, use &lt;span class="noscript"> instead.</p> <p> If that went by too fast, consider: <ul> <li>If scripting is enabled, the noscript CSS class will be created and will remove any contents tagged with that class.</li> <li>If scripting is not enabled, the style is not created and the contents are displayed.</li> </ul> <p>You many not have noticed a problem using &lt;noscript> inline, as many browsers support this. But if you'd like your code to validate while retaining the convenience of an inline &lt;noscript> tag, use the trick above. http://www.tigerheron.com/article/2007/10/alternative-noscript-tag#comments CSS graphic design tip Web design Fri, 05 Oct 2007 00:36:22 +0000 designer 89 at http://www.tigerheron.com http://www.tigerheron.com/article/2007/05/recommendations-improving-fixed-width-designs <p> <span class="dropcap">T</span>his article focuses on overcoming some of the drawbacks of fixed-width designs. These are suggestions based on my experience rather than hard-and-fast rules. Feel free to critique my suggestions and propose improvements or additional guidelines. </p> <!--break--> <h2>Use a CSS reset stylesheet</h2> <p><span class="pullquote"><span style="font-weight: bold;">Fixed-width design</span>: A design in which the Web page elements maintain their size and position regardless of the browser window's width.</span>Each browser has a default stylesheet that is used when no styles are defined, but the default is not the same for all browsers. A CSS reset stylesheet provides a consistent base style for all browsers, which is valuable for fixed-width designs, where layouts are dependent on pixel-perfect positioning. <a href="http://meyerweb.com/">Eric Meyer</a> has been working on this problem for years. Take a look at his most recent <a href="http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/">CSS reset file</a>. Yahoo! also provides a <a href="http://developer.yahoo.com/yui/reset/">CSS reset file</a> as part of their UI library. </p> <h2>Select the design width based on your intended audience</h2> <p> For a fixed-width design, one of your most important decisions is selecting the design width. Your choice should work well for your targeted audience. Make it too narrow and much of the visitor's screen goes to waste; make it too wide and visitors will need to scroll horizontally (which people hate to do^{<a href="#c1">1</a>}). </p> <p> For almost all the sites I work on, my clients prefer not to exclude any significant chunk of the population. This results (today) in choosing an 760-pixel-wide design for an 800-pixel-wide screen. Once a Web site is in operation, you can use the server log files to validate your decision. For example, in the last five months 12.5% of all visitors to my Tiger Heron site used an 800x600 display&mdash;not a large number, but still significant. No one used a smaller screen size. </p> <p> An alternative approach is to create more than one design and use Javascript to select the corresponding stylesheet based on the visitor's screen size. In practical terms, one 800- and one 1024-pixel-wide design is probably sufficient for almost every site. For screens larger than 1024 pixels wide, maximizing the browser window becomes a matter of preference rather than necessity, so the browser width won't always be the same as the screen width. Even if maximized on the largest of today's displays, a 1024-pixel-wide design does a good job of filling the screen. </p> <p class="captionedImage"> <a href="http://www.yahoo.com/"><img src="/files/blogs/designer/node43/yahoo.jpg" alt="Yahoo's 1024-pixel-wide Web site" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"></a> <span class="imgCaption">Yahoo's 1024-pixel-wide Web site on a 1920x1600 display.</span> </p> <p> What about smaller displays, such as phones and PDA's? I don't have much experience with these, but my instincts say that creating an effective Web site for small displays involves more than just switching a stylesheet. Suggestions, anyone? </p> <h2>Select appropriate font sizes</h2> <p> Font sizes are a design choice. But here's a problem: in print, 12 point text is the same size everywhere. On the Web, the size of 12 point (or even 12-pixel) text depends on the pixel density of the display&mdash;the higher the density, the smaller the text. If you use a single stylesheet, your fonts need to be large enough to be readable on high-pixel-density displays, but not so large as to overwhelm a viewer on a low-pixel-density display. If you select your stylesheets based on the monitor's resolution, you can choose larger font sizes for monitors with higher resolution. </p> <h2>Select the line length</h2> <p> In print, the typical line length is 10 to 12 words. If that sounds like a small number, pick up some books and start counting&mdash;you might be surprised. At an average word length of five characters plus a space, this translates to 60 to 72 characters per line (CPL). </p> <p> While the print world has a time-tested rule for line lengths, I'm not yet convinced that we have the answer for Web pages. In a study^{<a href="#c2">2</a>} about the effects of line lengths when reading from a computer display, researchers found that reading speeds <em>increased</em> with line lengths up to 95 CPL without affecting comprehension (about 16 words per line). Despite this, the study participants were split on which line length they preferred. </p> <p> I checked a number of other sources for recommendations and the only conclusion I can draw is that a range of 60 to 95 CPL is probably fine. Much longer or shorter lines can be unpleasant, although I suspect you can go somewhat over 95 CPL when information density is critical and the typical visitor will read only a portion of the text. </p> <div style="display: none;"> <p> The rule for line length is supposedly based on the arc of the visual field&mdash;outside of this arc, eye and head movements make for slower and more tiring reading. When I chose some books from my library and measured the text width, I saw line lengths from 3.5 inches (paperback) to 4 inches (hardback). The average reading distance for a book is about 15 inches but it's 24 inches for a computer display. The same visual arc used when reading books covers a range of 5.6 inches to 6.4 inches on a monitor. </p> <p> Given a targeted display size, we can determine the line length in pixels. For example, over the last four months, about 50% of the visitors to the Tiger Heron Web site used a 1024 x 768 display. Guessing a 17 inch display size, we get a pixel density of 75 pixels-per-inch. So our 5.6 inch to 6.4 inch range becomes 420 to 480 pixels. With a 12-pixel Verdana font, this yields from 53 to 60 CPL. Larger displays could accommodate more characters within the same visual arc. </p> </div> <h2>Set the leading</h2> <p> Leading is the typesetter's term for the line-to-line spacing. Studies^{<a href="#c3">3</a>} indicate that tight leading doesn't affect reading speed or comprehension, but people still find it uncomfortable. On sites where information density is of primary importance, you may opt to use tight leading. I've found a 1.2 to 1.4 range works well for comfortable reading. </p> <h2>Use an appropriate amount of white space</h2> <p> The usability studies I've seen have been contradictory on the topic of white space. For example, one study^{<a href="#c4">4</a>} found that reducing white space also reduced the time it took for people to locate information on a Web site. A second study^{<a href="#c5">5</a>}, however, found that it also decreased comprehension. I suspect that the results in the first study, conducted in 2002, were due to the advantage of squeezing more information onto a small screen. </p> <p> My advice on whether to increase or decrease white space depends on the amount of time a visitor is expected to spend on a page. Blogs should use white space to increase the readability and appeal of a page. A search results page, on the other hand, could sacrifice white space to increase the useful content on the screen. </p> <h2>Center the design</h2> <p> <span class="floatRight"> <a href="http://www.csszengarden.com/?cssfile=/185/185.css&amp;page=2"> <img src="/files/blogs/designer/node43/left-aligned.png" alt="A left-aligned design" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"> </a> <span class="imgCaption">A left-aligned design from the <a href="http://www.csszengarden.com/">CSS Zen Garden Web site </a></span> </span> I was a fan of left-aligned designs right up until I purchased my 24-inch 1920x1200 display. Now I'm a fan of centered designs. When I maximize the browser window, a left-aligned design puts the content uncomfortably on the left. I prefer to maximize the window to focus on a page without distractions. In the case of left-aligned designs,however, I can only center them if the window is not maximized, which reveals the background clutter. </p> <h2>Integrate the design with the background</h2> <p> A fixed-width design in a large or maximized window is going to have some unused area. This area is sometimes ignored, but it should be treated as part of the overall design. It can be left plain when appropriate to the site. I tend to spend more time on pages with visually exciting designs. </p> <p> Two techniques that work well for me. Perhaps you have others? </p> <ul> <li> Compose the design so that the page looks like a piece of paper on a desk. Shading or a complementary background pattern (or both) can improve the visual appearance.<br> <span class="captionedImage"> <a href="http://www.csszengarden.com/?cssfile=194/194.css"><img src="/files/blogs/designer/node43/css%20zen%20garden%203%201920x1200.jpg" alt="A paper-on-desk style design" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"></a><br> <span class="imgCaption">A paper-on-desktop style design from the <a href="http://www.csszengarden.com/">CSS Zen Garden Web site</a></span> </span> </li> <li style="clear: both;"> Use design elements (e.g. banners, footers) that extend the full width of the browser window.<br> <span class="captionedImage"> <a href="http://osc.templatemonster.com/wordpress_11732/?cat=5"><img src="/files/blogs/designer/node43/ART%201920x1200.jpg" alt="A fixed-width design with some stretchable elements" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"></a> <br> <span class="imgCaption">A WordPress fixed-width design with some stretchable elements (from <a href="http://www.templatemonster.com/">TemplateMonster</a>)</span> </span> </li> </ul> <h2 style="clear: both;">Keep the content area at least the full height of the screen</h2> <p> Fixed-width designs with little content tend to look weak and insubstantial (in slang, "lame"). If all site pages have a lot of content, then you don't need to do anything to overcome this problem. </p> <p> Here's an example of a fixed width design (from my ISP's Web site, <a href="http://www.iinet.com">iinet.com</a>). It looks OK in an 800x600 window: </p> <p class="captionedImage"> <img src="/files/blogs/designer/node43/Fixed%20800x600.jpg" alt="Sample low-content site at 800x600" title="" height="225" width="300" onload="imageSizeToEms(this, pixelToEms)"> </p> <p> Maximized on my 1920x1200 display, it looks as though the designer left before completing the page. </p> <p class="captionedImage"> <img src="/files/blogs/designer/node43/Fixed%20Left%201920x1200.jpg" alt="The same site on a 1920x1200 display" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"> </p> <p> The easiest solution is to create a content area with 100% height and fill it with a pattern or color. What I prefer to do, however, is to use some CSS magic to keep a footer at the lower part of the window or content bottom. SolarDreamStudios has a <a href="http://solardreamstudios.com/learn/css/footerstick/"> nice tutorial</a> with samples. I've tested their technique on IE6, IE7, Firefox 2 and Opera 9. It works on all but Opera&mdash;on Opera it works sporadically (in my testing, it fails when the window is resized vertically, but fixes itself if you resize horizontally). An alternate approach is to use Javascript as described in <a href="http://alistapart.com/articles/footers">this article</a> on <cite>A List Apart</cite>.</p> <p> Below, I've taken the same design and moved a few elements to the bottom. Although it still has the same content, the site looks much more substantial. </p> <p class="captionedImage"> <img src="/files/blogs/designer/node43/Fixed%20Fake%20Stretched%201920x1200.jpg" alt="The previous design, stretched to fill the height" title="" height="183" width="300" onload="imageSizeToEms(this, pixelToEms)"> </p> <h2>Avoid large expanses of undifferentiated text</h2> <p> Without contrast, long areas of text give the eye nothing to use as a reference point and prove unappealing to viewers. Print designers are familiar with this. On the Web, designers sometimes stop designing when the page template is complete; someone else takes care of providing content. Sites designed this way are sometimes easy to spot&mdash;they have a lovely layout wrapped around a mass of text. </p> <p> One of the main advantages of a fixed-width design is the ability to fully lay out the page. We should take advantage of this opportunity. </p> <h1>References</h1> <ol class="references"> <li><a name="c1"></a><cite><a href="http://www.amazon.com/Web-Site-Usability-Designers-Guide/dp/0966064100">Web Site Usability, A Designer's Guide</a></cite>, Jared M. Spool and Tara Scanlon</li> <li><a name="c2"></a><cite><a href="http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm">The Effects of Line Length on Reading Online News</a></cite>, A. Dawn Shaikh</li> <li><a name="c3"></a><cite><a href="http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm">Reading Online Text: A Comparison of Four White Space Layouts</a></cite>, Barbara Chaparro, J. Ryan Baker, A. Dawn Shaikh, Spring Hull and Laurie Brady</li> <li><a name="c4"></a><cite><a href="http://www.amazon.com/Web-Site-Usability-Designers-Guide/dp/0966064100">Web Site Usability, A Designer's Guide</a></cite>, Jared M. Spool and Tara Scanlon</li> <li><a name="c5"></a><cite><a href="http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm">The Effects of Line Length on Reading Online News</a></cite>, A. Dawn Shaikh</li> </ol> <h2>Related reading</h2> <ul class="references"> <li><cite><a href="http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm">The Effects of Line Length on Children and Adults' Online Reading Performance</a></cite>, By Michael Bernard1, Marissa Fernandez, &amp; Spring Hull</li> <li><cite><a href="http://www.humanfactors.com/downloads/nov02.asp">Optimal Line Length</a></cite>, Bob Bailey</li> <li><cite><a href="http://psychology.wichita.edu/surl/usabilitynews/71/page_setting.html">Reading Online Text with a Poor Layout: Is Performance Worse?</a></cite>, Barbara S. Chaparro, A. Dawn Shaikh and J. Ryan Baker</li> <li><cite><a href="http://www.ischool.utexas.edu/~adillon/Journals/Reading.htm">Reading from paper versus screens: a critical review of the empirical literature</a></cite>, Andrew Dillon</li> </ul> http://www.tigerheron.com/article/2007/05/recommendations-improving-fixed-width-designs#comments graphic design tutorial Web design Fri, 25 May 2007 03:19:12 +0000 designer 43 at http://www.tigerheron.com