Building Web Sites All-in-One For Dummies® (20 page)

In general, though, the aesthetics of using a special font are overshadowed by the poor user experience that is created by placing all your text in a graphic.

Like with many other aspects of Web design, always design for the medium you're using. Web sites aren't the same as printed materials. Printed materials allow for a lot more control over body copy than Web pages do. Make sure you don't make the mistake of choosing the pretty font over your visitor's ability to use the site.

To get the best results from the fonts you choose, just remember a few rules:

•
Web is not print.
Web pages are
not
printed brochures minus the trip to the printer. Choose fonts that are available on the visitor's machine. Don't try to use a special font that you bought. Users won't have it, and their systems will substitute the font they don't have with one they do.

•
Be a designer but not a control freak.
You have a lot of control over how your pages look, but ultimately, the user can make many adjustments and settings that can change the way his computer displays your design. Fonts can be substituted, sizes can be changed, and CSS can be overridden to help the visitor. It's a fact of the Web. Embrace it; don't try to force it to act like print.

•
Make your site user friendly.
Don't embed your text in graphics unless it's a logo, a masthead, or a special promotional graphic that really needs a special font. When you do embed text, make sure you include an alt text that has the same text in it. Otherwise, some of your visitors won't know what the text in your graphic says.

•
Use modern standards to build your site.
Use CSS to make modifying and updating your site easier and the user experience better for your visitors. Make sure your code is compliant, well written, and clean. Not everyone using the Web is using a traditional browser.

Implementing Stock Images and Other Elements

Sometimes, you need to use photos, audio files, or other materials that were produced by someone else. When you do so, make sure that you respect the copyrights of others. Stealing images or other materials from a Web site is never okay and can cause large problems if the rightful owner finds out you have been stealing. Everything is subject to copyright laws: multimedia, audio and music, graphics, photos, text, fonts — everything. It's never okay to use things you have found on the Web without permission of the rightful owner.

Many companies sell stock photography, video footage, and music or audio files. Make sure you understand what you're purchasing before you buy.

Different types of licenses are applied to materials available on the Web. Keep these points in mind as you shop around:

•
Buy only from the person who actually has the right to sell the material.
When you're using materials produced by someone else, you must buy them from the person who actually has the right to sell them. We recommend buying from reputable companies, which might cost you more, but the quality of the materials and the knowledge that you're getting legal materials is well worth it.

•
Make sure that the license for the materials you buy specifically states that you can use them for the purpose you're buying them for.
Sounds strange, but sometimes, for example, a license clears you to use an image in printed materials but not on the Web — or the other way around. Read the license carefully, and if you have questions, consult your lawyer. Make sure that if a time frame is involved (you can use a song on your site for one year, for instance), you adhere to the restriction.

•
If you intend to modify the materials, make sure the license allows modification.
Some licenses state that you can't create derivative works, so making a different item from the original is not okay.

•
When buying on behalf of a client, make sure that it's okay for you to do so.
If it isn't, your client will have to purchase the images. Some clients prefer to do it that way, anyway.

While shopping for stock imagery, you're likely to run into stock photo jargon. The following list highlights just some of the terms you might see. Make sure you always read the licensing terms before using any stock materials.

•
Royalty-free:
These materials will have specific rules that you will have to abide by while using them. When you buy access to royalty-free materials, you're buying the right to use the materials for the specific purpose stated in the license. You don't own the copyright to the materials. The copyright remains with the
copyright holder:
the originator or, in some cases, a company that has purchased the rights.

•
Terms of use:
These are the rules that come along with royalty-free materials. You must read the terms of use carefully and make sure that the materials you're buying access to can be used for your intended purpose.
Remember:
You don't actually own the materials, just the right to use them as specified in the terms of use.

•
Educational use:
Some materials might be marked as “for educational use” or something similar. Again, read the documentation that accompanies the materials because the copyright holders have the right to create their own terms. In general, the term
educational use
— as applied to any materials, including software — means just that: The materials are to be used by educational institutions, students, and teachers for projects relating to the institution or to educational pursuits. Copyright owners restrict what types of projects are allowed. In general, educational use licenses are less expensive than commercial licenses. Because of this, commercial use is probably prohibited.

•
Rights managed or managed rights:
These types of materials are licensed on a use-by-use basis. The fees for these images vary based on what the image will be used for, how long the image will be used (is it for a short promotion or a longer one?), where it will be used (just in one state or all over the world?), what medium it will be used in (print, Web, video — all three?), and other factors.

•
Comp or preview images:
These are versions of the materials that you can use temporarily in a project while you are in the design/approval phase of the project. They are usually provided at a lower quality and with a
watermark
(overlaid text or logo that makes them unusable). They serve the important function of making sure everyone approves of the materials before any money is spent obtaining licensing to use them. It's not all right to use preview or comp images in final projects. Figure 4-11 shows a sample of a watermark. If a client provides you with images that have similar marks, ask them where the licensed copies are. Licensed copies don't have a watermark.

Facelifting an Existing Site

Knowing a little bit about fonts, colors, and images — all of which we discuss in the previous sections of this chapter — can help you effectively apply these elements to a project. A graphical makeover on a small- to medium-sized site can be a quick and easy project if your site is constructed well. If you haven't already done some planning for your project, see Book I, Chapter 1, which contains information that can help you get organized before you roll up your sleeves and get into the work of making changes to a site.

Sometimes a site has good content but just needs a quick freshening up. If you design your sites using HTML and CSS, you can easily modify the look and feel. A
facelift
differs from a
redesign
in that a facelift requires only that you change colors and graphics. Layouts, site structure, and content all stay the same. When you need to redesign a site, you must examine the content, code, layout, structure, and all components to determine what to change or re-integrate into the new site. Comparatively, a
redesign
is a major project. A facelift — which we discuss throughout the rest of this chapter — is just a little sprucing up.

Choosing a new color scheme

Make sure you choose colors that work with any established printed materials that your client is using and that convey the right message. For example, if your site is for a toy store, choose bright, happy colors. If your site is about a more serious subject, choose a conservative palette. As you are choosing your colors, remember you will need a main color, a second complementary color, and a third accent color. You can even choose two complementary colors, but don't try to use too many or your design will become confusing to users. Choose your accent color carefully and use it sparingly, as shown in Figure 4-12. You should use the accent color in small amounts to bring attention to an area of the page. For example, you could use a bright accent color in a thin line at the bottom edge of a banner to bring attention to the main navigation area. Make sure you don't overdo it, though. A little is great; a lot will overpower the design.