2 weeks ago


126 The Principles of

126 The Principles of Beautiful Web Design to consider text image replacement. Note that this doesn't mean just tossing an tag with your text straight into your HTML. Using an image tag to display text is neither accessible nor search engine friendly—because any visitors who’re unable to see the image will be left in the dark. This includes search engine spiders, of course. Instead, you’ll want to mark up your text as actual text. Take the example of the Barstow website 9 , shown in Figure 4.4. It features rounded vintage text, which looks great and stands out against all of the straight and grid-based typography on the web. If I wanted to make the logo and text accessible, I would make it an HTML element and give it a class of logo-active. To replace that with an image, I’d then use CSS to set the width and height of the link to the size of my image, and set the display property to block, since links are inline by default. Then, I typically use what’s known as the Phark Method of image replacement. This involves setting my image as the background of the element, and then adding a negative text-indent value high enough to move my text content out of the block (and off the screen!). The CSS would look like this: .logo-active { display:block; width:300px; height:150px; background:url(/images/clowns.png); text-indent:-9999px; } Figure 4.4. The Barstow website 9

Typography 127 What’s up with Phark and dotted outlines? As you click on or tab to a link in an HTML document, you activate its :focus state. By default, Firefox adds a dotted border around focused links using the outline property, so that users navigating a site by keyboard can see what link they’re currently on. That outline usually includes your negative indented text, so users will see a dotted outline that extends all the way to the edge of the page. There are two options for fixing this. You can add overflow:hidden to the link to contain the outline, or remove it entirely by adding outline:0. If you do this, be sure to define a :focus style for users that might be navigating by keyboard. Displaying text in images works well for static text that changes infrequently, but what if you want to use a specific font for text that changes periodically, like the headline of a news article? Constantly creating and uploading new text graphics would be a tedious task, even for a designer who’s a pro at using image-editing software. If, for example, you’re setting up a blog for a client who has no idea how to use Photoshop or write HTML, you might as well forget about this option. Another image replacement option is to use SVG, or Scalable Vector Graphics. SVG has a small file size, and is infinitely scalable. You can use it in an tag, and you can size it with CSS. The benefits of SVG are that it doesn't lose clarity as you scale it, and that you have a lot of control over how it appears. Sam Ruby's site, Intertwingly 10 , shown in Figure 4.5, uses SVG instead of images to accompany each article. Figure 4.5. Sam Ruby's Intertwingly You can learn more about SVG at the following resources: 10

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
PDF Specimen Booklet - Fontworks UK Ltd
Responsive Email Design Guide - e-Dialog
Visual Design for Library Websites - WebJunction
Visual Design and Web Site Usability
The Complete Guide to a High Converting Website