Building Web Sites All-in-One For Dummies® (6 page)

•
Balance positive and negative comments.
Launching into a laundry list of everything that is wrong with the site is a bad idea. Remember, a human being did the work — not a machine. The best way to have your suggestions ignored is to sound like you're launching a nitpicky attack. Try to balance your negative comments with positive ones. For instance, instead of saying, “I don't like where the logo is, it's crunched up in the corner,” try, “I see that you've put a lot of work into this. It's looking good, but I think I'd like to see the logo with a little more space around it. It seems a bit crowded.” The second approach takes a few seconds longer but helps build and maintain a good working relationship. Web projects take a long time and can be difficult and frustrating. To avoid creating problems, take a few moments to consider delivery of comments.

•
If something doesn't look right, ask questions.
Web sites go through a lot of changes throughout the process. If you think something looks wrong, ask what's going on. Sometimes, there is a good explanation for why something looks strange. For example, if the logo is missing, don't just say, “The logo is missing.” Instead, try something like, “I noticed the logo is missing, why is that?” It could be an oversight; it could be that a new logo is being developed. Again, delivery of critical comments makes the difference between a healthy collaboration and a confrontation.

•
Keep your feedback mostly objective.
Remember that the project isn't your personal, artistic statement. If you don't like the color but the colors have already been decided, accept the decision and move on to other issues. It's okay to have some personal reactions to the site and comment on them, but don't be offended if you're overruled. Everyone has something to contribute, but not every idea can be included — or the site will look like a crazy quilt!

•
When giving feedback on an interactive piece, be specific!
It's not helpful to look at the functionality of a piece and respond to the developers with, “It's broken.” Designers and developers that are working on interactive pieces need specific information about what went wrong. They need to know what you did (for example, “I clicked the Shop Now button”), what you expected to have happen (“I thought it would take me to the shopping cart page”), and what actually happened (“I got a page that said,
‘404 error — Page Not Found'
”). This tells the developer or designer exactly what to look at. “It's broken” doesn't tell them anything. If you encounter an error message or error code, tell the designer/developer what it is —
specifically
— and what action you took right before it occurred. The more information you give, the better. If you don't give specific information up front, you can count on playing a game of 50 questions later as designers and developers try to wrestle the details from you.

Preparing to Redesign an Existing Site

Most of the preparations that you need to do for a new site also apply to an existing site. Some differences that you should take into consideration as you prepare to redesign a site include these:

•
Evaluate your current Web site.
The first task is to look at the current site and evaluate how well it aligns with your needs. Look at the content, functionality, and look and feel as separate elements. Take each aspect of your site into consideration — technologies used, coding techniques, site structure, colors, style of writing, and so on. List them all and rate them based on whether they can be used on the new site.

•
Have experts look at what you have.
Large or complex sites need to be evaluated by selected experts or consultants. In particular, coding and technologies need to be evaluated to make sure that you don't reuse old, outdated technologies instead of using a redesign as an opportunity to make important upgrades.

•
Don't get caught up in the “newer is always better” line of thinking because it isn't. You know the old saying — “If it isn't broken, don't fix it.” Sometimes that's the best course to take. Make sure you weigh the pros and cons of keeping or replacing code carefully before you dive into a big project.

•
Include all stakeholders in the initial evaluation process.
This can help you verify that the information on your site is current and accurate. A site redesign is a good opportunity to involve all interested parties in looking at and updating materials that have been posted for a while. It's common for certain types of information to be posted to a site and then forgotten. Be sure to look at contact information and directions pages because they often harbor out-of-date information. Make sure you include appropriate professionals from the client organization in the evaluation. For example, sites that deal with financial, legal, or medical information will need to be reviewed for compliance with laws specific to those industries (Sarbanes-Oxley, HIPAA, ADA, and so on). It is good practice to ask your client about possible compliance issues and have them identify individuals within their organization that will be responsible for reviewing site content in that context.

•
Check the front-end code.
Look at the code that handles the display of your interface — HTML and Cascading Style Sheets (CSS) (if your site has them). These technologies have undergone many rapid changes over the past few years, and many sites could benefit from recoding the pages. In Book III, Chapters 2 and 3 have information about current HTML and CSS coding.

•
Gather the data and make decisions.
When the analysis and evaluation are done and you have collected all the feedback from interested parties and
content owners
(people responsible for the content of part or all of a site), start the planning process. Compare what you have with what you need your site to be and then decide what parts of the current site can be used as is, repurposed and used, or thrown out. When you're deciding what to do, keep in mind that it's often better to put a little more effort into recoding or reworking an existing item than it is to roll a cumbersome or badly developed piece of functionality into a new site. One of your project goals is to make the site more efficient. With the analysis in hand, you're ready to start working on meeting with stakeholders and your team to plan your approach.

Chapter 2: Build a Web Team or Go It Alone

In This Chapter

Evaluating what you need to do it yourself

Knowing who can help

Giving the reins to the client

Web design projects require a blend of skills. The unique blend of creative and technological requirements means that an aspect of Web design and development draws on skills you've used in other positions — or on skills you don't necessarily consider your strengths. The most effective Web professionals are those who know how to leverage their own personal skills and talents and find others who can fill in any skill gaps. Specializing in what you're good at and aligning yourself with others who share your work philosophies enables you to build long-term relationships with those who can work with you to get the job done — whether you go it alone or are part of a team. This chapter covers both scenarios to help you decide which route is the best for you.

Flying Solo: Skills You Need to Go It Alone

You need many skills to single-handedly undertake a Web design project. Some of these skills are tangible; for example, you must know some HTML and CSS (Cascading Style Sheet) skills as well as how to effectively use Photoshop and other graphics programs. Other skills are intangible: You must be able to provide good service while managing the project and your time and keeping the budget under control. This section lists and describes some of the necessary skills you need to fly solo on a Web-design project.

Managing the project

If you're doing most or all of the work yourself, you must be able to work on several aspects of the project simultaneously — requiring your project, time, and money-management skills — in addition to communicating all that to your client. You can make these tasks easier by

•
Keeping notes:
Get a notebook and write down what you've done, why you have done it, and what you'll do next.

•
Making a special e-mail folder for project-related e-mails:
If you can, set up your e-mail to direct all mail pertaining to the project to that folder. (Many e-mail programs, including Microsoft Outlook, Entourage, and Lotus Notes, have this capability.)

•
Drawing up a budget:
Your budget should include your fees for doing the work (Hourly Rate x Time = Cost of Work), fees for any contractors you hire, and also fees for project management. You should also include fees for extra services (say, image scanning or writing content) if you want to make those available to the client. Another possible thing to add is special software or equipment. If your client
requires
that you buy something, build the cost of it into the budget.

•
Establishing a timeline:
Clients often don't understand how much work and time a Web project requires — they just know that you make it look simple and easy. Developing a quality site isn't quick, but creating a to-do list for each week (or day) and also marking deadlines on a calendar helps you track what you need to do and when.

•
Devising a troubleshooting plan:
Technological issues are inevitable. For instance, multimedia elements sometimes don't download fast enough, certain functions don't work as expected, or layouts have CSS issues. These sorts of problems can take some time to troubleshoot and fix. Your plan for the troubleshooting process should include staying task oriented and
not
participating in finger-pointing. During troubleshooting, work with the server administrators and others who are involved with the project to find a solution. Communicate with your client; explain the problem and what you're doing to fix it. Stay calm and confident so that your client feels reassured that you are in control and dealing fairly with them. If you need to bring in help, tell your client who you're bringing in and why.

The bottom line here is that if you don't figure out how much time you have to complete the project and how much money is in the budget
very early in the process
— and communicate that to your client — you could end up wasting a lot of time and energy planning a project only to find out that the client is unrealistic in her expectations.

Serving your customer

Part of a Web project manager's job is customer service. Providing good customer service can help ensure that your clients are happy, and that can help you build a solid reputation. The following list describes four important aspects of customer service:

•
Communicate often and minimize technical jargon.
You must communicate often about the status of the project so that your client knows what's going on. Communicating with less-than-Web-savvy clients, however, can be a little awkward. Don't talk down to them, but avoid using a lot of jargon (which can make them feel stupid). Try to ease into the techno-talk gently unless you're sure they speak geek, too.

•
Stay professional.
Web jobs can be a lot of fun for everyone if they're well run and everyone has a good attitude. Unfortunately, sometimes you won't mesh well with a client. If that happens, you must keep a professional attitude, do the work, treat the client with respect, and just suffer through it. That's business. However, in rare situations — for instance, if a client becomes abusive — you might find it impossible to continue working with that client. In that case, you must decide how to wrap things up with the client; you can either finish the job or hand it off to another designer. Either way, you must carefully explain to the client that they would be better off working with someone else. For those rare occasions when a working relationship goes sour, be sure that your contract allows you to get out of an abusive situation.

•
Know when to say “no” to a project.
Accepting every job that comes your way might seem like a good idea. It isn't. Some clients don't have the money or game plan in place to make it worth your time to work with them. If you waste time on someone who can't make a commitment, you could be missing out on a client who is ready and able to start a project. If a client isn't ready right now, stay in touch with him. He will appreciate your interest in his project and might just give you the job when it's time.

•
Take only projects that you can execute well.
Your portfolio and reputation are important. Delivering a good product is a great thing, and your client will recommend you to their colleagues — that's free advertising. Delivering a bad product can have the opposite effect, though, because you might lose that client and any prospective clients who ask them for advice on hiring a Web designer. This doesn't mean that you should never take a project unless you can do every part of it. If a project has some components you can't do on your own, call in a specialist — just make sure you let the client know you're working with a team. The fewer surprises to your client, the better off you'll be.

Dealing with HTML, CSS, and other scripting

Web pages are made of code, so no matter how you look at it, you can't avoid code. Luckily, basic Web code — HTML and CSS — is fairly easy to learn. It might seem complicated at first, but with practice and patience, you'll be hand-coding pages pretty quickly. Many tools can help you generate code, but you still have to understand the code because sometimes you have to roll up your sleeves and get in there.

Just bear in mind the following.

• Even the most sophisticated software package is still just software and can make mistakes.

• Many advanced techniques require a deeper understanding of the underlying code and how it works.

• Taking on an existing site to redesign or maintain requires that you know how to analyze the code that's there. If you can't, you might find that you can't work with the site.

Book III covers coding by hand, using Dreamweaver, and techniques to help you take advantage of both. Figure 2-1 shows an example of HTML code. The first few times you look at the code, it might seem confusing, but it will quickly become familiar.

Using Photoshop, Fireworks, and other graphics applications

If you're going to do design work, you need some design skills. In addition to understanding how to use color, fonts, and images to support your content and how to use layout effectively, you need to know some basics in a variety of graphics programs, including these three:

•
Adobe Photoshop CS4:
This is a great tool for doing practically everything you need to do with Web graphics. Photoshop is the industry standard for working with graphics. With Photoshop, you can work with photos and create supporting graphics (such as banners and buttons) and any other graphics you need. If you want to pursue a professional career in design, you need Photoshop skills. See Book III, Chapter 4 for a brief introduction to the Photoshop CS4 interface and Tools panel.

•
Fireworks:
Use this Web graphics creation tool to manipulate photos and create other graphics. Its strength is in being tightly integrated with Dreamweaver and Flash. (You can launch Fireworks easily from within either program via a handy icon.) Fireworks also has great optimization tools and a helpful and easy-to-use batch-processing tool (which is good for resizing a large number of photos at once, among other things).

•
Adobe Illustrator:
With Illustrator, you can create and edit vector graphics. A
vector graphic
is one that is made up of mathematical information defining points and lines that make up shapes. A discussion of bitmap versus vector graphics is in Book III, Chapter 4. Vectors are great for building graphics with hard lines, such as logos.

•
Note:
You have to convert vectors into bitmaps to use them on a Web site. Photoshop and Fireworks are primarily bitmap editing programs; bitmaps are the choice for photographs. Figure 2-2 shows a vector graphic (on the left) and a bitmap graphic side by side. Notice the jagged edges created by pixilation in the bitmap.

Information about how to create, use, and prepare graphics for use on a site is included in Book IV.

Developing content

Good Web writing skills are essential for creating a successful Web site because a site without good content isn't useful to anyone. Whoever creates the site's content — whether you or a partner — must understand how people use Web sites and why they go to the site in the first place.

Good writing skills also come in handy when you're preparing presentations and proposals. Almost all projects require some degree of writing skill for preparing contracts, proposals, scope documents, and other communications. Short paragraphs and bullet points help readers find what they need quickly.

Considering basic computer and Internet skills

Not that we want to state the obvious, but you need some computer skills if you are going to design Web sites.