IN THIS CHAPTER
What other languages do I need to know?
What software and equipment do I need to buy?
The Web has been around for well over a decade now, experiencing euphoric early expansion, an economic-driven bust, an innovation-driven rebirth, and constant evolution along the way. One thing is certain: the Web as a communication and commercial medium is here to stay.
For many people, it’s a call to action—a new career opportunity, an incentive to keep up with competitors, or just a chance to get stuff out there for the world to see. But the world of web design can also seem overwhelming.
Through my experience teaching web design courses and workshops, I’ve had the opportunity to meet people of all backgrounds who are interested in learning how to build web pages. Allow me to introduce you to just a few:
“I’ve been a print designer for 17 years, and now all my clients want web sites.”
“I work as a secretary in a small office. My boss has asked me to put together a small internal web site to share company information among employees.”
“I’ve been a programmer for years, but I want to try my hand at more visual design. I feel like the Web is a good opportunity to explore new skills.”
“I am an artist and I want to know how to get samples of my paintings and sculpture online.”
“I’m a designer who has watched all my colleagues switch to web design in the last few years. I’m curious about it, but I feel like I may be too late.”
Whatever the motivation, the first question is always the same: “Where do I start?” It may seem like there is an overwhelming amount of stuff to learn and it’s not easy to know where to jump in. But you have to start somewhere.
This chapter attempts to put the learning curve in perspective by answering the most common questions I get asked by people ready to make the leap. It provides an introduction to the disciplines, technologies, and tools associated with web design.
That’s an easy one—absolutely not! Although it may seem that everyone in the whole world has a personal web page, or that your colleagues are all light-years ahead of you in web experience, I can assure you that you’re not late.
The Web has become an essential part of standard business practice. We’re at the point where we just assume that a business, regardless of its size, will have a useful web site. It also remains a uniquely powerful tool for self-publishing, whether to a small circle of friends or to a worldwide audience. We can be certain that there will be a steady need for web designers and developers.
The first step is understanding the fundamentals of how the Web works.
Your particular starting point will no doubt depend on your background and goals. However, a good first step for everyone is to get a basic understanding of how the Web and web pages work. That you are reading this book now shows that you are already on the right track. Once you learn the fundamentals, there are plenty of resources on the Web and in bookstores for you to further your learning in specific areas. One way to get up to speed quickly is to take an introductory web design class. If you don’t have the luxury of a full-semester course, even a weekend or one-day seminar can be extremely useful in getting over that first hump.
You’ll learn that the term “web design” has come to encompass many skills, and you don’t necessarily need to learn all of them (most people don’t). This chapter introduces the various disciplines and paths you may take.
Similarly, there are many levels of involvement in web design, from just building a site for yourself to making it a full-blown career. You may enjoy being a full-service web site developer or just specializing in one skill, like Flash development. There are a lot of ways you can go.
If your involvement in web design is purely at the hobbyist level, or if you have just one or two web projects you’d like to publish, you may find that a combination of personal research (like reading this book), taking advantage of available templates, and perhaps even investing in solid web design tools (such as Dreamweaver from Adobe) may be all you need to accomplish the task at hand.
If you are interested in pursuing web design as a career, you’ll need to bring your skills up to a professional level. Employers may not require a web design degree, but they will expect to see sample web sites that demonstrate your skills and experience. These sites can be the result of class assignments, personal projects, or a simple site for a small business. What’s important is that they look professional and have clean, working HTML and style sheets behind the scenes. Getting an entry-level job and working as part of a team is a great way to learn how larger sites are constructed and can help you decide which aspects of web design you would like to pursue.
This one’s a big question. The short answer is “not everything.” A more accurate answer depends on where you are starting and what you want to do.
As mentioned earlier, the term “web design” has become a catch-all for a process that actually encompasses a number of different disciplines, from graphic design to serious programming. We’ll take a look at each of them.
If you are designing a small web site on your own, you will need to wear many hats. The good news is that you probably won’t notice. Consider that the day-to-day upkeep of your household requires you to be part-time chef, housecleaner, accountant, diplomat, gardener, and construction worker—but to you it’s just the stuff you do around the house. In the same way, as a solo web designer, you’ll be part-time graphic designer, writer, producer, and information architect, but to you, it’ll just feel like “making web pages.” Nothing to worry about.
There are also specialists out there whom you can hire to fill in the skills you don’t have. For example, I have been creating web sites for more than a decade and I still hire programmers and multimedia developers when my clients require those features. That allows me to focus on the parts I do well.
Large-scale web sites are almost always created by a team of people, numbering from a handful to hundreds. In this scenario, each member of the team focuses on just one facet of the site building process. If that is the case, you may be able to simply adapt your current set of skills and interests to the new medium.
The following are some of the core disciplines involved in the web design process, along with brief descriptions of the skills required in each area.
If you are not interested in becoming a jack-of-all-trades solo web designer, you may choose to specialize and work as part of a team or as a freelance contractor.
Because the Web is a visual medium, web pages require attention to presentation and design. The graphic designer makes decisions regarding everything you see on a web page: graphics, type, colors, layout, etc. As in the print world, graphic designers play an important role in the success of the final product. If you work as a graphic designer in the web design process, you may never need to learn any backend programming languages. (I didn’t.)
If you are interested in doing the visual design of commercial sites professionally, I strongly recommend graphic design training as well as a strong proficiency in Adobe Photoshop (the industry standard). If you are already a graphic designer, you will be able to adapt your skills to the Web easily. Because graphics are a big part of web design, even hobbyist web designers will need to know how to use some image-editing software, at minimum.
If you don’t have visual design experience, you may want to do some personal research on the fundamentals of graphic design. The following books will give you a good start on rounding out your design skills.
The Non-Designer’s Design Book, Second Edition by Robin Williams (Peachpit Press, 2003)
The Non-Designer’s Web Book, Third Edition by Robin Williams and John Tollett (Peachpit Press, 2005)
Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt College Publishers, 2004)
Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar Learning, 2005).
One easily overlooked aspect of web design is information design, the organization of content and how you get to it. Information designers (also called “information architects”) deal with flow charts and diagrams and may never touch a graphic or text file; however, they are a crucial part of the creation of the site.
It is possible to find courses specifically about information design, although they are likely to be at the graduate level. Again, some personal research and experience working on a team will go a long way toward rounding out this skill. If you think you may be interested in this aspect of web development, check out these books:
Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) for a good overview.
Information Architecture: Blueprints for the Web, by Christina Wodtke (New Riders, 2002)
If graphic design is concerned with how the page looks, interface design focuses on how the page works. The concept of usability, how easily visitors can accomplish their goals on the site, as well as the general experience of using the site, is a function of the interface design. The interface of a web site includes the methods for doing things on a site: buttons, links, navigation devices, etc., as well as the functional organization of the page. In most cases, the interface, information archictecture, and visual design of a site are tightly entwined.
Often, the interface design falls into the hands of a graphic designer by default; in other cases, it is handled by an interface design specialist or the information designer. Some interface designers have backgrounds in software design. It is possible to find courses on interface design; however, this is an area that you can build expertise in by a combination of personal research, experience in the field, and common sense. You may also find these popular books on web usability helpful:
Don’t Make Me Think, A Common Sense Approach to Web Usability, Second Edition, by Steve Krug (New Riders, 2005)
The Elements of User Experience: User-Centered Design for the Web, by Jesse James Garrett (New Riders, 2002)
A fair amount of the web design process involves the creation and troubleshooting of the documents, style sheets, scripting, and images that make up a site. The process of writing HTML and style sheet documents is commonly referred to as authoring.
The people who handle production need to have an intricate knowledge of HTML (the markup language used to make web documents) and style sheets, and often additional scripting or programming skills. At large web design firms, the team that handles the creation of the files that make up the web site may be called the “development” or “production” department. In some cases, the tasks may be separated out into specialized positions for CSS designer, HTML author/coder, and client-side programmer.
This book will teach you the basics of web authoring, including how to write HTML documents, create style sheets, and produce web graphics. Fortunately, it’s not difficult to learn. Once you’ve gotten the fundamentals under your belt, the trick is to practice by creating pages and learning from your mistakes. There are also authoring tools that speed up the production process, as we’ll discuss later in this chapter.
In addition to the HTML document and style sheets, each of the images that appear on the page need to be produced in a way that is appropriate and optimized for web delivery. Graphics production techniques are covered in Part IV.
Advanced web functionality (such as forms, dynamic content, and interactivity) requires web scripts and sometimes special programs and applications running behind the scenes. Scripting and programming is handled by web programmers (also called developers). Developers who specialize in the programming end of things may never touch a graphic file or have input on how the pages look, although they need to communicate well with the information and interface designers to make sure their scripts meet intended goals and user expectations.
Web scripting and programming definitely requires some traditional computer programming prowess. While many web programmers have degrees in computer science, it is also common for developers to be self-taught. Developers I know usually start by copying and adapting existing scripts, then gradually add to their programming skills on the job. If you have no experience with programming languages, the initial learning curve may be a bit steep.
Teaching web programming is beyond the scope of this book. It is possible to turn out competent, content-rich, well-designed sites without the need for programming, so hobbyist web designers should not be discouraged. However, once you get into collecting information via forms or serving information on demand, it is usually necessary to have a programmer on the team.
One of the cool things about the Web is that you can add multimedia elements to a site, including sound, video, animation, and Flash movies for interactivity (see sidebar). You may decide to add multimedia skills to your web design toolbelt, or you may decide to become a specialist. If you are not interested in becoming a multimedia developer, you can always hire one.
There is a constant call for professional Flash developers and people who know how to produce audio and video files that are appropriate for the Web. Web development companies usually look for people who have mastered the standard multimedia tools, and have a good visual sensibility and an instinct for intuitive and creative multimedia design. Professional Flash developers are also expected to know ActionScript for adding advanced behaviors to Flash movies and interfaces.
You’d be surprised at the number of times I’ve heard the following: “I want to get into web design so I went out and bought a book on Java.” I usually respond, “Well, go return it!” Before you spend money on a big Java book, I’m here to tell you that you don’t need to know Java programming (or any programming, for that matter) to make web sites.
The following is a list of technologies associated with web development. They are listed in general order of complexity and in the order that you might want to learn them. Bear in mind, the only requirements are HTML and Cascading Style Sheets. Where you draw the line after that is up to you.
HTML (HyperText Markup Langage) is the language used to create web page documents. The updated version, XHTML (eXtensible HTML) is essentially the same language with stricter syntax rules. We’ll get to the particulars of what makes them different in Chapter 10, Understanding the Standards. It is common to see HTML and XHTML referred to collectively as (X)HTML, as I will do throughout this book when both apply.
(X)HTML is not a programming language; it is a markup language, which means it is a system for identifying and describing the various components of a document such as headings, paragraphs, and lists. You don’t need programming skills—only patience and common sense—to write (X)HTML.
Everyone involved with the Web needs a basic understanding of how HTML works. The best way to learn is to write out some pages by hand, as we will be doing in the exercises in this book.
If you end up working in web production, you’ll live and breathe (X)HTML. Even hobbyists will benefit from knowing what is going on under the hood. The good news is that it’s simple to learn the basics.
It is common to see HTML and XHTML referred to collectively as (X)HTML.
While (X)HTML is used to describe the content in a web page, it is Cascading Style Sheets (CSS) that describe how you want that content to look. In the web design biz, the way the page looks is known as its presentation. CSS is now the official and standard mechanism for formatting text and page layouts.
When this book says “style sheets” it is always referring to Cascading Style Sheets, the standard style sheet language for the World Wide Web.
CSS also provides methods for controlling how documents will be presented in media other than the traditional browser on a screen, such as in print and on handheld devices. It also has rules for specifying the non-visual presentation of documents, such as how they will sound when read by a screen reader.
Style sheets are also a great tool for automating production, because you can make changes to all the pages in your site by editing a single style sheet document. Style sheets are supported to some degree by all modern browsers.
Although it is possible to publish web pages using (X)HTML alone, you’ll probably want to take on style sheets so you’re not stuck with the browser’s default styles. If you’re looking into designing web sites professionally, proficiency at style sheets is mandatory.
Style sheets are discussed further in Part III.
• Checking form entries for valid entries
• Swapping out styles for an element or an entire site
• Making the browser remember information about the user for the next time they visit
Some web sites are collections of static (X)HTML documents and image files, but most commercial sites have more advanced functionality such as forms handling, dynamically generated pages, shopping carts, content management systems, databases, and so on. These functions are handled by special web applications running on the server. There are a number of scripting and programming languages that are used to create web applications, including:
• CGI Scripts (written in C++, Perl, Python, or others)
• Java Server Pages (JSPs)
• Ruby on Rails
Developing web applications is programmer territory and is not expected of all web designers. However, that doesn’t mean you can’t offer such functionality to your clients. It is possible to get shopping carts, content management systems, mailing lists, and guestbooks as prepackaged solutions, without the need to program them from scratch.
If you hang around the web design world at all, you’re sure to hear the acronym XML (which stands for eXtensible Markup Language). XML is not a specific language in itself, but rather a robust set of rules for creating other markup languages.
To use a simplified example, if you were publishing recipes, you might use XML to create a custom markup language that includes the elements <ingredient>, <instructions>, and <servings> that accurately describe the types of information in your recipe documents. Once labeled correctly, that information can be treated as data. In fact, XML has proven to be a powerful tool for sharing data between applications. Despite the fact that XML was developed with the Web in mind, it has actually had a larger impact outside the web environment because of its data-handling capabilities. There are XML files working behind the scenes in an increasing number of software applications, such as Microsoft Office, Adobe Flash, and Apple iTunes.
Still, there are a number of XML languages that are used on the Web. The most prevalent is XHTML, which is HTML rewritten according the the stricter rules of XML. There is also RSS (Really Simple Syndication or RDF Site Summary) that allows your content to be shared as data and read with RSS feed readers, SVG (Scalable Vector Graphics) that uses tags to describe geometric shapes, and MathML that is used to describe mathematical notation.
As a web designer, your direct experience with XML is likely to be limited to authoring documents in XHTML or perhaps adding an RSS feed to a web site. Developing new XML languages would be the responsibility of programmers or XML specialists.
Although Java can be used for creating small applications for the Web (known as “applets”), it is a complete and complex programming language that is typically used for developing large, enterprise-scale applications. Java is considered one of the “big guns” and is overkill for most web site needs. Learn Java only if you want to become a Java programmer. You can live your life as a web designer without knowing a lick of Java (most web designers and developers do).
It should come as no surprise that professional web designers require a fair amount of gear, both hardware and software. One of the most common questions I’m asked by my students is, “What should I get?” I can’t tell you specifically what to buy, but I will provide an overview of the typical tools of the trade.
Bear in mind that while I’ve listed the most popular commercial software tools available, many of them have freeware or shareware equivalents which you can download if you’re on a budget (try CNET’s Download.com). With a little extra effort, you can get a full web site up and running without big cash.
For a comfortable web site creation environment, I recommend the following equipment:
A solid, up-to-date computer. Windows, Linux, or Macintosh is fine. Creative departments in professional web development companies tend to be Mac-based. Although it is nice to have a super-fast machine, the files that make up web pages are very small and tend not to be too taxing on computers. Unless you’re getting into sound and video editing, don’t worry if your current setup is not the latest and greatest.
Extra memory. Because you’ll tend to bounce between a number of applications, it’s a good idea to have enough RAM installed on your computer that allows you to leave several memory-intensive programs running at the same time.
A large monitor. While not a requirement, a large or high-resolution monitor makes life easier. The more monitor real estate you have, the more windows and control panels you can have open at the same time. You can also see more of your page to make design decisions.
Just make sure if you’re using a high-resolution monitor (1280 × 1024 or 1600 × 1200), that you design for users with smaller monitors in mind. Most professional web sites these days are designed to fit in an 800 × 600 monitor as the lowest common denominator. Also keep in mind that when working in high resolution, the text and graphics may look smaller to you than to users with lower resolutions or larger pixel size. Be sure to take a look at your pages under a variety of viewing conditions.
A second computer. Many web designers find it useful to have a test computer running a different platform than the computer they use for development (i.e., if you design on a Mac, test on a PC). Because browsers work differently on Macs than on Windows machines, it’s critical to test your pages in as many environments as possible, and particularly on the current Windows operating system. If you are a hobbyist web designer working at home, check your pages on a friend’s machine.
A scanner and/or digital camera. If you anticipate making your own graphics, you’ll need some tools for creating images or textures. I know a designer who has two scanners: one is the “good” scanner, and the other he uses to scan things like dead fish and rusty pans. Because web graphics are low resolution, you don’t need a state-of-the-art, mega-pixel digital camera to get decent results.
There’s no shortage of software available for creating web pages. In the early days, we just made do with tools originally designed for print. Today, there are wonderful tools created specifically with web design in mind that make the process more efficient. Although I can’t list every available software release (you can find other offerings as well as the current versions of the following programs in software catalogs), I’d like to introduce you to the most common and proven tools for web design. Note that you can download trial versions of many of these programs from the company web sites, as listed in the At a Glance: Popular Web Design Software sidebar later in this chapter.
Web-authoring tools are similar to desktop publishing tools, but the end product is a web page (an (X)HTML file and its related style sheet and image files). These tools provide a visual “WYSIWYG” (What You See Is What You Get; pronounced “whizzy-wig”) interface and shortcuts that save you from typing repetitive (X)HTML and CSS. The following are some popular web-authoring programs:
Adobe (previously Macromedia) Dreamweaver. This is the industry standard due to its clean code and advanced features.
Since acquiring Dreamweaver, Adobe has discontinued GoLive, its own advanced WYSIWYG editor. As of this writing, the last version, CS2, is still available for purchase.
Microsoft Expression Web (Windows only). Part of Microsoft’s suite of professional design tools, MS Expression Web boasts standards-compliant code and CSS-based layouts. Microsoft no longer offers its previous web editor, FrontPage, which was notorious for proprietary and sloppy code.
Nvu (Linux, Windows, and Mac OS X). Don’t want to pay for a WYSIWYG editor? Nvu (pronounced N-view, for “new view”) is an open source tool that matches many of the features in Dreamweaver, yet is downloadable for free at nvu.com.
HTML editors (as opposed to authoring tools) are designed to speed up the process of writing HTML by hand. They do not allow you edit the page visually as WYSIWYG authoring tools (listed previously) do. Many professional web designers actually prefer to author HTML documents by hand, and they overwhelmingly recommend the following four tools:
TextPad (Windows only). TextPad is a simple and inexpensive plain-text code editor for Windows.
BBEdit by Bare Bones Software (Macintosh only). Lots of great shortcut features have made this the leading editor for Mac-based web developers.
TextMate by MacroMates (Macintosh only). This advanced text editor features project management tools and an interface that is integrated with the Mac operating system. It is growing in popularity because it is easy to use, feature-rich, and inexpensive.
You’ll probably want to add pictures to your pages, so you will need an image-editing program. We’ll look at some of the more popular programs in greater detail in Part IV. In the meantime, you may want to look into the following popular web graphics–creation tools:
Adobe Photoshop. Photoshop is undeniably the industry standard for image creation in both the print and web worlds. If you want to be a professional designer, you’ll need to know Photoshop thoroughly.
Adobe (Macromedia) Fireworks. This web graphics program combines a drawing program with an image editor and vector tools for creating illustrations. It also features advanced tools for outputting web graphics.
Adobe Photoshop Elements. This lighter version of Photoshop is designed for photo editing and management, but some hobbyists may find that it has all the tools necessary for putting images on web pages.
Adobe Illustrator. This vector drawing program is often used to create illustrations. You can output web graphics directly from Illustrator, or bring them into Photoshop for additional fine-tuning.
Corel Paint Shop Pro Photo (Windows only). This full-featured image editor is popular with the Windows crowd, primarily due to its low price (only $99 at the time of this printing).
Because this is a book for beginners, I won’t focus on advanced multimedia elements; however, it is still useful to be aware of the software that is available to you should you choose to follow that specialty:
Adobe (Macromedia) Flash. This is the hands-down favorite for adding animation, sound, and interactive effects to web pages due to the small file size of Flash movies.
Now that you’re taking that first step in learning web design, it might be a good time to take stock of your assets and goals. Using the lists in this chapter as a general guide, try jotting down answers to the following questions:
Apple Final Cut Pro. For more advanced video editing, Final Cut Pro is an industry favorite.
Microsoft Windows Movie Maker. Windows Media is growing in popularity on the Web. This simple movie editor for Windows lets you easily create movies in Windows Media format. Microsoft also offers Windows Media Encoder to convert existing movies to Windows Media format.
Adobe After Effects. This is the industry standard for creating motion graphics and visual effects.
Sony Sound Forge. Sound Forge is a full-featured professional audio editing program. Sony also offers Sound Forge Audio Studio for entry-level users.
Audacity. For the budget-conscious, Audacity is a powerful, cross-platform, open source audio editing program, and you can’t beat the price...it’s free!
Because you will be dealing with the Internet, you need to have some tools specifically for viewing and moving files over the network:
A variety of browsers. Because browsers render pages differently, you’ll want to test your pages on as many browsers as possible. There are hundreds of browsers on the market, but these are best supported on Windows and Macintosh:
Internet Explorer (the current version and at least two prior versions)
Macintosh OS X:
Macintosh OS 9:
Internet Explorer 5 (Note that most developers do not test on this browser because it accounts for a miniscule fraction of web traffic.)
A file-transfer program (FTP). An FTP program enables you to upload and download files between your computer and the computer that will serve your pages to the Web. The web authoring tools listed earlier all have FTP programs built right in. There are also dedicated FTP programs as listed below. See Chapter 21, Getting Your Pages on the Web, for more information on file uploading.
Macintosh OS X:
Terminal application. If you know your way around the Unix operating system, you may find it useful to have a terminal (command line) application that allows you to type Unix commands on the server. This may be useful for setting file permissions, moving or copying files and directories, or managing the server software.
Windows users can install a Linux emulater called Cygwin for command line access. There is also PuTTY, a free Telnet/SSH client. Mac OS X includes an application called Terminal that is a full-fledged terminal application giving you access to the underlying Unix system and the ability to use SSH to access other command line systems over the Internet.
The lesson to take away from this chapter is: “you don’t have to learn everything.” And even if you want to learn everything eventually, you don’t need to learn it all at once. So relax, don’t worry. The other good news is that, while many professional tools exist, it is possible to create a basic web site and get it up and running without spending much money by using freely available or inexpensive tools and your existing computer setup.
As you’ll soon see, it’s easy to get started making web pages—you will be able to create simple pages by the time you’re done reading this book. From there, you can continue adding to your bag of tricks and find your particular niche in web design.
Each chapter in this book ends with a few questions that you can answer to see if you picked up the important bits of information. Answers appear in Appendix A.
1. Match these web professionals with the final product they might be responsible for producing.
A. Graphic designer
B. Production department
C. Information designer
D. Web programmer
_____ (X)HTML and CSS documents
_____ PHP scripts
_____ Photoshop page sketch
_____ Site diagram
2. What does the W3C do?
3. Match the web technology with its appropriate task:
A. HTML and XHTML
D. Ruby on Rails
_____ Checks a form field for a valid entry
_____ Creates a custom server-side web application
_____ Identifies text as a second-level heading
_____ Defines a new markup language for sharing financial information
_____ Makes all second-level headings blue
4. What is the difference between frontend and backend web development?
5. What is the difference between a web-authoring program and an HTML-editing tool?