designing for speed

If speed weren't an issue, web site design would be a whole different ball game. Sites could incorporate many more images with richer, fuller color; structural design could be more complicated; functionality could be enhanced (or obscured, as the case may be); video and animation could be incorporated more freely.

But that's not the world we live in. Our world is filled with impatient users, tempting distractions, slow connections, and fast-moving competitors. Speed matters in our world.

The best web designers have adapted their style to the constraints of the medium, using speed-friendly techniques (color, words, placement, pacing) and creative tweaks to convey meaning and emotion within a site that's also usable and fast.

"For me, as a user, the simpler the better," says designer Jeffrey Zeldman. "So I carry that through in my design. It's all about simplicity."

"For me, web design is about removing everything extraneous, and then sizing and positioning only the elements that are absolutely needed and being willing to accept a simpler version of those elements if it speeds up the site."

You should know where and why you're sacrificing speed. Be conscious of the trade-offs.


Web designers also know there isn't a single universal solution. The need for speed varies from site to site, depending on its focus and audience.

"Speed is important, and it needs to be thought through from the beginning," says designer Wendy Owen. But it doesn't hold equal weight on every project. "It depends on the product and it also depends on which part of the product. In web applications, speed is really important especially if the site's replacing, say, an ATM. But if you're designing a web page for an event, you may be willing to sacrifice speed for a little more glitz."

The most important thing is to know where and why you're sacrificing speed. If you understand what slows sites down, you can design efficiently and be conscious of the trade-offs.

What slows sites down? There are a lot of factors that contribute to drag some visual, some technical and you'll want to address them all. (See improving site speed, p. 218.) But the key issues in design concern the construction of the page and the number and size of images.

What slows you down:

  • Images and multimedia. The number and size of images on your site (not to mention the animation, audio, and video) will affect how quickly your pages are transferred to the user's computer.

  • Page construction. Complicated or sloppy HTML will affect how long it takes the browser to draw your pages. Also, designs based on stylesheets download faster than those based on tables and font tags.

  • Poor organization or non-standard design. If users can't find what they're looking for, your site will seem slow to them even if it loads quickly.

The classic problem graphic designers have is when they translate print designs directly to the web without considering how the pages could be better constructed for the medium. Print-style designs create all kinds of problems: they're laid out in a way that's hard for the browser to re-create, they're heavy on graphics, and they use specific fonts that can only be matched using an image of the text. In other words, they're slow.

So whether you're adapting a design from print or designing anew for the web, here are six tricks that will speed up your pages.

Speed errors. The Lincoln Center web site makes a lot of classic speed errors. The main problem: The design is based on images, and the images haven't been compressed enough. The "Welcome" paragraph, for example, takes up 32K and is barely legible. Plain HTML text would have been a better choice. And each tiny link to each site section takes up 28K. These could have been done in HTML text, or at least could have been much smaller.

graphics/093fig01.jpg

8 tricks to designing for speed:

  1. Surrender some control.

  2. Eliminate the extras.

  3. Compress all images and multimedia.

  4. Replace images of words with words.

  5. Repeat images throughout the site.

  6. Mind the details of your HTML.

  7. Switch to stylesheets.

  8. Follow design conventions.

  1. Surrender some control Let me just come out and say it: Most designers are control freaks. We like to make sure everything is exactly the way we want it. Perfect little fonts and perfect little logos and perfect little lives. Well, I hate to be the one to break it to you, but you have to learn to let go. At least when it comes to your web site.

    One of the biggest speed eaters on the web is overly controlled design. If you try to control your site's appearance down to the pixel, you've probably wasted a lot of space doing it. You've included images of words when you could have just used text. You've designed buttons when you could have used forms. You've used complex tables embedded within tables when you could have simplified the design.

    A better approach is to accept the web for what it is: A flexible medium where speed is key and pages appear differently in different environments. Experienced web designers embrace this challenge and create innovative sites within these constraints.

  2. Eliminate the extras Take a long, hard look at everything on your site, especially on the home page. Consider the images, the animation, the scripts, and ask yourself, "Is this essential to the user experience?" If the answer is no, it's got to go.

  3. Compress all images and multimedia Image "optimization," as it's called, might well be the most important way to speed up your site. Optimization is the blanket term covering everything you can do to reduce the size of your images cropping them, redesigning them, compressing them so they can be easily transferred.

    The goal is to produce an image with the best possible appearance and the smallest possible file size. Compression techniques will vary based on the type of image (photos are different from line illustrations), but every image on your site without exception should be compressed to improve overall speed. See preparing images & multimedia for the web, p. 202.

  4. Replace images of words with words Generally speaking, you want to convey as much of your site's content as possible through plain HTML, using images only where they'll have the most impact.

    One of the most obvious signals that a designer hasn't quite transitioned to the web world is an insistence on turning words into images (designed exactly as he wants them to appear), rather than typing them into HTML. Although it might make you feel better to include your particular favorite font, let's face it, it doesn't always make much of an impact on the user. Even if the user does happen to notice that your headlines are in a nice font, and they say to themselves, "Nice font!" it might not justify the trade-off in speed.

    There are other reasons to leave text as text and save images for pictures. For one thing, images of text aren't searchable. This affects both the accuracy of your internal site search and your ranking on search sites such as Google. (See improving your search rank, p. 309.)

    The other problem is that images of text are unreadable to blind people, whose screen readers can translate HTML text, but have no way of "reading" a picture. (See building for accessibility, p. 182.)

    What's wrong with images of text?

    1. They're slower than HTML text.

    2. They aren't searchable and can't be indexed.

    3. They aren't accessible to blind people.

    That said, there are times when you might choose to present limited amounts of text within an image; if it helps really helps you create the right look and feel for your brand.

    But you have to know how to strike the balance between function and form. My personal guideline is that taglines and headlines can sometimes be displayed as images, but anything longer than a sentence should be in HTML.

  5. Repeat images throughout the site One easy way to speed up your site, with minimal strife, is to take advantage of the browser cache. All browsers have the built-in ability to cache or temporarily store images after they're downloaded.

    If a user arrives at your home page, which displays your logo, and then clicks to a second page which also has your logo their browser will re-display the same logo, rather than downloading it all over again. This greatly decreases the download time and hence increases the speed of the second page.

    Note, however, that this technique only works if you use the exact same image, with the exact same name, stored in exactly the same place. You'll need to centrally store your images (a good idea anyway) to take advantage of this technique.

    If you use slightly different versions of the same image throughout the site (for example, varying the category name under the logo), you might consider breaking it into two images, keeping one piece consistent (and reusable), while varying the other.

  6. Mind the details of your HTML The perceived speed of your site depends not only on how quickly the elements are transferred across the web, but also on how quickly the browser can draw the page. Complicated or just plain sloppy HTML can significantly slow down your site.

    Here's how: When a browser first accesses a web page, it begins drawing as fast as it can. Using the HTML file as a guide, it creates a layout for the page flowing in the text and leaving room for the images, which appear after they've downloaded.

    But your HTML might not provide enough information for the browser to accurately draw the page. The browser might know, for example, that an image should be included, but has no idea how much room it will take up. So nothing can be drawn until the big, fat image loads.

    In some cases, the browser will begin drawing the page and then "realize" it's made a mistake (the image is too large for the space it allotted, for example). The browser will then clear the window and redraw the page, to the dismay and annoyance of the user.

    3 most common HTML speed traps:

    • Image height and width aren't specified

    • Table height and width aren't specified

    • Too many tables are nested inside each other

  7. Switch to stylesheets There are a lot of reasons to convert your site to a stylesheet-based design: It can save you a lot of production time; it can make your site compatible with all browsers; it can bring you into compliance with web standards; it can make your site accessible to the blind. And it can also make your site faster. (See understanding stylesheets, p. 162, and why you should follow web standards, p. 186.)

    Thanks to a clean structure no messy tables, no need to repeat and re-repeat style for text sites designed with stylesheets load much faster than those designed with tables and font tags. The savings in speed and bandwidth can be staggering. Wired News, for example, reduced the size of its pages by half when it converted to stylesheets (even though the design itself became richer). And ESPN cut 50K off each page when it converted. With 40 million pageviews per day, that amounts to an astounding bandwidth savings of 2 terabytes per day (one terabyte is a million megabytes).

    Read more about these redesigns in DevEdge: http://devedge.netscape.com/viewsource/.

  8. Follow design conventions There's more to site speed than fast-loading pages. Your visitors have things to accomplish on your site, and if they can't quickly and intuitively navigate it, their experience will be slow and frustrating.

    One way to ensure a quick and easy experience is following the design conventions that have evolved on the web. If you place elements where users expect them to be and structure transactions the way they expect, they'll move through your site more easily and enjoy it more.

    "As more and more customers are buying more on the web, they want it to be a faster and faster experience," says Hilary Billings, chairman and chief marketing officer of RedEnvelope, a specialty gift store.

    "Customers want to go autopilot," she explained. "They don't want to have to stop and think; they just want to click through really quickly. And it's a lot easier for them if the functional parts of all the major sites are virtually identical. It makes the shopping experience much easier."

    See designing for web conventions, p. 84, and improving site speed, p. 218 for more details.



The Unusually Useful Web Book
The Unusually Useful Web Book
ISBN: 0735712069
EAN: 2147483647
Year: 2006
Pages: 195
Authors: June Cohen

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net