10 Things You Need to Know Before You Call Yourself a Web Designer*

By Sharon Marek and Kenn Moffitt , Web Developers UNT Central Web Support

HTML

HTML (HyperText Markup Language) is not a programming language. It's not even a scripting language. It is a markup language, and there is no substitute for understanding how it works. There are many Web editing programs on the market now that insulate designers from HTML -- and that's not always bad. Never hand coding a nested table again is a wonderful thing. But even the best Web editing programs have minor problems implementing HTML.

You don't need to hand code your entire Web site. You don't even need to know how to hand code your entire Web site (though I'd still recommend it). You do need to know how to find the problems in the code, and how to fix those problems. There are many HTML books and several Web sites, like http://werbach.com/barebones/, to help you learn. Once you know the code, you'll be amazed at how many problems - impossible to fix in the editor - can be fixed easily with a minor adjustment of the HTML.   

Graphic design

Graphic design can make or break a Web site. In fact, the Web as we know it didn't really gain popularity until the Mosaic browser introduced image elements to the Web. But there are a few things that you should know about the use of images. Most important, you should know when to create a GIF or a JPEG and the difference between the two.

A GIF (Graphic Image Format) file contains a palette of 256 unique colors. As a rule, the smaller the number of colors in the image, the smaller the download. A GIF can also contain one color that can be rendered transparent in the browser. The downside of using a GIF is that you are limited to 256 colors. Once you subtract the colors that your browser and the Windows system need, you only have 216 colors of the palette that can display accurately on a 256 color monitor. Luckily, there is a 216 color Web safe palette that you can use to create your images. The Web safe palette is offered at Lynda.com

A JPEG (Joint Photographic Experts Group) file is not limited to the 256 color palette. JPEG is a true color image format and can contain up to 16,777,216 colors. A larger number of colors indicates a larger file, but some image editors can compress JPEG images by accurately recording the brightness of each pixel but averaging out the hues, which our eyes distinguish less accurately. Always save the original version of the image in a lossless format such as a BMP, TIF, or PICT, because a JPEG is an interpretation of the image and not a actual recording of the literal composition of the image. If you save an edited JPEG as a JPEG, you are really creating a copy of a copy, and the image will degrade in quality.  

Content Design

The individual(s) that design a Web site are often not creating the content for that site. But designers are still responsible for the organization and layout of the content. Ensure that the content is Web appropriate -- if you are handed the equivalent of a 20 page paper, you may want to break it up into smaller pieces with direct access to each piece, while also providing a link to a printable version that contains all 20 pages.

Use a consistent layout for the content -- change font, color and style only when necessary. (Few things scream "novice" louder than a dozen fonts with two dozen colors on a single page.) Organize the content by subject, by author, or whatever organizational scheme suits the material. Do not spend all of your time on the graphics and navigation! Make the graphics appropriate to the content, and organize the navigation around the content.

Navigation Design

The best way to design the navigation of a Web site is very low tech -- make a flow chart on a piece of paper. Create (if you haven't already) categories, and subcategories, and assign your content to the appropriate spots. Once you have it all mapped out, ask a lot of end-user questions to see how well your navigation design flows.

Questions to ask include:  'How do I get from the middle of the Blue Widgets to the Red Widgets?'   'How many 'clicks' are there between the home page and the information I want?' 'Can I get to the home page from anywhere in the site?' (Remember that visitors to your site won't always come in the front door. Search engines, for example, are notorious for depositing visitors in the 2nd or 3rd level of a site. Make it easy for them to find your home page.)

Apply your navigation consistently. Choose the best spot on the page (the left margin? repeated at the top and bottom of the page?) and then get together with the graphic designer(s) to ensure that the navigation looks and feels like the rest of the site.

Cross-browser Compatibility

Web pages can display differently in different browsers (like Netscape and Microsoft) and in browser versions (Netscape 3.0 and Netscape 4.0). As mentioned above, an understanding of HTML is vital. Different browsers and browser versions offer different challenges when designing a Web page. For example, if you were to add a <bgsound> tag to a Web page to play a background sound, the tag would be ignored completely by Netscape browsers. If you were to add the <layer> tag to create divisions in a Web page, only Netscape 4.0 or above would recognize the tag. All of the other browsers would ignore the tag and display the contents in a jumbled mess.

With the popularity of Web editing programs such as Microsoft FrontPage or Macromedia Dreamweaver, an understanding of HTML is more important than ever. These editors make it easy to design a Web page. If you don't understand the HTML these editors are writing, you can easily create a page that cannot be viewed by all browsers across the Web. You can actually create pages that crash the browsers of users that are not using the targeted Web browser. Testing your pages on multiple browsers on multiple machines is the best way to to avoid these problems.

Color on the Web

Probably the most common novice Web design mistakes involve color. You can use so much of it -- in so many places -- that you end up with garish, distracting, hard-to-read pages. For great color on the Web information, visit the Color Test Results page, a survey designed to measure the readability of various text/background color combinations. (Black text on a white background was rated the best, red text on a green background was rated the worst.)

It's often difficult to know what colors will look good with other colors, particularly when considering the disparity from browser to browser and platform to platform. Visibone presents the Web-safe palette (arranged symmetrically by hue), and allows fast and easy viewing of user defined color combinations.

Publishing Mechanisms

Creating and producing the Web content is not the end of Web site creation. A Web designer must understand the mechanisms of transferring the content to the Web server. (A Web server is the computer that serves the Web pages to the Internet.) The Web server will be hosted by an Internet Service Provider (ISP), which can be inside or outside the company generating the content. The ISP will decide the mechanism or protocol used to transfer your Web pages to the server. Most ISP's offer the File Transfer Protocol (FTP).

FTP is simply a way to transfer your files from a local computer to the host computer. The ISP will provide you with the location (name) of the server and your password and user ID. You can use a program like Fetch or WS_FTP to connect to the FTP server and transfer your files. When transferring the files, you will need to choose whether you are going to upload binary (image) or text (html) files. If you upload image files as text, or vice-versa, problems can occur. Most FTP programs can automatically detect the type of files being uploaded.

Microsoft FrontPage allows file transfer to a Web server using its own protocol. In order to use the FrontPage Explorer and its transfer mechanisms the FrontPage extensions must first be installed by the ISP on the Web server. Again, you as a designer don't have the choice. The service provider has either installed the FrontPage server extensions or has not. But when creating a Web page with FrontPage, there are several easily added components that require the FrontPage Server Extensions. Components such as the counter, themes and navigation, search capabilities, and forms need the server extensions to run correctly. Always ask if the extensions are supported before you use these FrontPage components in a site. 

A Web Designer is rarely a Webmaster: The Division of Labor

There are lots of titles for Web professionals, and you need to be able to match the title with the responsibilities. This is a new field, and the lines between job descriptions are blurred. A few individuals can do it all, and many perform a combination of these functions.

Generally, Web jobs break out into 5 categories:

• Webmaster: implies administration of a Web server (and often the machine the server runs on).
   
• Web Developer: indicates some level of programming - database designers,  Java or CGI programmers, etc.
  
• Web Designer: creates the overall look and feel of a Web site -- coordinates and participates in the design of site navigation, graphics and content.
  
• Content Creator: generates the content of a Web site -- be it advertising copy, marketing materials, news items, or scholarly articles.
  
• Site Maintenance: the unsung Web workers -- updating links, E-mail addresses, and making small changes in content and navigation

For another view on the division of labor, see Dan Shafer's column at http://www.builder.com

Java Is Not JavaScript

In the classes that we teach, there is usually someone who asks why we don't cover Java or JavaScript.  Java and JavaScript can be used by experienced Web developers to add special effects and functionality to a page. But more important to the novice designer, Java and JavaScript are not the same thing at all. If you want to use the new technologies, you must learn about them first.

Java is a object oriented programming language based loosely on C. Java programs can run in the browser but can also run as stand alone programs (if compiled to do so). Java was touted as the next step in Web page development. Client-side Java has yet to live up to the hype, as its slow on the client-side and not totally reliable in all browsers and versions.  Developers can use server-side Java programs that are quicker and more robust.

JavaScript is a scripting language that extends Web page functionality. JavaScript has no relation to Java. Using JavaScript, you can dynamically change DOM (Document Object Model) properties.  JavaScript be used to create Dynamic HTML that allows the page to change based on events without the page having to download again.

The point is that new technologies have to be researched and understood completely before they are implemented in a mixed Web audience. If you can control the browser and system that your users will access the Web site with, then the risks of using these technologies can be greatly reduced.

Maintenance

Many Web designers create a page or a series of pages for a Web site and consider the job complete, but the creation of a site's contents is just the beginning of the life of that Web site. There will be minor corrections and new information to deal with on a daily basis for busy Web sites. In short, the Web site that you create will have to be maintained, and site maintenance is not usually part of the designer's job. You must be aware of the skill level of the people who will maintain the site. The designer should ensure the appropriate level of complexity for quick and easy maintenance, and be prepared to train the clients in the technologies necessary to maintain the site. [See this month's "WWW@UNT.EDU" column for more information on site maintenance.]

* Skills in Web design and research are starting to pay off big, even for people just entering college. According to PCWorld, "universities and private organizations are awarding scholarships to students with skills in Web research and design."