Construction Site

Sep 1, 2001 12:00 PM, BY FRANK JONES

Showcasing your music online has never been so easy. Numerous services generate finished Web pages from your raw images, text, and sound files — often for free. (See “Working Musician: Keep It on the Download” on p. 116 for examples.) But if you're like most musicians, you've invested too much effort in perfecting your recordings to be completely satisfied with a generic Web page. Fortunately, building your own custom Web site is easier (and cheaper) than ever. In this article, I'll explain what you need to know to design a professional-looking and easy-to-use site that presents your music to the world.

SEIZE YOUR DOMAIN

The first step is to register a domain that reflects your band or project's name; the domain is the text between the “www.” and the “.com.” Registering is easy if your band has a unique moniker such as the Screaming Cats, but it is somewhat daunting if you're called Business or Furniture. Don't get frustrated if your band's name is already taken. There are many ways to get around that, such as adding underscores or hyphens between each word or appending “music,” “online,” “site,” and so on to the end of the name. (Come to think of it, www.furnituremusic.com has a nice ring to it. Too bad it's already taken.) Perseverance and creativity are key, so get started immediately.

Several sites let you search for and register any “.com” name in one step. The Internet Corporation for Assigned Names and Numbers (ICANN) site has a complete list of accredited domain name registrars. Check that site first to avoid any fly-by-night scams (see the sidebar “Online Resources”).

FIND A HOST

Once you have your domain name registered, you need to find an Internet service provider (ISP) to host the files that will make up your site. The ISP will store your files on a server, a computer dedicated to delivering Web pages to the Internet.

You might want to go with an established ISP such as Earthlink (www.earthlink.net) or AT&T (www.att.com). Both offer domain and site-hosting services for less than $50 a month. AT&T even has a starter plan that includes domain hosting, ten e-mail accounts, and 100 MB of storage for $25 a month. That is a great value, but local ISPs may offer even more competitive pricing. ISP World (www.boardwatch.com) is the definitive resource for finding the right ISP, local or otherwise. Note that some ISPs prohibit MP3 files or e-commerce, so check the conditions for each plan up front.

If you want to offer online music or video, plan to get at least 50 MB of server space. A 44.1 kHz, 4-minute MP3 file takes up about 3.6 MB at the standard 128 kbps compression setting; video files are even larger. (See “Special Delivery” on p. 74 for information about data compression.)

The Web also has quite a few free options for hosting your site, such as Yahoo's Geocities.com. If you don't care about having a URL like www.geocities.com/screamingcats, you'll be fine. The catch — and free stuff always has a catch — is that Geocities will display a pop-up ad anytime someone surfs by your site. That is definitely annoying, but free lunches are growing increasingly elusive. A sneaky compromise is to register your domain with an inexpensive service, such as GKG (www.gkg.net), that throws in a single-page site you can use to direct visitors to another site, such as your free Geocities site, automatically. One GKG package costs just $9.95 a year.

A SITE FOR MORE BUYS

You have quite a few options for selling your band's CDs and other paraphernalia online. The easiest approach is simply to post your e-mail address and to conduct transactions informally. If you're just starting out, chances are you won't have huge numbers of visitors, so that approach may suit your needs. On the other hand, some visitors won't be comfortable sending checks or credit card information to unknown sites. Start with e-mail and see how sales go and then expand if necessary. Implementing an automated e-commerce system is difficult if you don't have programming experience. If you're up to the challenge, however, head over to Wired's Webmonkey.com or CNET's Builder.com to brush up on your CGI skills.

A simpler option is to redirect visitors to a third-party site to buy your Screaming Cats sweatshirts and commuter cups. Yahoo has a supereasy plan called Yahoo Store; for $100 a month, it takes care of everything for as many as 50 products. The look of the “store” is completely customizable, so it can be seamlessly integrated into your site. For the ultimate in hands-off retail, try CafePress.com. Its service prints and ships all items on demand, collects the payments, and takes a share of the profits. For those who just want to sell CDs, numerous sites such as Amazon and earBuzz.com are waiting to help.

If you want to go the all-digital route and avoid the expense of pressing CDs, consider MP3.com's Payback for Playback proposition. If you sign up for a Premium Artist Service membership ($19.99 per month) and post your songs to MP3.com, the site will pay you royalties based on how often the songs are downloaded. Popular artists can make $5,000 to $10,000 per month (check the MP3.com charts if you don't believe it), so if your tracks are really hot, that could be the way to go.

TOOLS YOU NEED

The primary code that underlies Web pages is called Hypertext Markup Language (HTML). Although quite a few graphic HTML editors are available, you'll get the best results and be ahead of the pack if you take the time to understand the basics of how HTML and the Web really work. HTML is surprisingly easy to grasp. If it weren't, the Web wouldn't have caught on so quickly as a mass-communication medium. So don't be afraid to try coding basic Web pages without the aid of a software-based editor. I've seen brilliant sites created with nothing more than Windows' NotePad or Mac's SimpleText.

Before you buy an expensive HTML book, check out a few Web-developer sites like Builder.com and Webmonkey. Such resources offer vast amounts of wisdom on Web development using easy-to-understand tutorials. One last tip: use your browser's View Source function to take a look at the innards of your favorite Web pages. That is a great way to see how the pros build their sites.

HTML EDITORS

As mentioned, you don't need to wrap your brain around code. Thanks to the enormous growth of the Web, a plethora of top-of-the-line professional tools are available for page building, led by Adobe's GoLive ($284; Mac/Win) and Macromedia's Dreamweaver ($299; Mac/Win). Both applications are almost as deep as today's sequencing environments, so be prepared to crack a manual and spend some time getting past the initial learning curve. Luckily, the documentation (especially Dreamweaver's) is gloriously detailed. Another excellent tool is SoftQuad's HoTMetaL Pro (Win; $129), which began as a souped-up coder's assistant and is now a fairly advanced WYSIWYG (what-you-see-is-what-you-get) editor. All three are excellent tools, but GoLive will probably appeal most to beginners because of its integrated set of basic graphics and QuickTime editors.

Designers with more modest objectives may be able to get by with Netscape's freeware Composer tool (included with the full download of Communicator), 3Dize's shareware Cool Page Pro (Win; $49), or CoffeeCup software's HTML Editor (Win; $49).

Although Microsoft's FrontPage (Win; $149) will do a fair job of creating pages that work beautifully in Internet Explorer (surprise, surprise), the results don't always translate to competing browsers. If you don't care about 25 to 30 percent of your viewers, go for it. But you have been warned.

GRAPHIC EDITORS

HTML editors cover the layout, architecture, and text aspects of Web design, but you still need a graphic editor to design and process your images before adding them to your pages. The grand-daddy of all graphics tools is Adobe's Photoshop (Mac/Win; $609), which is about as advanced as it gets for creating world-class graphics for print and the Web. Corel's CorelDraw and PhotoPaint (Mac/Win; $549 for the set) are also solid tools and slightly less expensive.

However, Macromedia's Fireworks (Mac/Win; $299) is quickly becoming the Web designer's tool of choice. It costs less than half the price of Photoshop and includes tons of Web-specific features, such as the ability to create animation and mouse-over effects for ultrawhizzy interface design. If you shop around, you may even come across discounted bundles. I found a terrific special containing Dreamweaver and Fireworks for less than $300 at Macmall.com.

Even without plunking down a few hundred bucks, you can still get the tools you need to handle basic image editing. Lview Pro ($49) and Jasc's PaintShop Pro ($99) are two excellent graphics apps for Windows. Mac users should check out Graphic Converter ($35), if only for its ability to import, edit, and export nearly every graphic format ever created.

PLAN YOUR SITE

All too often, bands decide that they want a Web site without giving much thought to what information they want to communicate to their visitors. Some good questions to consider before beginning are: Who is your audience? Is this site for fans, record labels, or both? Will you sell your music online? Will you provide information about upcoming gigs? Who will write the site's content? Once those questions are answered, you'll be in a better position to develop the material that will drive repeat visits from fans or interested companies.

Assign or hire a writer. Nothing says “amateur” like bad grammar and lousy spelling. If you're serious about looking professional, get someone who really understands your band — and the English language — to write your content. At a minimum, you'll need someone to write the band bio (if you don't already have one) and instructions about getting the most from each page of your Web site.

If you or your band members don't feel up to the task, consider asking friends, parents, spouses, or even fans. A devoted fan who understands how to communicate your message effectively could be just the ticket. If money is an issue, compensate him or her with complimentary passes, a copy of your CD, a free T-shirt, or even the opportunity to watch you jam during rehearsals.

Make it “sticky.” You want your visitors to keep coming back for more, don't you? Give them a reason. Web designers refer to a site's ability to attract repeat visitors and keep them interested as stickiness (think flypaper). A band bio and some pictures of live gigs just aren't enough. One easy way to engage your audience is to provide a calendar for upcoming gigs. Calendars are a breeze to implement, simple to maintain, and have the added benefit of improving attendance at your shows. If you give your fans easy access to a list of upcoming gigs, they will check back more often. Other tried-and-true approaches for improving your hit count include frequently updated song lyrics (post 'em as you write 'em), tablature (play along at home!), MP3s, live video, and band interviews.

DON'T SELL THE COW

The Napster phenomenon demonstrated conclusively that people love to download free music. However, if you are planning to make money selling your CDs or tapes online, refrain from posting all of your songs as MP3s. Consider posting only one or two strong tracks (but not singles) from the CD.

You might also want to post live versions of your music. The next time you play a gig, record a DAT of the performance and upload a few of the best tracks as MP3s. That is a great way to capture the excitement of a live performance without cutting into your record sales. If you update the MP3s every few months, you'll give your fans a reason to visit the site more often. Alternately, you might want to post excerpts of your songs (one verse and a chorus is fine). If visitors dig the hooks, they might buy the whole track.

Streaming media is an alternative worth considering. Unlike MP3 files, the content remains on your server and is not easily downloaded or traded; it's more like an on-demand radio broadcast than an online record store. Visitors can start to hear the music within seconds, without enduring lengthy downloads. What's more, streaming media can encompass video, text, and graphics as well as audio, so it's possible to create a rich experience for the listener.

PREPARING TO BUILD

Web design is referred to as “architecture” for a good reason. Designing a good site is like building a house — you begin with a foundation; build a framework; and then put up walls, windows, doors, and so on. Once that's completed, you can begin decorating and furnishing your home.

Site map. The foundation and framework for any Web site begins with a site map, which can be created on paper or in a basic drawing program. It should contain a top-down view of all the pages and files your site will include. A basic site map consists of your home page at the top with subpages containing each linked page (see Fig. 1). Once you determine the content you'll post, you can begin crafting a site map that will inform your overall architecture and navigation.

Directory structures. When your site map is complete, create a directory structure. That is extremely important, because it dictates how your site will grow. In serverland, order is everything. If your directories are a mess, updating your Web site is a tedious and frustrating process. First, create a main folder; it will contain your entire site. Within the main folder, create a folder titled images; another called media; and finally, an HTML (text) file named index.html, index.htm, or default.htm (see Fig. 2).

Those folders will contain the components used to create your site, and the HTML file will serve as your home page. Use the HTML file name so that users can simply type the domain name (www.yourband.com) instead of the more unwieldy www.yourband.com/homepage.html. The directory names are fairly self-explanatory. Even if you don't use all of the directories immediately, it's good to have them available for the future.

DESIGN ELEMENTS

Your site's overall design will be the main factor in communicating your musical identity. Think of the site's look and feel as you would a CD cover or gig flyer. Everything has to make sense in context. Other bands' sites are always a good source of inspiration, but it's also worthwhile to grab a copy of Billboard, Spin, or Rolling Stone and look at the ads. Go through your CD collection and pick your favorite covers and liner notes. Examine the design carefully. Is it bright? Is it clean? Is it organic or geometrically oriented? Those elements dictate how your visitors react to your band's image, so take the time to consider your options.

Color palette. Color is the most visceral of all design elements. Coded into our primal awareness, color is universal and crosses all language boundaries. Generally speaking, bright colors signify intensity and energy, whereas dark colors signify coolness and mystery. If your sound has a tropical or upbeat feel, consider oranges, reds, yellows, and greens. On the other hand, if your music has a hyperhip serious sound, think about muted or dark colors with splashes of brightness for contrast.

After selecting your overall palette, pick three or four colors that communicate your style. Unless you're a design pro, do not use more than four colors; doing so will give your site a busy, garish look.

If you are in the dark about color schemes, go to the nearest art-supply store and pick up a color wheel. After a few hours of fiddling around with one, you should have a better idea of what works and what doesn't. (Check out www.makart.com/resources/artclass/cschemes.html for insight about using a color wheel.)

Color tips. If you are still not quite sure where to start, choose a simple background color such as black, white, or gray. As a rule, stick with saturated tones or pastels. Solid primary colors are a no-no when it comes to Web-page backgrounds, because they tend to fatigue the eye. Always use the Web216 color palette (nearly every HTML editor lets you choose from that palette). That will ensure that your colors display uniformly on most, if not all, platforms.

Once you select a background, choose your text color and link colors. For the main text, use black if the background is light and white if the background is dark. Colored text on a colored background often can be difficult to read, so sticking with the basics is always safe. Link colors should complement the background and remain legible at all times; never use blue (or any dark, cool color) on black backgrounds: it's impossible to read.

Background images. Once you have the hang of what background colors work in your design, consider using background images. They give Web sites a more polished look and, in conjunction with tables, can really make a site design pop. Always use backgrounds in GIF or JPEG format (browsers cannot render BMP, TIFF, or other image formats) and use the image to complement and unify the overall design of your site. Again, the overriding concern is to ensure that your text remains legible at all times. Stay away from wild, repeating patterns; they will give your site a cheap, gaudy look. They look cool only for the first five minutes, after which your visitors will grab the ibuprofen and click away to another site.

Fonts. Unlike print media, browsers have only three fonts that are completely cross-platform: Times, Arial, and Verdana. Times is a serif font, which means that each character has curlicues at the edges, like the text you're reading now. Arial and Verdana are sans serif fonts and are cleaner and blockier, like the EM logo.

Unless your design has an antiquated, old-time feel, avoid Times, because it is slightly less legible than Arial or Verdana. I prefer Verdana because it is easy to read at all resolutions. As for font sizes, stay away from very small or very large ones. A good guideline is not to use anything smaller than the standard HTML font size 2 or larger than 4, as it will be illegible or look heavy-handed.

Layout. After you select fonts and colors, begin creating your page layouts. Most basic sites utilize two distinct layout structures — one for the home page and another for the content pages within the site. Sure, it's possible to create additional layouts, but sticking with two to three basic templates provides consistency and makes the site easier to develop, maintain, and navigate.

Have some fun with your home-page layout. Be splashy. Be fun. Focus on a few highlights for the site. If you have some good photos of recent gigs or high-quality band photos, tell the world. If you have a free preview track from your upcoming CD, make it known. The home page is where you make your first impression, so be creative.

Interior pages, however, should be clean, concise, and to the point. Your band's photo gallery should be well organized and easy to browse. The calendar should include all relevant information: date, ticket price, venue, start time, opening act, and maybe even a link to MapQuest.com so that visitors can find the gig with a minimum of fuss.

The best way to achieve a clean layout is through the use of tables. Frames, which give you windows within the main window, are another way to create interesting layout designs. However, frames can be tricky, and they come with their own set of usability constraints. Once again, Webmonkey and Builder.com provide detailed tutorials on the minutiae of tables and frames.

One final note about layout: be sure that your pages render correctly at a screen resolution of 640×480 pixels. Although 800×600 monitor resolution is fairly standard, you ensure maximum compatibility by coding to the lowest common denominator. One of the most annoying things on the Web is having to scroll horizontally because the designer created the site on a high-res monitor. If in doubt, change your screen resolution to 640×480 and review your site. If you find any anomalies, readjust your layout accordingly.

Navigation. Unless you're redesigning BowieNet or MadonnaMusic, chances are you'll deal with only 10 to 15 pages on your site. That should make the normally arduous chore of designing sensible navigation a breeze. Basically, your navigation elements should be omnipresent but relatively unintrusive. Unless you go with fully Flash-based navigation, your work should be relatively painless.

The two customary places for site navigation are the top of the page and the left sidebar. Generally, it's best to place your global navigation (the primary areas of your site) at the top of the page and, if needed, add additional navigation on the left side of the page, with the content in the center or on the right.

Navigation calls for solid graphic-design chops. At a minimum, your top navigation should include your band's logo, the five to seven most important areas of your site, and an e-mail link so your audience can get in touch with you easily. Fig. 3 shows a good example.

GIF VERSUS JPEG

As you design your site's graphics, it's extremely important to understand the distinction between the GIF and JPEG file formats. GIF (Graphics Interchange Format) is excellent for logos and navigation elements because it provides excellent data compression for images that contain only a few colors. However, GIF limits your color palette's size. Although a GIF image can contain any colors, the total number of colors cannot exceed 256. In fact, if your logo and site design are predominantly black and white, you may even be able to get away with a 16- or 32-color palette, which will reduce your file size (and visitors' download times) considerably.

Despite their limitations, GIFs have two advantages. Selected colors can be transparent, which lets the image blend more smoothly into pages with sophisticated backgrounds. GIFs can also be animated so that they can “dance” or display moving content. Most Web graphic apps like Macromedia's Fireworks have tools for animating GIFs, and the classic freeware applet GIFbuilder (Mac) creates animations in a snap.

The JPEG (Joint Photographers Expert Group) format is optimized for photographs and complex graphics, also known as continuous tone images, that have subtle variations in shading. JPEG compression is considered a lossy format, like MP3 in that once a file is compressed and the irrelevant data discarded, it can never be regained. JPEG compression can work wonders on large photographic image files, reducing them in size by orders of magnitude, but it will not provide the same level of compression for solid blocks of color as GIF. As a rule, use GIF for your logos, navigation, design elements, and animations, and use JPEG for photographs and images with a lot of detail.

ALT FOR ONE

The image tag (the code that specifies which graphic to load into a spot on a page) includes an important attribute called alt. This is a space for you to enter information about the image's content. For instance, if you post a picture of your band playing live at Madison Square Garden, you should include the alt text, “The Screaming Cats playing live at Madison Square Garden on April 4, 2001.”

That text is displayed on three occasions: when a visitor places his or her cursor over the image for more than a few seconds; when a visitor has images turned off (pages load much faster with images off, for obvious reasons); and while the page is actually downloading. Adding the alt attribute greatly enhances navigation. Most important, the alt attribute is often the only way for visually impaired visitors to gain information about the type of images, including navigational images, on a page, because text-to-speech tools can read the data aloud. Use the attribute wherever possible.

META TAGS

Often overlooked by novices, the meta tag is used to convey information about a Web page to search engines. That information includes which keywords will trigger a positive correlation in a search. For example, if your music is heavily influenced by deep house and soul, you'll probably want to include keywords such as deep house in your meta tag along with screaming cats (see Fig. 4).

Other uses for the meta tag include creating your own description of the contents for each page in your site. That way, when users come across your site using search engines, they'll know exactly what the site is about.

JAVASCRIPT

Not to be confused with Java, which is a true programming language, JavaScript is an adjunct to HTML that allows for nifty tricks such as changing link colors or images as your mouse passes over them, creating slide shows and menus, and opening up smaller browser windows for displaying video content.

Whereas getting the most from JavaScript requires learning the language's details, a good number of professional HTML and graphic editors include WYSIWYG tools for creating basic interactive animations. Web sites such as http://javascript.internet.com also offer free cut-and-paste code.

MAKE A FLASH

Macromedia's Flash format enables designers to create amazing pages with complex interactivity, multimedia, animation, and even games. Learning to use Flash creation tools such as Macromedia's Flash ($399; Mac/Win) and Adobe's LiveMotion ($299; Mac/Win) can be a daunting task, but the reward is a truly immersing site. The caveat is that the more complex and detailed the Flash component, the larger the file size and download times, so keep that in mind as you explore your options. Additionally, your visitors will need to download the Flash plug-in to see anything.

If you use Flash, consider making two versions of your site. JavaScript programming tricks exist that let browsers automatically redirect users to the appropriate version of your site, but those scripts may not be compatible with every browser. It's also worth noting that many basic functions Flash provides can be duplicated with JavaScript and HTML; it may be best to stick with the basics for your initial site designs so you're not overwhelmed (and potentially disappointed).

VIDEO STAR

If you gig regularly, give some serious thought to posting live videos of your band on your site. That is a terrific way to engage users and could give interested labels a way to see your showcase from the comfort of their ultraplush offices. In this era of inexpensive digital video cameras, you probably know someone who can shoot the video for you. Just be sure to get the cleanest sound possible — a direct feed from the board to the camera is ideal.

You may even be able to edit the video yourself. Several consumer PCs and all currently shipping Macs come with some sort of video-editing software. Apple's iMovie is ridiculously easy to use and delivers great results with titles, effects, and professional-looking transitions. IMovie and several other consumer video editors include built-in compression tools, so exporting the results in a Web-ready format and file size is a piece of cake.

THE NEXT LEVEL

Few things on the Web are more frustrating than waiting for a page to download. As you design your site, keep track of the file sizes of each of the components that make up your pages: images, HTML, Flash, everything. Generally, the total file size for the entire page and all graphics should be less than 50 KB-70 KB at the most.

Possible exceptions to that rule are photo galleries with thumbnails, which should max out at 100 KB, but only if necessary. If you're making extensive use of Flash in your site design, your download times will be negatively impacted. So plan to massage your Flash components separately if needed.

Another tool for advanced designers, or friends of advanced designers, is CGI (Common Gateway Interface) scripting. CGI enables the collection and manipulation of text and offers a few other nifty server-oriented functions. Like JavaScript, CGI is a place where design meets programming, and it's not for the faint of heart. Common uses for CGI include ordering forms, e-mail submission, simple search engines, and hit counters. Many ISPs charge additional fees for the use of CGI, because processing takes place on the servers, which adds to the overall load.

Chances are your site won't require that type of programming, because you can easily create e-mail links for soliciting input from your visitors using the mailto: command. But as your site grows in popularity, you may wish to explore the options that CGI offers. As always, tutorials are available at Webmonkey and Builder.com.

TESTING

Before you launch your site, test it thoroughly with as many users as possible. Recruit family, friends, anyone with a computer and a browser to go through your site and make comments. If possible, have them view the site on your computer first so they know what it's supposed to look like. It's also instructive to watch others try to navigate your site. You'll see pretty quickly what you need to make it more clear. If doing that isn't possible, post or e-mail screen shots for reference. If anyone encounters problems, ask them to capture screen shots and e-mail them to you to examine.

Some areas to check: Does the site look essentially the same on all browsers and platforms? Are any links broken? Are all graphics loading correctly? Do navigation tricks such as mouse-over animations work the same way for everyone? For that matter, is the navigation itself obvious, or do you feel compelled to grab the mouse and explain how to get to a certain feature? Are the audio and video streaming or downloading the right way?

Beware of people who say, “It looks wonderful! Don't change a thing!” You're actively seeking criticism so that you can make your site is the best it can be. Look for f