This article features a step-by-step guide to working with the Site Map to create the basic outline of the site so you can visually framework your site and the relationships between the pages. Also learn how Dreamweaver makes it simple to ease into server-side work. (This is from the book Dreamweaver MX 2004: A Beginner's Guide, McGraw-Hill, ISBN: 0-07-222996-9, by Tom Muck and Ray West.)
Planning the Site - Understand Basic Design Concepts (Page 5 of 7 )
Itís all about packaging, really. The days of single-color or tiled backgrounds with simple text on them are not gone, as a quick tour around the Web will show, but they are going. Your competition has great looking sites, and if you want to have a chance to distinguish your sites among them, you need great looking sites, too.
If I could teach you in a few paragraphs how to become a world-class graphic artist, I would be rich, and you would have paid a heck of a lot more for this book. But there are a few things you can learn from this book.
Navigation is the means by which you allow your users to get around your site. As I said earlier, there are times when you will want to allow the users to move freely to and from any page that strikes their fancy, and there are times when you need them to remain on a set path in order to complete the task they have set about. We will use both in the eFlea Web site.
If there is one rule that applies to navigation in general, it would have to be to keep it clear, keep it simple, and donít overdo it. (Okay, so thatís three rules.)
Ask the Expert
Q : I am a designer. Do I need to learn all this server-side information?
A: Dreamweaver is an excellent tool for the designer aspects of site construction, and you may find that your particular responsibilities limit you to that part of the program. But the Web is moving from static sites to managed content, and users refine their needs and seek out the most helpful and informative sites. Whether or not you ever have to write a SQL query, it is assured that you will have to work on sites that use server-side technologies. The more you understand about them, the more valuable you will be to the development team. Dreamweaver makes it simple to ease into server-side work.
Keep It Clear
When users look at your site, they should be able to tell two things rather quickly: where the navigation links are (how to get around) and where those links will take them. There is a trend in Web development that has been dubbed ďmystery meat navigation.Ē Mystery meat navigation is when the designer presents you with image-based links with little if any indication where they lead. At best, you can hover over the image link (if you can find it) and get a tooltip with a hint as to where you might end up if you were to click it. Although this kind of navigation might lend itself to the look and feel of the art you are trying to create, it is frustrating to the user and leads more to visitors moving on to a site that clearly presents the information they are seeking than it does to them fawning over your design sense.
Keep in mind that most Web sites are for the purpose of communicating with visitors. Use links that are text based (either HTML or graphic text) or images along with text that identify the links. Although it may offend your design sense, it will keep your visitors at your site longer because they can clearly see how to get around.
Keep It Simple
Your site may be 200 pages. There may be something very interesting on each and every page that you are excited about sharing with everyone who drops by. But 200 links on your home page is going to overwhelm your visitors and drive them away in frustration.
Keep your navigation simple. Design a hierarchy of concepts within your site that leads visitors to areas of interest, and then offer additional pages that fall within that area. Keep the number of links on your home page reasonable. What is reasonable? That is for you to decide. But if you are feeling the need to put much more than ten navigational links on it, you may want to rethink your site structure. If every one of those pages is so unrelated to the other pages around it that it has to have its own link from the home page, you have a maze on your hands that few people will want to wade through.
NOTE: These ďrulesĒ are generalizations. They are good generalizations, but they may not apply to your specific circumstance. If you are designing a portal site, for instance, like www.yahoo.com or www.cnet.com, there may be a good reason to make your home page a mass of links. As always, rules are made to be broken, but you must know what rules you are breaking and why.
Donít Overdo It
Another disturbing trend in page design is repeating links. Almost as a means of filling space, designers will put identical links in a navigation bar on the left, as an image in the body of the page or at the top, and as a text link at the bottom of the page. Unless your pages are extremely long and you are concerned that users will get lost in them, you donít need to provide duplicate links all over the place.
It canít be said enough: Web sites are for the communication of information to your visitors. It does not matter if you are tired of making sites with left-hand navigation. If that is what your visitors expect to see, if that is what will keep them at your site, then that is what you need to give them.
The following rules are fairly accepted usability practices:
Keep your page-load times limited to 10 to 20 seconds on a 56K modem.
Donít pop up new windows on your visitors.
Frames are not the best idea. If you do use them, donít frame in other sites. It is annoying to your users and to the people whose site you are framing in.
Always provide a link back to your home page.
Make sure that your siteís features work in the available browsers. Make sure you know going into a project what browsers you are targeting so that you can test for degradation, especially if you plan to use Cascading Style Sheets (CSS).
ďMediaĒ is a pretty broad term. It can relate to anything from the images on your site to sound files to extravagant Flash files. Here is a list of things to remember when choosing and using media on your site:
Use the appropriate file type for images. JPEG files are often preferred for photographs, but they are lossy and can be large if you are not careful. GIFs are good for graphics and graphic text.
Only use transparency when it is needed. Donít make part of an image transparent and then stick it on a white background. It bloats the file unnecessarily.
Optimize your graphics. A product such as Fireworks will allow you to optimize your files by selecting different numbers of colors or different quality settings and observing how picture quality is affected.
Size your images properly before putting them on your page. Resizing in HTML takes a long time and produces questionable quality.
Flash is really cool, but use it cautiously. Although the Flash player is becoming ubiquitous, bandwidth that can handle the files is not. If you do use it, give your visitors a way outó a way to skip the file or to never start viewing it in the first place.
Do not load MIDI files with your home page that start playing as soon as the page loads. They usually sound terrible. If you are forced to use one, provide a prominent Off button.
This chapter is from Dreamweaver MX 2004: A Beginner's Guide, by Muck and West (McGraw-Hill/Osborne, 2004, ISBN: 0-07-222996-9). Check it out at your favorite bookstore today. Buy this book now.