Web Design DeMYSTiFieD

Web Design DeMYSTiFieD®

DeMYSTiFieD® Series

Accounting Demystified

Advanced Statistics Demystified

Algebra Demystified

Alternative Energy Demystified

Anatomy Demystified

ASP.NET 2.0 Demystified

Astronomy Demystified

Audio Demystified

Biology Demystified

Biotechnology Demystified

Business Calculus Demystified

Business Math Demystified

Business Statistics Demystified

C++ Demystified

Calculus Demystified

Chemistry Demystified

College Algebra Demystified

Corporate Finance Demystified

Data Structures Demystified

Databases Demystified

Differential Equations Demystified

Digital Electronics Demystified

Earth Science Demystified

Electricity Demystified

Electronics Demystified

Environmental Science Demystified

Everyday Math Demystified

Forensics Demystified

Genetics Demystified

Geometry Demystified

Home Networking Demystified

Investing Demystified

Java Demystified

JavaScript Demystified

Linear Algebra Demystified

Macroeconomics Demystified

Management Accounting Demystified

Math Proofs Demystified

Math Word Problems Demystified

Medical Billing and Coding Demystified

Medical Terminology Demystified

Meteorology Demystified

Microbiology Demystified

Microeconomics Demystified

Nanotechnology Demystified

Nurse Management Demystified

OOP Demystified

Options Demystified

Organic Chemistry Demystified

Personal Computing Demystified

Pharmacology Demystified

Physics Demystified

Physiology Demystified

Pre-Algebra Demystified

Precalculus Demystified

Probability Demystified

Project Management Demystified

Psychology Demystified

Quality Management Demystified

Quantum Mechanics Demystified

Relativity Demystified

Robotics Demystified

Signals and Systems Demystified

Six Sigma Demystified

SQL Demystified

Statics and Dynamics Demystified

Statistics Demystified

Technical Math Demystified

Trigonometry Demystified

UML Demystified

Visual Basic 2005 Demystified

Visual C# 2005 Demystified

XML Demystified

Web Design DeMYSTiFieD®

Wendy Willard

Copyright © 2011 by The McGraw-Hill Companies. All rights reserved. Printed in the United States of America. Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher.

ISBN: 978-0-07-174802-5

MHID: 0-07-174802-4

The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-174801-8, MHID: 0-07-174801-6.

All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Where such designations appear in this book, they have been printed with initial caps.

McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs. To contact a representative please e-mail us at [email protected].

Trademarks: McGraw-Hill, the McGraw-Hill Publishing logo, DeMYSTiFieD®, and related trade dress are trademarks or registered trademarks of The McGraw-Hill Companies and/or its affiliates in the United States and other countries and may not be used without written permission. All other trademarks are the property of their respective owners. The McGraw-Hill Companies is not associated with any product or vendor mentioned in this book.

Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human or mechanical error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of any information and is not responsible for any errors or omissions or the results obtained from the use of such information.

TERMS OF USE

This is a copyrighted work and The McGraw-Hill Companies, Inc. (McGraw-Hill) and its licensors reserve all rights in and to the work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms.

THE WORK IS PROVIDED AS IS. McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting there from. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise.

I first learned web design from a fabulous instructor, Lynda Weinman, while in college. I was privileged to be among the first students in the United States to learn how to design for webpages, and I have been smitten ever since. This book is dedicated to students everywhere who are finding their life’s passions in classrooms all over the globe.

About the Author

Wendy Willard is a designer, consultant, writer, and educator who has been involved in web design for about 15 years, after obtaining a degree in illustration from Art Center College of Design in Pasadena, California. She is the author of the bestseller HTML: A Beginner’s Guide, now in its fourth edition, and has written additional books and articles on the topics of Photoshop, web design, and Mac O/S.

About the Technical Editor

Chrissy Rey-Drapeau has been working with the Web since 1995 when she gave up animal wrangling for programming. Concentrating on Adobe Flash and web application development, she loves to teach what she knows. As the lead developer at Pongo Interactive, Chrissy works with such clients as the American Association for the Advancement of Science, Marriott International, Beaconfire Consulting, reZOLV Creative Solutions, and Swim Design.

Contents

Acknowledgments

Introduction

CHAPTER 1 Getting Started

What Is Web Design?

Design vs. Development

Teams and Tasks

Project Management

Information Architecture

Design

Coding/Programming

Animation/Multimedia

Copywriting/Editing

Testing

Search Engine Optimization

Maintenance

Technologies and Tools

HTML and CSS

Beyond HTML and CSS

Design Tools

Flash

Coding Tools

Planning a Site

Hosting

Target Audience

Information Architecture

Documentation

Chapter Summary

CHAPTER 2 Designing for Screens

What’s Unique About Screen Design?

Devices

Browsers

Bandwidth

Color

Navigation

Transitions

Layout

Creating Design Mockups

Stock Media

Sharing Copies of Your Mockups

Chapter Summary

CHAPTER 3 Building the Pages

Web File Formats

Key Terms

GIF

JPEG

PNG

Slicing Designs

Using Guides

Creating Slices

Naming Slices

Exporting Designs

Exporting Slices

Exporting HTML

Coding the File Structure

Basic Page Code

Version Information

Header Content

Body Content

Basic CSS Code

Coding Best Practices

Naming Conventions

Chapter Summary

CHAPTER 4 All About the HTML

Content Blocks

Planning the Structure

Other HTML Containers

Headings

Paragraphs

Lists

Links

Tables

Forms

Form Attributes

Form Structure

Form Processing

Images

Multimedia

Chapter Summary

CHAPTER 5 All About the CSS

Selectors

Type Selectors

ID Selectors

Class Selectors

Other Selectors

Importance

Font Styles

Font Sizes

Font Families

Color

Other Popular Properties to Style Text

Link Styles

Multiple Link Styles

Button Links

List Styles

Navigation Lists

Form Field Styles

Chapter Summary

CHAPTER 6 Integrating HTML and CSS for Layout

Box Properties

Height and Width

Border

Margin and Padding

Basic Alignment

Floats

CSS Positioning

Static and Relative Positioning

Fixed and Absolute Positioning

How to Position Elements

Adding Interactivity

Positioning Properties

Backgrounds

Use Backgrounds to Create Columns

Use Backgrounds to Customize Bullets

Use Backgrounds to Add Shadows

Use Backgrounds to Customize Links

Chapter Summary

CHAPTER 7 Beyond HTML and CSS

JavaScript

Terminology and Syntax

Usage: Creating a Drop-Down Navigation Bar

Learning More

PHP

Terminology and Syntax

Usage: Process a Form

Learning More

XML

Terminology and Syntax

Usage: Exchange Data with RSS

Learning More

Chapter Summary

CHAPTER 8 Templates and Media Types

Finding Stock Templates

Template Options

Template Sites

Blogging

Hosted Blogging

Custom Blogging

Templates in Dreamweaver

Working with Dreamweaver Templates

Maintaining Pages with Adobe Contribute

Media Types

Printer-Specific Style Sheets

Mobile-Specific Style Sheets

Chapter Summary

CHAPTER 9 Going Live

Testing

Testing the Code

Testing the Display

Testing the Usability

Uploading to a Web Server

Desktop FTP

Web-based FTP

Documentation

Style Guides

Helping Users Find the Site

Search Engine Methodology

Submit Your Site

Increase Your Ranking

Track Your Progress

Chapter Summary

CHAPTER 10 E-mail Design

E-mail Standards

Planning for E-mail Design

Pros and Cons of HTML E-mail

Know Your Audience

Know the Available Tools

Coding for E-mail Design

Recommendations

Testing

Chapter Summary

Final Exam

Answers to Quizzes and Final Exam

Index

Acknowledgments

I’d like to send out a special thanks to my technical editor, Chrissy. Even though I had written a ton about web design before, Chrissy really challenged my thought process throughout the course of writing this book. As a result, the content is much stronger, more succinct, and more clearly explained. Chrissy— you have truly made this a better book. Thank you!

And as always, I must thank my family for sticking by me even when I said (for the tenth time), I just need to finish this chapter and then we can go… Psalm 100

Introduction

When I started creating the outline for this book, I had just finished teaching a semester-long web design course for a local community college. That experience couldn’t have come at a better time because it helped me refine my approach to teaching web design. I took my years of experience creating websites and writing about that process, and tweaked it a bit to tailor it for students. The result is Web Design DeMYSTiFieD®.

Who Should Use This Book

Even though this book is jam-packed with information, it is not meant to be the only resource for learning web design. It is, however, intended to be the perfect companion to instructor-led courses, either online or in the classroom.

You’ll likely get the most from this book if you know a little about the following:

• Your computer Can you open, close, and move files around fairly easily? Do you have a web browser and Internet connection you feel comfortable using?

• Design Do you know what styles, layouts, and so on appeal to you? Can you express those in terms of color, shape, and texture?

• HTML Do you know what it is used for? Have you ever used it to create a basic webpage?

If you can’t answer in the affirmative to at least two of the preceding questions, you can still use this book as an introduction to web design, but you’ll want to pay special attention to the tips, hints, and notes throughout the book. Many of these list resources where you can find additional information about a particular topic, such as graphic design.

How to Use this Book

The chapters are organized based on a typical web design project and the steps taken to complete such a project. Within each chapter are learning objectives to help frame the content discussed in that section.

There are ten chapters in this book, each of which builds upon the one before it. When I wrote the book, I intended for each student to move through the chapters consecutively. However, individual chapters can also be used as a reference at a later date.

A ten-question quiz can be found at the end of every chapter. The purpose of this quiz is to help solidify key concepts identified in the material covered. Answers to each quiz can be found in the back of the book.

Finally, a 75-question exam is included after Chapter 10. This exam poses questions from all the material covered, in a random order, to verify you’ve retained the most important aspects of what you’ve learned. The exam answers are also included in the back of the book.

chapter 1

Getting Started

To get started in web design, we need to first make sure we’re all on the same page. Specifically, I will use this chapter to outline the steps involved in a typical web design process, as well as who completes each step and what tools are used to do so. By the end of this chapter, we’ll be ready to switch gears a bit to discuss how web design differs from print design.

CHAPTER OBJECTIVES

In this chapter, you will

• Differentiate between the various aspects of web development teams

• Recognize the tools and technologies used by web development teams

• Identify the steps involved in planning a website

• Identify ways to document the web development process

What Is Web Design?

Prior to the mid-1990s, you might have wondered if web design was an activity reserved for spiders, like the one made famous by the movie Charlotte’s Web. These days, it seems like everyone knows someone who designs webpages.

So what exactly does a web designer do? If you’ve picked up this book, you’re probably interested in the answer to this question. Or, perhaps, you’re taking a required web design course in school and need some help figuring out the basics. In either case, you’ve come to the right place. This book is meant to provide an introduction to modern web design concepts and technologies. With that said, it is not the be-all and end-all of web design instruction. Rather, I seek to touch on all key aspects and then provide references to online sources for additional information.

In its most basic form, web design covers the creation of any content viewed over the Web. Indeed, Wikipedia describes web design as the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a web browser or other web-enabled software like Internet television clients, microblogging clients, and RSS readers (http://en.wikipedia.org/wiki/Web_Design).

In the business world, a professional web designer can take on a variety of different tasks, from planning the way a site’s information will be presented, to designing that information and building the code used to display it. As you learn about web design, you may find a certain aspect appeals to you more than another. That can work to your benefit because many web designers specialize in very specific areas. For example, you might be drawn to how content is structured on a site and move toward the specialty called information architecture. Or, you might prefer making content interactive with tools like Adobe Flash and decide to focus your efforts on becoming proficient in such tools.

Regardless, I hope this book gives you a firm foundation in the basic aspects of web design as you start your journey.

Design vs. Development

You’ve probably heard both web design and web development used to refer to the creation of content for the Web. In fact, you may even be enrolled in a web design class within a web development curriculum and wonder how the two fit together.

Many people consider web design to be what happens to the front-end of a website, while web development might refer to the work on the site’s back-end. The front-end of a site typically involves any customer-facing aspects of the site, such as the layout, navigation, graphics, and text. By contrast, the back-end comprises the behind-the-scenes code and technologies that make the front-end work. This frequently includes databases to store content, scripts to process web forms, and other programming to display content.

This book focuses on the creation of the front-end of a website, which we are referring to as web design.

Teams and Tasks

I just threw out a couple of different specialties within the overarching title of web design. When working on a large web design project, you may encounter one of each of these specialties, plus a few more. If you’re working by yourself on a smaller project, you will probably dabble a bit in each of the following categories:

• Project management

• Information architecture

• Design

• Coding/programming

• Animation

• Copywriting/editing

• Testing

• Search engine optimization

• Maintenance

Project Management

Project management is an important aspect of any website project. Tasks that fall into this category might include:

• Evaluating the project goals and objectives

• Recognizing potential problem areas

• Communicating with client(s) about the project

• Identifying the site’s target audience

• Collecting the site’s content

• Scheduling the project and its milestones

• Keeping everyone on schedule

• Educating the client about the project’s process and the site’s maintenance

If you end up working for a design agency, the project management role will likely fall to an individual who manages several projects at once. As such, project managers must be extremely organized and task-oriented people. When the tasks in this category fall to you, either as the project manager for a larger web team or as the do-it-all web designer, it is important to stay focused on meeting the project goals and managing the steps along the way.

To learn more about project management for the Web, here are a few additional resources:

• Managing Interactive Media Projects by Tim Frick (Delmar Cengage Learning, 2007)

• Making Things Happen: Mastering Project Management (Theory in Practice) by Scott Berkun (O’Reilly, 2008)

• Effective Project Management for Web Geeks (http://articles.sitepoint.com/article/project-management-web-geeks)

• Project management, collaboration, and task software: Basecamp (www.basecamphq.com)

• Web Design: An Introduction to Project Management from Wikiversity (http://en.wikiversity.org/wiki/Web_Design/

An_introduction_to_Project_Management)

Information Architecture

In web design, information architecture involves organizing the content in the most effective and efficient manner for the end user. Tasks that fall into this category might include:

• Labeling the site’s content areas

• Organizing the content

• Developing an efficient, user-centered structure for the site’s content

• Creating wireframes (or storyboards) to track a user’s progress through the site

• Ensuring the navigation meets the end-user requirements

• Documenting the site map

NOTE You will notice there is some overlap among the categories, in that some tasks are included in multiple categories. This is not a mistake! Web design teams vary greatly according to the people and projects involved, and sometimes tasks are shared.

The information architect’s ultimate goal is to organize the content in such a way that people can find what they want, when they want it. Moving through the site should be intuitive for end users, yet also make sense for the business owner. This can be particularly challenging, as much of the success of the website lies here. In other words, if the information architecture fails, the site fails. If people can’t find the content they seek, the plain and simple truth is that they will go elsewhere. Therefore, it is important not to overlook the tasks in this category. Even if you are the only person on your web team, spend ample time at the beginning of the project figuring out the best way to organize the site’s content. Look for more on this in Chapter 2. In the meantime, here are some additional resources you might check out:

• A Project Guide to UX Design: For User Experience Designers in the Field or in the Making by Russ Unger and Carolyn Chandler (New Riders Press, 2009)

• Content Strategy for the Web by Kristina Halvorson (New Riders Press, 2009)

• Jakob Nielsen on Usability and Web Design (www.useit.com)

• User Interface Engineering (www.uie.com)

TIP UX is an acronym for user experience. In web design, UX is often used to refer to anything that affects a user’s perception of the website. UX specialists often have experience in psychology, as well as design and computer science.

Design

The design tasks of the site… it’s what you’re reading this book for, right? The overarching topic of design covers everything in this chapter, but the more specific design-related tasks typically include:

• Creating comprehensive designs (comps or mockups) for key sections/pages/screens of the project

• Translating those comprehensive designs into working prototypes

• Developing supplementary graphic content as needed

• Identifying the transitions between sections/screens/pages

• Coding the designs to display in web browsers

I cover more details about these tasks in the following chapters, so I won’t discuss those in depth here. In addition to these tasks, the designer may or may not also be involved in the coding or programming of the site. Keep reading for more on what those tasks entail.

Coding/Programming

A website is nothing without the code to make it happen. For smaller website projects, the code needed is typically basic enough to be coded by the designer. But for larger or more complex