Online Book Reader

Home Category

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [334]

By Root 1310 0
relaxing, and feminine the experience of visiting her salon can be.

These two sites, although they require the same general technical skills, demand vastly different visual and technical designs because the clients and their users are vastly different.

Ironically, someone could simultaneously be a graduate student and a patron of the salon, but the person would still have a different identity in these different sites. If you’re going to a university site, in a student mindset, you want quick, reliable information. If, after you sign up for classes, you’re looking for a salon, you likely want to be pampered.

Web sites are experiences. The design of the site should reflect the experience you’re trying to give the user when he visits your site.


Finding out the user’s technical expertise

Understanding the user isn’t just an exercise in psychology. You also need to estimate the users’ technical proficiency because it can have a major impact on your site. Consider these issues for the typical user:

♦ Whether the user has broadband access: University students, hard-core gamers, and Web developers often have high-speed Internet access, so they don’t mind a page with lots of video, multimedia assets, and large file sizes. (In fact, they may expect a page like this.) Lots of people still use dialup connections. If your audience has slower connections, every image creates a delay. Audio and video assets are completely unavailable to this group — and even make your site unattractive to them.

♦ Whether the user has a recent browser: You have no way to predict which browser a user has, but think about whether your target audience has a reason to install any of the current browsers. By and large, grandmothers use whichever browsers were on their machines when they purchased them. (I do know some L337 H@XX0R grandmas, however.) If most people in your audience are still using the AOL browser — believe it or not, it’s still used a lot — using advanced CSS and JavaScript tricks on your page may not be the best choice.

♦ Whether the user has a recent computer: As technical people, we tend to assume that everyone else keeps up-to-date on technology. That’s not necessarily an accurate assumption.

♦ Whether the user has certain proficiencies: If you include a Flash animation, for example, the user might not have the right version of Flash installed. You have to decide whether it’s reasonable to expect the user to install a plugin.

♦ Whether this will be a largely mobile application: These days, every Web site should be considered a potential mobile site, but if a large percentage of your visitors will be using mobile devices to view your page, this will have implications on your design.

This process isn’t about stereotyping, but you must consider the user while you’re building a site. You want to match users’ expectations and capabilities, if possible.

Of course, you’re making assumptions here, and you may well be wrong. I once did some work for a club for retired faculty members, and I based my expectations on their being retired. I should have based my assumptions on their being professors. And they let me have it! Be willing to adjust your expectations after you meet real users. (For professional work, you must meet and watch real users use your site.)


Building a Site Plan

Often, the initial work on a major site involves creating a plan for the site design. I like to do this step early because it helps me see the true scope of the project. A site plan is an overview of a Web site. Normally, it’s drawn as a hierarchy chart.

I was asked to help design a Web site for an academic department at a major university. The first question I asked was, “What do you want on the Web site?” I wrote down everything on a whiteboard, with no thought of organization. Figure 2-1 shows a (cleaned-up) version of that sketch.

Figure 2-1:

We need a lot of stuff on this site. Good grief!

For all the sketches in this chapter, I used Dia, the open-source drawing tool. An excellent tool for this kind of work, it’s included on

Return Main Page Previous Page Next Page

®Online Book Reader