Design & Publishing . / . WEB . / . Pixelsmith . / . Beware the Single Pixel-Trick

There are six parts to this piece: 1. The Single Pixel GIF 2. How it works 3. Time is everything 4. What stands in the way 5. Do a little testing 6. Work-arounds & Tricks

This white paper is in answer to the hundreds of inquiries we've received both online, and in our workshops concerning spacing, formatting and the use of the single pixel gif. * to get the full effect, you may want to leave, turn your browser graphics off, and then return. If you arrived here with the graphics turned off you should see three broken gif files just below. If you do have graphics on, we've given each of them a one-pixel border so you can see them.

The single pixel gif?

At left is a single pixel gif file.

The long practiced use of an invisible 'spacer' in typography has become popularized by web designers, and now is a commonplace technique for HTML.

We used them in many situations, in the early days of photo-typesetting before desktop computers. Prior to browser support of the 'non-breaking space' <&nbsp;> tag, I even taught the technique in my Web Design workshops around the country. At that time is was one of the only means of establishing spaces in computer files pre-dating html. With the popularization of the web, they became tools for indents, paragraph spacing and leading in HTML. But not without some pain and misery.

As in the old letterpress printing days, a spacer is used to adjust or expand the space between type in handset bodies of copy. Many times the typographer would actually cut rule (strips of lead) by hand to mechanically adjust spacing... sometimes adding several at a time. (Thus the term 'leading')
__ Before the align-right tag was supported by browsers, we would create gif file strips of lead to move copy, or a graphic to the right side of the screen. These were usually a file one-pixel by the width desired, colored to match the background. (This paragraph, and the ones that follow uses white underscores as indent devices. If you arrived here with graphics off, they should still look the same. If your browser doesn't support color type, or the background color "FFFFFF" then you'll see the underscores.)
__ These days, however tastes have changed, and we look elsewhere for copy formatting techniques.
__ With the advent of more refined HTML, as well as the doubling of web traffic with bigger graphics, bandwidth is at a premium. Now the single-pixel trick can cause as much trouble as it solves. The trick causes two distinct drains on the part of the loading browser and its system.

NEXT

Interested in getting published?
__ If you'd like to publish in the pages of WebDesign & Review then capture and read our "Readers Guidelines" found here, or from our On-Demand Documents Desk by sending e-mail to Info@Graphic-Design.com ...Put the word HOSPITALITY, and GUIDELINES in the subject area.