October 20, 1997
The following article was originally published in the Site Builder Network Magazine "More or Hess" column. (Now MSDN Online Voices "More or Hess" column.
First, "browsing the Web" was what everybody wanted to do. That was all anyone could talk about. It was a badge held up for others to see.
"I know how to browse the Web. I'm special."
Once everybody was doing it, browsing the Web lost its glamour. It wasn't enough. The cool thing was being on the Web. Your own Web page. Your perpetual "Holiday Newsletter" for the entire world to view. Your first attempts were those cryptic URLs, snuggled down in borrowed address space on somebody else's account. Then getting your own domain name was the dernier cri - for example, http://www.RobertHess.com/. Doesn't that sound important?
Now, the newest thing, it seems, is to be a "Web designer." Sure, Web designers have been around for a long time -- but suddenly a lot of folks out there are telling me they design Web sites.
Is this sounding familiar? In this article, I'm going to outline briefly some of the experience, abilities, and tools that budding Web designers should have access to before they even consider calling themselves by that title.
I can't do a lot to help you expose your creativity (at least, not in a short article), but it is the first and most important ingredient in any Web site development. Everybody is creative in some fashion, and the worst Web sites are assembled by people who don't understand their own creativity. This leaves them unable to leverage it into the designs they make. It's like somebody who thinks he is a good singer, and then tries to prove it at every party. Look around, and I'm sure you'll find Web sites that illustrate this point. If you're having trouble accessing your own creativity, you need to hire somebody who is creative enough for the both of you.
The addition of the <IMG> element to HTML was one of the advances that really started moving Web pages into the mainstream. It is now almost inconceivable that a Web page wouldn't have some sort of graphic, or at least elements of color on it somewhere. This means that part of your creative ability needs to include knowing how and where to add just the right amount of visual texture to your pages. That doesn't always have to come from a GIF or JPEG image; it can also come from proper background or text colors, table colors, font faces, or even appropriately weighted white space on your pages. And through the proper use of Cascading Style Sheets (CSS) or Dynamic HTML (DHTML), you can build pages that have a lot of visual excitement without the additional weight a graphics file would add.
The most important aspect of using images is knowing when to stop. It is like adding salt to your cooking: If you can taste the salt, you probably used too much.
As you'd better know, the Web is built on HTML. Lots of tools are available to help you code your pages in HTML. With many of them, you can build an entire site, and never have to deal with a bit of the underlying HTML itself. While there is nothing wrong with those sorts of tools, there is something wrong with Web designers who rely too heavily on WYSIWYG crutches. If you are using a WYSIWYG-type of tool to generate your Web pages, open up one of your bigger HTML files in Notepad, or some other simple text editor. Can you tell me what all of the elements and attributes in that code are doing? If not, you've got a problem.
I still use Notepad for most of my HTML work. When on occasion I need to add something that I know Microsoft FrontPageŽ or Visual InterDev can automate for me, I'll use those tools. A good example of this is building a complex image map, or perhaps connecting up a back-end database. After I finish that specific task, I always go back into the raw code and examine what was constructed. That way, I know what is going into my pages.
One good reason for being comfortable with raw HTML is that the browsers are still evolving at a lightning pace, and the WYSIWYG editors are going to be one or two steps behind them. If you want to utilize some of the advanced features, such as Dynamic HTML or scriptlets, you need to get your fingers dirty in the code from time to time.
The last couple of browser versions from both Microsoft and Netscape have introduced the notion of putting actual code into the HTML that describes the document. This code can either be in the form of script within the HTML stream itself, or it can come from ActiveX controls or Java applets that are embedded in the page. Either way, there are some very exciting levels of interactivity that can be added to a Web page by making it act more like an application than a simple document. Examples of this are calculators for such tasks as measuring calorie intake or mortgage estimates. A more robust example might be an interactive event calendar. Again, the important thing here is to avoid going overboard. In most cases, the user shouldn't be aware that any code is being run on the pages they view. Depending on whom you identify as your users, it might also be important that your pages don't rely too heavily on the code. Some browsers out there won't able to handle it.
Not to be overlooked is your actual connection to the Internet via your Web server. If you don't physically own your own Web server, as well as a direct connection to the Internet, then it is critical that you have an extremely good relationship with your Internet Service Provider (ISP). You need to know intimately what hardware your ISP is running and what back-end capabilities it offers. Is it running Windows NT or UNIX? Does it allow you to put CGI, ISAPI, or ASP code on the server? If so, does it have any restrictions? What about databases? Is your ISP running the FrontPage server extensions? Does it provide any special logging, counting, or reporting services? If you want to add some sort of back-end capability to your pages, check first with your ISP to see what it might already have in place.
As some of you read this, I expect in the back of your minds was the nagging question, "So where can I get my training?" Sure, there might be some services that are starting up to provide Web design training -- but with the Web being so new, my first thought is, "Where did they get their training?"
For the most part, Web design is a very interesting combination of several different disciplines, including graphic art, typography, programming, systems management, advertising, and journalism. If you have a good grasp over any one of those areas, then you have a foot in the door. Take some classes, listen to the experiences that others have had, but then look at the Web based on your past experiences. With so much ground that nobody has covered yet, you are going to run into areas where somebody has to be the trailblazer. Why not you? Take whatever experience you already have, and see how you might be able to take advantage of it on the Web.
A word of warning: If your background is in "Get Rich Quick" chain letters, you might want to look somewhere else.
Robert Hess is an evangelist in Microsoft's Developer Relations Group. Fortunately for all of us, his opinions are his own and do not necessarily reflect the positions of Microsoft.
Creativity: Another look at what not to do can be found in my previous column Web Ugly. HTML coding: Microsoft FrontPage Microsoft Visual InterDev HoTMetaL Pro Frontier PowerSite Graphics: PaintShop Pro Microsoft Image PhotoShop Every month, MSDN Online Voices columnist Nadja Vol Ochs explores Web design issues and solutions in Design Discussion.Tools of the Trade
There really aren't any tools that will make you creative. Reverse psychology might be a good replacement. Vincent Flanders has put together a Web site that illustrates his vision of what not to do on a Web site. If you can't recognize anything on his site that you're doing on the sites you design, you are probably lying to yourself.
There are tons of tools out there to use. I'll assume that you all have Notepad or some other simple text editor that you like. If you want to try something more advanced, here is a list of tools that deal with a variety of different aspects:
A WYSIWYG page- and site-editing tool
A rich tool for managing virtually all aspects of a Web site
A set of tools and utilities targeted at professional Web site publishers
A database/scripting tool targeted at managing the content of large Web sites (currently available only for the Macintosh platform; a Windows version is on its way)
A "Rapid Application Develoment" (RAD)-based tool, targeted at project-oriented team development for building large sites/applications for enterprise environments
The tools you use to develop graphics for your site can run the full gamut from simple bitmap editors to full-blown 3-D production tools. If you have any graphic abilities at all, you've probably already identified the applications you are most comfortable with, but here are a few that span the spectrum:
A simple but comprehensive bitmap editing and conversion tool
Composer
A full-featured image composition tool with lots of rich image manipulation capabilities
A high-end image-manipulation tool that includes all of the popular image-processing capabilities that most sites useScouring the sites
Photo Credit: Russell Illig/PhotoDisc; Neil Beer/PhotoDisc