internet.com
Staff
Magazines

webreference.com

Java Boutique

Search Engine Watch

PC Webopedia

The Web Developer's Virtual Library

 Library

All About Designing for the Web

by Web Developer® Staff

  1. I want to learn how to design Web pages, where do I begin?

  2. Being a Mac based graphic designer, I already know how to use Photoshop and Illustrator. Are there any other essential programs that I should learn?

  3. Is it worth it to learn some Web page authoring programs, or are they just limited shortcuts to limited results?

  4. Since there are many different size computer screens, is there a standard page size that I should be designing within?

  5. How do I scan an image or photo to put on a Web page?

  6. Are there certain memory constraints for graphics or other downloadable files?

  7. Are JPEG's the file of choice for photos and graphics?

  8. How can I control the font/typeface of a Web page?

  9. Will there be a conflict for people using an IBM-based computer to see pages that I have done on a Mac?

  10. How can I see the HTML codes of a finished web page?

  11. Sources and Resources for further design exploration.

I want to learn how to design Web pages, where do I begin?
One of the best springboards for beginning Web page designers is Netscape's Creating Net Sites section. Here you can find a number of valuable resources, including: Page Starter, a step-by-step walk-through of Web publishing using Netscape's Navigator Gold; A Beginner's Guide to HTML, a must for newbies; and Composing Good HTML, which addresses stylistic points of HTML composition.

For introductory tips on Web graphics in particular, visit Netscape's Creating High Impact Documents and The WWW Developer's Virtual Library Graphics section. The latter contains a number of useful resource links, including introductions to GIFs, JPEGs and a comparison of GIF vs. JPEG. If you are using Adobe's Photoshop to create Web graphics, you will definitely want to download the free GIF89a Export plug-in. The plug-in, available for Mac Unix versions of Photoshop, allows you to automatically rasterize, select color palettes, anti-alias, and export transparent GIF images. The plug-in is available for Adobe Illustrator users, as well.

Finally, one of the most important elements in Web design is file size. Learn how to keep the byte count low without sacrificing image quality at sites like the Bandwidth Conservation Society, which offers some useful tips on optimizing graphics for the Web. For a real step-by-step, in-depth tutorial on this subject, however, take a look at Web Developer®'s own Graphics Performance Tuning.

Back to top of page

Being a Mac-based graphic designer, I already know how to use Photoshop and Illustrator. Are there any other essential programs that I should learn?
Yes, there are a number of programs that will make creating graphics for the Web easier. But the real trick is to master specific methods of optimizing Illustrator and Photoshop for the production of Web graphics. Do this, and you should be able to complete just about any Web design task within the limits of Illustrator and Photoshop. Adobe's own site offers a number of good resources for developing Web-specific skills in these programs, including a "Tips and Techniques" section for both Illustrator and Photoshop. Another great site filled with all things Photoshop is the Ultimate Compendium of Photoshop Sites, which includes everything from more tips and tricks to filters and plug-ins and reviews.

Designing graphics for the Web starts to get a little more involved when it comes to creating more complex images, such as image maps or animated GIFs. Luckily, there are a growing number of easy-to-use programs specifically designed to produce these types of enhanced graphics, many of which are available as shareware. One of the best image map utilities for Mac is WebMap, which allows you to designate "hot spots" for hyperlinks using both primitive and organic shapes. Likewise, GIFBuilder for MAC is an equally popular tool in the animated GIF arena.

Back to top of page

Is it worth it to learn some Web page authoring programs, or are they just limited shortcuts to limited results?
If your responsibilities go beyond graphics to the design and layout of Web documents, then an HTML authoring tool and/or HTML converter probably should be included in your software arsenal. These tools automate much of the otherwise tedious and time-consuming aspects of creating Web pages. Even so, editors and converters are no substitute for a good working knowledge of HTML. Many authoring tools, for instance, only give the user limited control over certain elements of page design, so that some "tweaking" of the actual HTML code is necessary to get the desired look or effect.

Some of the leading HTML editors on the Mac platform include Adobe's SiteMill, Bare Bones Software's BBEdit and Miracle Software's World Wide Web Weaver. While the most popular editors for Windows include Microsoft's FrontPage and Internet Assistant for Microsoft Word, Netscape's Navigator Gold, SoftQuad's HoTMetaL PRO and Sausage Software's HotDog Pro. For an in-depth review of the leading HTML editors, check out Web Developer®'s software reviews, including HTML Authoring Tools for Windows and Adobe Sitemill: Site Management Made Easy.

Back to top of page

Since there are many different size computer screens, is there a standard page size that I should be designing within?
This is always a difficult decision, since you can not control the size of a visitor's browser window. In many ways, it is also a Mac vs. PC question as well, since Mac browser windows tend to be more vertical compared to the "landscape" layout of most PCs. Therefore, it is important to do a cross-platform check of your design and layout.

A few general rules of thumb are often applied when it comes to page size. First, because more than 80% of the Web's browsers run on Windows-based PCs, and about the same percentage of these browsers are Netscape Navigator, most content providers still design with this audience in mind. Second, it's often a wise move to offer visitors with smaller screens or laptops a version of your page/site sized just for them, as internet.com's popular site does. And finally, whenever possible use relative size attributes (i.e., percentages rather than specific pixel dimensions) when you are creating scalable page elements such as tables and horizontal rules. That way the page will adapt to the browser, rather than forcing a particular window size on each visitor.

Back to top of page

How do I scan an image or photo to put on a Web page?
If possible, scanning photos or other graphics should be done on a high-quality color scanner. Most vendors offer Mac compatible versions as well as IBM. Prices range from $300 to $3000 for a typical desktop scanner.

When scanning, choose 72 dpi and try to scan close to the size you are going to use the image or a little bigger. Remember that downsizing an image is OK but increasing the size after it has been scanned will cause bitmapping and in severe cases will not even be recognizable. Save the scan as a GIF or JPEG. You can always convert these files later. So, if you saved it as something else when you scanned it, don't worry. Just try to convert the file in a program such as Photoshop before you scan again. It will save you a little time.

Back to top of page

Are there certain memory constraints for graphics or other downloadable files?
Yes. On the Internet, more memory means longer download time. Keep in mind that the average transfer rate of browsers on a 28.8 Kbps modem is only around 2K per second. This means that a 100 KB file will take almost a minute to load, and probably longer when real-world factors such as slow servers and network congestion are part of the equation.

Therefore, it is wise to apply a few rules of thumb when it comes to the size of common graphical elements of Web pages. Large images, such as image maps or logos for instance, should be kept under 50 KB, and closer to 25 KB when possible. Background images should be kept very small, preferably under 5 KB. And total page size--the byte sum of all the graphics plus the HTML file--should also be taken into account. Finally, remember that every element of a page requires a separate connection to the server in order to download. This means that using many graphical elements--no matter how small each of them is--can also increase the total download time.

Back to top of page

Are JPEG's the file of choice for photos and graphics?
Traditionally, JPEGs have been used for photo images, while GIFs have been reserved for graphics such as logos and banners. This is due to JPEG's "lossy" method of compression, which offers smaller file size but does not promise an exact match to the original image upon decompression. While these deviations are usually not noticeable in photos, they can sometimes create problems with certain types of graphics, especially those incorporating text.

Back to top of page

How can I control the font/typeface of a Web page?
The particular font diplayed by a browser, like the size of a visitor's browser window mentioned above, is controlled completely by the end-user. Therefore, any element you want to appear as a fixed font will have to be imported as an image. Each new version of HTML grants more control to the author, however. So content providers may soon be able to decide what font best suits their design.

Back to top of page

Will there be a conflict for people using a PC to see pages that I have done on a Mac?
While the HTML files that you create will be handled by browsers on either platform in much the same way, there are a number of subtle differences between the platforms that should be factored into your design and layout. First, because the two platforms use different color palletes, there is often some disparity in the colors of both graphical images and backgrounds and fonts. Often, images appear much darker on PC screens, and the differences between background and font colors can vary tremendously. Again, a cross-platform sanity check is a must whenever possible. For more on this subject, see The Browser Safe Color Palette, Netscape Palette Notes, and Netscape's Color Cube.

Back to top of page

How can I see the HTML codes of a finished web page?
Most browsers allow you to view the source code of a Web page, either within the browser or via an external viewer. If you are using Netscape, for instance, select the "View" option in the menu bar and click on "Document Source." This will launch a seperate SimpleText or TeachText document on a Mac, or create another Netscape browser window on a PC. This is an excellent way to learn when you're just beginning, because you can view the final product on your screen and refer to the code to see how it was done.

Back to top of page

Sources and Resources for further Web design exploration.

Back to top of page

Web Developer® Site Feedback

Web Developer®
Copyright © 2000 internet.com Corporation. All rights reserved.

http://www.internet.com/

Web Developer® Home Over a dozen topics in detail Live Chat Downloads Book and Product Reviews Threaded Discussions How-To/Articles/Links Developer Daily News Subscribe Search Corporate Information Advertise Events Publications internet.com Home