|
|
|
|
||||
Web Books
HTML & XHTML: The Definitive Guide |
© 2000 by David Karlins. All Rights Reserved.
These days, everyone wants a web site. Well, maybe not everyone, but a lot of people feel that they not only want one, they need to have one. Quite often, though, people don't really think through why they want a web site - what they want it to accomplish, what it is going to do for them. In short, they don't develop a web strategy before uploading their new cyber-baby and unveiling it to the whole World Wide Web.
The result is all too frequently an unfocused jumble of a site. We've all been to web sites that are hard to figure out. And we've all been to web sites that are a model of clarity. The difference is usually in the planning. Crisp, well-designed web sites in which you can readily find the information you seek are usually the result of a carefully thought out plan. If, as the saying goes, luck is the residue of hard work, an efficient, effective, and user friendly web site is the residue of thorough preparation.
Who are you? What is your purpose? No, I'm not branching out into pop psychology, I'm posing a couple questions that you need to be able to answer clearly in order to create a coherent and useful Web site.
Let's take the unleash.com site as an example. A quick look at the site's home page makes it clear what the purpose of the site is: "The Ultimate Resource for Graphics Users." The concept is clear. A bit further down the page, drop-down menus and links make it easy to access the main features of the site: A large selection of graphic resources (including this series on Web design!), training solutions, and Web design services.
All this is especially important if you are creating a business-related site. People aren't going to want to waste time stumbling around looking for what they want. You want people to be able to readily find the products or services they seek, the prices and order forms, the directions to your company, and ways to contact your business by phone and/or email.
Every article and book on Web design advises you to examine other web sites with a critical eye. Apply that good advice to figuring out the purpose of your site. What is the focus and purpose of your competitor's sites? Are they focusing on sales? PR? Service? Image promotion?
Some readers may be asking, "Isn't it obvious what I want to do with my site? I want to sell stuff." Well, maybe? But sometimes a product Web site is most effective generating sales as an indirect byproduct of the support, image, or even entertainment promoted at the product's site. Altoids Web site isn't mainly set up to sell their "curiously strong mints.," Don't look for an order form, a price list, shipping costs, wholesale discounting tables, or tributes from happy customers at their sites. But the Altoids site has become a Web phenomenon and helps boost the product's profile among young Web browsers who are attracted to the interactive trips at the site.
Once the purpose of a site has been boiled down to a short list, it is still necessary to define site priorities . For example, when I first sat down with a client who runs an annual concert and cultural fair, they knew what they wanted to accomplish with their site:
As it turns out, the focus of this site changes depending the time of year. For example, as the concert date approaches, the site emphasizes ticket sales. Right after the concert, the site features pictures of the show. Later in their annual cycle, the site features sign-up lists for prospective concert-goers and vendors. Once the concert promoters and myself got on the same wavelength on the focus of the site, the site organization and content flowed smoothly. (If you're curious as to how it all turned out, you can check out the site for the Himalayan Fair.
Complete Idiot's Guide to Macromedia Flash 5 Buy David's Upcoming Book! |
One of the sites I've agonized over the most is my own. I know I want to sell books, provide support resources to readers, and promote my consulting services and seminars. But I had to decide what the main point of the site is. I ended up concluding, after a few false starts (yes that's part of the process), that the main point of the site would be to provide support resources for readers.
I purposely put content at the end of this article (after purpose and priorities) to counter the tendency to start with Web content.
Sometimes I'll meet with a client who has some content they clearly want at their site: a corporate or organizational logo, a color scheme, documents, links, or even media like sound and video files. All well and good - I make a list of this content and discuss how to convert it to Web-deliverable format. But as we start placing content into a site, we'll want to do it as part of an overall plan.
In that context, it is necessary to break down Web content into types. HTML text, graphics, media, and other ways of presenting content.
Web sites almost always combine text and graphics. A site with text and only text would be a dull site indeed. More and more these days, many utilize sound, animation, even video clips. Getting all the latest gizmos is not necessarily the best way to start if you are building your first site. For one thing, many people don't have browsers capable of handling everything you may put on your site. For another, many people won't be able to download all your pictures quickly, and may move on before your site is completely downloaded.
Text for web sites is written in HTML - hyper-text markup language. Any browser can read HTML. If you bring up a web site in either Internet Explorer or Netscape, you can see the HTML code underlying the page by clicking on View, then clicking on either Source or Page Source depending on which browser you are using. Pretty complicated stuff! You don't need to learn HTML right away, because web design programs enable you to use HTML in a way similar to word processing programs. Macromedia's Dreamweaver, Microsoft's FrontPage, Adobe's GoLive and other Web design packages allow you to format Web pages with text and graphics. If you're not sure where to start, try Netscape's free Composer program that comes with the browser. But as you design more sites, and maintain your site, you will probably want to learn some of the commands, to help fine tune your site.
You can convert text you have done in word processing programs such as MS Word into HTML. If your site is going to feature long documents with lots of text, or perhaps if you want to be able to allow visitors to download and print some information or designs, you might want to post those files in a PDF format. Products like CorelDRAW export text and graphics to the PDF format. These files can be opened by anyone with the Adobe Acrobat PDF viewer. (You might want to include a link to the Adobe Acrobat PDF-viewer download site to facilitate that.
To publish a PDF file, simply upload it to your site as you would an HTML or graphics file. The pdf file format will launch Adobe Acrobat in your viewer's system.
Graphics on the web are generally done in either the GIF or JPEG format. You can make your own images through a paint or draw program, you can scan photographs, or you can convert images you have in other formats into GIF or JPEG. Also, libraries of clip art are available on line, and usually aren't copyrighted (be sure to check before using some). CorelDRAW users can check out my articles on converting DRAW images to GIF files or custom JPEG Web pages backgrounds here at unleash.com
Generally speaking, GIF does better with simple graphics - text as graphics, illustrations that have a lot of solid color, many images originally drawn on a computer. For more complex and subtle images, and for photographs, JPEG is preferable.
Sound, animation, and interactivity are the cutting edge in Web sites. And these elements are getting easier to create and publish. My own favorite product for creating Media is Macromedia Flash, and I'll be starting a new series of articles here at unleash.com shortly on using Flash 5 to generate interactive movies. My book The Complete Idiot's Guide to Flash 5 walks beginners through the process.
Keep in mind that you want all aspects of your design to cohere, and to enhance the basic point of your web site, not to detract from it. When you develop your strategy, you may decide to add more multi media components later, after you get the site up and functioning.
One thing you have to measure is how large is the downside of presenting video at your site, and having visitors not be able to access it? I made a cold, calculated decision that I would let Netscape visitors without the Flash/Shockwave plug in see an icon and a message to download the plug-in when they visit my home page.
The trade-off is that visitors with the plug in (or with Internet Explorer) will see a fun interactive movie.
All video requires some kind of plug-in or media program at a visitor's computer. The most accessible formats for video (along with Flash's SWF format) are MOV, and AVI. There are several formats for audio. For cruder animation without interactivity or sound, the animated GIF format can be viewed by all browsers. If you just want some background music embed AU or WAV files in your page background. HTML generators often have menu options to insert a background sound on a page. If not, the basic HTML code is:
<bgsound src="file: sound.wav" loop="1">
To use the HTML code above, substitute sound.wav with the file name of your own audio file, and enter loop value to define how many times the sound file will play when the page is opened. A loop value of "-1" will loop the sound continuously.
Media adds to a Web page's download time. Broadband internet access is increasing, but most folks still don't have it. Ask a friend with a 56K modem to check out your site and get feedback on whether your media-loaded page has acceptable download time.
In my upcoming series on using Flash 5, I'll show you how to create interactive and animated movies and sounds for your site. So stay tuned here at unleash.com!
Discuss the articles with David in the Graphics Unleashed Discussion Forums
Choosing a Web Authoring Tool · Eight Steps to Implementing a Web Site · Step 1: Grabbing a Domain Name · Step 2: Publishing Your Web Content - Finding a Web Server Provider · Step 3: Develop Your Web Strategy · Step 4: Design and Create Your Site · Step 5: Publish and Test Your Site · Step 6: Promoting Your Site · Part I: From CorelDRAW to the Web · Part II: Creating Web Page Background JPEG Files · Part III: Creating a Hover Button in CorelDRAW
Flash 5 Tutorial 3: Using Masking in an Animation ·
Flash 5 Tutorial 2: Creating a Logo with a Shape Transition ·
Flash 5 Tutorial 1: Create a Splash Screen
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
