Ten Timesaving Dreamweaver Web Design Tips - dummies

Ten Timesaving Dreamweaver Web Design Tips

By Janine Warner

All good websites grow and evolve. If you start with a strong design and pay close attention to some basic rules about interface, navigation, and style, you have a better foundation to build on. The following design ideas and Dreamweaver tips can help you save time as you create websites that look great for all your visitors.

1Plan — it pays off.

Even if you’re feeling pressured to get a website online fast, you’ll save time in the long run if you take a little time to develop a plan first.

The World Wide Web isn’t going anywhere. Even if you have to get your site online as quickly as possible, your goal should be to design a site that truly serves your audience, business, and goals — and those goals require planning.

2Define goals to help you focus.

If you start your website with the goal of attracting millions of visitors and selling tons of products and services, you’re not being specific enough. The more precisely you can state your goals, the better chance you have of reaching them. You should limit yourself to only three goals.

3Set deadlines to help you finish.

After you are clear on your goals and the tasks you need to complete before you launch your website, it’s time to create a timeline and set deadlines. Be sure to give yourself a realistic timeframe to do a good job, and factor in a little more time than you think you need, especially if you’re new to web design.

Even if you’re working on a website by yourself or with a very small team, setting deadlines is one of the most important parts of any project plan — and gives you a much better chance of finishing. Try tying a deadline to a special event or an occasion.

4Design for your audience.

No matter how technically sophisticated a website is or how great the writing, most people notice the design first. Make sure that you leave enough time and budget to develop an appropriate and attractive design for your website. The right design is one that best suits your audience — and that may or may not mean lots of fancy graphics and animations.

5Create a consistent design.

Most websites 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 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.

6Follow the three clicks rule.

The three clicks rule states that no important piece of information should ever be more than three clicks away from anywhere else on your website. The most important information should be even closer at hand. For example, many designers agree that contact information should never be more than one click away.

You can make finding information easy for viewers by creating a navigation bar — a set of links to all the main sections on your site that you repeat on all of the pages of your site. A navigation bar makes it easy for visitors to move from one section of your site to another.

If you have lots of pages in your site, organize them into sections with subsections, and then use a drop-down menu.

7Think before adding fancy fonts.

Designers get so excited when they find out that they can now use any font they want on web pages. Unfortunately, like so many things on the web, using fonts is more complicated than you might expect.

For example, even if you have the rights to host a font on your own web server, you may not have all the variations of the font needed to display the letters properly on Mac and Windows computers or to work in all web browsers. That’s why most web designers use a font service:

8Keep frequently used items handy.

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.

Launch Dreamweaver, and choose Window→Insert to open the Common Insert panel. The Insert panel includes several sections, including Structure, Media, Forms, and Favorites.

Click the arrow in the Insert panel and choose Favorites from the drop-down list. The Favorites option is at the very 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. Use the Favorites Insert panel as a convenient way to keep all your favorite features handy. You can even change it for special projects that require a collection of program features.

9Split the view.

If you like to switch back and forth between the Code view 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 the Split view button from the top left of the workspace.

Dreamweaver’s source code is color-coded to make it easier to distinguish tags from content. Another helpful feature in Split view is that if you select an image, text, or another element on a page in Design view, the corresponding code is automatically highlighted in Code view.

10Back up your website.

Make sure you have a system in place to back up your website. Always keep a copy of all 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.

To create a backup of a website you’ve created in Dreamweaver, you need to copy the site folder where you store all of the files in your website. Ideally, you should copy that folder to an external hard drive or upload it to an online backup system (that is hosted separately from your web server).