Design for your audience
Create a consistent design
Follow the three clicks rule
Get a head start on your designs
Split the view
Design in a flash
Find functional fonts
Keep frequently used items handy
Be prepared for fast updates
Back it up
All good Web sites grow and evolve. If you start with a strong design and pay close attention to some basic rules about interface, navigation, and style, you'll have a better foundation to build on. The following design ideas and Dreamweaver tips can help you save time as you create Web sites that look great for all your visitors.
No matter how technically sophisticated a Web site is or how great the writing, most people notice the design first. Make sure that you leave plenty of time and budget to develop an appropriate and attractive design for your Web site. The right design is one that best suits your audience — and that may or may not mean lots of fancy graphics and animations.
Think about whom you want to attract to your Web site before you develop the design. A gaming Web site geared toward teenagers should look very different from a Web site with gardening tips for the semiretired or an online investment site for busy professionals.
A great way to find ideas is to visit other sites designed for your target market, even if they don't offer the same content, products, or services. As you consider design ideas, keep in mind your audience's time constraints, attention span, and goals. If you're creating a site for busy professionals, you may want to include a search engine and lists of links that make it easy to go directly to key information. If you're designing an entertainment destination, your audience may be willing to wait a little longer for animation, video, and other interactive features.
Most Web sites work best and are easiest to navigate when they follow a consistent design theme. Case in point: Most readers take for granted that books don't change their design from page to page, and that newspapers don't change headline fonts and logos from day to day. Indeed, many people would argue that when users say something is "intuitive to use," what they really mean is that it's familiar. Consistency is one of the primary tools used in design to help readers find a site familiar and make it easy to follow a story or a series of navigation elements.
When you lay out Web pages, keep in mind that you want viewers to instantly understand which pieces of information are related to each other and how to move from one area of a Web site to another. Distinguish different kinds of information with the following:
Design: Make sure that similar elements follow the same design parameters, such as type style, banner size, and page background color. Streamlining the number of design elements can also make your site more user-friendly: If you use too many different elements on any single page or even on the same Web site, you risk confusing your viewers.
Tip
To ensure a consistent style, define a set of colors, shapes, or other elements that you use throughout the site. Choose no more than two or three fonts for your Web site and use them consistently too. Using too many fonts makes your pages less appealing and harder to read.
Use a new font, color, or other contrasting element only when you want to call attention to something special. A little surprise here and there can keep your Web site alive.
Location: Keep related items close to one another and be consistent about where you locate similar elements. For example, a menu of links should appear in the same place on all your pages to make it easier for visitors to quickly find their way around your site.
Prominence: Give elements of similar importance the same weight on a page. For example, the most important headline on each page should be formatted with the same size and style.
This type of organization makes following information visually much easier.
The three clicks rule states that no important piece of information should ever be more than three clicks away from anywhere else on your Web site. The most important information should be even closer at hand. Some information, such as contact information, should never be more than one click away. You can make finding information easy for viewers by creating a site map (with links to all or most of the pages in your site) and a navigation bar — a set of links to all the main sections on your site.
Dreamweaver features many predesigned templates, including a collection of CSS designs you can edit to create two-column, three-column, and other popular CSS layouts.
When you create a file in Dreamweaver (such as by choosing File
Template pages: Choose the Template Page category to open a list of templates types. The options are ASP JavaScript, ASP VBScript, ASP.Net C#, ASP.Net VB, ColdFusion, HTML, JSP, and PHP. Note that all these formats except HTML require programming and require the most advanced features of Dreamweaver. You find more about these options and how they can be used to create database-driven Web sites in Chapters 14 and 15.
Layout designs for frames: If you're going to use frames, get a head start with one of Dreamweaver's many predesigned framesets. Because these templates can save you so much time, they're a "must use" feature if you're creating a site that uses frames.
CSS-designed pages: Choose from any of the predesigned layouts included in the New Document window under Layout when you create a new file.
Regular template designs: Choose Page Designs to open a list of basic HTML templates. Although they may seem simple by comparison, these are well-designed pages that can help you get a static Web site up and running with a lot less effort than creating it from scratch.
If you like to switch back and forth between the HTML source code and design view in Dreamweaver, you'll appreciate the option to split the window so that you can view both the source code and the page design at the same time. To split the window, choose View
Dreamweaver's source code has helpful color coding and tagging features, similar to those in HTML editors such as HomeSite and BBEdit. Notice as you're working that if you select an image, text, or another element on a page in design view, it is automatically highlighted in code view, a useful feature that makes it easier to find your place in the raw code.
Flash rocks! Adobe has made Flash better than ever by providing enhanced integration with Dreamweaver, Photoshop, and Fireworks. Flash is a vector-based design and animation program and the tool used to create some of the coolest Web sites on the Net today. Flash makes it possible to create fast-loading images and complex animations that dynamically adjust to fit any screen size. Now that the vast majority of Web surfers have the Flash plug-in, Flash has become a standard for video and animations, and Dreamweaver makes inserting Flash video and animation files easier than ever.
Just choose Insert
Designers get so excited when they find out that they can use any font on a Web page. In reality, your viewers must still have the font on their computers for the font to appear. The more common the font, the more likely it is to appear the way you intend. If you want to use a more unusual font, go for it — just be sure that you also include alternatives. The Dreamweaver font list already includes collections of common fonts, and you can create your own font list by choosing Format
In an effort to make text easier to read on the Web, Adobe and Microsoft have both created fonts especially suited to computer screens. To find out more, visit their Web sites at www.adobe.com and www.microsoft.com, respectively, and search for Web fonts.
Ever wish you could keep all your favorite Dreamweaver features in one convenient place? You can! Just customize the Favorites collection in the Insert panel. To get started, follow these steps:
Launch Dreamweaver, and choose Window
Insert to open the Common Insert panel.The Insert panel includes several sections, including Layout, Forms, HTML, and Favorites.
Click the arrow in the Insert panel and choose Favorites from the drop-down list.
The Favorites option is at the end of the Insert panel drop-down list.
To customize the Favorites panel with all your favorite feature icons, right-click (or Control+click on a Mac) and choose Customize Favorites.
The Web provides a powerful vehicle for businesses and nonprofit organizations to present their side of any story and get the word out quickly when tragic events, bad press, and other crises arise. But don't wait for an emergency to find out whether you're prepared to add new information to your Web site quickly, and don't fool yourself into thinking that just because you don't manage a daily Internet newspaper, you don't have to worry about speedy updates.
With a little planning and key systems set up in advance, you can be prepared for events that require timely information — whether an international crisis stops air travel, a flood closes your nonprofit, or an embarrassing event makes your CEO cringe and demand that the real story be told as soon as possible.
Most organizations develop Web sites that are updated on a weekly, monthly, or even annual basis. More sophisticated sites may link to databases that track inventory or update product listings in real time, but even high-end sites are often ill prepared to update special information quickly.
Here are a few precautions you can take to be prepared for timely updates on your site:
Make sure you can send new information to your Web site quickly. Many Web sites are designed with testing systems that safeguard against careless mistakes, but these systems can add hours, or even days, to the time it takes to add new information to your Web site. Work with your technical staff or consultants to make sure you can update your site quickly if necessary. This may require creating a new section that you can update independently from the rest of the site or that can override the regular update system.
Make updating important sections of your site easy. Consider building or buying a content management system that uses Web-based forms to post new information to your site. Such a system can be designed to change or add information to a Web page as easily as filling out an online order form. You need an experienced programmer to develop a form-based update system. Many Web consultants offer this kind of service for a reasonable fee. This method works, for example, if you're a real estate agent and need to change listings or if you have a calendar of events. Include password protection so that you control access to the form. As an added advantage, a form enables you to make updates from any computer connected to the Internet, so you can update your Web site even if you can't get back into your office.
Identify and train key staff to update the site. With the right systems in place, you don't need to have much technical experience to make simple updates to a site, but your staff needs some instruction and regular reminders. Make sure you also develop a schedule for retraining to ensure that no one forgets emergency procedures. Your most serious emergency could happen tomorrow or may not happen for years to come — you never know — but being prepared pays off in the end.
Make sure you have a system in place to back up your Web site. Always keep a copy of all the files on your server in a separate location and update it regularly to make sure you have the latest version of your site backed up at all times. Even the best Internet service providers sometimes have technical problems, so keep a backup of your site where you have easy access to it and can get it back online quickly if something deletes any or all the files you have on the server.
Also keep a backup of your original source files, such as Photoshop images. For example, when you develop images for the Web, you usually start in a program such as Photoshop, creating a high-resolution image that may include layers and other elements. Before the image goes on your Web site, those layers get flattened and the image gets compressed or reduced and converted into a GIF or a JPEG. If you ever want to go back and alter that image, you'll want the original source file before it was compressed and the layers were flattened. Whether you create your own images or you hire a professional designer, make sure you develop a system for saving all these original elements and make sure you get the original files from the designer, if possible, so that you have them if you ever need to alter an image later.