Showcasing your music online has never been so easy. Numerousservices generate finished Web pages from your raw images, text, andsound files — often for free. (See “Working Musician: KeepIt on the Download” on p. 116 for examples.) But if you're likemost musicians, you've invested too much effort in perfecting yourrecordings 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 todesign a professional-looking and easy-to-use site that presents yourmusic to the world.
SEIZE YOUR DOMAIN
The first step is to register a domain that reflects yourband or project's name; the domain is the text between the“www.” and the “.com.” Registering is easy ifyour band has a unique moniker such as the Screaming Cats, but it issomewhat daunting if you're called Business or Furniture. Don't getfrustrated if your band's name is already taken. There are many ways toget around that, such as adding underscores or hyphens between eachword or appending “music,” “online,”“site,” and so on to the end of the name. (Come to think ofit, www.furnituremusic.com has a nice ring to it. Toobad it's already taken.) Perseverance and creativity are key, so getstarted immediately.
Several sites let you search for and register any “.com”name in one step. The Internet Corporation for Assigned Names andNumbers (ICANN) site has a complete list of accredited domain nameregistrars. Check that site first to avoid any fly-by-night scams (seethe sidebar “Online Resources”).
FIND A HOST
Once you have your domain name registered, you need to find anInternet service provider (ISP) to host the files that will make upyour site. The ISP will store your files on a server, acomputer 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-hostingservices for less than $50 a month. AT&T even has a starter planthat includes domain hosting, ten e-mail accounts, and 100 MB ofstorage for $25 a month. That is a great value, but local ISPs mayoffer even more competitive pricing. ISP World (www.boardwatch.com) is the definitive resource forfinding the right ISP, local or otherwise. Note that some ISPs prohibitMP3 files or e-commerce, so check the conditions for each plan upfront.
If you want to offer online music or video, plan to get at least 50MB of server space. A 44.1 kHz, 4-minute MP3 file takes up about 3.6 MBat the standard 128 kbps compression setting; video files are evenlarger. (See “Special Delivery” on p. 74 for informationabout 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 URLlike www.geocities.com/screamingcats, you'll be fine.The catch — and free stuff always has a catch — is thatGeocities will display a pop-up ad anytime someone surfs by your site.That is definitely annoying, but free lunches are growing increasinglyelusive. A sneaky compromise is to register your domain with aninexpensive service, such as GKG (www.gkg.net), that throws in a single-page site youcan use to direct visitors to another site, such as your free Geocitiessite, 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 otherparaphernalia online. The easiest approach is simply to post youre-mail address and to conduct transactions informally. If you're juststarting out, chances are you won't have huge numbers of visitors, sothat approach may suit your needs. On the other hand, some visitorswon't be comfortable sending checks or credit card information tounknown sites. Start with e-mail and see how sales go and then expandif necessary. Implementing an automated e-commerce system is difficultif you don't have programming experience. If you're up to thechallenge, however, head over to Wired's Webmonkey.com orCNET's Builder.com to brush up on your CGI skills.
A simpler option is to redirect visitors to a third-party site tobuy your Screaming Cats sweatshirts and commuter cups. Yahoo has asupereasy plan called Yahoo Store; for $100 a month, it takes care ofeverything for as many as 50 products. The look of the“store” is completely customizable, so it can be seamlesslyintegrated into your site. For the ultimate in hands-off retail, tryCafePress.com. Its service prints and ships all items on demand,collects the payments, and takes a share of the profits. For those whojust want to sell CDs, numerous sites such as Amazon and earBuzz.comare waiting to help.
If you want to go the all-digital route and avoid the expense ofpressing CDs, consider MP3.com's Payback for Playback proposition. Ifyou 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 basedon how often the songs are downloaded. Popular artists can make $5,000to $10,000 per month (check the MP3.com charts if you don't believeit), 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 MarkupLanguage (HTML). Although quite a few graphic HTML editors areavailable, you'll get the best results and be ahead of the pack if youtake the time to understand the basics of how HTML and the Web reallywork. HTML is surprisingly easy to grasp. If it weren't, the Webwouldn't have caught on so quickly as a mass-communication medium. Sodon't be afraid to try coding basic Web pages without the aid of asoftware-based editor. I've seen brilliant sites created with nothingmore than Windows' NotePad or Mac's SimpleText.
Before you buy an expensive HTML book, check out a few Web-developersites like Builder.com and Webmonkey. Such resources offer vast amountsof wisdom on Web development using easy-to-understand tutorials. Onelast tip: use your browser's View Source function to take a look at theinnards of your favorite Web pages. That is a great way to see how thepros build their sites.
As mentioned, you don't need to wrap your brain around code. Thanksto the enormous growth of the Web, a plethora of top-of-the-lineprofessional tools are available for page building, led by Adobe'sGoLive ($284; Mac/Win) and Macromedia's Dreamweaver($299; Mac/Win). Both applications are almost as deep as today'ssequencing environments, so be prepared to crack a manual and spendsome time getting past the initial learning curve. Luckily, thedocumentation (especially Dreamweaver's) is gloriouslydetailed. Another excellent tool is SoftQuad's HoTMetaL Pro(Win; $129), which began as a souped-up coder's assistant and is now afairly advanced WYSIWYG (what-you-see-is-what-you-get) editor. Allthree are excellent tools, but GoLive will probably appealmost to beginners because of its integrated set of basic graphics andQuickTime editors.
Designers with more modest objectives may be able to get by withNetscape's freeware Composer tool (included with the fulldownload of Communicator), 3Dize's shareware Cool PagePro (Win; $49), or CoffeeCup software's HTML Editor (Win;$49).
Although Microsoft's FrontPage (Win; $149) will do a fairjob of creating pages that work beautifully in InternetExplorer (surprise, surprise), the results don't always translateto competing browsers. If you don't care about 25 to 30 percent of yourviewers, go for it. But you have been warned.
HTML editors cover the layout, architecture, and text aspects of Webdesign, but you still need a graphic editor to design and process yourimages before adding them to your pages. The grand-daddy of allgraphics tools is Adobe's Photoshop (Mac/Win; $609), which isabout as advanced as it gets for creating world-class graphics forprint and the Web. Corel's CorelDraw and PhotoPaint(Mac/Win; $549 for the set) are also solid tools and slightly lessexpensive.
However, Macromedia's Fireworks (Mac/Win; $299) is quicklybecoming the Web designer's tool of choice. It costs less than half theprice of Photoshop and includes tons of Web-specific features,such as the ability to create animation and mouse-over effects forultrawhizzy interface design. If you shop around, you may even comeacross discounted bundles. I found a terrific special containingDreamweaver and Fireworks for less than $300 atMacmall.com.
Even without plunking down a few hundred bucks, you can still getthe tools you need to handle basic image editing. Lview Pro($49) and Jasc's PaintShop Pro ($99) are two excellentgraphics apps for Windows. Mac users should check out GraphicConverter ($35), if only for its ability to import, edit, andexport nearly every graphic format ever created.
PLAN YOUR SITE
All too often, bands decide that they want a Web site without givingmuch thought to what information they want to communicate to theirvisitors. Some good questions to consider before beginning are: Who isyour audience? Is this site for fans, record labels, or both? Will yousell your music online? Will you provide information about upcominggigs? Who will write the site's content? Once those questions areanswered, you'll be in a better position to develop the material thatwill 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 lookingprofessional, get someone who really understands your band — andthe English language — to write your content. At a minimum,you'll need someone to write the band bio (if you don't already haveone) and instructions about getting the most from each page of your Website.
If you or your band members don't feel up to the task, considerasking friends, parents, spouses, or even fans. A devoted fan whounderstands how to communicate your message effectively could be justthe ticket. If money is an issue, compensate him or her withcomplimentary passes, a copy of your CD, a free T-shirt, or even theopportunity to watch you jam during rehearsals.
Make it “sticky.” You want your visitors tokeep coming back for more, don't you? Give them a reason. Web designersrefer to a site's ability to attract repeat visitors and keep theminterested as stickiness (think flypaper). A band bio and somepictures of live gigs just aren't enough. One easy way to engage youraudience is to provide a calendar for upcoming gigs. Calendars are abreeze to implement, simple to maintain, and have the added benefit ofimproving attendance at your shows. If you give your fans easy accessto a list of upcoming gigs, they will check back more often. Othertried-and-true approaches for improving your hit count includefrequently 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 todownload free music. However, if you are planning to make money sellingyour CDs or tapes online, refrain from posting all of your songs asMP3s. 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 nexttime you play a gig, record a DAT of the performance and upload a fewof the best tracks as MP3s. That is a great way to capture theexcitement of a live performance without cutting into your recordsales. If you update the MP3s every few months, you'll give your fans areason to visit the site more often. Alternately, you might want topost excerpts of your songs (one verse and a chorus is fine). Ifvisitors dig the hooks, they might buy the whole track.
Streaming media is an alternative worth considering. UnlikeMP3 files, the content remains on your server and is not easilydownloaded or traded; it's more like an on-demand radio broadcast thanan online record store. Visitors can start to hear the music withinseconds, without enduring lengthy downloads. What's more, streamingmedia can encompass video, text, and graphics as well as audio, so it'spossible to create a rich experience for the listener.
PREPARING TO BUILD
Web design is referred to as “architecture” for a goodreason. Designing a good site is like building a house — youbegin with a foundation; build a framework; and then put up walls,windows, doors, and so on. Once that's completed, you can begindecorating and furnishing your home.
Site map. The foundation and framework for any Web sitebegins with a site map, which can be created on paper or in abasic drawing program. It should contain a top-down view of all thepages and files your site will include. A basic site map consists ofyour home page at the top with subpages containing each linked page(see Fig. 1). Once you determine the content you'll post, youcan begin crafting a site map that will inform your overallarchitecture 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 iseverything. If your directories are a mess, updating your Web site is atedious and frustrating process. First, create a main folder; it willcontain your entire site. Within the main folder, create a foldertitled images; another called media; and finally, an HTML (text) filenamed 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 nameso that users can simply type the domain name (www.yourband.com)instead of the more unwieldy www.yourband.com/homepage.html. The directory namesare fairly self-explanatory. Even if you don't use all of thedirectories immediately, it's good to have them available for thefuture.
Your site's overall design will be the main factor in communicatingyour musical identity. Think of the site's look and feel as you would aCD cover or gig flyer. Everything has to make sense in context. Otherbands' sites are always a good source of inspiration, but it's alsoworthwhile to grab a copy of Billboard, Spin, or RollingStone and look at the ads. Go through your CD collection and pickyour favorite covers and liner notes. Examine the design carefully. Isit bright? Is it clean? Is it organic or geometrically oriented? Thoseelements dictate how your visitors react to your band's image, so takethe time to consider your options.
Color palette. Color is the most visceral of all designelements. Coded into our primal awareness, color is universal andcrosses all language boundaries. Generally speaking, bright colorssignify intensity and energy, whereas dark colors signify coolness andmystery. If your sound has a tropical or upbeat feel, consider oranges,reds, yellows, and greens. On the other hand, if your music has ahyperhip serious sound, think about muted or dark colors with splashesof brightness for contrast.
After selecting your overall palette, pick three or four colors thatcommunicate your style. Unless you're a design pro, do not use morethan four colors; doing so will give your site a busy, garish look.
If you are in the dark about color schemes, go to the nearestart-supply store and pick up a color wheel. After a few hours offiddling around with one, you should have a better idea of what worksand what doesn't. (Check out www.makart.com/resources/artclass/cschemes.html forinsight 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 arule, stick with saturated tones or pastels. Solid primary colors are ano-no when it comes to Web-page backgrounds, because they tend tofatigue the eye. Always use the Web216 color palette (nearlyevery HTML editor lets you choose from that palette). That will ensurethat your colors display uniformly on most, if not all, platforms.
Once you select a background, choose your text color and linkcolors. For the main text, use black if the background is light andwhite if the background is dark. Colored text on a colored backgroundoften can be difficult to read, so sticking with the basics is alwayssafe. Link colors should complement the background and remain legibleat all times; never use blue (or any dark, cool color) on blackbackgrounds: it's impossible to read.
Background images. Once you have the hang of whatbackground colors work in your design, consider using backgroundimages. They give Web sites a more polished look and, in conjunctionwith tables, can really make a site design pop. Always use backgroundsin GIF or JPEG format (browsers cannot render BMP, TIFF, or other imageformats) and use the image to complement and unify the overall designof your site. Again, the overriding concern is to ensure that your textremains legible at all times. Stay away from wild, repeating patterns;they will give your site a cheap, gaudy look. They look cool only forthe first five minutes, after which your visitors will grab theibuprofen and click away to another site.
Fonts. Unlike print media, browsers have only three fontsthat are completely cross-platform: Times, Arial, and Verdana. Times isa serif font, which means that each character has curlicues atthe edges, like the text you're reading now. Arial and Verdana aresans serif fonts and are cleaner and blockier, like theEM logo.
Unless your design has an antiquated, old-time feel, avoid Times,because it is slightly less legible than Arial or Verdana. I preferVerdana because it is easy to read at all resolutions. As for fontsizes, stay away from very small or very large ones. A good guidelineis not to use anything smaller than the standard HTML font size 2 orlarger than 4, as it will be illegible or look heavy-handed.
Layout. After you select fonts and colors, begin creatingyour page layouts. Most basic sites utilize two distinct layoutstructures — one for the home page and another for the contentpages within the site. Sure, it's possible to create additionallayouts, but sticking with two to three basic templates providesconsistency and makes the site easier to develop, maintain, andnavigate.
Have some fun with your home-page layout. Be splashy. Be fun. Focuson a few highlights for the site. If you have some good photos ofrecent gigs or high-quality band photos, tell the world. If you have afree preview track from your upcoming CD, make it known. The home pageis 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, ticketprice, venue, start time, opening act, and maybe even a link toMapQuest.com so that visitors can find the gig with a minimum offuss.
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 wayto 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 oftables and frames.
One final note about layout: be sure that your pages rendercorrectly at a screen resolution of 640×480 pixels. Although800×600 monitor resolution is fairly standard, you ensure maximumcompatibility by coding to the lowest common denominator. One of themost annoying things on the Web is having to scroll horizontallybecause the designer created the site on a high-res monitor. If indoubt, change your screen resolution to 640×480 and review yoursite. If you find any anomalies, readjust your layout accordingly.
Navigation. Unless you're redesigning BowieNet orMadonnaMusic, chances are you'll deal with only 10 to 15 pages on yoursite. That should make the normally arduous chore of designing sensiblenavigation a breeze. Basically, your navigation elements should beomnipresent but relatively unintrusive. Unless you go with fullyFlash-based navigation, your work should be relatively painless.
The two customary places for site navigation are the top of the pageand the left sidebar. Generally, it's best to place your globalnavigation (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, withthe content in the center or on the right.
Navigation calls for solid graphic-design chops. At a minimum, yourtop navigation should include your band's logo, the five to seven mostimportant areas of your site, and an e-mail link so your audience canget 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 tounderstand the distinction between the GIF and JPEG file formats. GIF(Graphics Interchange Format) is excellent for logos and navigationelements because it provides excellent data compression for images thatcontain only a few colors. However, GIF limits your color palette'ssize. Although a GIF image can contain any colors, the total number ofcolors cannot exceed 256. In fact, if your logo and site design arepredominantly black and white, you may even be able to get away with a16- or 32-color palette, which will reduce your file size (andvisitors' download times) considerably.
Despite their limitations, GIFs have two advantages. Selected colorscan be transparent, which lets the image blend more smoothly into pageswith sophisticated backgrounds. GIFs can also be animated so that theycan “dance” or display moving content. Most Web graphicapps like Macromedia's Fireworks have tools for animatingGIFs, and the classic freeware applet GIFbuilder (Mac) createsanimations in a snap.
The JPEG (Joint Photographers Expert Group) format is optimized forphotographs and complex graphics, also known as continuoustone images, that have subtle variations in shading. JPEGcompression is considered a lossy format, like MP3 in that once a fileis compressed and the irrelevant data discarded, it can never beregained. JPEG compression can work wonders on large photographic imagefiles, reducing them in size by orders of magnitude, but it will notprovide the same level of compression for solid blocks of color as GIF.As a rule, use GIF for your logos, navigation, design elements, andanimations, and use JPEG for photographs and images with a lot ofdetail.
ALT FOR ONE
The image tag (the code that specifies which graphic toload into a spot on a page) includes an important attribute calledalt. This is a space for you to enter information about theimage's content. For instance, if you post a picture of your bandplaying live at Madison Square Garden, you should include the alt text,“The Screaming Cats playing live at Madison Square Garden onApril 4, 2001.”
That text is displayed on three occasions: when a visitor places hisor her cursor over the image for more than a few seconds; when avisitor 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 visitorsto gain information about the type of images, includingnavigational images, on a page, because text-to-speech toolscan read the data aloud. Use the attribute wherever possible.
Often overlooked by novices, the meta tag is used to conveyinformation about a Web page to search engines. That informationincludes which keywords will trigger a positive correlation in asearch. For example, if your music is heavily influenced by deep houseand soul, you'll probably want to include keywords such as deephouse in your meta tag along with screaming cats (seeFig. 4).
Other uses for the meta tag include creating your own description ofthe contents for each page in your site. That way, when users comeacross your site using search engines, they'll know exactly what thesite is about.
MAKE A FLASH
Macromedia's Flash format enables designers to create amazing pageswith complex interactivity, multimedia, animation, and even games.Learning to use Flash creation tools such as Macromedia'sFlash ($399; Mac/Win) and Adobe's LiveMotion ($299;Mac/Win) can be a daunting task, but the reward is a truly immersingsite. The caveat is that the more complex and detailed the Flashcomponent, the larger the file size and download times, so keep that inmind as you explore your options. Additionally, your visitors will needto download the Flash plug-in to see anything.
If you gig regularly, give some serious thought to posting livevideos of your band on your site. That is a terrific way to engageusers and could give interested labels a way to see your showcase fromthe comfort of their ultraplush offices. In this era of inexpensivedigital video cameras, you probably know someone who can shoot thevideo 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 consumerPCs and all currently shipping Macs come with some sort ofvideo-editing software. Apple's iMovie is ridiculously easy touse and delivers great results with titles, effects, andprofessional-looking transitions. IMovie and several otherconsumer video editors include built-in compression tools, so exportingthe 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 pageto download. As you design your site, keep track of the file sizes ofeach of the components that make up your pages: images, HTML, Flash,everything. Generally, the total file size for the entire page and allgraphics should be less than 50 KB-70 KB at the most.
Possible exceptions to that rule are photo galleries withthumbnails, which should max out at 100 KB, but only if necessary. Ifyou're making extensive use of Flash in your site design, your downloadtimes will be negatively impacted. So plan to massage your Flashcomponents separately if needed.
Chances are your site won't require that type of programming,because you can easily create e-mail links for soliciting input fromyour visitors using the mailto: command. But as your site grows inpopularity, you may wish to explore the options that CGI offers. Asalways, tutorials are available at Webmonkey and Builder.com.
Before you launch your site, test it thoroughly with as many usersas possible. Recruit family, friends, anyone with a computer and abrowser to go through your site and make comments. If possible, havethem view the site on your computer first so they know what it'ssupposed to look like. It's also instructive to watch others try tonavigate your site. You'll see pretty quickly what you need to make itmore clear. If doing that isn't possible, post or e-mail screen shotsfor reference. If anyone encounters problems, ask them to capturescreen shots and e-mail them to you to examine.
Some areas to check: Does the site look essentially the same on allbrowsers and platforms? Are any links broken? Are all graphics loadingcorrectly? Do navigation tricks such as mouse-over animations work thesame way for everyone? For that matter, is the navigation itselfobvious, or do you feel compelled to grab the mouse and explain how toget to a certain feature? Are the audio and video streaming ordownloading the right way?
Beware of people who say, “It looks wonderful! Don't change athing!” You're actively seeking criticism so that you can makeyour site is the best it can be. Look for f