The Web Medium

The Web Medium

While the human element may be the most critical aspect of Web-based communication, effective Web design is also extremely dependent on correct technical execution. If a site is poorly constructed or error ridden, visitors may lose sight of its message or function. To excel at Web design, practitioners should have a complete understanding of the elements of the Web medium.

The Web medium is composed of three major components

The Web medium is composed of three major components: client, server, and network. We will briefly overview each component and its subcomponents here in order to provide designers with a complete vocabulary of modern Web technology—and possibly provoke further study. We will also provide links about the activities of the various standards bodies, particularly the World Wide Web Consortium (W3C), which defines Web technologies, and the IETF, which sets many of the network, related protocols. Later chapters will focus on correct site execution and the effects of Web technologies on design decisions.

Core Web Technologies

The Web is implemented as a client-server system over a vast public network called the Internet. The three components of any client-server system are the client side, the server side, and the network. A visualization of the basic components that make up the Web is shown in Figure 3-1. We will now survey each of the primary components in turn, starting with the client side, which is primarily defined by the browser.

Web Browsers

The Web browser is the interpreter of our Web sites. It is very important to understand the Web browser being supported and what capabilities it has. The two most common browsers at the time of this book’s publication are Microsoft’s Internet Explorer (which accounts for the majority of browser users) and Netscape’s Communicator (Navigator). While these two browsers account for most users accessing public Web sites, there are numerous other versions of browsers in use.

The problem with published browser usage reports is that they don’t necessarily reflect your browsing audience. Consider a site that publishes Macintosh software—its browser usage pattern might actually show a fair number of users with OmniWeb, a Macintosh-specific browser that has a notable number of rabid followers. However, most sites probably wouldn’t consider OmniWeb something to even think about. Depending on your users, the types of browsers will vary. From statistics showing that surveyed sites favor a particular browser, it does not necessarily follow that your site will exhibit the same browser usage patterns—though it is pretty likely. Look at your own log files to determine browser usage patterns. If you are building an intranet site, you might not even have to look at your logs to understand what browsers are in use.

Rule: Beware of relying on published browser usage figures; track actual browser usage on your site.

Given a mix of browsers made up of the top two vendors with a smattering of other browsers, the question becomes how this information relates to site design and technology use. One possibility is to look at the various browsers and their capabilities, and then design for some common set of features.

Considering the variations among browsers, the common ground isn’t terribly advanced. The safest design platform for some still seems to be what Netscape 3.x supports, though more and more designers are embracing design for the 4.x and 5.x generation browsers and using CSS, Flash, and JavaScript more often.

The only problem with moving to the next generation is that the gap between what different generations of browsers support can be rather large. Because of this, sites (and users) significantly favor Internet Explorer over Netscape. (The installed base for IE browsers includes between 85% to 90% of all users at the time of this writing.) With the advent of Netscape’s Mozilla-based browsers (Netscape 6 and 7, and Mozilla 1.0), things may get more interesting because these browsers promise more support for standards-based Web page development than Netscape’s 4.x generation browsers. Even so, there will not be an overnight adoption of new, non-IE browsers around the Web. As the installed base increases, the longer it will take for consumers to embrace new technologies. Therefore, public sites should consider developing for at least one, if not two, generations prior to the current release of a browser. Even more than six years after the release of the 2.x generation browsers, some public sites still support that generation of browsers perfectly.

Tip: Consider developing for at least the last two, if not three, versions of a browser to account for slow upgrades.

It is easy to be overwhelmed with potential browser considerations, even if dealing just with the major browsers’ most recent versions. At the time of this writing, there were more than 20 major versions of the 4.x generation alone and more than 400 other different potential Netscape variations—primarily older versions or beta releases— floating around the Web, all with different capabilities and bugs. Of course, Netscape isn’t the only browser vendor, and there are slight upgrades made to Internet Explorer as well. The only point to make here is that browsers are moving targets. Every release has new features and different bugs. Just because someone is using a 4.x generation browser doesn’t guarantee a site will work the same under the same version on another platform or under an interim release. Sorry, but Netscape 4 or Internet Explorer 4 on Windows won’t work the same on Macintosh and NT. Even different interim releases like 4.03 and 4.5 may have significant differences in page rendering and bugs. Add in the continual use of half-done beta browsers, and you have a recipe for disaster. Pages often won’t render correctly, and errors will ensue. Users unfortunately won’t always place blame correctly. A small layout problem may be interpreted as the designer screwing up, not the browser vendor releasing a poorly tested product.

Rule: Users often don’t blame browsers for simple errors—they blame sites.

So what’s a developer to do? First, make sure you know what’s going on. Keep up with the latest news in browsers at sites like In particular, watch out for beta and interim releases. They are often the most dangerous, and users will not consider a 6.1 and 6.2 to be significantly different.

Tip: Be careful of features in beta and interim releases of browsers.

The next thing to consider is exactly what browsers you need to be aware of. This requires that you know the browsers used by the site’s audience, so look to your log files. In general, public sites should be as browser agnostic as possible, while private sites like intranets may be designed specifically for a single browser. Designers should be aware of the browser families listed in Table 3-2. Users interested in development for non-PC platforms may also find Palm (, television ( and, and cell phone simulators ( very useful tools for testing sites.

Given the number of browsers available and the significant difficulties involved in testing dozens of different configurations just to ensure a site renders under common viewing environments, some authors decide to write for a particular browser version or indicate that a particular vendor’s browser is the preferred viewing platform. Many sites that do this exhibit a browser badge on the site. If a particular browser is required, do not blatantly advertise it on the home page as many sites do. It simply announces that you practice exclusionary development.

Markup Languages

The foundation of any Web page is markup. Markup technologies such as HTML, XHTML, and XML define the structure and possible meaning of page content. Despite the common belief that markup languages define the look of Web pages, and the equally common use of HTML in this manner, page appearance should really be accomplished using other technologies, particularly style sheets.


HTML (HyperText Markup Language) is the primary markup technology used in Web pages. Traditional HTML is defined by a SGML (Standardized General Markup Language) DTD (Document Type Definition—see the upcoming section “XML”) and comes in three primary versions (HTML 2, HTML 3.2, and HTML 4). HTML 4 comes in three varieties: transitional, strict, and frameset, with most document authors using the transitional variant. HTML 4.01 is the most current and final version of HTML.

While the various tags and rules of HTML are fairly well defined, most browser vendors provide extensions to the language beyond the W3C definition. Further, the browsers themselves do little to enforce the markup language rules, leading to sloppy usage of the technology. Also, while HTML should be used primarily for structuring a document, many developers use it to format the document for display as well. HTML’s formatting duties should eventually be completely supplanted by Cascading Style Sheets (CSS). However, even with adequate style sheet support in browsers, many developers continue to use HTML tables and even proprietary HTML tags in their page design. There are no plans for further development of HTML by the W3C and browser vendors, and developers are encouraged to embrace XHTML.

The HTML 4.0 specification is available at the following URL:


XHTML is a reformulation of HTML using XML (extensible Markup Language) rather than SGML. XHTML solves two primary problems with HTML. First, XHTML continues to force designers to separate the look of the document from its structure, by putting more emphasis on the use of style sheets. Second, XHTML brings much stricter enforcement of markup rules to Web pages. For example, XHTML documents must contain only lowercase tags, always have quotes on attributes, and basically follow all the rules as defined in the specification. Figure 3-3 shows an example document in HTML and its equivalent in XHTML.

A rigorous discussion of HTML and XHTML that covers all the requirements of XHTML can be found in Appendix C as well as in the companion book, HTML: The Complete Reference (

XHTML’s syntactical strictness is both its biggest benefit and biggest weakness. Well-formed pages may be easier to manipulate and exchange by a program but are harder to create for a human. Uptake of XHTML has been slow because of this strictness. XHTML’s extra rigor makes it less accessible than HTML, which is much more forgiving

to beginners. So, until more tools that generate correct XHTML become available, the language will probably continue its slow uptake in the Web community at large.

The following URLs provide important information about XHTML:

  • XHTML 1.0 Specification:
  • XHTML Basic Specification:
  • XHTML 1.1 Module XHTML:


    Extensible Markup Language (XML) is being touted by many as a revolutionary markup technology that will change the face of the Web. Yet, despite the hype, few understand exactly what XML actually is. In short, XML is a form of SGML modified for the Web;

    thus, it allows developers to define their own markup language. So, if you want to invent YML (Your Markup Language) with XML, you can. To do this we would define the rules of our invented language by writing a document type definition, or DTD. A DTD defines how a language can be used by indicating what elements can contain what other elements, the values of attributes, and so on. A simple DTD to define a grading language for elementary school children is defined here:

<!--Grades DTD-->
   <!ELEMENT  grades  (student+)>
   <!ELEMENT  student (course+)>
   <!ATTLIST  student  name  CDATA  #REQUIRED
              sex  (M|F)  #REQUIRED
              level  (1|2|3|4|5|6) #REQUIRED>
   <!ELEMENT   course EMPTY>
   <!ATTLIST  course title  CDATA  #REQUIRED
              grade  (PASS|FAIL) #REQUIRED>

This DTD file named grades.dtd would be referenced by an XML file such as the one shown here:

   <?xml version="1.0"?>
   <!DOCTYPE GRADES SYSTEM "grades.dtd">
   <!-- the document instance -->
   <student name="Thomas" sex="M" level="3">
      <course title="Math" grade="PASS" />
      <course title="English"  grade="FAIL" />
   <student name="Sylvia" sex="F"  level="1">
      <course title="Math" grade="PASS" />
      <course title="Art" grade="PASS" />

The example would not only be syntactically checked, but we could check the validity of the document against the DTD, a process known as validation. Yet, regardless of correctness, without a defined presentation you will not see much of a result, as shown in Figure 3-4. Presentation will eventually be handled by applying style rules to the XML document using one of the technologies discussed in the next section.

Many readers may now be wondering about the value of developers defining their own individual markup languages. Why not just use XHTML or HTML? Wouldn’t inventing new languages be the equivalent of creating a markup Tower of Babel on the Internet? Maybe, or it just may enable a whole new range of possibilities for markup. So far, the negative impact of inventing too many custom XML-based languages has been limited, and most Web developers are content using a commonly defined language like XHTML, WML (Wireless Markup Language), SVG (Scalable Vector Graphics), and numerous other XML-based languages. The precision and self-description properties of XML documents should enable a new class of Web technologies called Web Services that really could change the Web by allowing sites and programs to talk with each other more easily.

Style Sheet Technologies

Markup languages like HTML do not excel at presentation. This is not a shortcoming of the technology, but simply that HTML was not designed for this task. In reality, the look of the page should be controlled by the design elements provided by CSS (Cascading Style Sheets). In some cases, particularly when using an XML language, markup transformation may also be required to create the appropriate presentation format, so XSL (eXtensible Style Language) will be used as well.


CSS (Cascading Style Sheets) is used to specify the look of a Web page. This technology has been present at least partially in browsers as old as Internet Explorer 3.0, but it has long been overlooked in favor of HTML-based layout for a variety of reasons, including lack of consistent browser and tool support, as well as simple developer ignorance. With the rise of the 6.x generations of browsers, CSS is finally becoming a viable prospect for page layout.

CSS-based style sheets specify rules that define the presentation of a type of a type (for example, <h1>)—a group or, more correctly, class of tags—or a single tag as indicated by its id attribute. Style sheet rules can be used to define a variety of visual aspects of page objects, including color, size, and position. The various style rules can be combined depending on tag usage—thus the “cascading” moniker for the technology. An example of CSS in use is shown in Figure 3-5.

These URLs provide more information about CSS:

  • CSS1 Specification:
  • CSS2 Specification:


    XSL is another style sheet technology used on the Web. It is primarily used to style XML languages. This is usually accomplished through XSL Transformation (XSLT), which is often used to convert XML markup into other markup, often XHTML or HTML plus CSS. It is possible to also use XSL Formatting Objects to style content, but, so far, this does not seem to be a commonly employed aspect of XSL. Thus, when developers speak of XSL, they often are speaking of XSLT. The relationship is set on the second line in the grades.xml file. The grades.xsl file specifies the transformations that would result in the HTML output.

    Information about XSL can be found at these URLs:

    • XSL Transformations 1.0 Specification:
    • XSL Activity at W3C:


      Most Web browsers support either directly or through extension a variety of image formats, such as GIF, JPEG, Flash, and PNG. The image formats can be separated into two general categories: bitmap (or raster) images and vector images. Raster images describe each individual pixel and its color, while vector images describe an image generally as a collection of mathematical directions used to draw—or more precisely, render—the image. Regardless of storage format, all images become bitmaps onscreen.

      Some designers speak of the value of one general format over the other, but, in reality, both have their problems. Vector images tend to be compact in description and can be scaled mathematically, but they suffer in potential rendering time and realism. Bitmap images can be very detailed but do not scale up well and tend to be very large in terms of file size. We will examine the specific types of the images in the following sections.


      GIF (Graphics Interchange Format) is a bitmap format that does not provide a great degree of compression or color support, being limited to 8-bit or 256 simultaneous colors. However, the GIF format is relatively versatile and supports transparency, animation, and interlacing. It is commonly used in Web pages for logos, graphical navigation elements, and photos that do not require high-quality reproduction.

      Information about the GIF Specification can be found at this URL:


      JPEG (Joint Photographic Experts Group) images support up to 24-bit color and are well suited for reproduction of photographs. Despite being a raster format, JPEG images allow designers to balance file size with image quality and support an impressive lossy compression algorithm that can significantly shrink image size with little discernable quality loss to the casual viewer. JPEG images do support progressive loading, but are not quite as versatile as GIF images because they lack transparency and animation features.

      Information about JPEGs can be found at these URLs:

      ■ JPEG Activity at the W3C:

      ■ JPEG Specification:

      The JPEG 2000 standard aims to eliminate many of the problems with JPEG and provide an even greater degree of quality and compression than standard JPEG files. However, so far, JPEG 2000 is not available in Web browsers.


      PNG (Portable Network Graphics) images provide an advanced image format designed to replace GIF as the dominant form of graphics on the Web. PNG images provide three primary advantages over GIF: alpha transparency, which provides variable degrees of transparency (versus GIF, which has a single degree of transparency); gamma correction to help improve image brightness across systems; and improved interlacing and compression. While PNG provides numerous benefits, many of its advanced features are not properly implemented in the latest browsers, so the rush to embrace the format has yet to materialize.

      Information about PNG can be found at these URLs:


      Macromedia’s Flash is a vector image format that supports still images, animations, and complex interactivity using a built-in scripting language similar to JavaScript, called ActionScript. The format, defined in the form of an SWF file, is arguably the most popular multimedia format on the Web. It is used for implementation of navigation systems, animations, and presentations, as well as full-blown Web sites. The biggest complaint made about the format is that it is proprietary; thus, Macromedia has opened the format to the public, though it is not blessed by the W3C (which backs a rival standard called SVG). It could be further said that Flash, which was first popularized as an alternative to Macromedia’s complex and sometimes clunky CD-ROM development environment Director, has become amost exactly what it sought to augment.

      Information about Flash can be found at these URLs:

      • Macromedia’s Flash Homepage:
      • SWF File Format Page:


        SVG (Scalable Vector Graphics) is an XML language for describing simple two- dimensional images. Because the language is XML based, scripting interaction is straightforward using standard JavaScript in conjunction with the Document Object Model. While the SVG format is an open standard, it has been slow to be adopted by the Web development community and will be unlikely to overtake Flash in the near term.

        Information about SVG can be found at these URLs:


VML (Vector Markup Language) is yet another vector image used in Web pages. It is relatively unnoticed by most Web developers, despite the fact that it has been natively supported in Microsoft Internet Explorer since the 5.0 version. It was briefly introduced to the W3C for standardization, but SVG is being pushed over VML, and Flash is currently the popular vector format for the masses. However, Microsoft-oriented developers should be well aware of this format, since it is found in pages exported from Microsoft products.

Information about VML can be found at these URLs:

  • W3C VML Note:

    Other Image Formats

    The previously discussed image formats are the primary standard for well-supported image formats on the Web. However, other images are supported in some browsers, and, in theory, the <img> tag does not discriminate among the type, of images included in a Web page. The most important other format is probably BMP, which is supported by Microsoft’s Internet Explorer. A variant called Wireless BMP (WBMP) is also noteworthy and is supported in some wireless browsers. Many browsers, particularly older browsers or those with a UNIX release, support Xbitmaps. Using plug-ins or helper applications, everything from PostScript files to TIFFs can be viewed in a browser.


A little animation can spice up a Web page a great deal. Animation on the Web is used for many things: active logos, animated icons, demonstrations, and short cartoons. There are a variety of animation technologies available to Web designers. Some of the most common animation approaches include animated GIFs, Flash and Shockwave, and JavaScript animations (also called DHTML). Other animation possibilities also exist: Java-based animations and older animation techniques such as “server push” are still possible. However, the field has narrowed significantly, and very few older or propriety animation formats are actually worth exploring.


Audio technologies on the Internet cover a lot of ground, from traditional download- and-play systems in a variety of formats such as WAV and MP3 to streaming audio, which attempts to play data as it is downloaded over a connection. Surprisingly, the most advanced technologies, and the most popular, may not be the best solution for Web sites. For example, MP3 files, while of high quality, tend to take too long to download, and streaming technologies might not provide reliable playback in all situations because of the unpredictable delivery conditions on the Internet. Fortunately, much has improved since the simple days of adding a WAV or MIDI file for background music, but there is still a long way to go before sounds will become commonplace, primarily because of the large size of audio files.

Audio files can be compressed to reduce the amount of data being sent. The software on the serving side compresses the data, which is decompressed and played back on the receiving end. The compression/decompression software is known together as a codec. Just like image formats, audio compression methods are either lossy or lossless. Typically, audio codecs are lossy because of size considerations.


The holy grail of Internet multimedia is certainly high-quality, 30-frames-per-second, real-time video. The main challenge to delivering video over the Internet is its extreme size. Digital video is measured by the number of frames per second of video and by the size and resolution of these frames. A 640 × 480 image with 24 bits color and a frame rate of 30 frames per second takes up a staggering 27MB per second—and that’s without sound. Add CD-quality audio (705,600 bits of data for each second of data; for stereo, double that amount to 1.4 Mbps) and the file size increases proportionately. Granted, these are uncompressed frames and audio, but the point is that a lot of compression as well as bandwidth is needed for high-quality, large-size video.

As with audio, numerous formats are supported for Web-based video, including AVI, QuickTime, MPEG, RealVideo, and ASF. Table 3-5 presents a brief overview of the various Web video formats.

Even with improvements in network and compression technology, audio and video services have a long way to go on the Web if they are to approach the quality and reliability that users are familiar with from radio and television. Until that time, developers should always proceed with caution with real time media technologies. Further, just because audio and video can be delivered over the Web doesn’t mean that it should be. Always pick the best media format for the message to be delivered and remember that if you have nothing to say, whether it is in Flash or not isn’t going to help. We now switch gears and turn our attention to the programming aspects of the Web medium.

Programming Technologies

Understanding the basic idea of adding programming to a site isn’t hard, but it’s easy to get overwhelmed by the number of technologies to choose from, particularly if you assume that each is very different. The reality is that Web programming technologies can be placed into two basic groups: client side and server-side. Client side technologies are those that are run on the client, generally within the context of the browser, though some technologies like Java applets or ActiveX controls may actually appear to run, or may truly run, beyond the browser, and Helper applications do so implicitly. Of course, programs can and do run instead on the server and thus are appropriately termed server-side programming. Table 3-6 presents the general programming choices available to Web developers.

The challenge of Web-based programming is making sure to choose the right technology for the job. More often than not, designers are quick to pick a favorite technology, whether it is JavaScript, ColdFusion, or ASP and use it in all situations. The reality is that each technology has its pros and cons. In general, client-side and server-side programming technologies have characteristics that make them complimentary rather than adversarial. For example, when adding a form to a Web site to collect data to save in a database, it is obvious that it would make sense to check the form on the client side to make sure that the user entered the correct information, since it would not force a network round-trip to the server just to check the input data. Client-side programming would make the form validation more responsive and frustrate the user less. On the other hand, putting the data in the database would be best handled by a server-side technology, given that the database would be located on the server side of the equation. Each general type of programming has its place, and a mixture is often the best solution.

Client Side

Helper applications Browser API programs —Netscape plug-ins —ActiveX Controls —Java applets Scripting languages —JavaScript —VBScript

Server Side

CGI scripts and programs Server API programs —Apache modules
—ISAPI extensions and filters —Java servlets —Active Server Pages (ASP/ASP.NET) —ColdFusion —PHP

Client-side Programming

The first group of programming facilities we discuss are client-side technologies. Client- side programming technologies run the gamut from simple helper applications— launched upon download of media types like Zip files or of Word documents—to scripts built in browser-based scripting languages, such as JavaScript.


One approach to client-side programming comes in the form of programmed solutions, like helper applications. In the early days of the Web, around the time of Mosaic or Netscape 1.x, browsers had limited functionality and support for media beyond HTML. If new media types or binary forms were encountered, they had to be passed to an external program called a “helper application.” Helper applications generally run outside the browser window. An example of a helper application would be a compression or archive tool like WinZip, which would be launched automatically when a compressed file was downloaded from the Web. Helpers are often problematic because they are not well integrated with the browser and lack methods to communicate back to the Web browser. Because the helper was not integrated within the Web browser, external media types and binaries could not be easily embedded within the Web page. Last, helper applications generally had to be downloaded and installed by the user, which kept many people from using them.

The idea of a helper application is rather simple: it is a program that the browser calls upon for help. Any program can be a helper application for a Web browser, assuming that a MIME type can be associated with the helper. When an object is delivered on the Web, HTTP header information is added to the object, indicating its type. This information is in the form of a MIME type. For example, every Acrobat file should have a content-type of application/pdf associated with it. When a browser receives a file with such a MIME type, it will look in its preferences to determine how to handle the file. These options may include saving the file to disk, deleting the file, or handing the file off to another program, such as a helper or browser plug-in. With MIME types and helpers, a developer can put Microsoft Word files on their Web site; users may be able to download them and read them automatically, assuming they have the appropriate helper application.

Oddly, helper applications are not used as much as they could be. Consider, for example, the use of HTML on an intranet. Within an organization, data may often be created in Microsoft Word or Excel format. While it is possible to easily translate such information into HTML, why would one want to? HTML is relatively expensive to create and, often difficult to update, and may limit the quality of the document’s presentation. The main reason that documents are put in HTML is that they can ubiquitously read, meaning we don’t have to rely on users having a particular application to read our document, other than a Web browser. However, in an intranet, this probably isn’t an issue. In fact, it might be easier to create helper mappings on every system within a corporation rather than to reformat documents in HTML.

Netscape Plug-Ins

Plug-ins were introduced by Netscape in Navigator 2 and have limited support in other browsers, like Opera or Internet Explorer. Internet Explorer favors ActiveX controls, which are described in the next section. Using plug-ins addresses the communication and integration issues that plagued helper applications. Recall that helper applications are not integrated into the design of a Web page, but rather appear in a separate window and may not be able to communicate well with the browser. However, plug-ins are components that run within the context of the browser itself and, thus, can easily be integrated into the design of a page and can communicate with the browser through technologies like JavaScript (which will be introduced in a moment).

The plug-in approach of extending a browser’s feature set has its drawbacks. Users must locate and download plug-ins, install them, and even restart their browsers. Many users find this rather complicated. Netscape 4 offers some installation relief with self-installing (somewhat) plug-ins and other features, but plug-ins remain troublesome. To further combat this problem, many of the most commonly requested plug-ins, such as Macromedia’s Flash, are included as a standard feature with Netscape browsers. The standard plug-ins are primarily geared towards media handling and include Macromedia Flash and Shockwave, Adobe Acrobat, and Real player (audio and video). If plug-ins are used, make sure to focus on the popular ones first, given the installation hassle you’ll put the user through.

Suggestion: Focus on using only the more popular plug-in technologies unless automatic installation can be performed.

Even if installation were not such a problem, plug-ins are not available on every machine. An executable program, or binary, must be created for each particular operating system; thus, most plug-ins work on Windows systems, though a few of the more popular ones have versions that work on Macintosh and UNIX systems as well.

The main benefit of plug-ins is that they can be well integrated into Web pages. They may be included by using the <embed> or <object> tags, though <embed> is nearly always favored. For example, to embed a short Flash movie called welcome.swf that can be viewed by a Flash player plug-in, you would use the following HTML fragment:

       <embed src="welcome.swf" quality="high"
              type="application/x-shockwave-flash" scale="exactfit"
              width="406" height="59" bgcolor="#FFFF00">   </embed>

The <embed> element displays the plug-in (in this case, a Flash animation) as part of the HTML document. Of course, always remember that the main downside of plug-ins is the barrier to entry they create because of installation and system requirements. If installation can be improved, designers will be able to rely on the technologies provided more and more.


ActiveX (, which is the Internet portion of the Component Object Model (COM), is Microsoft’s component technology for creating small components, or controls, within a Web page. ActiveX distributes these controls via the Internet, adding new functionality to Internet Explorer. Microsoft maintains that ActiveX controls are more similar to generalized components than to plug-ins because ActiveX controls can reside beyond the browser, even within container programs such as Microsoft Office. ActiveX controls are similar to Netscape plug-ins in that they are persistent and machine-specific. Although this makes resource use a problem, installation is not an issue: the components download and install automatically.

Security is a big concern for ActiveX controls. Because these small pieces of code potentially have full access to a user’s system, they could cause serious damage. This capability, combined with automatic installation, creates a serious problem with ActiveX. End users may be quick to click a button to install new functionality, only to have it do something malicious, like erase an important system file. The potentially unrestricted functionality of ActiveX controls creates a gaping security hole.


Certificates only provide some indication that the control creator is reputable; they do nothing to prevent a control from actually doing something malicious—that’s up to the user to prevent. Safe Web browsing should be practiced by accepting controls only from reputable sources.

Adding an ActiveX control to a Web page requires the use of the <object> tag. For example, this markup is used to add a Flash file to a page.

       <object classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
               width="406" height="59">
            <param name="movie" value="welcome.swf" />
            <param name="quality" value="high" />
            <param name="scale" value="exactfit" />
            <strong>Sorry, no ActiveX in this browser!</strong> </object>

What appears in a browser with no ActiveX? Just a short message indicating the user doesn’t have ActiveX. The reality is that the page should allow alternative technologies, such as plug-ins using the <embed> tag or even images, before giving a failure message.

Suggestion: If ActiveX controls are used on a public site, make sure to provide alternatives for Netscape or other browsers.


The main downside of component technologies like Netscape plug-ins and Microsoft ActiveX controls is that they are fairly operating system specific. Not every user runs on Windows or even Macintosh, so how do you deal with such a heterogeneous world? One solution is to create a common environment and port it to all systems—this is the intent of Java.

Sun Microsystems’ Java technology ( is an attractive, revolutionary approach to cross-platform, Internet-based development. Java promises a platform-neutral development language, somewhat similar in syntax to C++, that allows programs to be written once and deployed on any machine, browser, or operating system that supports the Java virtual machine (JVM). Web pages use small Java programs, called applets, that are downloaded and run directly within a browser to provide new functionality.

Applets are written in the Java language and compiled to a machine-independent byte code in the form of a .class file, which is downloaded automatically to the Java- capable browser and run within the browser environment. But even with a fast processor, the end system may appear to run the byte code slowly compared to a natively compiled application because the byte code must be interpreted by the JVM. This leads to the common perception that Java is slow. The reality is that Java isn’t necessarily slow, but its interpretation can be. Even with recent Just-In-Time (JIT) compilers in newer browsers, Java often doesn’t deliver performance equal to natively compiled applications.

Rule: Consider end-user system performance carefully when using Java.

Even if compilation weren’t an issue, current Java applets generally aren’t persistent; they may have to be downloaded again and again. Java-enabled browsers act like thin-client applications because they add code only when they need it. In this sense, the browser doesn’t become bloated with added features, but expands and contracts upon use.

Adding a Java applet to a Web page is relatively easy and can be done using the <applet> or <object> tag, though <applet> is preferred for backward compatibility. If, for example, we had a .class file called helloworld, we might reference it with the following markup:

   <applet code="helloworld.class" height="50" width="175"> <h1>Hello World for you non-Java-aware browsers</h1> </applet>

In the preceding code, between <applet> and </applet> is an alternative rendering for browsers that do not support Java or that have Java support disabled.

Security in Java has been a serious concern from the outset. Because programs are downloaded and run automatically, a malicious program could be downloaded and run without the user being able to stop it. Under the first implementation of the technology, Java applets had little access to resources outside the browser’s environment. Within Web pages, applets can’t write to local disks or perform other potentially harmful functions. This framework has been referred to as the Java sandbox. Developers who want to provide Java functions outside of the sandbox must write Java applications that run as separate applications from browsers. Other Internet programming technologies (Netscape plug-ins and ActiveX) provide less safety from damaging programs.

The reality of Java, as far as a Web designer is concerned, is that it really isn’t useful on public sites. There are so many different Java Virtual Machines in browsers that the idea of “write once, run everywhere” has been turned into “write once, debug everywhere.” The major benefit of Java applets just isn’t there. Designers should need no proof other than the fact that major sites that relied on Java applets have in most cases long since removed them. However, within intranets or on the server side in the form of Java servlets, we have seen Java achieve significant success.


JavaScript, which is of no relation to Java other than in name, is the premiere client- side scripting language used in Web browsers. Originally developed by Netscape for Navigator 2.0, the language has grown significantly over the years and is supported by all major browsers in one form or another. For example, Microsoft, supports Jscript, which is their take on the JavaScript language. Standardization of the language came in the form of ECMAScript, but the name JavaScript continues to be used by most developers.

JavaScript is a loosely typed scripting language that has simple uses for tasks like form data validation or minor page embellishments, such as rollover buttons. The inclusion of JavaScript in an HTML page is primarily handled by the <script> tag. For example, in this short fragment,

       <h1>About to leave HTML</h1>
       <script type="text/javascript">
         alert("Hello from JavaScript!");
       <h1>Welcome back to HTML</h1>

we see a statement printed in an HTML document, then an alert dialog is created by JavaScript, and finally another HTML statement in executed. The interaction between HTML and JavaScript is significant, and mastery of markup is required to reap the most benefits from this technology. JavaScript will be presented in this book in small, hopefully palatable, doses to improve page usability. Some techniques for correct JavaScript use will also be presented. For an in-depth discussion, readers should see the links provided or the companion book, JavaScript: The Complete Reference.

Information about ECMAScript and JavaScript can be found at these URLs:

  • ECMAScript Spec:
  • Netscape JavaScript Information:
  • Microsoft Scripting Information:

    Document Object Model

    With the rise of the standardized document object model, or DOM, JavaScript is poised to become nearly as important as HTML or CSS for Web developers, because it will provide the ability to manipulate any aspect of an HTML document. In the past, page manipulations were possible using browser and document objects defined by each browser vendor. Browser differences made all but the simplest scripts difficult to implement. The W3C DOM specification promises to help ease cross-browser scripting because it specifies a language-neutral interface that allows programs and scripts to dynamically access and update the content, markup, and style of Web documents.

    Since the DOM is used via JavaScript to manipulate HTML documents, this usage is often referred to as dynamic HTML, or DHTML. However, the term really is deceptive and its usage is not encouraged. The DOM comes in two primary variants at the moment: DOM Level 1, which provides access and manipulation facilities for basic markup elements and bindings to manipulate HTML tags, and DOM Level 2, which extends the interface to allow manipulation of CSS properties and provides a richer event interface.

    Online information about the DOM can be found at these URLs:

 Server-Side Technologies

The Web server handles the server side of the Web communications medium, responding to the various HTTP requests made to it. Servers may directly return various file objects, such as HTML documents, images, multimedia files, scripts, or style sheets, or they may run executable programs, which return a similar result. In this sense, the Web server acts both as a file server and as an application server. We will survey the basic components of the server side here before addressing the network components of the medium.

Web Servers

Like the Web browser, the Web server frames the environment of each Web transaction. The term “Web server” is usually understood to mean both the hardware and software. The major issue with hardware is whether the Web server is capable of handling the memory, disk, and network input/output requirements resulting from site traffic. The interplay of operating systems, such as UNIX or Windows 2000, and Web server software also is closely related to performance, as is security.

From Apache to Zeus, all Web server software platforms handle basic HTTP transactions, but all tend to offer more than basic file serving facilities. Most Web server platforms provide basic security and authentication services, logging, and programming facilities. An in-depth discussion of the popular servers and their facilities is presented in Chapter 17; here, we will focus only on the programming aspects of site


The oldest of the server-side programming technologies, CGI (Common Gateway Interface) programs can be written in nearly any programming language, though commonly Perl is associated with CGI applications. CGI is not a language or program, but in fact just a way to program—unlike other server-side programming environments, which define both language and style. CGI defines the basic input and output methods for server-side programs launched by a Web server, as illustrated in Figure 3-12. While assumed by some to be slow and insecure, CGI is adequate for many Web development projects when correctly understood and used.

Online information about CGI can be found at these URLs:

  • CGI Overview and Documentation:
  • CGI Resource Index:

    Server-Side Scripting

    Server-side scripting technologies, such as Microsoft’s Active Server Pages (ASP) or Macromedia’s ColdFusion, allow dynamic pages to be created easily. All server-side scripting languages, including the popular ASP, ColdFusion, JSP, and PHP languages, work fairly similarly. The idea is that script templates that contain a combination of HTML and scripting language are executed server side to build a resulting Web page. Usually, some form of server engine intercepts page requests, and when files with certain extensions—such as .asp, .cfm, .jsp, .php, or .shtml—are encountered, the script elements in the page are replaced with the resulting markup output.

    Server-side scripting languages are often used to build dynamic pages from databases, personalize content for users, or generate reusable components in pages. The syntax for each language is different, and many developers are somewhat religious about the merits of one language over the next, but the fact of the matter is that none of them scales well for extremely high-volume sites. Such sites usually require server API programs, which are discussed next.

    Online information about server-side scripting can be found at these URLs:

    • ASP Information:
    • ColdFusion Information:
    • PHP Information:
    • JSP Information:

Server APIs

Server API (Application Programming Interfaces) programs are special server-side programs built to interact closely with the Web server. A simple way to think of server API programs is as plug-ins to a Web server. Common APIs include ISAPI for Microsoft’s IIS server, NSAPI for the Netscape/IPlanet/Sun server, Apache Modules for Apache, and Java servlets for Java-enabled Web servers. The benefit of server API programs is that their close interaction with the Web server generally translates into high performance. The downside, of course, is the complexity of writing such a program and the possibility that an errant server module may actually crash the entire server.

Information about server APIs can be found at these URLs:

Apache Module Information:

ISAPI Filters/Extension Information:

Java Servlet Information:

Network and Related Protocols

The underlying protocols of the Web include the TCP/IP suite of networking protocols. Not a single protocol but a group of protocols, TCP/IP is what makes all services on the Internet possible. Individually, IP (Internet Protocol) provides the basic addressing and routing information necessary to deliver data across the Internet. However, TCP (Transport Control Protocol) provides the facilities that make communications reliable, such as correction and retransmission. Together, in conjunction with the Domain Name Service (or DNS), which is the process of translating fully qualified domain names like into their underlying IP addresses (, we have the ability to build higher-level services, such as e-mail or Web sites, on the Internet. Knowledge of lower-level protocols may seem pointless to many Web designers, but it is particularly helpful to understand networking details when designing extremely scalable Web sites. However, regardless of site aims, the next protocol discussed should be understood by every Web designer.


  1. HTTP (Hypertext Transport Protocol) is the application-level protocol that handles the discussion between a user-agent, generally a Web browser, and a Web server. The protocol is simple and defines eight basic commands (GET, POST, HEAD, PUT, DELETE, OPTIONS, TRACE, and CONNECT) that can be made by a user-agent to request or manipulate data. Responses may contain both numeric and textual codes (for example, 404 Not Found) and associated data.

    The simplicity of the HTTP protocol is both a blessing and a curse. It is simple to implement, but its lack of state management and its performance problems plague Web developers. The HTTP 1.1 specification as defined in RFC 2616 addressed many of the performance problems, but state management still has to be resolved using cookies, hidden data variables, or extended URLs. An overview of HTTP can be found in Chapter 17, while Appendix G details its request and response format.

    Information about HTTP can be found at these URLs:

    W3C HTTP Activity:

    HTTP 1.1 Specification:


    MIME (Multipurpose Internet Mail Extensions), the unsung hero of Web protocols, is used by browsers to determine what kind of data they have received from a server. Specifically, an HTTP header called Content-type contains a MIME value, which is looked up by a browser to understand what type of data it is receiving and what to do with it. Servers append MIME types to HTTP headers either by generating them from a program or by mapping a file extension (for example, .html) to an appropriate MIME type (for example, text/html). MIME allows Web sites to deliver any type of data, not just the common Web formats like HTML.

    Information about MIME can be found at this URL:

    ■ MIME Specification:


    Addressing: URL/URI/URNs/URCs

    To request and link to Web pages, it is necessary to use an addressing scheme. Web users are familiar with URLs (Uniform Resource Locator), like, which specify protocol and location. In specifications, URI (Uniform Resource Identifier) is the more commonly accepted term for short names or address strings that refer to a resource on the Web. Yet, whatever the name, URI or URLs do not provide all that may be required on the Web in the future, since they specify only location. Uniform Resource Names (URNs) and Uniform Resource Characteristics (URCs) may eventually be implemented to provide non-location-dependent addressing and extra information about resources, respectively. However, resource characteristics are more commonly specified using a form of meta data, as described next.

    Online information about addressing can be found at this URL:
    ■ W3C Addressing Activity:

    Meta Data

    Meta data is defind as data about data. Web developers may be familiar with putting meta data in a Web page using the <meta> tag. Often, this is used to specify keywords and descriptions for search engines. For example,

           <meta name="keywords" content="robots,androids, bots">
           <meta name="description" content="Demo Company makes the best robots in the Solar System!">

    Meta data is also used in Web pages to control page characteristics, particularly those related to HTTP headers. For example,

            <meta http-equiv="Expires" content="Wed, 15 May 2002 08:21:57 GMT" />

    would set an expiration date for a Web page using the HTTP expires header.
    The key to meta data is having a consistent and descriptive enough vocabulary for describing data. The Resource Description Framework (RDF) provides a standard way for using XML to represent meta data in the form of statements about properties and relationships of items on the Web. However, RDF itself is just a framework and needs a vocabulary. A popular vocabulary called Dublin Core initially has started to gain some traction. However, at the time of this edition’s writing, the use of meta data vocabulary beyond the simple <meta> tag for keywords and descriptions is not common practice on the Web, though it is prevalent in many large sites and very common in large intranets.

    Online information about meta data can be found at these URLs:

    W3C RDF Information:

    Dublin Core Metadata Initiative:

    Web Services

    Finally, the latest wrinkle in the Web medium is the rise of Web Services. The basic concept of Web Services is that Web sites may interact directly with each other, exchanging information or even running programs remotely. Web Services allow for complex distributed applications to be built using the pieces of various Web sites. For example, imagine running a small travel site and offering flight, hotel, and car rental booking services directly from your site through a large travel partner’s Web site without the user being aware. Web Services would provide the facilities for your site to talk to others and seamlessly make such a service possible.

    The key to Web Services is the use of standardized message formats, typically specified in XML. A protocol called SOAP (Simple Object Access Protocol) appears to be the leading candidate for Web Services. However, others do exist, and Web Services are not prevalent enough yet to assume victory for SOAP. Beyond messaging protocols, Web Services also require a facility for service providers to describe their offered services, and for users to discover the services they require. So far, service description is being handled by a protocol called WSDL (Web Service Description Language), while service discovery is handled by UDDI (Universal Description, Discovery, and Integration). As mentioned, these protocols may not necessarily become standard; but regardless of what protocol is adopted, Web Services will provide for a much richer Web experience, which is coming to be known as the semantic Web. Information about Web Services can be found at these URLs:

    ■ W3C Web Services Activity:

    ■ W3C Semantic Web Activity:

    A good portion of the activity in the Web Services space revolves around Microsoft’s .NET technology, which also provides SOAP as well as a sophisticated Web programming environment. However, what .NET actually means to Web Services and what it includes are still very fluid. The best source of information on the Microsoft variant of Web Services can be found at


    Understanding the various aspects of the Web medium is mandatory for aspiring Web designers. Even if the focus is only on front-end interface creation, designers should have at least passing knowledge of the various components of the Web sites, ranging from addressing systems to XML-based Web Services. While it might be said that architects often make lousy carpenters, it can also be assumed that they generally have some sense of the properties of the building materials their projects use, and so should Web architects. Some of these “building materials,” such as Web browsers, HTML/ XHTML, CSS, JavaScript, and media formats, should already be very familiar, while others, like XML and networking protocols, may seem of little use to visual designers. However, with the transition away from simple print-oriented Web design to more interactive software-focused Web sites, designers would be well advised to become more proficient in programming and networking technologies. The next chapter explores just how Web sites are built and provides a useful overview of the processes that can be employed to guide complex Web projects.

User-Centered Design

Web sites are often developed from one particular philosophical reference point. Sometimes this point of reference is content centered; other times, it is technology-centered. Even more frequently, it is graphics-centered. However, the real emphasis when building sites should always be the user. Keeping users in mind and always trying to meet their needs should be the key focus of user-centered design.

Understanding users needs isn’t easy. While users may share common capabilities such as memory or reaction time, each user is still a distinct individual. Sites should be built for common user capabilities, rather than for the extreme novice or power user. Sites should be accessible to all and be able to account for the differences exhibited by individuals. Building a usable Web site is challenging, since what is usable to one person may be problematic for another. The likelihood of building a user-centered site is greatly improved through user interviews, testing, or even iterative design. Always be wary, though, of falling into the “user trap.” While a site should always be built for users, the desires of the site’s creators must also be met, even though these may be somewhat at odds with the desires of the site’s users. The fine balance of power between user and designer is not always easily achieved.


Everyone has a vague idea of what it means for something to be usable. People will talk at length about how Web sites are supposedly user friendly, intuitive to use, or simply “usable.” What, exactly, does it mean for something to be usable? First, consider the concept of utility in connection with two e-commerce sites that sell books and offer the same basic features. Both allow the user to search or browse for books, read information on books, purchase books, and track their orders. If both sites have basically the same features, they have the same utility—meaning they can do the same thing. Given that the sites have a few basic functions, you may find it easier to perform the same task on one site than the other. In this case, we can say that one site is more usable (has greater utility) than the other. Unfortunately, it is difficult to agree on what is usable. Plenty of people have attempted to characterize what usability is. Consider the following definition adopted from an ISO standard definition of usability:

Definition: Usability is the extent to which a site can be used by a specified group of users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.

Consider each piece of the definition. First, note that we should limit the group of users when talking about usability. Recall that usability will vary greatly depending on the user.

Next, usability should be related to a task. You should not consider a site to be usable in some general sense. Instead, discuss usability within the context of performing some task, such as finding a telephone number for contact, purchasing a product, and so on. Usability is then judged by the effectiveness, efficiency, and satisfaction the user experiences trying to achieve these goals.

Effectiveness describes whether or not users are able to actually achieve their goals. If users are unable to, or only partially able to, complete a task they set out to perform at a site, the site really isn’t usable. Next, usability is related to efficiency. If users make a great number of mistakes or have to do things in a roundabout way when they visit a site, the site isn’t terribly usable. Last, the user must be satisfied with the performance of the task.

Many other definitions of usability exist. Some usability professionals suggest that usability can be concretely defined. Maybe it could be computed as some combination of the completion time for a typical visit and the number of errors made during the visit. From the user’s point of view, that might not mean much. Users might just be concerned with how satisfied they were after performing a task. The following five ideas determine the usability of a site:

  • Learnability
  • Rememberability
  • Efficiency of use
  • Reliability in use
  • User satisfactionBy this definition, a site is usable if it is easy to learn, easy to remember how to use, efficient to use (doesn’t require a lot of work on the part of the user), reliable in that it works correctly and helps users perform tasks correctly, and results in the user being generally satisfied using the site. This still seems fuzzy in some ways, and conflicts arise easily in the usability area. For example, a site that is easily learnable by a novice user may be laborious to use for a power user. Because people are different and come with different levels of capabilities and Web knowledge, not everyone is going to agree on what is supposedly usable. A site that is easy to one user may be hard for another.Rule: There is no absolute description of what constitutes a usable site.

    Even without considering user differences, we may find that usability varies according to how a single user interacts with a site. Usability also often depends on the medium of consumption—textual content viewed on the screen may be more usable in a large size, but when it is consumed on paper, it might be better smaller. If you have tried to read large amounts of small-size content online, you know it can be difficult. People tend to find that it is much easier to read it on paper. Some experts have suggested that people read much slower onscreen and tend to scan more than read content online. In this case, the medium of consumption—screen or print—has affected the usability
    of the content. In the case of the Web, the medium, which includes networks, browsers, screen sizes, and technologies like HTML, often contributes in a large way to usability problems. Throughout this book, the mantra of “know thy medium” should be repeated over and over.

Rule: Usability depends on the medium of consumption.

What is considered usable often varies between sites. An entertainment site would have different usability constraints than a commercial one. Further, the user’s familiarity with a site—as well as how often the user accesses the site and for what purpose—will affect the site’s perceived user friendliness. Consider how people may feel about the usability of a site that they have never been to before and are only marginally interested in, as opposed to one that they frequently visit or must use. They may be much more forgiving of errors in the site they need to use or have come to use than in the one they are just casually interested in. In short, a “throwaway” single-time-visit site has different usability constraints than a site a user relies on day to day.

Rule: Usability depends on the type of site as well as the user’s familiarity with it.

This idea might seem a tad unusual, but it shouldn’t. People often come to  believe inefficient ways of doing things are perfectly acceptable. Be careful about getting too scientific when talking about usability (measuring page clicks, mouse travel, errors rates, and the like). How users “feel” about the experience when they come away—their satisfaction with the site or the task performed—is really the most important thing. For some people, how they feel may not always be logical or even totally related to what happened during the site visit. Consider how many people gain satisfaction from performing difficult tasks; they may feel that way about some sites as well. Also, people let organizations that they are familiar with outside the Web get away with things at their sites that a new company can’t, simply because they trust the name brand of the older firm. On the other hand, don’t assume that the occasionally illogical user can be used as an excuse to produce a site that is hard to use. A site that requires the user to learn a new way of doing things, is inflexible, results in errors, or just doesn’t work will generally result in poor user satisfaction. Improve usability and users will be happier.

Rule: Usability and user satisfaction are directly related.

To understand how to make something usable, you must understand users. The next few sections will discuss usability in light of user capabilities and tendencies. The conclusion of the chapter will revisit these subjects and present a few rules of thumb that can be applied during Web site design to improve a site’s usability.

Who Are Web Users?

Site designers often make the common mistake of oversimplifying or completely ignoring the capabilities and desires of users. In some cases, concerns about designing the site with a particular browser or bandwidth in mind replace any serious thought of the user. Don’t design your site for Netscape—design for people who happen to use the Netscape browser. Always remember the following very important Web design rule:

Rule: Browsers don’t use sites, people do.

Fortunately, most designers don’t go the extreme of completely forgetting the user, but often they do oversimplify who the site’s users are. Far too often, sites are built for some elusive stereotypical Web user—the modem user accessing via AOL, perhaps. This user is just a nameless person surfing the Internet to be enticed into visiting the site and performing whatever task the designer desires. The reality is that users are not automatons with the same capabilities and desires, but individuals with a wide range of physical capabilities, needs, wants, expectations, and goals. Real Web users have bad days or can’t always figure things out sometimes, just like the rest of us.

Suggestion: There are no generic people. Always try to envision a real person visiting your site.

While it may not be possible to create a perfect stereotypical user to design Web sites for, there are some general things that can be said about users. The first thing is to think about how today’s typical user interacts with a Web site. Until alternative browsing environments such as cell phones or PDAs become much more commonplace, a user of your site is almost certainly sitting at a desk or table with a computer. Users sit at most a few feet from a monitor and generally use a keyboard and a mouse to interact with a Web site shown on the monitor. Primarily, they are using their eyes to access the information on the screen, though sound may also come into play. The stimulus from the site is filtered, and choice items may be consumed or, more accurately, committed to short- or long-term memory. The information they consume then may cause them to react by, for instance, clicking a link or entering data into a form.

You can describe how people tend to react to the world around them, including Web sites, in the following way. First, they encounter some sensation that is stored in memory. Then they try to understand the sensation, which is filtered both consciously and unconsciously. Information from past experiences may be called into action, influencing how they perceive things and possibly helping them decide what to do. From this perception, they may perform an action—or possibly take no action—that will later result in more sensations to be interpreted.

Do not think that people can be simplified to a formula where a stimulus is provided that results in an action. People are more complicated than that. People are capable of learning things, and information they encounter is committed to memory that can be used to modify what they do. Further, people aren’t perfect. Problems may occur, such as not remembering things properly. Different people perceive stimuli differently. Not everyone sees color quite the same way, for instance. Despite its simplification, the model does force designers to consider how people interact with the world—which includes their Web site. Common user characteristics such as sensation and memory need to be well considered, at least in a general sense, when building sites.

Common User Characteristics

There are no generic people, but people tend to have similar physical characteristics. Most people tend see about the same, are capable of remembering things, and react to stimuli in about the same way. However, remember that people are individuals. There will be some users who will be able to see much better than others. There will be people who can memorize hundreds of links and be able to quickly filter them, and others who will be overwhelmed when presented with more than two choices. There will also be a few users who react much faster or much slower to information than the average user. However, as with all aspects of Web design, we should aim first for the common user and make sure to account for differences. Let’s first consider common user characteristics such as vision, memory, and stimulus reaction.


The first aspect to consider about users is how they receive information from a Web site. The primary way most users consume data from Web sites is visually. They look at a screen and consume information in the form of text, color, graphics, or animation. The user’s ability to see is obviously very important. Consider, for example, users with poor eyesight. Unless the text is very large and the contrast between foreground and background elements very distinct, they may not be able to effectively interact with the content of the site. Unfortunately, many sites seem to assume that users have nearly superhuman vision, as text is sized very small, or a minor degree of contrast is used between foreground and background elements. A simple example of some of contrast and sizing problems can be found at

In order to avoid troublesome color combinations, designers should be aware of how color is perceived by the human eye. Three factors affect how color is perceived:

  • Hue the degree to which a color is similar to the basic colors—red, green, and blue—or some combination of these colors.
  • Saturation the degree to which a color differs from achromatic (white, gray, or black).
  • Lightness the degree to which a color appears lighter or darker than another under the same viewing conditions.Users with vision that is somewhat color deficient are often unable to differentiate between colors of similar hue when those colors are of the same lightness and saturation. For example, someone with the most common color deficiency—red-green color blindness—has trouble distinguishing between red and green when the red and green are close in saturation and lightness. Such color vision issues can be troublesome when you consider the difficulty in distinguishing between red and green traffic lights. Does the color-deficient user really know when to stop or go? In the real world, probably so, since the red light is always the top light— but on the Web, things aren’t always so cut and dried. If links are similar in hue, lightness, and saturation, it might be difficult for someone to determine which links have been clicked and which have not.

    Web page designers can avoid vision issues for users if they follow a few simple rules. First, make sure not to use text or graphic combinations that have a similar hue. Instead of using light blue on dark blue, use blue on yellow or white instead.

    Suggestion: Avoid using text, graphics, and backgrounds of similar hue.

    It is possible to get in trouble when using colored text on backgrounds with similar saturation. For example, instead of using a grayish blue text on a rose color background, where both colors are close to achromatic gray, use white text on a rose background, or vice versa.

    Suggestion: Avoid combining text, graphics, and backgrounds of similar saturation.

    The most obvious problem is when contrast is not great enough. Designers need to consider that dark text on a dark background or bright text on a bright background just may not be readable on all monitors or by people with color or vision deficiency. Instead of using a light blue text on a pale yellow background, use blue text on a white background. Or, black text on a white background is always a safe bet. Yellow and black contrast very well, and, therefore, they are used on road signs that are very important to read. However, before changing your Web site to this color combination, consider that design shouldn’t be thrown completely out the window just because of usability concerns.

Time Elapsed

1.0 second

10 seconds

> 10 seconds

Probable User Reaction

When something reacts in around a second, there is no major potential for interrupt. The user is relatively engaged and not easily distracted from what is happening on the screen.

This is suggested to be the limit for keeping the user’s attention focused on the page. Some feedback showing that progress is being made is required, though browser feedback such as a progress bar may be adequate. However, do not be surprised if the user becomes bored and decides to move on to something else.

With a delay this long, the user may actually go about other business, look at sites in other windows, talk on the phone, and so on. If you want users to continue to pay attention, you will have to give them constant feedback about progress made and some sense of when the page will be finished (as when downloading software, the browser lets users know how much time is left to complete the download).

Rule: Keep contrast high. Avoid using text, graphics, and background of similar lightness.

A very important use of color in a Web page is link color. In general, you should really avoid modifying link colors in any way. However, if you do modify link colors, make sure to avoid using link state colors of similar hue, similar saturation, or similar lightness to the background or to one another. For example, avoid links that change from red to pink. For some reason, designers seem to favor such types of combinations. Instead, consider using links that change from dark blue to pink, similar to the normal link state. Be careful with the background color, as it may interfere with link readability. Because of this, white is a good background color. However, if a sacrifice has to be made with color contrast, make the visited state color the one with the contrast problem, since these are links the user would generally be less interested in.

Links, as well as normal text, often have problems with backgrounds. In particular, avoid patterned backgrounds with multiple hues, saturations, or levels of lightness.

Backgrounds like speckles or texture patterns tend to make poor backgrounds; instead, choose a subtle pattern or simple color.

Suggestion: Avoid using busy background tiles.

To make pages more readable and to deal with users who might have some color or vision deficiency, Web designers should make sure colors that are meant to distinguish items are significantly different in two areas (for example, hue and lightness). By following this rule, if the user is color deficient in one area (for example, red-green hue), he or she can still distinguish the item by another attribute, such as its lightness or saturation.

Rule: Make sure colors that are meant to distinguish items like links are significantly different in two ways, such as hue and lightness.


Memory is critical to a user being able to utilize a site. If users are unable to remember anything about a site as they browse it, they will become hopelessly lost, since they will not be able to recall if they have been someplace before. However, any user’s memory is far from perfect, and users don’t consciously spend time trying to memorize things. Users tend to always follow a simple rule: try to do minimal work for maximal gain. Simple human nature suggests that a user is not going to spend a great deal of time to figure something out unless there is a potentially good payoff.

Rule: Users try to maximize gain and minimize work.

Of course, what is considered a good payoff will vary from person to person. Some people like to solve complex puzzles just for personal satisfaction. For them, the payoff is an intense feeling of accomplishment from solving a problem. However, let’s assume that users are generally not going to exhibit such behavior; rather, they will only work hard if they know they need to or if there is a really good payoff that will result. If you want a blunt or somewhat negative way to remember this idea, just assume users are lazy! More general rules of thumb about how users tend to act will be presented later in the chapter. The previous rule is simply presented to tie in with a few ideas about memory.

Now, assuming users will not like or even avoid Web sites that require them to work too hard, forcing them to memorize things is not a good idea. To illustrate this idea in practice, consider the interface of an automated telephone banking system. When you call the bank, you are prompted for your account number and then read a list of items and corresponding keys to press—“Press 1 for balance, press 2 for transfer, press 3 for payments… .” If you encounter such a system and are unfamiliar with all the choices, using the system can be difficult. You may find that you will try to remember a choice presented in your mind until all the choices have been presented. If too many choices are presented, you might not be able to recall the range of choices or you might even forget which item you chose and have to listen to the choices again. Now, if the same information were presented on a small text menu, it would be much easier to find the item. You would just look over the list and pick the appropriate one. The voice example requires you to recall the choices, which is very difficult. In general, it is easier for users to recognize choices than to recall them. Because users who make mistakes will then tend to favor easier-to-use systems, we should always try to rely on recognition over recall.

Rule: Recognition is easier than recall.

There are plenty of examples of how recognition is easier than recall. Students generally consider a multiple-choice test to be easier than a fill-in test. You must study, of course, for each (assuming the tests are created correctly), but the amount of memorization required is much higher for the fill-in test. The multiple-choice test doesn’t require the depth of memory because you will see the answer and recognize it (hopefully) with only a minimal amount of “recall effort.”

It turns out that many of the rules and suggestions presented in this book ultimately are related to this idea of recognition being easier than recall. For example, consider the idea of modifying link color. If we turn off link coloring so that links never look visited, we are forcing users to recall whether they have selected a certain link before. If the links do change color, users simply have to recognize the different color to know they have been there before.

Rule: Do not make visited links the same style or color as unvisited ones.

Another important aspect of memory to consider is that it isn’t perfect. Users are not going to memorize things easily and often will have only partial memory or a flawed memory of something. Just as in real life, repetition will lead to improved memory. For example, frequent users or power users may actually rely on memorization of the location of objects on the screen, but most users will have only vague memories of how link choices or pages are organized. However, when people are memorizing things, it is known that image memory is one of our most robust forms of memory. It is far easier to retrieve pictures or even words or ideas that evoke pictures than it is to retrieve abstract ideas without visual cues from memory. It is often far easier to remember a person’s face than it is to remember the person’s name. Given that users will generally find it easier to remember visuals, it would be wise to make pages that should be remembered visually different from the rest. For example, in site navigation, a home page serves as a safe zone for a user. Using a distinct image or a different color is important in making the home page memorable. However, do not assume the user to have perfect memory—don’t make the home page only subtly different from the other pages or expect the user to notice or memorize text items.

Suggestion: Make pages that should be remembered visually different from the rest.

Another aspect of memory that is important to the usability of Web pages is the amount of information a person can recall from short-term memory. Let’s return to the automated phone banking system example. When users hear the choices, they have to memorize them. If too many choices are presented, they might forget an item. This is an example of short-term working memory. In a sense, we need a little scratch space in our brain to remember something for a few moments. This memory does not hold a great number of items and is highly volatile. Cognitive scientists have long been interested in short-term memory and have conducted many experiments where participants are presented random objects or words and asked to quickly look at them or to make choices from them to test short-term memory. What is found is that participants are able to recall a range of seven items, plus or minus two, from short-term memory. What this means is that when given five to nine items, the user will be able to recall all the items for a short period of time and have them equally present in mind for choosing among them.

The implication of users being able to remember quickly 7 (±2) items on Web design may or may not be profound. If you present a user with a set of links, shouldn’t you limit the choices to from five to nine? It would seem you should—if you want the user to choose from the choices “fairly.” For example, if you present a list of dozens of what may appear to be randomly ordered links to a user, you will find that the user will have a tough time picking from them. You may notice that users will tend to favor extremes. In practice, the author has seen this happen on Web sites. For example, a large music site faced a problem in that bands listed in the site having names beginning with A or Z had a much higher download rate than anything else. What was happening is that users had little knowledge of the bands, so they would scan the lists and— unless something jumped out at them—they tended to choose the first or last items in the list to see what happened. They really couldn’t remember all the names of the bands that were interesting as they went along—there were just too many of them. If you want users to easily choose from a list of things that are equally important, you should limit your set of choices to between five and nine items.

Suggestion: Limit groups of similar choices such as links to between five and nine items.

However, do not go overboard with the five to nine items idea. Some usability experts, in fact, believe this rule has no place on the Web. This seems unwarranted, given the support for the rule both from long-term human capabilities studies and from GUI practices, which tend not to put 100+ choices on a single screen. However, there is some merit to the idea of not putting too much stock in the 7 (±2) rule. Consider that some designers might be tempted to use this rule to suggest that pages should have only five to nine links on them. However, this could be rather limiting if you have a lot of content. Users can focus on items progressively. Consider, for example, being presented five to nine distinctly different clusters of links on a page. Maybe the clusters are labeled and colored so the user chooses a cluster after looking at each. Once in the cluster, there are five to nine links. In this sense, there might be as many as 81 links on a screen, and the user will still be able to use them easily. When looking at well-designed pages with numerous links, you hopefully will see fewer than 100 links and notice that the clustering used an organization method, such as alphabetical, to avoid memorization.

Memory rules of thumb can also be applied to clicks. It appears that users are
able to remember about three pages presented sequentially. Anything more than that and there tend to be gaps in memory. For example, as users click through dozens of pages, they will probably remember a variety of pages but not all sequentially. The memorable pages may be visually different enough to trigger recall. Usually, such distinguishable pages are termed landmarks—the most obvious landmark page in a site being, of course, the home page. However, if you want users to remember a path, they tend to remember only about three page views sequentially—and maybe fewer if the pages look nearly identical. Therefore, you should not expect a user to memorize a sequence or path longer than three items without repeated use. The number of markers showing location and path in today’s sites and the user’s continual reliance on the Back button and browser’s history mechanism demonstrate how tenuous sequential memory tends to be. Because of these memory constraints, we tend to see many sites trying to reach content within three clicks or complete transactions in as few screens as possible.

Suggestion: Aim for memorization of only three items or pages sequentially.

This is by no means a complete discussion of memory, but it does serve to remind Web designers that, in order to make a site easy to use, we need to limit the amount of memorization going on. The less effort the users expend trying to recall what sequence of buttons they pressed or what choices they may have seen, the better.

Response and Reaction Times

If you have watched people browse around Web sites, it is obvious that some people are faster than others. Some users appear to cut quickly through page content and make choices rapidly, and are frustrated with even the slightest download delay. Others struggle to keep up and seem to have the patience of Job when it comes to waiting for pages to load. However, over time you’ll come to find that people’s patience for Web page loading will go away, particularly as they become more frequent users. Consider, for example, how long it takes for users to become annoyed at an automated teller machine that has not returned their money to them. The entire transaction may only take a few seconds, but customers are quickly annoyed. But when automated tellers first came out, a wait of even 30 seconds to a minute seemed tolerable compared to waiting in a long bank line.

Tip: Users tend to be more patient with something they are unfamiliar with or that is a novelty.

We see this novelty/patience dynamic on the Web all the time. Sites that could be considered single-visit sites, like movie promotion sites or designer portfolios, get away with huge download times. These sites could be termed single-visit or “throwaway” sites, since the user is unlikely to return. Splash pages, excessive animations, and long downloads are less annoying to a user who hasn’t seen them before, but patience wears thin on return visitation. Consider that even when a splash page has a “skip intro” button, a return visitor will still be frustrated with having to even make such a choice. The very fast loading design of successful, heavily frequented sites, such as portals or e-commerce sites, shows that patience wears thin. The needs and desires of the first-time visitor, who in some sense could be considered a novice user of the site, are different than the frequent or expert user of a site. However, users do not have infinite patience, and they are getting more and more impatient as they get used to what facilities the Web, or a particular site, provides. In general, we find the following rule to hold true:

Rule: The amount of time a user will wait is proportional to the payoff

The better the payoff, the longer the user will wait. Users who get something for free or who are stealing some desirable piece of software or music seem to be willing to wait an eternity. Consider users who illegally download software, songs, and movies from the Internet with a modem. They’ll literally spend hours searching for and downloading songs when they could have gone out, worked at a near-minimum-wage job, and earned enough to purchase an entire CD in a similar period of time. Of course, this imbalance will certainly change with the increase in bandwidth—much to the annoyance of the music industry. But it remains true that if you are going to expect a user to wait for a page to load, there better be something useful there.

The amount of time users will wait will vary based on the individual user, his or her personality, and the potential benefit of waiting. However, there are some things we can say about response and reaction times for users in general.

Time Elapsed

0.1 second

Probable User Reaction

When something operates this fast or faster, it appears instantaneous or nearly instantaneous to the user. Unfortunately, due to bandwidth and technology constraints, few Web pages will exhibit this level of responsiveness in the near future.

Table 2-1. Response Time and User Reactions



When it comes to the Web, there is generally little chance of going too fast for the user. Most of the time, it takes more than a few seconds even on a broadband connection to download something. However, be careful once something like a Flash file is downloaded. If the user has a faster processor than you, the program may end up running much faster on their system than expected, so much so that the user might not be able to keep up. On occasion, you may notice how animations used in some Web pages appear to travel at a rate only a superhuman could read.

Tip: Be careful with overly fast response times of downloaded objects.

In most cases, a Web site will probably not outpace the user; in fact, it may be much too slow for the user’s liking. Because users may get impatient, you need to make sure that they are given some indication of the progress being made. The browser itself actually gives a great deal of feedback about the progress being made. When loading a page, a browser will generally convert a cursor to a wait indicator (such as an hour glass), spin or pulsate a logo (generally in the upper-right corner of the browser), provide a progress meter towards the bottom of the screen, and display messages about objects being loaded in the status bar at the bottom of the screen. The Web designer will design pages to provide even more feedback. For example, the designer may build pages so text loads first or pieces of the page are loaded one at a time. Often, designers will cut images up into multiple pieces, so the user will see a little bit loaded at a time. Also, designers often use images that load in a progressive fashion from an unclear one to a sharp one so that the user is able to get a general sense of a complete fuzzy picture early on and watch its loading progress, if necessary.

For page loads that only take 10–20 seconds, the feedback given by the browser and incremental loading of a page should be enough to let the user know something is going on. However, when loading takes longer, you should give the user more information. For example, many sites that use binary technologies like Flash use a special loading page complete with a status bar showing progress. Such progress meters can also be created using technologies like JavaScript. However, don’t bother with a progress bar or other forms of feedback unless load times are around 30 seconds or more. (With the proliferation of broadband Internet access, this time will certainly diminish; even now, many broadband users are likely to get impatient around 20 seconds or less, and in due time even 10 seconds may seem like a long wait.)

Rule: When response times such as page loads take more than 30 seconds, try to provide your own feedback to the user, such as a load-time progress bar.

If you are building a static site, there are some simple tricks to let the user know about a longer wait for an object. For a very large image download, besides interlacing the image or having it show up progressively sharper, it is also possible to use a trick with the <img> tag’s lowsrc attribute. You could load a low-resolution version of an image first, or even a graphic message stating the image is loading, like so:

   <img src="hirezpicture.jpg" lowsrc="lowrezpicture.jpg" height="1000"
   width="1000" />

Or, you might have a message display instead. Some designers have even experimented using the alt attribute of an image to show file size or a loading message, like so:

   <img src="hirezpicture.jpg" alt="Loading picture of Mars (800K)"
   height="1000" width="1000" />

Of course, it is probably better to reserve the alt text for its primary purpose— providing an alternative rendering for users without images. Another HTML or CSS trick that can be used to let a user know about a long download is to use a background image with a message on it that says a page is loading, which is eventually covered up by content that is being downloaded. Other forms of loading screens can be created in both JavaScript and Flash.

When attempting to create a site that appears responsive to a user, remember that time is what matters the most. How users actually perceive a page loading will not necessarily equate to the bytes delivered. A user who isn’t paying for bandwidth isn’t going to care if 1K or 100MB is delivered, as long as it appears fast to them.

Rule: Time matters more to a user than bytes delivered.

Because time is so important to a user, it is important to take advantage of every second. Consider that the general way users navigate the Web is to look at a page scan to find an appropriate link, click, and then wait for the page. Once the page loads, they then look at the page to find the next link or spend time consuming the content. Notice the time is split between user “think time” and download time. The reality is that for most users, the think time for navigation pages is pretty small compared to the wait time. For content pages, however, the user may spend a great deal of time looking at the page. One way to improve responsiveness is to take advantage of the thinking time by downloading information to be used later on. This is often called preloading or precaching. Assuming you are able to preload most or all of the next thing to be looked at by the user during the think time, the next page load time could be significantly reduced. Somewhat like the magician who has the result of a trick set up in advances, downloading during idle moments can produce a nearly mystical appearance of speed.

Suggestion: Improve Web page response time by taking advantage of user “think time” with preloading.

A variety of browser accelerator tools have been built in an attempt to improve Web responsiveness by preloading pages linked from the current page. The only problem with this approach is that many pages have so many outbound links that it is difficult for the browser to predict the page the user will load next. The best way to improve the odds of caching the correct “next page” is to look at the common paths users take through a site by examining a log file and then putting in code to preload pages along these paths. However, this just improves the odds. The only time you can really guarantee that preloading will improve things is when the user is navigating a linear progression of pages.

The responsiveness of a Web site is a key aspect of a user’s feeling of the site’s usability. Beyond loading of pages, consider that time is important to a user even after a page has loaded. For example, if a page loads quickly but users can’t figure out what is going on in the page within about ten seconds, they can become just as frustrated as waiting for a simple page to download. Aim for what might be called the “ten-second Web page.” A ten-second Web page is one where the user gets the gist of the page in about one minute and can decide after that whether to consume the content more seriously or not.

Tip: Aim for a ten-second limit for the user to determine the basic gist of a page’s content or purpose after loading.

Dealing with Stimulus

Users are constantly being bombarded by stimuli from our sites. The text, the links, the graphics, animation, even sound all create a cacophony of information that the user tries to distill meaning from. Because of the continual stimulation, we need to filter out some of the data, and we do this both unconsciously and consciously. Three primary ways it is thought that people filter sensation data include thresholds, something dubbed the “cocktail party effect,” and sensory adaptation.


Rather than deal with every minute change that happens, we tend to notice only something that exceeds a particular threshold. For example, if on a Web page an object moves very slowly—say a pixel every few seconds—we may not notice at first because the speed of its movement is below our absolute threshold. However, over time we may notice the movement. Thresholds are tough to predict. Depending on their psychological state, users may be able to detect something under normal conditions; but, if they are tired or distracted, they may not be able to notice the difference between two similar but different colors or fonts that have been used to separate navigation forms.

When designing pages, designers should always consider thresholds. Thresholds suggest making objects or pages noticeably different from each other so that users will be easily able to understand their difference. For example, consider if link and text color in a page are too similar. The user may have to carefully inspect underlined text to make sure that it is a link and not just underlined text, because text colors are only subtly different. In other words, they might not always be sure what’s a link and what isn’t without putting in at least some degree of effort. Designers should strive not to force the user to spend time and effort trying to interpret the differences between objects on a page, since it both is frustrating and takes time away from the main goal of getting the user to consume the content or perform a task. Consider the threshold effect when trying to differentiate objects on a page.

Suggestion: Make page elements obviously different if they are different.

Things need to be just different enough for the user to notice. If the designer is too subtle, however, the user may not be able to tell. And if you go overboard, the design may backfire. It would be easy enough to always put site buttons in bright colors and content in dark colors, but this could be annoying to the user. The next two ideas show how users tend to filter out information when being bombarded with excessive stimuli.

Cocktail Party Effect

The cocktail party effect describes how people are able to concentrate on important data when being bombarded by nonessential stimuli. People at a cocktail party can concentrate on their own conversation despite being in a room filled with numerous other conversations. Don’t dismiss the other conversations as background noise. If the listener stopped and focused on another conversation, he or she probably could hear certain parts of it. However, the threshold effect is also in play during a cocktail party. If the person you are trying to listen to speaks too softly, if the proximity of other conversations is too close, or if the volume of other conversations is too loud, the listener will be overwhelmed by the outside stimuli.

Web page designers should consider that, as in cocktail party conversations, the user might want to concentrate on only a small portion of the information on a page. The rest is background noise that has to be filtered out. If there is too much going on, users will not be able to effectively concentrate on what they want and become frustrated. Therefore, we should try to section things off just as in a cocktail party, so the user can effectively concentrate. A good site has lots of choices but provides the visitors the ability to focus on what they want to see. Toward this end, we might consider grouping similar items together and separating groups of items with a lot of white space. Also, within text, we might convey important points in a bullet list or a pull quote, or highlight them with a background color. Always strive to limit noise—namely, competing objects on a page. If you don’t, and the site is like the cocktail party that gets too loud, users won’t be able to filter out information that isn’t important to them.

Suggestion: Limit page noise and segment page objects so that they don’t compete so much visually that users are unable to focus on what they are interested in.

Thresholds and the cocktail party effect present a balance between having too little of a difference and too much. Don’t become so concerned with trying to get an absolutely perfect balance of stimuli—just try to get it about right. You may consider erring in favor of a little too much, since people are very adaptable, as shown by the next cognitive science idea.

Sensory Adaptation

Sensory adaptation occurs when users become so used to a particular stimulus that they no longer respond to it—at least not consciously. Think of the watch on your wrist. You probably don’t notice it normally. Take the watch and put it on your other wrist and you’ll notice it for a while, but eventually you’ll get used to it. That’s sensory adaptation. Life is filled with things that people adapt to: the ticking of an alarm clock, the clothes you wear, the loudness of the music coming from your car stereo, and so on. Life on the Web is no different. Users adapt to Web stimuli quickly. That continually animated GIF that grabbed the user’s attention once or twice quickly fades into the background.

Probably the most interesting sensory adaptation is the rise of so-called “banner blindness.” People are becoming so used to the shape and location of banners that they are just tuning them out. Experiments as well as click rate studies show that people don’t look at banners terribly attentively. Animation added to the mix improved things, but it, too, has succumbed to sensory adaptation. Rich banner ads complete with sound and complex interaction are being experimented with to see if they can regain user attention. And we have pop-ups that are quickly swatted away by users as fast as they spawn. The bottom line is that users will decide what they want to focus on. Designers may want users to focus on something such as a banner ad or a download button, but in order to grab their attention, they will have to continue coming up with new tricks as users adapt to stimuli over time.

Rule: Sensory adaptation does occur on the Web. If you want a user’s full attention, you’ll have to vary things significantly and often.

Sensory adaptation suggests that the numerous fonts, animations, and colored regions on a page may go unnoticed over time. This doesn’t mean that we should completely avoid using things to stimulate the user, but we should not be as reliant on them, since they lose strength with use. Sensory adaptation really suggests that, in order to get a user’s full attention, we have to “wake them up” with something different. A little bit of surprise can be useful to make the user pay attention. However, be careful with this idea. In general, users will want to peacefully go about their business and will expect pages to look and act consistently. We shouldn’t disturb them, but should let them focus on the task or content at hand. If you bombard the user all the time, they will feel uncomfortable because of the lack of consistency, and they may become so annoyed that they leave.

Movement Capabilities

Once the user has absorbed information they have been provided, they will eventually react to it and make some choice. While someday voice interfaces may become commonplace, today’s Web sites are generally manipulated using the keyboard or mouse. Therefore, we should always attempt to minimize user efforts using these devices. Few sites consider that users may prefer using the keyboard or arrow keys, instead of a mouse, to move through choices in a page. While many form pages are optimized for quick navigation via the keyboard, other pages may not be.

Rule: Try to optimize keyboard access for all pages in a site, not just form pages.

Consider also the work users perform moving their mouse around the screen. Moving the pointer around the screen takes effort, and a button or link press may take up to a few seconds if a user has to move a long distance or focus on clicking a very small button. In fact, the time it takes a user to press a button is governed by something called Fitt’s law (Fitts, 1954). Fitt’s law basically states that the smaller the button to press and the farther away it is, the longer it will take to perform the action. This seems logical, since users tend either to overshoot small click targets because they moved too fast or to take extra time to clock the button more carefully.

Fitt’s law would suggest that to improve speed of use and thus efficiency, we should first bring things closer together. First, we might consider reducing the amount of mouse travel between successive clicks. Notice how efficient a wizard-style interface is, since after clicking “Next” the successive “Next” button tends to be directly under or very close to the current mouse position. There is no reason we couldn’t apply this to navigation elements. Try to keep successively clicked buttons close together. Navigation bars tend to encourage following this plan, anyway.

Rule: Minimize mouse travel distance between successive choices.

However, with the Web, we can’t always be sure that the user will press another button within the page as their next choice. In fact, quite often the user may move to a browser button such as the Back button rather than rely on internal site navigation nearby. Given some users’ preference for the browser Back button, designers should try to minimize the mouse travel to the Back button. The question is, travel from where? We should assume that the user will probably hover over the navigation bar
or near the scroll bars most of the time. While we can’t decrease the distance from the scroll bars, which will tend to be far away from the Back button in the upper left of the screen, there is no reason that we should not consider putting primary navigation buttons on the left or top portions of the screen. Doing so will minimize the distance from a primary selection area and the heavily used Back button, thus reducing mouse travel and increasing the speed at which the site can be used.

Rule: Minimize mouse travel between primary page hover locations and the browser’s Back button.

Fitt’s law would also suggest that we make clicking targets larger, particularly if they are far away. Some designers find this design suggestion troublesome because it suggests making big huge buttons, which would take up a great deal of screen real estate as well as potentially making the site look like it was designed primarily for novice users. Big buttons also bring too much attention to the interface. However, buttons should be made big enough for users to mouse to them relatively quickly—and spaced out well enough so they are able to click them without accidentally click an adjacent choice.

Rule: Make clickable regions large enough for users to move to them quickly and press them accurately.

General user capabilities are not all that we need to consider when discussing what ideas affect usable Web design. We must also consider the world the user inhabits and the user’s general and unique characteristics and experiences.

The User’s World

People truly are the centers of their own universe, in the sense that they perceive everything initially from their own point of view. Consider the idea of how a user might perceive the Web site shown in Figure 2-4. The user lives in the real world.

Users are affected by their environment: the physical conditions of their location, the noise around them, the visual quality of the monitor they are using, and so on. From their world, they access your Web site via the medium of the Internet and the Web, which includes things like network connections, servers, browsers, and so on. Once on the Web, they navigate about and visit sites. If they decide to actually interact with a site, they finally begin to consume or react to the content presented.

The presentation and navigation layers in Figure 2-4 could be interchanged considering that a user’s ability to navigate Web space is greatly affected by the way it is presented.

Suggestion: Always remember that you need to bring a site into the user’s world, not the other way around.

The preceding suggestion is an important one. Designers will naturally believe that they have set the rules for their sites and that users are just visitors. While this may be true, users tend to interpret things from their own perspective. Each user will have his or her own opinions, capabilities, environment, and experiences, all of which will influence how the site is interpreted. A fine balance between what the user thinks and wants and what the designer thinks and wants has to be struck. This will be discussed in more depth later in this chapter.

User Environments

The user is heavily influenced by what could be called their environment of consumption. For example, consider a user in a public place such as an airport using a public Internet kiosk to remotely access their e-mail. The user is standing up—it might be crowded and noisy—waiting to dash off to the plane. Because of this environment, the user may not be tolerant of long waits, excessive menus, or anything that slows down the task at hand. Further, due to the noise, the user may not be able to always hear sound cues. Last, because the user is standing up, the amount of time they might spent during the whole online session will certainly be significantly less than a normal session at the office. When designing for users, always think about where the user is accessing the site from. Table 2-2 details some of the possibilities.

The environment will greatly affect the user’s view of what is “usable.” For example, color combinations that contrast acceptably indoors might be troublesome outdoors. Designers must take into account the environment of consumption.

Chapter 2: User-Centered Design



Home office or bedroom

Home living room


Generally computer-based access
Single user
Relatively quie
Should be primarily work or task focused, at least during primary work hours

Often high speed

Generally computer-based access Single user
Noise level variable, but often quiet Purpose may be work or play Access could be anytime

Speed of access varies dramatically from modem to high speed

Access may be from set-top box or video game console Distance from device may be farther
Use may be less input oriented (reduced typing)
Noise level variable

May be group-oriented access or single user Access probably more entertainment related Printing may not be an end result

General Types of Users

There are three levels into which users can be classified to reflect their knowledge of how to use a Web site: novices, intermediates, and experts or power users.

A novice user is one who may have little knowledge of a site or even of how the Web works. A novice user will need extra assistance and may prefer extra clicks with extra feedback to accomplish a simple task. An example of an interface tuned to novices would be a wizard that automates some common task.

At the other end, power users are those users who understand the Web or a site very well. Power users should be considered in two distinct categories: frequent and infrequent visitors to the site. A power user who frequently visits a site to utilize advanced features such as sophisticated searching, may directly form their own URLs, and memorize the position of objects within a page or the site. A power user who is an infrequent visitor to a site may not be familiar with the site’s structure but will expect certain facilities, such as search, to be available to navigate a site. Power users will need relatively little handholding and will desire to click less and consume more. Obviously, the distance between a power user and novice user is great. A site geared too much toward one audience or the other will certainly annoy—the power user if the site has been dumbed down, or the novice user if the site is geared mostly toward power users.

The third group of users, the infrequent intermediate user, is actually the largest category of users on the Web. Most users are infrequent intermediate users because they pretty much understand how the Web works, but may not know how to navigate a particular site in a very efficient manner. Infrequent intermediate users do not continually revisit the site; if they do, they will probably eventually become a power user. Because site usage tends to be dominated by intermediate users, you may consider designing the site for the capabilities of these users. However, doing so may lock out novice users and bore or restrict advanced users.

The best approach to building a site for basic user groups is to build a site that provides features that cater to all users. Software applications do this, so there is no reason a Web site cannot. A software application may provides keyboard shortcuts and other features, such as customizable interfaces, for power users while also providing icons and menu systems for intermediate and novice users. Help systems and wizards are other features mostly geared toward the novice user. A Web site could provide features like a clean URL system, advanced search facility, and personalization features for an advanced user. A site with consistent navigation bars that have button labels similar to other sites (About, Products, Careers, and so on) is very friendly to novice and intermediate users, and it can also have dynamically built “bread crumb”–style navigation lines, popular with advanced users. Last, a Web site could provide help systems, maps, and alternative forms of access such as simple text links for the novice.

Suggestion: Aim to create an adaptive Web site that meets the requirements of novices, intermediates, and advanced users.

In the perfect world, there is no reason that a Web site can’t be built to meet the needs of all general user groups. However, time and cost constraints may limit the number of features that can be added to some Web sites. In such cases, it is probably best to aim for the largest group of users: the intermediate. This may lock out some novice users unable to figure the site out. There is an argument to be made for aiming at the lowest common denominator in a user. The problem with this is that if you start building only for the complete novice, you can quickly alienate users who know what they are doing.

Suggestion: Design for the intermediate user if an adaptive Web interface is not possible.

Even if an adaptive interface is built, there is bound to be a user who doesn’t understand or like the site we have built.

Tip: Remember there will always be users who don’t like or get a site, no matter how good it is.

Users are individuals with different tastes and opinions. They will have different experiences, capabilities, personalities, age, gender issues, and cultural issues. Some individuals may have disabilities that prohibit them from using a Web site that most users find easy to use. Users bring what they know from the real world and from other Web sites to your site. They may expect to use symbols from the real world, such as those for navigation. However, they may also bring knowledge of how Web sites work that they gained from visits to many other sites. Knowledge of how traditional software applications work may also be brought into play. Remember, as mentioned early in the chapter, that users bring the site into their world—they don’t visit the universe of your Web site. Your site is just a speck in an overall universe of Web sites. In fact, it could be said that most of the time users are not at your site. Some call this the 99 percent rule, since 99 percent of the time, users are probably not using your site. You should, therefore, make sure that your site follows any conventions and meets expectations set up by other sites.

Rule: Users bring past experiences with the world, software, and the Web to your site. Make sure your site meets their expectations.

You need to make sure that your site acts like other sites or software users have used and meets their general expectations. Remember the rule of consistency: if you do things differently from how everybody else does, you can’t rely on a user’s past knowledge and you force the user to learn something new. Of course, the challenge with real users is that expectations will vary greatly based on their experience. However, try to understand that there are some common conventions from GUI design or Web sites that users are probably familiar with.

GUI Conventions

Graphical user interface (GUI) design has long followed a variety of standards developed by operating system vendors such as Microsoft and Apple, or industry groups like The Open Group ( These conventions are obvious in most software applications.

Notice that in the interface in Figrue 2-5 there are common menus like File, Edit, View, and Help. Many applications have these menus. These primary menus are always located at the top of the screen, and the Help menu is always the far-right menu. The Close box is always in the upper-right corner, and other window controls such as Minimize and Maximize are there as well. The primary toolbar in software applications tends to be at the top of the application, and the bottom of the screen is reserved for less important controls and status messages. The functions of the application can generally be performed in multiple ways, such as using push button icons, text menus, keyboard shortcuts, and wizards.

GUI conventions are very useful to know, particularly when designing forms and other interactive elements of a site. In later chapters on implementation, we’ll discuss the use of GUI widgets and the difference between Web and GUI interfaces. The Web has not been able to develop conventions that are as well understood as those for software applications. There are two main reasons for this. First, software applications are often defined significantly by the operating system they are written for. Microsoft has great influence on how applications written for Windows should work. Apple can dictate conventions for Macintosh software. Second, the ability to author and distribute software applications is restricted to a much smaller group of people than in Web design. Many Web designers lack any formal understanding of GUI conventions and may actually shun them in favor of artistic freedom. This struggle is fortunately changing, as the focus on user-oriented site design becomes more popular.

Web Conventions

While Web sites may not exactly follow GUI usability conventions, they do have a loose set of conventions. Straying from the way that most Web sites work is a dangerous idea. Unless you happen to be running an important day-to-day use site like an internal site, a heavily trafficked site like Amazon, or a portal like Yahoo!, you will probably not be able to introduce any conventions of your own. In fact, if users come to expect that a company logo in the upper left-hand corner of the screen will return them to the home page, you had better do this in your site. If you don’t do this, you may surprise the user, which could cause a negative reaction. Forcing the user to learn a new idea also could cause a negative feeling.

Rule: Do not stray from the common interface conventions established by heavily used sites.

The problem with Web conventions is that they are moving targets. New conventions may be invented and sweep across the Web like fads. For example, frames and splash pages used to be popular, but they have somewhat fallen out of favor. Conventions are not always well considered and may often have more to do with novelty than usability. However, this shouldn’t lead you to invent new conventions or avoid those that are current. The best way to keep up with current conventions is to simply browse the well-trafficked e-commerce and content sites often and look for common features. If users are exposed to features there, such as single-click ordering, it isn’t going to be difficult to explain to them how it works on your site. Don’t assume that everyone understands common conventions or that all users will be able to use current conventions. Some users will have special needs.


There is no way to account for all the small differences between people. In fact, we only aim to create sites that most people like. This may lead us to stereotype groups of users (like casual female surfers under 18, and so on), but this may be an approach we have to make. Yet, this does not mean that you should go out and build a site catering to the largest demographic group of users hitting your site. Try to please as many distinct groups as possible by making your site as accessible as possible. Don’t forget that some people may have difficulty if you assume that all users have perfect physical and technical capabilities.

Providing accessibility for people who may have deficiencies involving sight, hearing, or other physical capabilities isn’t just a nice idea anymore—it may actually be required for some organizations, particularly government agencies—and many companies could incur serious liability if they do not account for all users. For example, Section 508 of the 1986 Federal Rehabilitation Act requires that the federal government include solutions for employees with disabilities when awarding contract proposals. This would also eventually apply to systems such as intranets, extranets, and most likely public Web sites. Also, the 1992 Americans with Disabilities Act (ADA) states that firms with 15 or more employees provide reasonable accommodation for employees with disabilities. This could apply to intranets or extranet creation!

But making a Web site accessible is something that should be done, not because of some law or to avoid future litigation, but because doing so could result in a much better Web site for everyone. Very often, creating systems that are accessible to all users also creates benefits for all users, regardless of capability. For example, the so-called talking books, initially considered for the blind, fostered books on tape. Also consider that easy ramps to access buildings, and curb cutouts made for wheelchairs, make walking easier for all and tend to reduce the number of people falling flat on their face after crossing the street or severely twisting their ankles as they step off the curb.

The W3C ( has long advocated designing sites for maximum accessibility and promotes the Web Accessibility Initiative ( The WAI is concerned not only with creating sites that are accessible to people with disabilities, but also with making sites that are accessible by anyone who might be operating in a different environment than what a designer considers “normal.” Remember that users will not necessarily be using a fast connection and a large monitor like yours—or if you aren’t using a guides,fast connection with the latest and greatest, your users just might be! From the W3C you should always consider that users may have different operating constraints:

■ ■ ■ ■ ■ ■

They may not be able to see, hear, or move easily, or may not be able to process some types of information easily (or even at all).

They may have difficulty reading or comprehending text because of language problems.

They may not be able to use a keyboard or mouse because of access method (such as a cell phone) or physical disability.

They may have a less-than-ideal access environment, such as a text-only screen, a small screen, a screen without color, or a slow Internet connection.

They may be accessing the site in a nonstandard environment where they may be affected by environmental factors—accessing the Web in a noisy cybercafe or as they drive a car, for instance.

They may have an older browser or a nonstandard browser or operating system or use an alternative form of user interface, such as voice access.

To deal with these issues, the W3C has issued a few suggestions to improve the accessibility of a site. These are summarized here:

  • Provide equivalent alternatives to auditory and visual content In other words, don’t rely solely on one form of communication. If you use picture buttons, provide text links. If audio is used, provide a text transcript of the message, and so on.
  • Don’t rely on color alone As discussed earlier in the chapter, not everyone will be able to view colors properly; so if color alone is used to convey information, such as what constitutes a link, people who cannot differentiate between certain colors and users with devices that have noncolor or nonvisual displays will not be able to figure out what is being presented. In general, you need to consider avoiding color combinations with similar hues or not enough contrast—particularly if they are likely to be viewed on monochrome displays or by people with different types of color vision deficits.
  • Use markup and style sheets, and do so properly Basically, make sure to use HTML for structure and CSS for presentation. Especially avoid using proprietary markup or presentation elements and avoid using technology that may not render the same way in different browsers.
    • Clarify natural language usage Make sure to define terms and use markup that indicates acroymns, definitions, quotations, and so on. In other words, use more logical markup. Further, make sure to clearly indicate the language being used in the document so that a browser may be able to switch to another language.
    • Create tables that transform gracefully In short, don’t use tables for layout— use them for presenting tabular data such as a spreadsheet. When tables are used, provide a clear caption, column headings, and other indicators of the meaning of cell contents.
    • Ensure that pages featuring new technologies transform gracefully This is a key idea discussed throughout the book. Basically, make sure that, if you are going to push the limit of design, any new technologies degrade gracefully under older browsers. For example, if you are relying on JavaScript, does the page still work without it on? Or at least evor gracefully?
    • Ensure user control of time-sensitive content changes Make sure that moving, blinking, scrolling, or autoupdating objects or pages may be paused or stopped by the user. Besides being highly annoying, such distractions may actually make it difficult for users to focus on the site.
    • Ensure direct accessibility of embedded user interfaces If you use an interface within the page—for example, a Java applet that has its own internal interface— make sure that it, too, is accessible.
    • Design for device independence Try to build interfaces that can work in multiple devices, including those with different screen sizes, different viewing devices (cell phones as well as computers), and different manipulation devices (keyboard or mouse and keyboard). A particularly important consideration is just making sure that a site doesn’t rely solely on the mouse for navigation. Some users may find mouse movement difficult, and power users may actually prefer to use the keyboard for navigation.
    • Use interim solutions Because not all browsers will support the same technologies or standards completely, make sure to provide alternatives in the short term for noncompliant browsers.
    • Use W3C technologies and guidelines A somewhat self-evident but occasionally troublesome suggestion. Of course you should always try to follow the W3C guidelines, at least in spirit. However, be careful because many W3C guidelines are no more than proposed ideas, and browsers may lack significant or consistent support for a defined specification.
    • Provide context and orientation information In some sense, this just means to explain things or provide instructions for complex areas. You should design pages so that the meaning of links is clear through the use of ToolTips or scope notes. Further, forms should be designed that explain what is required. In the most basic way, a site should provide a help system.
    • Provide clear navigation mechanisms Basically, you should provide obvious navigation that is easy to understand and at a consistent location on the screen. Navigational aids such as search engines, site maps, and site indexes should also be provided.

      ■ Ensure that documents are clear and simple Yet another fairly obvious suggestion, but powerful nonetheless, is that simplicity will lead to greater accessibility. Given that not everyone will be able to read a language well, and usability is directly related to simplicity and consistency, try to make your documents simple.

      Building a Usable Site

      One of the keys to usable Web site development is to focus from the beginning on the users of the application. Remember that the user’s goal is not to use computers or to use your Web site. The user’s goal is to accomplish some task—purchase a product, find a bill payment center, register a complaint, and so on. You should try to make direct contact with users, and you must listen to them. Do not fall into the trap of thinking that you should just simply ask users what they want and then they will design your site for you. Users are not designers, and they make illogical or unrealistic requests. Because of this, you may be tempted to implement your own idea of a great site instead, without regard for user requests. However, the core idea of user-centered design is to always remember we are designing for users and not ourselves. Recall again the following very important Web design rules:

      Rule: You are NOT the user.

      Rule: Users are NOT designers.

      Although not all user input will be valuable, you should solicit information from your intended audience. You might consider interviewing them or giving a survey. Whatever you do, make sure to let users talk—and listen to them. While this may seem like JAD (Joint Application Design), which will be discussed in Chapter 4, we will not let users control the project; rather, they will be used as a source of ideas and a way to verify the execution of implemented features. From interviews, you should build a profile of stereotypical types of users. While this may seem to be a bad idea, consider that unless you have a very small audience, it is virtually impossible to build a site that will conform perfectly to all the preferences and task requirements that all possible users might have. Even if it were possible, it would be prohibitively expensive.

      From your discussions with users, build a prototype site, or just a set of simple diagrams on paper of how pages might look, and test it out with users. Make sure you test your site with users as early as possible in the development cycle so as not to build a site that users can’t figure out.

      Suggestion: Perform user testing early and often.

      There are many ways to verify usability. Tests might include

      • Casual observation of users
      • Surveys and interviews
      • Focus groups
        • Lab testing
        • Heuristic evaluations by developers or usability experts

          The results of the tests can include more quantitative measurements, such as the number of mistakes made during a task, the amount of mouse travel, the time it takes to perform a task, and so on. Tests will certainly also have to include qualitative measures of what feature the users liked or didn’t like. Before you don a white coat and rent lab time in a room with a two-way mirror to observe users, consider that formal testing may be overkill for most sites because of the cost and trouble of performing user tests in a formal fashion. Simple observations might do the trick, and opinions tend to be free from many users, though not always well founded. Collect a few users, or even your friends and neighbors, and sit them down at the site, and have them perform a few tasks. What’s interesting is that even an informal test will uncover the major problems with a site. However, informal tests only work if you let them. Designers seem far too proud of their sites and tend to act as co-pilots, showing a user the interesting aspects of a site. Talking too much during a test or guiding the user in any way keeps the user from making his or her own decisions and may actually steer the user away from mistakes.

          Suggestion: When performing even an informal usability test, avoid talking too much or guiding the user.

          Before running off to round up your friends to ask them what they think, first consider that far too often users will tell you what you want to hear or what they think they would do in certain situations. Or they simply may not want to admit their misunderstandings. It is better to observe users’ behavior than to rely on statements from them. However, if this is not possible, user input is acceptable, particularly if it is coupled with your own ad hoc usability analysis of a site. For instance, see whether the site follows the basic usability criteria that have been described in this chapter. Table 2-4 presents some guidelines you should use for judging a site.

          When evaluating a site, the rules of thumb here cover the basic aspects of usability. However, don’t assume just because the site meets most of these basic ideas that it is a good site. There are plenty of other ways for a site to fall down. For example, a site might not contain excellent content, its technology may be unreliable, or its graphics may be hideous to look at. Chapter 5 presents a more in-depth evaluation procedure that accounts for many other aspects of Web design. Remember that usability isn’t the only part of a positive Web experience.

          Usability Above All Else

          One problem with usability discussions is that it is easy to use usability concerns as a way to squash any other reasonable value. For example, some people have gone so far as to discuss how banner ads contribute to poor site usability because they are animated or increase the download time. However, consider that without the banner ads the site may not be economically viable. Pleasing graphics also are a common target for usability experts. It is interesting to note how boring most usability gurus’ sites actually are. While a site without much graphics may be usable, it might not do much to improve the brand identity of the organization running the site; in fact, without graphics, it may undermine brand identity built through other mediums. In some situations, it may be important to let the user endure a slightly longer download in order to see the corporate logo and new advertising look.

          Advanced technology also is a common enemy of good site usability. The truth is that while advanced technology may lock out some users, what is provided may be worth it. If we always designed for the lowest common denominator, we’d still have text-only Web pages. Don’t let usability completely stifle innovation. Usability is certainly very important, but there are often other considerations in a Web site’s design. Always remember that while we design for users, we are ultimately in control of our site.

          Suggestion: Do not use usability concerns as a way to avoid or eliminate visual, technological, or economic aspects of a site.

          Who’s in Control of the Experience?

          While it is true that we must give the people what they want, the masters of sites— meaning those who pay for them—may have desires that are not congruent with the desires of the site’s users. Do not become a slave to the user; remember that, in some sense, we are the masters of our own sites. How we want to treat our visitors is going to influence greatly how they feel about visiting our sites. Do you want to be a dictator, forcing the user to download certain plug-ins or resize a window? Conversely, you could be very democratic and let users pick their own path through your site. You may even allow users to modify content on the site or influence other users with indicators of link popularity. Last, you could aim for a middle ground and maybe act as a benevolent dictator, trying to help users along the way and giving them freedom within certain constraints, but always trying to guide them along.

          The issue of control during a site visit is somewhat of an unwritten contract between the site user and the developer. There is give and take in the relationship. While one of the main tenets of user-centered design is to put the user in control, users are imperfect like everyone else; if we give them complete control, they may make serious errors. Developers will want to keep users from making mistakes. However, the role of the benevolent dictator of the online experience is difficult. If you control things too much and users notice that they can’t resize their window or press certain buttons, they may become angry or frustrated. The key is to provide an illusion of control.

          Users should be able to do everything they need to do and nothing more. People need to feel like they are in control, but the control should have limits. Good interfaces exhibit this control. Consider, for example, the famous adventure game Myst. In Myst, the user can click objects onscreen and move in a direction simply by clicking in the appropriate direction. The interface is very simple and also very restrictive, though game players rarely notice this. In Myst, as in many well-designed video games, the progression is very controlled by the game designer, but the illusion of control is always preserved. A great Web site would follow the cue of a video game by trying to guide someone to a conclusion like purchasing a product, but in a manner that the user doesn’t really notice.

          The best example of the balance of control in an experience is probably Las Vegas. Casinos create a complete experience of visiting an ancient land, tropical paradise, or foreign country. A gimmick outside the casino like an exploding volcano or pirate battle attracts hordes of visitors. The intent is that some of these visitors will step onto the nearby conveyor belt to be quickly whisked into the casino. Inside the casino, temperature, lighting, and oxygen level are carefully controlled in an attempt to create a pleasant environment. The passage of time becomes difficult to determine because windows are few and tinted, and clocks are nonexistent. Assistance is plentiful from dealers and waitresses who will provide free drinks. If you get hungry, cheap food is nearby at an all-you-can-eat buffet. Want to stay overnight? Rooms are reasonably priced—and if you spend enough, they might even be free. But when you come to your senses as your wallet begins to empty, notice how difficult it is to find the exit!

        Good Las Vegas casinos practice the ultimate in experience design, second only (maybe) to Disneyland. The experience is always controlled; the point is to maximize the money the casino takes in. If you step out of line, get irate and loud when you lose, or try to do something to win back control in gambling by card counting, you’ll find that you are quickly escorted outside. The experience is fun and you can win, but the control is there and the house always has the edge. It’s pure math. If you plan to run a commercial site, learn from Las Vegas.


        Usability is about the aspects of a site that aren’t always noticeable but yet seriously influence the ease in which a user is able to accomplish a task using the site. Usable sites should be easy to learn, easy to use, and easy to remember. They should also result in few errors and be satisfying to the user. While some ways to improve usability, such as consistency and simplicity of design, are easy to formulate, sometimes it is difficult to satisfy the needs of every user. One reason is that users have different Web skill levels—novice, intermediate, and advanced (power users)—that will affect site usability. Another is that, while users generally share certain capabilities for accessing a site, such as vision and memory, users are also individuals, with unique characteristics, opinions, and experiences. They will also tend to view your site as a mere island in a big ocean of sites, and it is best to assume that they won’t want to learn your special rules.

        With so many varieties of users, you probably won’t be able to perfectly accommodate every user’s unique tastes and requirements. However, if you create an adaptive interface that can be used by the three broad categories of users and make sure to test your site carefully with real users, you stand a good chance of making a site that is usable by most users. Be particularly careful not to lock users out, particularly those who may be disabled or slightly different from your average user.

        Finally, a site should always be built to meet the needs of its users within the constraints or the desires of its creators. However, never use the quest for a usable site as a way to avoid difficult problems or as an excuse not to use graphics or technology or introduce new features that a user might want. An overzealous Web professional waving the usability banner can easily stifle innovation. Balance is always the key to great Web design.

The complete Web design book

The complete Web design book

A thick Web design book without glossy paper and pictures!

A thick Web design book without glossy paper and pictures! Who would have thought it would be published? That’s exactly what I set out to do a few years back and it seemed to make sense to enough readers that now it has even been massively updated. Why engage in such a fool’s errand? Simply because there are plenty of Web design books out there that provide color snapshots  of well-implemented sites or short discussions of the cool features in today’s trendy sites. However, given the fluid nature of the Web, the interesting sites have often changed by the time the ink has dried on the pages, leaving only a paper record of what the site used to be like. Worse yet, what is left only tells part of the story. It often hides the usability problems, the technical execution problems, and the slow loading pages. Even so, I often turn to such resources as they provide a great deal of visual inspiration. But they tell only half the story—and I will try to tell the other half in this book.

The goal here is to talk about what makes sites work beyond the trends of the latest font or visual treatment. Usability will certainly be a major concern, but so will correct construction. I’ll try to speak from the experience I gained from building hundreds of sites over the years with my firm. Some of the projects worked well and others didn’t, and I found that I learned not only from my successes, but also from the failures of both my own projects and those I have observed or rescued. Experience is truly the best teacher in an industry as young as Web design.

I’ll try to make sure to teach the fine balance between designer wants and user needs, between form and function, and between uniqueness and consistency, all while respecting what is possible to execute in the chaotic medium known as the Web.

After reading this book, you’ll truly appreciate how Web design is a fluid mixture of art and science, inspiration and execution, and ultimately, of frustration and elation. You may excel on the visual side of a site only to fail in the technology or delivery aspects. Web design is all-encompassing and the investment in understanding deeper medium and technical issues will pay huge dividends in future projects.

Yet as you read this book, you might not always agree with what I have to say. You may even find that some of the rules and suggestions are not perfectly consistent. However, that may be the point—to get you to think and not dismiss something out of hand. Instead, ponder why such rules and suggestions were developed before you throw caution to the wind. Great designers, regardless of medium, bend or break established rules on purpose. Real breakthroughs rarely come due to ignorance or arrogance.

Unfortunately, I won’t be able to guarantee a proven step-by-step process that ensures a great Web site. Some things really do take practice. Building numerous sites and browsing even more sites is required to excel at Web design. However, I can say that if you do read this book, you’ll have at least half of what you need to make great sites. The rest will be up to you and your creativity. So get out there and show the Web what you can do!

What is Web Design ?

Most discussions of Web design get off track in short order, because what people mean by the expression varies so dramatically. While everyone has some sense of what Web design is, few seem able to define it exactly. Certain components, such as graphic design or programming, are a part of any discussion, but their importance in the construction of sites varies from person to person and from site to site. Some consider the creation and organization of content—or, more formally, the information architecture—as the most important aspect of Web design. Other factors—ease of use, the value and function of the site within an organization’s overall operations, and site delivery, among many others—remain firmly within the realm of Web design. With influences from library science, graphic design, programming, networking, user interface design, usability, and a variety of other sources, Web design is truly a multidisciplinary field.

Defining Web Design

There are five areas that cover the major facets of Web design:

  • Content This includes the form and organization of a site’s content. This can range from the way text is written to how it is organized, presented, and structured using a markup technology such as HTML.
  • Visuals This refers to the screen layout used in a site. The layout is usually created using HTML, CSS, or even Flash and may include graphic elements either as decoration or for navigation. The visual aspect of the site is the most obvious aspect of Web design, but it is not the sole, or most important, aspect of the discipline.
  • Technology While the use of various core Web technologies such as HTML or CSS fall into this category, technology in this context more commonly refers to the various interactive elements of a site, particularly those built using programming techniques. Such elements range from client-side scripting languages like JavaScript to server-side applications such as Java servlets.
  • Delivery The speed and reliability of a site’s delivery over the Internet or an internal corporate network are related to the server hardware/software used and to the network architecture employed.
  • Purpose The reason the site exists, often related to an economic issue, is arguably the most important part of Web design. This element should be considered in all decisions involving the other areas.Of course, the amount each aspect of Web design influences a site may vary according to the type of site being built. A personal home page generally doesn’t have the economic considerations of a shopping site. An intranet for a manufacturing company may not have the visual considerations of a public Web site promoting an action movie. Precisely what is meant by the expression “Web design” seems to be fluid; our discussion must take this into account, but at the same time provide ideas concise enough for the designer to keep in mind at all times. We’ll start first with abstract definitions and get more concrete as we move on.

    The Web Design Pyramid

    One way to think of all the components of Web design is through the metaphor of the Web pyramid shown in Figure 1-1. Content provides the bricks that build the pyramid, but the foundation rests solidly on both visuals and technology, with a heavy reliance on economics to make our project worth doing.

    As Web designers, we try to plan our sites carefully, but construction is difficult. The shifting sands of Web technology make it challenging to build our site; construction requires teamwork and a firm understanding of the Web medium. Even if we are experts able to construct a beautiful and functional Web site, our users may look at our beautiful construction with puzzlement. Designers, or their employers, often spend more time considering their own needs and wants than those of the site’s visitors. Our conceptual Web pyramids may become too much like brick-and-mortar pyramids—impenetrable tombs that leave us wondering if the users who strike out over the Web to reach our monuments can even find the door. Do they even understand the point of the site?

    While Web development challenges aren’t quite on the level of those faced by the ancient Egyptians, building a functional, pleasing Web site that can stand the test of Internet time is certainly not easy. The pyramid provides a simple way for designers to think of all aspects of Web design in interplay, but does little to provide a deeper understanding of the Web medium.

    The Medium of the Web

    While the Web pyramid analogy is a very abstract way of describing Web design, it is a useful tool for showing the interplay of the various components of Web building. A more practical way to discuss Web design is to think of the various components of the Web medium, as shown in Figure 1-2.

    Today’s Web sites are primarily a basic client-server network programming model with three common elements:

    The server-side This includes the Web server hardware and software as well as programming elements and built in technologies. The technologies can range from simple CGI programs written in PERL to complex multi-tier Java based applications and include backend technologies such as database servers that may support the Web site.

    The client-side The client-side is concerned with the Web browser and its supported technologies, such as HTML, CSS, and JavaScript languages and ActiveX controls or Netscape plug-ins, which are utilized to create the presentation of a page or provide interactive features.

    The network The network describes the various connectivity elements utilized to deliver the Web site to a user. Such elements may be the various networks on the public Internet or the private connections within a corporation—often dubbed an intranet.

    Other times users can post information for site owners or even other users, creating more of a multi-way communication path, as illustrated here:

    During any communication, most users are generally unaware of the medium when things are working correctly. While users are affected by the medium, they often do not distinguish the individual components such as network, HTML, style sheets, and JavaScript—unless something goes wrong. In the negative case of a slow site, or one that causes visual or functional errors, the user may notice the medium but still may not distinguish which aspect of it is causing the problem. Users tend to see not the parts themselves, but the sum of them. This makes it important to think of sites as a whole, in order to understand how users see them.

    Types of Web Sites

    Users tend to view Web sites, and thus Web site design, by the function of the site or by its visual appearance. It is important to be able to describe sites this way; however, there are many more ways to categorize them. While the possible categories of sites may appear endless, we can safely group sites in a few general ways. We’ll start first with the abstract and then move to visual categorizations.

    Abstract Groupings

    First, consider if a site is information focused or task focused. Sometimes we may describe this distinction as one between a site that is document-centered and one that is application-centered. Document-centered or informational sites provide information for users, but they provide very limited interactivity (other than allowing the user to browse, search, or sort the information presented). Sites that are task or applications oriented allow the user to interact with information or accomplish some task, such as transferring funds from a bank account or buying a new sweater. Hybrid sites do a little of both; these are becoming more common as the line between information and application blurs. Figure 1-3 plots the continuum from a simple static document-oriented site (often called a “brochureware” site) to full-blown software applications. This abstract grouping suggests that there is a transition from more document- or print-oriented Web sites to more interactive programmatic Web sites. This is indeed true; the intersection between the two philosophical camps is a source for much of the contention—and innovation—in the Web design community.

    Another way we might group sites is within the following broad categories:

    • Informational sites These sites provide information about a particular subject or organization (the “brochureware” sites). These are the most common Web sites on the Internet and often take on aspects of the other site categories over time.
    • Transactional sites This type of site can be used to conduct some transaction or task. E-commerce sites fall into this category.
    • Community sites These provide information or transaction-related facilities, but focus on the interaction between the visitors of the site. Community-based sites tend to focus on a particular topic or type of person and encourage interaction between likeminded individuals.
    • Entertainment sites These sites are for game playing or some form of amusing interaction, which may include transactional, community, and informational elements.
    • Other sites Included here are artistic or experimental sites, personal Web spaces such as Web logs (also called blogs), and sites that may not follow common Web conventions or have a well-defined economic purpose.

    We might also group sites based upon the organization that is running, or in some sense paying for, the site. Within this type of categorization we see five major groupings:

    • Commercial A site in this group is built and run by an organization or individual for commercial gain, either directly through e-commerce
      or indirectly through promotion for some off-line purchase of goods or services.
    • Government This site’s parent entity is ultimately a government organization, and the purpose of the site is to satisfy some social or legal need.
    • Educational This type of site’s parent entity is some educational institution (perhaps government related), and it is used to support learning or research goals.
    • Charitable A charitable site exists to promote the goals of a nonprofit organization or the charitable activities of an individual or organization.
    • Personal The site exists at the sole discretion of some person or group for any number of reasons, usually as a creative outlet or form of personal expression.

      Categorization can be difficult. For example, educational sites might really fall under the governmental category. Some sites in the personal category may arguably belong in the charitable or commercial group, depending on the reason for the person putting the site together. Now we turn to the more visual characteristics of sites, with a few sample categories of sites commonly seen on the Web.

      Visual Groupings

      As we group sites visually, we may see a range from those which rely more heavily on text and those which focus more on graphic presentation or imagery. The four most common design schools on the Web are:

      • Text oriented These are sites designed with a focus on textual content. Such sites, as shown in Figure 1-4, are relatively lightweight, download-wise, and often somewhat minimalist in design.
      • GUI style These are sites that follow certain graphical user interface (GUI) conventions from software design, such as top-oriented menu bars, icons, and pop-up windows. GUI-oriented sites range from simple GUI devices added to a primarily text-oriented site to full-blown Web applications with customized user interface widgets. Figure 1-5 shows some examples of GUI style Web sites.
        • Metaphorical Metaphor sites borrow ideas from “real life.” For example, a site about cars might employ a dashboard and steering wheel in design and navigation. A metaphor-designed site, as shown in Figure 1-6, tends to be extremely visual or interactive. This may be frustrating to some users and engaging to others.
        • Experimental Experimental designs attempt to do things a little differently than the norm. Creativity, unpredictability, innovation and even randomness are often employed in sites following the experimental design style.

          Of course, on the Web we find mixtures of form or potential new categorization of sites. For example, how would you categorize a portal site, such as the one shown in Figure 1-8, that provides a wealth of content, navigation choices, and even community related-facilities in a single page? This is certainly a design style that is used in a great deal of sites. We see the potential rise of other design categories when we look at Web site genres such as e-commerce sites, particularly strict “catalog and cart” sites, as well as online personal journal sites called “Weblogs” or “blogs.” We’ll take a closer look at these design ideas in later chapters.

          A Clearer Definition of Web Design

          So, after all this discussion, what exactly is Web design? It is obviously a very user- centered multidisciplinary design pursuit that includes influences from visual arts, technology, content, and business. A succinct definition follows.

          Web Design: A multidisciplinary pursuit pertaining to the planning and production of Web sites, including, but not limited to, technical development, information structure, visual design, and networked delivery.

          Because Web design is so multidisciplinary, it is often appropriate to pull ideas and theories from related fields. Indeed, we’ve been doing that even in the very first pages of this book. Some people, however, take this approach a little too far, developing their sites in a manner similar to print pieces or adopting so many software GUI interface conventions that the user becomes confused. While Web design borrows heavily from other design pursuits, there are significant differences. For example, the medium is very different than print because more function is provided—not unlike software. Delivery issues and content effects make Web sites different from traditional software applications as well. Web design isn’t just adoption of old ideas. It’s something altogether new.

          We shouldn’t say the Web is totally different either. There are plenty of people who do that as well. The Web is so revolutionary, they say, that none of the old rules hold. This is complete nonsense. Despite the proclamations of pundits, new media forms have always adopted conventions from other forms and invented new ones of their own. Furthermore, no new form has completely eliminated any other. Radio, magazines, newspapers, television, and other entertainment media all continue to exist in some form or other despite emerging technologies and new media forms. The Web certainly isn’t so new that we should throw out any valuable concepts we learned before. It does, however, have its own principles. We should strive to understand other media design concepts and modify them to fit the Web. The rest of the introduction will present some of the themes of Web design and conclude with a “roadmap” for the rest of the book.

          Web Design Themes

          When discussing Web design, we see similar themes come up over and over again. Whether it’s the political struggle between a corporation’s marketing department and information technology group over site ownership, or a graphic designer trying to convince a client of the appropriateness of a particular look or multimedia technology, these themes are at the heart of the matter. These issues often result in rather heated discussions among designers, as well as between designers and their clients both inside and outside corporate Web teams. While there is no simple answer to some of these issues, they are relatively easy to describe.

          Generally the major themes behind modern Web design include:

          • Designer needs versus user needs
          • The balance of form and function
          • The quality of execution
          • The interplay between convention and innovation

          In the abstract sense, these themes are not at all unique to the Web medium. Artists like Leonardo DaVinci certainly struggled at times to balance the desires of patrons and even his viewing public with his own needs. Commercial artists producing something like a magazine advertisement or billboard have to balance the demands of visual look with successful and clear communication. Execution varies in any discipline, but in one as young as Web design, the effects are more evident. Lastly, the rules of convention and the desires of innovation are as common as the struggle of a young person rebelling against convention, the middle age designer discovering the wisdom of the masters, and the old designer trying to rediscover his or her innovative youth. Despite the general nature of these themes, their specific details vary with each medium. It will be valuable to introduce each here before we encounter them later on. We start with the most important issue first: user-centered versus designer-centered site design.

          User-Focused Design

          A common theme of Web design is the focus on users. Unfortunately, a common mistake made in Web development is that, far too often, sites are built more for designers and their needs than for the site’s actual users. Always remember this important tenet of Web design:

          Rule: YOU are NOT the USER.

          What you understand is not what a user will understand. As a designer, you have intimate knowledge of a Web site. You understand where information is. You understand how to install plug-ins. You have the optimal screen resolution, browser setup, and so on. When you build your site around your own visual characteristics and skill levels, you often will confuse the actual users of the site. You must accept the fact that many users will not necessarily have intimate knowledge of the site you have so carefully crafted. They may not even have the same interests as you.

          Given the importance of the users’ interests and desires, it might seem appropriate to simply ask the users to design the site the way they want. This seems to be a good idea until you consider another basic Web design tenet:

          Rule: USERS are NOT DESIGNERS.

          Not everyone is or should be a Web designer. Just as it would seem foolish to let moviegoers attempt to direct a major motion picture on the basis of their having viewed numerous movies, we should not expect users to be able to design Web sites just because they have browsed a multitude of sites. Users often have unrealistic requirements and expectations for sites. Users will not think carefully about the individual components of a Web site. In summary, users are not going to have the sophisticated understanding of the Web that a designer will have.

          That said, the key to successful, usable Web site design is always trying to think from the point of view of the user. User-centered design is the term given to design that always puts the user first. But what can we say about users? Is there a typical user? Does a “Joe Average Internet” exist that we should design our sites for? Probably not, but we certainly should consider certain traits, such as reaction times, memory, and other cognitive or physical abilities, as we design sites. An overview of cognitive science helps us understand basic user capabilities; we will discuss this topic further in the next chapter. Remember, however, that while users may have similar basic characteristics, they are also individuals. What may seem easy to one user will be hard for another. Sites that are built for a “common” user may not meet the needs of all users. Power users may find a site restrictive, while novice users find it too difficult. Users are individuals with certain shared capacities and characteristics. Sites should take account of the relevant differences while focusing on the commonalities, as stated by the following Web design tenet:

          Rule: Design for the common user, but account for differences.

          Lastly, we can see that the differing needs of the user and the designer raise an issue of control. Control over a visit to a site is an unwritten contract between the designer and the visitor to how the experience will unfold. Often, sites provide little user control, forcing the user to view content in a predetermined order with little control over presentation or technology. Rarely do we find the exact opposite occurs, where the site gives users ultimate control over visitation, allowing them to choose what to see and how to see it and even allowing them to add to or modify the site’s contents. However, most sites do allow the user some choices and the ability to control experience, but always under the influence of the designer’s requirements. We’ll revisit some of the general ideas of control and user experience throughout the book.

          Form and Function

          A key problem with Web design is that sites often do not balance form and function. Under the influence of modernism, many designers have long held that the form of something should follow its function. Consider that the form is one base of our Web design pyramid analogy, while function is the other. Function without form would be boring: while the site may work, it won’t inspire the user. Conversely, even if the form is impressive, if the function is limited, the user will be disappointed. There needs to be a clear and continuous relationship between form and function. Put simply, the form of a site should directly relate to its purpose. If the site is marketing-driven, it might be very visual and even incorporate heavy amounts of multimedia if it helps to accomplish our goals. However, if the site is clearly a task-based one, such as an online banking site, it might have a much more utilitarian form. Of course, determining the appropriate form for a site requires that the function of the site be clearly defined. Unfortunately, for many Web sites the ultimate function of the site isn’t always clearly conveyed. Even worse, the relationship of form and function for the site is not always clearly established.

          Rule: Make sure the visual form of a site relates to its function.

          It is likely that there will be a continual struggle between form and function, despite the fact that in nearly all cases the only side the designers should be on is that of their users. In fact, there really need be no disagreement. Form and function do not always have to fight; they complement each other nearly all of the time. A nice-looking design makes a functional site much better, while great functionality will make up for a deficiency in “look and feel” over time.

          Seasoned designers understand this balance and practice the idea of holistic design by following the rule that the correct execution and integration of all facets of the site will outweigh the value of a single component. In fact, the real difference between a Web designer and a mere Web builder is that the former is capable of not only executing the individual parts of a site correctly but can also breathe extra “life” into the project as a whole.

          Execution: The Easy Part?

          HTML, XML, CSS, JavaScript, Java, Flash, browser compatibility, server capacity, and all the other components of Web development are the easy part of Web design. While learning a new technology might take some time and effort, it is generally quite easy to say whether some HTML or other technology is used correctly or not. However, today’s sites are riddled with execution problems, ranging from simple typos to significant technical compatibility, delivery, and usability problems.

          A Web site should only be considered excellent if it is useful, usable, correct, and pleasing. The meaning of each of these considerations is somewhat subjective, except in the case of correctness. For a site to be well designed, its execution must be excellent. This means that the site must not break in any way. The HTML must be correct and the images saved properly so that the page renders itself as the designer intended. Any interactive elements, whether in the form of client-side scripts in JavaScript or server-executed CGI programs, must function properly and not result in error messages. The navigation of the site must work at all times. Broken links accompanied by the all too familiar “404: Not Found” message are not the sign of a well-executed site. Errors, in fact, should be handled, and the site should fail gracefully, if at all. While execution seems like an obvious requirement for excellence, too many sites exhibit execution problems to let this consideration go unmentioned:

          Rule: A site’s execution must be close to flawless.

          Why are execution problems rampant in Web sites? Simple: this is a young industry with changing standards. Consider state-of-the-art Web design from a few years ago and you’ll see the difference. Further, most Web professionals often didn’t have the background in computer science, networking, hypertext theory, cognitive science, and all the other disciplines that might affect the quality of the produced site. Some naïve designers even ignore the inherent differences in the emerging Web medium by not addressing problems of varying resolutions, color reproduction, bandwidth limitations, and so on. A Web designer who overlooks these types of technical characteristics of the Web is like the print designer who will not admit that ink bleeds on paper—great Web designers must know and respect the medium, which includes everything from browsers and bandwidth to programming and protocols.

          Rule: Know and respect the Web and Internet medium constraints.

          So, given the environment of Web design, we end up with today’s assortment of sites, from those that are standards-compliant, lightweight, user-friendly, informational, and task-rich to those that are browser-specific, unusable, or multimedia bandwidth hogs touted as “next generation” designs. Yet does this comparison suggest that all good sites are the same? Not necessarily.

          Conformity versus Innovation

          Many Web designers feel that design theories and site design categorization increase conformity and stifle innovation. It is true that rigidly following design templates such as “top-left-bottom” layout or adhering to such common practices as putting organizational logos in the left corner of a Web page will limit some page design choices; designers have misunderstood the reason for these conventions. Consider that, while it might be possible to design books with triangular pages, few books are done this way. The cost of production, the awkwardness, and the reader’s unfamiliarity with such a shape could make a triangular book a risky proposition. Most books are square or rectangular and have a distinct cover, title page, table of contents, chapter breaks, and so on. Are these conventions stifling to the book designer? Few would say they are; a great deal of creativity is still possible within the given constraints of a modern book. The same should be said for Web design. Graphical User Interface (GUI) design for software programs has influenced what is considered standard for Web user interfaces, but new ideas have also emerged. Designers need to respect conventions of navigation choices, navigation placement, colors, and so on. These ideas do not limit design; they simply constrain sites to recognizable forms so that users do not find the sites they visit to be completely different.

          Rule: Appropriately respect GUI and Web interface conventions.

          Learning Web Design

          Reading a book like this is useful in uncovering the theories and commonly held practices of Web design, but more is required if you are to ever achieve mastery of Web design. Always remember that learning the basics of Web site development is not necessarily difficult, but do not underestimate the time and effort it will take to become an accomplished designer. This is no different from carpentry, painting, writing, illustration, or just about any skill you can think of. So make sure you set reasonable expectations for yourself as you learn.

          One useful approach to learning Web design is by evaluating the efforts of others. We can look at what is done right and what is done wrong and try to emulate the good and fix the bad. Beware, however: it is not always easy to evaluate and compare site designs. Far too often people compare that which is not comparable. You would never compare a video game with a word processor, yet both are software programs. Why, then, do we compare experimental sites with corporate sites, or e-commerce sites with Web design agency portfolio sites? Far too often, this type of comparison is done in
          the Web design community. Sites and books put forward a variety of sites as absolute yardsticks of great design. Yet, obviously, not all sites will have the same issues as those that the “excellent design” rules were derived from. What is cool or clever for one site may be an absolute disaster for another. A great example is the splash page shown in Figure 1-9. A splash page is the term used to describe an entry page to a site—one that comes before the actual home or core page of the site.

          A splash page is often used to set the tone for the site and may consist of an interesting animation, preloading sequence, or some form of “installation” information in regards to what technology is required or what the user’s expectations should be. While splash pages can be effective, very often they are not. The mere mention of the phrase “skip intro” results in hearty chuckles among many designers. Yet the much maligned splash page may just happen to have some uses. Some movie and entertainment sites have found such sequences to be an integral aspect of their sites. Just like a movie without opening credits, these sites would be incomplete without a splash page. This simple example illustrates the most dangerous problem facing those learning Web design— namely, assuming there is only one form of good Web design. Often, it seems that the only absolute in a fluid discipline like Web design is that there is no absolute.

          Rule: There is no form of “correct” Web design that fits every site.

          As you read this book, you’ll notice that various rules and suggestions are presented. These are fairly safe and well thought out, but their real value comes from understanding the motivation for them, not from blindly applying them. The importance of this distinction will become apparent once you see that many of the “rules” seem at odds with other rules. Exhibiting good judgment that strikes a balance between conflicts is
          a key attribute of a great Web designer.

          A discussion of site evaluations that attempts to cover all aspects of Web design from taste to technical implementation can be found in Chapter 5, and a checklist useful during such site evaluations is presented in Appendix B. Yet do not fall into the trap of becoming a professional critic. Certainly it is important to point out what not to do by finding flaws in sites or criticizing what is bad, but spending too much time discussing bad Web design may not be fruitful, particularly when you consider that there is no accounting for poor taste. It is easy to criticize, but it is much more difficult to take your acquired knowledge and apply it to a site of your own.

          In the final analysis, the best approach to learning Web design is obviously by doing. Reading about site design theory or reviewing sites simply isn’t a replacement for building sites of your own. Yet before you set out constructing a site, learn the core principles of Web design as well as the building and evaluation procedures that will help you construct your Web sites well.


          Pinning down exactly what is meant by the term Web design can be difficult. At best we can see that Web design is a multidisciplinary pursuit that consists of five primary components: content, visuals, technology, delivery, and purpose. However, theories of exactly how these components should mix together vary from person to person as well as project to project. Striking a fine balance between form and function, user and designer, content and task, and convention and innovation is the lofty goal of the Web designer. The good designer knows that scales should not tip too far one way or another and tries to avoid the absolutisms of “correct” Web design. Yet not everything in the field of Web design is so abstract—many specifics can be found. Correct mastery of the technical medium and knowledge of various details and conventions are mandatory for aspiring Web practitioners. We begin the discussion of the core aspects of Web design in the next chapter, which focuses on user-centered design.

Guide To Achieving Success With Website Hosting

Would you be wealthy if you had the one secret to being as profitable as you can be in your online business? Well no one really knows that answer, but you can go over all your business expenses, like how much your hosting costs each month. Continue on for some advice that will help you find the best website hosting service for the cheapest price.

Most web hosting packages will contain a large number of features; however, the specific features offered will differ from one company to another. Compare the levels of service and fulfillment for the specific features that are important to you. A host that appears to be more economical may not be due to missing features in their plan.

Research backup host sites when you find certain aspects of the web hosting services unfavorable. You can then make the change to another web hosting service with more ease and less disruption, if your current service proves to be too unreliable or completely crashes.

When you are deciding on who to choose for web hosting, pick a company that resides where your target audience is located. For example, if your business website is geared towards UK residents, be sure that your data server is close to your audience.

Choose a web page hosting company that is located in the same country as your target audience. For instance, if you target customers in the UK, make sure you choose a web hosting company whose data center resides there as well.

When considering a prospective hosting service, ask multiple questions about the quality of security, and privacy measures. Today, no website is safe from hacking and other security risks. Make certain that your web host has procedures in place for dealing with all of the common threats such as DDoS attacks. You need to ask about the potential risks associated to your website if your web host is under attack.

Monthly Payments

Identify what services you must have before you begin your search. Figure out what it is you need and want and from there shop around to see what web hosts matches these expectations. This will help you make a decision based on a variety of factors, rather than a single factor at the potential expense of others.

Will monthly payments or a one-time payment best suit your budget? Consider monthly payments – what if you need to cancel service sometime down the road? Should your web host decline, your business outgrows the host or even if your account is closed, you would lose any paid monies, unless otherwise stated by the host.

Choose a hosting service that can offer you enough space for your website to grow. While HTML doesn’t take up many kilobytes, videos and photographs can. For hosting files alone, around 100MB – 1 GB should offer a good starting platform for your domain.

Closely comparing the hosting companies on your short list will help you choose the one that is best for your business’s bottom line. Rates can vary with different host providers, and even though one may cost more than the other, it does not necessarily mean they are more reliable. Look at the plans on offer and choose the one which offers you only as much as you need, or what you will need in the near future.

To ensure a safe website, it may be wise to pay a little extra to obtain the secure server certificate. You can make note of your security certificate on the home page of your site. This tells visitors that they can safely make purchases or provide sensitive information through your site portals.

Do not limit your research to a host’s website and advertisements. Check out reviews of the hosting company on other websites such as forums in order to get customer feedback and truly find out how good the web host is. When determining the quality of a host, reviews from sources that aren’t affiliated with the provider in any way will be the most helpful.

Look for a hosting service that lets you have access to statistics and detailed information about your traffic. Get a visitor counter on your site, and compare this number to the statistics given to you by your web host. You can use this data to tailor your website to your visitor’s browsing needs.

Clearly, lots of things determine the cost of web hosting. It is well worth your time and effort to review your options before signing on to any contract. Your web page hosting company should offer you everything you need to run your website efficiently, and at a reasonable price.

It’s often the case that web hosting services are actually a middle step provider getting their services from a larger host. Many of these companies will purchase server space for a cheap price, in order to turn around and make money by renting the space to smaller websites. Find out if your host has their own servers and where they are located. If your host relies on another company, perhaps you can find the exact same kind of hosting at a lower price from another company.


A Guide To Help You With Running A Blog

TIP! Post content on your blog often. To retain visitors and increase traffic, you must frequently provide new content.

Would you like to begin a blog, but don’t know how? If so, then this article is for you, as it will tell you everything you need to know about creating a blog with unique content that will make it noticeable. Don’t feel intimidated. It’s becoming easier and easier to blog because of technological advances. The tips that follow will help you become a renowned blogger in no time.

TIP! Don’t burn yourself out on blogging. Not allowing yourself a break now and then can result in burnout and fatigue.

Be certain your blog uses SEO, or search engine optimization. Because your primary goal is increasing your readership, it is important that your blog shows up in the search results when potential readers look for a topic about which you write. Select a group of keywords, and make sure they appear in the title and body of blog posts so that you bring in a large number of visitors.

TIP! Be sure to use images when you’re making posts. Everyone knows that a picture can represent more than mere words.

When it comes to keywords, ads, images, and plug-ins, do not overdo it. Overusing your tools will cause search engines to mark your website as spam, which will put you behind. Write naturally, and make sure that your blog posts are easy to read.

TIP! Read all of your comment,s and try to respond to any feedback given without taking it too personally. Whatever the subject is, there will always be people who criticize.

When publishing a blog, consider buying a unique domain name, instead of using a free generic one. Domain names are inexpensive and they will give your blog a more professional image. That will also be simpler for people to keep in mind; this is especially true if you use relevant wording for your title, or use your company’s name.

TIP! Learn to use lists effectively in your blog. Lists can effectively provide information that does not require a lot of explanation, such as ingredients for a recipe or parts needed to assemble a device.

Invite successful bloggers to write guest blogs for your site. This will add more interesting content to your blog. You’ll also gain traffic from their blog to yours. Try to have a rotation of guest authors on your blog.

TIP! Start a mailing list when you get your first dedicated readers. The sooner you start compiling email addresses, the more time you have to expand your mailing list.

Now, you know the best way to get started and create the blog you’ve been imagining. Use the advice here to create a blog that makes you proud. Whatever your reason for creating a blog, these ideas will help you set up one that is popular and efficient.

Professionel blogger

Use These Tips To Assist You With Designing Your Website

In this online day and age, it’s more important than ever for businesses to have an adequate Internet presence. If your site isn’t effective, your business will not do as well as it could. Here you can learn to design a site that works for you.

Display a tagline in a prominent area on your page. This tagline should give visitors an idea of what your site is about. Use a clear line to keep the visitors on your website.

Make your visitor’s life a little easier by preserving the content they enter into forms. For instance, if a visitor registers for your newsletter and they are going to use the same information to make a purchase, be sure the data they’ve already entered is kept, so they do not have to re-enter the same information. Developing “sticky” data like this streamlines the user experience, and your visitors will likely appreciate the convenience.

You should frequently peruse various forums and sites to learn more about web design. Everything is right there on the world wide web. You simply have to take the time to look.

If you want help with your web design, look at purchasing on of many site design programs available on the market. These are easily used and can get you building sharp sites quite quickly. Otherwise, people will not be interested in visiting your site.

You will need to pass the NoScript test. Download the NoScript extension in Firefox and test it on your site to see if it is still readable. Some content, like ordering systems, will not work properly without scripts, but when your site is completely blank when scripts are turned off, then that’s not a good sign.

Aim for page loading times of under 10 seconds. Efficient sites that are well-designed need to show up in the browser for your readers in just moments. Most visitors want things to happen quickly and easily. If you don’t offer that to them, you will lose many opportunities.

In the 1990s, many designers used frames when creating their websites. Don’t do that. Frames are flawed and they went out of style for a reason. Readers have difficulty bookmarking and scrolling websites with frames. There are a lot of better ways to get people to go through the website you have.

When putting links on your pages, the links need content. Links should include a description so visitors understand what they’re clicking. Make sure your visitors do not click links accidentally by adding useful text content.

Include a search element that allows visitors to search within your website content. Those searching for specific information will instantly scan for a search option. When one is not available, chances are they will move to a site that is searchable. The ideal placement is the upper right hand corner of your page.

Try you best to write an informative and interesting “About Us” page. These pages are often dull and uninteresting. Crank it up a bit! Provide some insight for your visitors; tell them how and why you built your site and what goals you want it to reach for your company.

Be sure your introductory page is clean and simple. Visitors to your site will decide quickly from your front page if they want to stay to look around or leave just as quickly. Don’t add unnecessary distractions that hide the essence of what you offer to your customer.

If you find yourself stuck in the design process, remember that you have the entire Internet at your disposal to look for examples. Look around different websites for inspiration. Find a website that you like, identify what makes that website appealing, and determine if it is an idea that you can borrow and improve upon. Remember that borrowing ideas isn’tt enough to make your website a success. You have to think of creative ways to improve them.

Ensure that your user’s needs are a priority. Web designers need to completely focus on the user’s needs. This is going to have everything to do with accessibility and usability, as well as different types of social interaction. You must know these very well and consider every possibility. Putting yourself in your customers shoes can really help you to design the best page possible.

The more you learn about and practice web design, the easier the process becomes. The best way to learn is by starting up your own page and begin with simple scripts in HTML or PHP and upgrading as you become comfortable. Remember that practice makes perfect and that you have to start somewhere.

File sizes affect the speed with which your website loads. You can control file size by paying attention to file types. You are better off keeping the graphics to the normal GIFs and JPEGs so it loads smoothly. While BMP and PNG files might be better for creating web graphics, these file types tend to use significantly more disk space. Alter your graphics to smaller file size file types to keep load times minimal for your users.

The design tools which come with your web hosting account are a great way to practice your skills, but they are no replacement for real design know-how. Your site should reflect you and your personality, so you want to make sure it’s not too generic.

While development platforms generate code for you automatically, they cannot duplicate the reliability of classic text editors. The goal of a platform is to design the features you want in a site, then you simply paste the code that was generated into your own site. Use a text editor to reduce mistakes, and additionally help to learn the process for yourself.

Choose some reference books on design principles in general, and website creation in particular. Start out simple by purchasing books that are in line with your level of expertise, then gradually upgrade.

Proofread everything! You want visitors to easily absorb it. If there are errors, most readers will see your site as unprofessional and will not take you seriously.

You can get ideas from other websites, but incorporate them into a vision all your own. Make up your own designs or make other designs you have seen into your own. This is a good way to develop your own understanding of website design.

If you would like to be a successful web designer, it is pertinent for you to know HTML5. If you aren’t familiar with html5 then you’re going to have a lot of work to accomplish in the future so get your mind ready and start learning,

Avoid wasting time by programming your domain and user name into your file server. Your settings can be personalized, saved and quickly selected when you log onto your server. This will cut down on a lot of wasted time.

If video-hosting is something you’d like to include on your site, you’ll first need to ensure that your web host accepts the idea. A lot of services cannot spare the bandwidth or storage space for videos. They do this because FLV files can take up quite a bit of space on a public server. Just make sure you check before doing this so that you do not waste a lot of time and effort.

You will be able to design websites more quickly if you learn more about web page design while designing your first site. Once you have tackled one site design aspect, move on to the next one and master that one, too. While this might take longer initially, the knowledge you gain will have multiple benefits in the future.

Consider the fact that some users have very little bandwidth before you add videos to your webpage. If your videos are faster than your clients Internet access, then it will work against you. This means a very slow-loading video that’s going to buffer every other second.

If you are going to be a website designer, unleash your inner artist. Be open-minded and, when you have an idea, record it so you won’t forget it. If you’re eating some sushi and think of something cool to put on your website, grab your iPad and record the idea. Even if you’re busy with something else, at your job, for example, you can preserve a new idea by calling yourself and leaving a reminder on your voice mail.

Design your website as an artist would. Take inspiration from all areas of your life, and allow it to shine through in your work. Take notes anytime or anywhere you might have an idea to bring to life. According to the circumstances, you might send yourself an email or call your own number and record an idea on your answering machine.

If you have crucial information for your website, put it at the top and towards the left of the page. People read from the left side to the right. This means things that you do not want your visitors to miss should be placed on left and high enough that they will notice before moving on.

Make certain that the search box you design is at the top of every web page, and contains 27 characters, at least. Label the button next to the search box “search.” Don’t use other labels, such as “go,” as these will cause visitors to miss seeing the box when they are looking for it. This will ensure your search box can be easily seen, used, and assist your visitors in discovering what they’re searching for.

To become great at web design, try learning all you can from various people. Do this so you know something about everything to do with the process.

Draw a favorites icon for your website. This teeny-tiny graphic will make it easier for people to recognize and bookmark your site. When a visitor browses his bookmarks, a distinctive favicon will stand out. Just be sure that you favicon is aligned with the theme of your site.

Make sure that when you add advertisements to your site that they aren’t overwhelmingly huge. You want to make people feel comfortable when they come to your site, not the opposite. Only add enough content to fill, but not clutter, your site and your website will have a more professional look.

Get feedback on your web design. What one web designer and you assume is a great web design, many others may find cluttered, confusing or a pain to navigate very easily. If you can, have people from your target audience test the site and provide you with feedback about it.

Draw a favorites icon for your website. This graphic shows up both in the address bar and on your bookmark, allowing people to recognize your website without even looking at the URL. Memorable favicons help you stand out when people look at their bookmarks. You should design the favicon so that it is logical for your theme and logo.

If you are creating a site for non-US viewers, you can use a country coded domain to assist with targeting. This guarantees that you have the domain name for the part of the country you are targeting. This the best way to get regional visitors to visit your site.

Every web page should have your logo on it. This lets you link your pages together in an easy and coherent manner. It also helps visitors remember your website. Choose a logo that really shows what your business is about.

Since many of the great domain names are already taken and in use by other companies, it might be in your interest to check out auction sites for used domain names like Sedo. Here you will find a great number of fabulous domain names that have been sold, abandoned or are otherwise now available for purchase.

As you’ve read, website creation is not that hard to grasp. With some simple advice, it will be easy to design a site that will entice people to come back, again and again. Use the tips you have read in this article for the best results.

Do regular checks to make sure none of the links on your webpage are out of date or broken. This will help to make your site user friendly, and keep your visitors from becoming frustrated. Examine the links periodically to check their functionality.

Web design and webdesign

Become A Successful Webmaster With These Practical Web Hosting Hints And Tips

If you started a site to display your most creative work, and then decided to sell that work, how would you handle it? Well, you would need to add a shopping cart to your site. Not all companies offer this selling process as part of their hosting. The following article will explain how you can find the perfect web host for your specific needs.

Check the hosting site to find out what kind of sites they can offer. You need to be concerned with the ability to create dynamic pages. Some free sites don’t allow you to do this. If you can only create static pages, you won’t be able to add scripts you coded yourself, and you will therefore be severely limited in what you can do. If you cannot find the kind of dynamic scripts you want to use, look for a paying plan instead.

Have a list of several possible hosts that you like before you pick a single hosting service. If you only have two on the list, then their levels of experience and competence may be so far apart that there is no way to make a middle ground decision.

Most web hosts have various add-ons for their packages, however, the features offered varies host by host. You should also make note of availability for each feature you are interested in, especially when you are narrowing down your choices. For instance, one host may offer a low price package, but you can find you really have to get the higher priced package to get the feature you want.

Opt for web hosting service from a provider with a favorable track record for addressing outages. Don’t choose a company that makes excuses for lengthy outages. These outages indicate a lack of professionalism and adequacy; avoid these providers at all costs.

Look into backup hosting services if you find you are running into a lot of troubles with your current host. If you decide you can’t handle the problems with your service, you can easily switch to one of the services you’ve researched and won’t have to risk your website being down altogether while you figure out a new plan.

Be sure that you register your domain’s name using a different company than your web host in case there’s some kind of disagreement between the two of you. This way you can still have the domain name, and can put the site on a different server. You might not have any control over your website’s registration, the host will.

When looking for a web host, choose a service that is in the country that your target audience is in. If your target is the UK, make sure the host provider has its data center established in the UK too.

Choose a web host that allows you to pay by the month instead of one that requires large, lump-sum payments. It is impossible to know how good business will be in the later months. The quality of the hosting service could decline or your site could expand so much that you have to move it to another server. Unless your host offers your money back if you do not complete your year-long agreement, go with a monthly subscription.

Once you have selecting your web hosting company, you should opt to make payments on a monthly basis, as opposed to committing to a longer period of time. It’s difficult to know if your web host will be a good one, and your business may change over the course of the next 6-12 months. Furthermore, there are practical reasons why a host may no longer suit your needs. Suppose your business outpaces the offerings of your current host. Do not lose the sum of your lump payment; opt instead for monthly payments.

You may be getting charged by your web host on the traffic you get. You need to know how much it will cost you, a lot of places have flat rates or it can go up and down depending on your visits.

If you are considering a free web hosting service, be careful. There are many disadvantages that come along with the benefits of free hosting services, including lack of backup services, so make sure you are creating your own site backups. So, if any of your information disappears, you have no recourse.

If you lack confidence, take another look at the advice in this piece in order to select a hosting service that truly suits the needs of your website. Don’t overspend on added features you do not need.

Beginner web designers would be wise to use a hosting service that has good customer service instead of the most options. If a newcomer, you are likely to have lots of questions when it comes to using some of the capabilities provided by your web hosting firm. You will have more use for the customer service assistance than fancier features that may not even help you.


Excellent Tips And Tricks For Writing A Blog Success

TIP! When you are writing a blog, leave time to respond to your reader comments or inquiries. Be consistent in the frequency of your blog and your responses to comments.

Technology has greatly advanced through the years, and it has changed the way individuals communicate forever. Writing A Blog is one of today’s biggest trends. If you want to learn more about the fine art of blogging and its benefits, read the following article.

TIP! Don’t forget SEO work when it comes to blogging. Since your ultimate goal is to have people read your blog, you will want to make sure that your blog appears in their search results for specified topics.

Be available for your readers at all times. Make a habit of interacting with them. Consistent communication with your readers can help establish a strong connection between you and your readers that results from the exchange of ideas with one another. Giving up on blog posting will not only disappoint your readers, it will come back to haunt you later.

TIP! Commenting on other blogs can get your own blog noticed. If you like Google reader, create a separate folder in it for other blogs you’re following.

Regularly post new content to your blog. To encourage readers to return and draw in new readers, you must post fresh content on a regular basis. Without new content, your visitors will not be compelled to visit your blog, or even return! Blog Posting daily will significantly improve your traffic.

TIP! You should add to your blog as often as possible. One way that many new bloggers fail is that they start a new blog and only update it once every two weeks or less.

Include images with your posts. Pictures are attention grabbing and are an easy way to convey your ideas without words. This definitely holds true when it comes to blogging. Pictures often communicate message more easily then just words. Because of this, use images wherever appropriate in your blog.

TIP! When making your blog, buy your domain name as opposed to going with a free site. It is not expensive to do this, and it will assist you in looking more professional.

Post new content frequently on your blog to keep your readers interested and they will have the incentive to come back to your website regularly. The largest and most popular blogs add daily posts. If you are having trouble with this, you may want to have a lot of content already written before your blog goes live. Then you have posts later that can fill in if you run out of ideas.

TIP! Don’t ever make your life all about blogging. You do not want to burn yourself out, so plan on staying away from your blog at some point in the day.

Always reply to comments you receive, and do not take them personally. Regardless of the topic or your thoughts, there is always someone who will see it differently. Use the constructive feedback to improve your position and make your blog more interesting. Post polite responses to any negative comments and put them behind you. This will demonstrate your maturity and cultivate your readership.

Blog Posting

TIP! Make it simple for readers to follow your blog using their favorite social media platforms. Social networking sites like Facebook and Twitter are popular and can be used to make you successful.

Your blog has the opportunity to reach people across the globe. Your opinion may influence more people than you expect. You need to remember this when blog posting, that one person or sentence could change the world. This is the reason why blog posting is enjoyable and people have the chance to voice out their opinions.

Professionel blogger

Designing A Website For Your Personal Use

Make sure your site is clean and efficient for SEO. You won’t see ideal results without it. It all returns to website creation. No one wants to visit or spend time on an unattractive site. Give them that by using these website development tips.

Graphics are important for any designer but beginners should focus only on the standard graphics on their first several builds. Keep in mind that bitmap files are quite large and typically do not work well, but PNGs work okay. You have two choices for your non-photographic images. An image using 256 colors or more works well as a PNG, GIF works for the others. JPEG images can be used for photos.

Users can navigate your site easier when you have fixed-position navigation. Websites that employ this technique have a navigation panel locked in place even when visitors scroll down. This is easy for the visitor and good for marketers.

You must always look at your finished websites in multiple browsers. What you see on your side may not always be what the others see on theirs. Make changes to your site to make it look good on all popular browsers. In addition, ask friends and family to check out the site, too. You never know if another operating system makes a difference.

A great place to build your website design knowledge is through forums. This will help you learn more about starting and maintaining your web design. You can just do a quick google search and find the information that you want to learn right on the web for free.

Make it easy for visitors to back out of a process if they change their minds. These actions involve signing up for newsletters or email notifications, filling out forms, or searching the site for different topics or archives. Visitors with second thoughts are not going to appreciate being locked into an action. They will feel that they are being forced to act against their wishes, and it will be unlikely that they will want to return to your site after such an experience.

Be very careful to remove outdated content from your site. For example, if your webpage is filled with advertising for something that happened months ago, viewers will turn away. The average online user values fresh content and attention to detail. Review, update and delete content as a matter of course.

Despite the type of site you are going to have, you definitely want to keep the loading time under ten seconds. You want your site to load quickly on the browser of whoever is visiting your page. Most Internet users are looking for instant returns, and it would behoove you to make that happen.

Let visitors cancel actions if they want to. For example, put a “clear” button on a form, an unsubscribe link on all newsletters and a “cancel” button on orders. If your visitors feel forced into completing something they no longer want, it may leave a bad taste. They will probably avoid visiting your site in the future.

Keep your topics separated. If you have several topics of discussion on your site, put them on different pages. This makes your website easier to understand for both visitors and search engine crawlers.

So that you can create a visually appealing site, get yourself a web design program. They are easy to understand, and your website will be up and ready before you know it. Having an attractive site is crucial for drawing in traffic.

Research keywords. Though your primary focus is on supplying proper content and information to your customers, you need to build a customer base. Knowing the right keywords will help you bring people that have an interest in the things you have on your site.

Have you considered writing a newsletter? If you have your clients subscribe to updates, they will have a reason to come back again and again. Stick the sign-up form in a spot that’s out of the way, such as in a sidebar, and keep good records of those who sign up. Just send your newsletter to subscribers.

Build a feedback-gathering mechanism into a website to gather visitors’ opinions. This way, you will know what you’re doing right and wrong and you can fix any problems that your visitors are coming across so others don’t have to deal with the same issues. Letting your visitors get involved helps to ensure they will come to your site again.

Research keywords. While your primary focus should be providing website visitors with useful information, you also need to gain a customer base. Knowing what keywords will help to increase traffic is part of website creation success.

To design a more attractive site, include useful meta tags per each page. Quality meta tags will help search engines point interested people in your site’s direction. Meta tags that don’t accurately reflect the content of your website will negatively impact your traffic.

The type of files you use for graphics on your site are related directly to the size of the file. This affects the load time of your site. Your best choice for graphic files are GIFs and JPEGs. Although PNG and MBP files might be the better options for web graphics, they take up way too much disk space. Try converting images files to smaller sizes to make sure everyone that visits your site has a good experience.

Your navigation methods should be clear and easy to maintain. Your navigation links should be easy to see and use to keep visitors on your site. The navigational structure must be neat, consistent, and easy to access for your users to have a better experience.

Be sure you’re testing your site early and it gets tested on an often basis. While you’re designing the website,it is very important you perform the usability tests and website’s user interaction as soon as you can. That will allow you to make necessary design changes during the build process.

A visitor counter on the page is unattractive. Although it may be something that you find valuable, your visitors are not interested in seeing it. Therefore, it is a useless feature to display.

Build websites with fonts that are easy-to-read, professional-looking, and widely available. Fonts say a lot about the professionalism of a site and the business it represents. Fancy fonts, such as those that look like gothic lettering or calligraphy, can often be hard to read. Other fonts, like Comic Sans, send a message that you aren’t professional. If a site visitor has not installed a certain font on his or her computer, it may display as a default font. This can look worse.

Proofreading your content will ensure that it does not looked rushed or amateur. Keeping it simple allows visitors to find what you want them to find as quickly as possible. When you have errors on your site it really looks unprofessional and people won’t take you or your site seriously which can hurt it’s reputation.

Try your best to make your site entertaining by putting graphics on your site. Prevent a bland appearance by wrapping text around your images. People get more into your site if they see that you put a lot of effort into it.

Most people have heard of Photoshop and know that it’s a useful tool in web design. On the other hand, Dreamweaver is lesser known, and many people are unaware of the benefits it has for web designers. It’s important to get to know this application and learn how it can aid your design.

Ensure your site stands out among the rest. It’s easy to see what others are doing by visiting their site. Being similar to other websites won’t set you apart. You’ll be perceived the same way as any other knockoff: an inferior brand that sells inferior products.

If you are just starting out in web design, use a simple template for your layout, then modify it with your own code. Starting simple will allow you to add more advanced techniques as you expand your site, giving you a chance to learn each one by one.

Never stop learning if you want your website design to keep growing. By diving into another area each time you master one, you’ll never stop improving. While this will take time, it will be worth it in the end when you know enough to create site after site.

Consult with a professional and seek help. You can learn a lot from someone who is a master in web design already, because they know the ins and outs of the way web design works already. Gathering as much knowledge as you can will ensure that you can become an expert yourself some day.

Don’t pay for literature if you’re looking to learn how to build a website. It might not be a bad investment. There are some books which offer good content. Much of the information available is free. Costly books don’t contain any information that you cannot find elsewhere for free.

Create a site map for your site. A website map should have two principles that are followed. For starters, visitors are able to better navigate your site with one. It is a one-stop shop for them to find all you have to share with them in one convenient place. It is also great for SEO. This allows search engines to crawl your site more easily.

Link your logo to your home web page. At this point, people expect that a logo is clickable and will return anyone to your main page. If your logo isn’t “clickable”, that frustrates users, because they have to look around the site for the “home” link. Incorporating a clickable logo greatly increases your site’s usability.

Allow yourself a set amount of time every day in which you can focus on designing your site. Dedicate some time since this allows you to complete some work, instead of doing some here and there. As you progress, you’ll find that working for solid chunks of time on your personal sites will also help you remember information that you need to finish your projects.

Your website creation will improve when you seek out feedback. Web designers often work solo, and what they find easy on their eyes might be hard on someone else. Ask some of your website visitors to review your website and report their opinions back to you.

If there is a logo placed on your site, that logo needs to link back to your homepage if someone clicks on it. People now have an expectation that when they click on a company logo, the result is a return to its main home page. If the logo is not click-able, visitors might get frustrated looking for a link to your homepage. Your site’s navigation and ease of use will be much improved by making your logo into a link.

If you want to target people around your area with a website, think about getting a top level domain with a country code. This will get your name out there in your specific region. A ccTLD can be a great way to help visitors from within your region discover your site. They might not find it without one!

Every website should have an effectively designed favicon. Make you site recognizable in your customer’s favorites list with this small graphic. A good favicon should make your site stand out in a list of bookmarks. When designing a favicon, ensure it’s consistent with the logo and theme of your site.

Stay hungry for new and current information in the website development industry to maintain your competitive edge. You know that everything doing within the industry of technology it will change quickly, so be sure you keep up to do your site well. You can read blogs on design to learn what you can do to compete with people in this sort of thing.

Always use descriptive titles for your pages. If you want to partake in a little experiment, search the web for “untitled document.” You’ll see that this is a common mistake! It is very important that you name every one of your websites. When search engines put your pages out there, they use algorithms that tap into the page titles.

No one likes visiting complicated websites that take too long to load and are a tangled mess of links. Avoid novice mistakes by using the tips you read above.

Consider organization and affiliate logos when constructing your site. You might even include the BBB to ensure visitors know your site can be trusted.

Web design and webdesign

Some Great Tips On Web Hosting Services

As more and more of our daily lives take place online, more and more people want to have their own websites. Regardless of why you decide to build your own site, you first need to learn some important factors about the concept of website hosting. The following information can help you learn more about the function and importance of website hosting.

The majority of web hosting providers offer a variety of service packages and features, which may differ significantly from one server to another. When choosing between different web hosting companies, be sure to compare levels of service, including different features that you require. For instance, a host that offers packages that are generally priced lower than other hosts might not necessarily be such a good choice if the key features you need are only available through expensive packages.

Check your hosting site to determine what type of sites they offer. Many free sites will only offer static pages, meaning that you really cannot add in your own language scripts. If you need to be able to do dynamic scripting, you may have to pay a web host for that service.

Look into backup hosting services if you find you are running into a lot of troubles with your current host. If your web host ends up not being what you expected, you can find another host and move quickly.

Most web hosts offer various add-ons in their packages, but the number of features may differ from one host to another. When comparing web page hosting services, you should make certain that you are making comparisons based on the specific features required by your website. For instance, one company’s low hosting price might rise once you add a certain feature, while another company has that feature in one of its packages for a low price.

When you are deciding on who to choose for web hosting, pick a company that resides where your target audience is located. If your target is the UK, make sure the host provider has its data center established in the UK too.

Are you stuck between choosing between a free hosting service and a paid provider? Always remember to back up your work regularly when using free web hosts, as it is rare one does this for you. If one of your files vanishes, there’s nothing to be done. If this happened with all of your site content, it would be impossible to recreate without a backup.

As an online business owner, you should find a hosting service that corresponds to your website. Hosting prices are highly variable, from $2-$60 per month. Interestingly, lower prices often means higher reliability. More expensive monthly service plans may provide more bandwidth, but you may end up with the same amount of server downtime as any cheap host.

If you want to have a safe website, pay more to have what is known as secure server certificate. Visitors to your site will be informed that it is a secure site and will feel more comfortable making a purchase and entering personal information.

When looking at web hosting packages with unlimited services, proceed with caution. For instance, if you’re offered unlimited disk space, the caveat might be that not all file types are included. Furthermore, unlimited bandwidth packages often have data management software on their servers, which can limit your transfer rate. Ensure that your information regarding each plan is complete, and never assume that “unlimited” services come without strings attached.

Consider using a free host to help you save money. Ads will be sprinkled over your website, and you’ll have very little space for storage, let alone bandwidth for visitors. If you don’t want any ads to appear on your site, you should consider paying another site to host your site.

If you are on a budget, consider using web hosting that offers free service. What this means, though, is that you will probably need to allow ads to appear on your website pages, and the storage space offered by the hosting provider will probably be quite limited. If you want a professional site though, avoid free web hosting.

If you are just starting out with your web design efforts, then get a web host which offers good customer support as opposed to anything else. As your experience develops, you’ll find yourself with a lot of questions that a good host can help you answer. You may find that web applications are helpful, but having full customer service with technical support makes a world of difference in ease of use.

Do any of the hosts you’re choosing between offer your money back if you’re not satisfied? If you become dissatisfied with the service within 30 days of signing up, you should have the right to cancel your service and have your money returned to you. Not all web hosts may actually be as good as what they advertise.

Web page hosting is quite complex, but the tips you just read should help you make the best decisions. It’s a matter of taking what you’ve learned and putting it into action. A good web host will result in a more successful site.

A good web host should have a good reputation. Read some articles and reviews for web hosting providers and you’ll start to pick out those that have a reputation for providing great service. In the same manner, those that are less than reliable, and have a bad reputation, will be reviewed badly online too.