Designing for the Web

In: Columns > Design in Theory and Practice

By Joshua David McClurg-Genevese

Published on January 9, 2006

In the last two articles, we looked at the basic tenets of the design practice, the principles and elements of design. We stepped back a bit from any one medium to investigate the more universal concepts of design in general, and how these axioms are often derivative of other art forms. We tried to establish a solid foundation of design terms and techniques that were independent of any one implementation.

Now it is time to turn our attention to the Web. Within any given medium there are unique constraints that can affect the way designers make use of the principles and elements of design. These constraints can be based on a variety of different things including materials, technology, processes and standards in the industry. The Web is no different. Designing for a Web-based environment enacts a set of unique issues that need to be considered before implementation can be successful.

In my opinion, the vast majority of constraints in a Web-based environment are brought about because of the limits of human interaction with technology. The Web, by its very nature, is a virtual medium accessible only via peripheral devices (computers, monitors, mice, etc.). We are constrained by what technology allows us to do, and are confined by the rules of these systems. One of the most interesting (and frustrating) aspects of the Web is that it is such a new environment that the rules are constantly changing. Designers need to adapt as necessary. This article is dedicated to some of the wonderful characteristics that make the Web, well, the Web. Specifically, we will be looking at the topics of:

• Resolution
• Designing for browsers
• Web-safe color
• Graphics compression
• Text

Resolution

“Resolution” is used in a variety of ways to mean a variety of different things. For clarification purposes, I thought we would start by establishing some definitions that we can make use of from here on out. First, when talking about resolution we are usually referring to either screen resolution or image resolution.

Screen Resolution

Screen resolution is a bit of a misnomer, in my opinion. Almost all computer screens display at the equivalent of 72-96 ppi (pixels per inch). But what most people are talking about (at least in my experience) when they refer to screen resolution is actually screen size, or the number of pixels that are displayed on the screen at any one time. Screen size accurately reflects the amount of space that users have on their screens, and consequently how much information they can have displayed at one time.

Screen Resolution	2005	2004
Larger	11%	10%
1024 × 768	56%	50%
800 × 600	28%	35%
Smaller/Unknown	5%	5%

According to the most recent statistics I can find, the dominant screen sizes on the Web today are 800 × 600 and 1024 × 768. The below statistics seem to reflect the general trend we are seeing on the Web, though I think the 800 × 600 percentages are a bit low¹.

Either way, these are the two sizes that most people on the Web are using, and are the dimensions that affect designers the most. There are a number of things to consider when choosing a target screen size for a site design. But as we will see a little later, these are not the only numbers that need to be considered when designing for the Web.

Image Resolution

The image resolution is the overall size and integrity of an image, both on-screen and off. It is usually defined in pixel dimensions and spatial resolution, which work together to create the overall resolution of an image.

• Pixel dimensions

  The pixel dimensions of an image are the number of pixels that make up the image. Dimensions can be related in width and height or megapixels. A megapixel is one million pixels and can be understood as (width × height / 1,000,000).

• Spatial resolution

  Spatial resolution is image resolution as defined by a number of pixels per inch. Common spatial resolutions include 72 ppi (screen resolution) to 300 ppi (print resolution).

With some simple math, we can see how pixel dimensions and spatial resolution affect each other. The numbers below represent the approximate correlation between the numbers.

Width × Height	Megapixels	72 ppi	230 ppi	300 ppi
1735 × 1157	2MP	24” × 16”	7.5” × 5”	5.8” × 3.9”
2450 × 1633	4MP	34” × 22.7”	10.6” × 7.1”	8.2” × 5.4”
3000 × 2000	6MP	41.5” × 27.8”	13” × 8.7”	10” × 6.7”

Designing for Browsers

The browser is the interface people use to interact with information on the Web. It provides a framework to display information and navigational tools for interaction at various levels. When we design for the Web, we do so for display within a browser. Because there are many different browsers available, knowing which ones to support is often a difficult choice. There are subtle (and sometimes not-so-subtle) differences in the way a design displays based on how the browser interprets the code written to lay out the design. Adjusting the code, or using standards such as Cascading Style Sheets (CSS) to lay out the design, often fixes many of the discrepancies.

The dominant browser on the Web today is Internet Explorer, with Firefox, Opera, Mozilla and others far behind. In general, it is considered the good practice to test any design with as many different browsers (versions and platforms) as possible. This will give a more accurate picture of how well the design looks and functions, and will help to support the largest variety of users.

Current Browser Trends

Browser	2005 (July)	2004 (December)
IE 6	67.90%	65.50%
IE 5	5.90%	9.90%
Firefox	19.80%	n/a
Opera	1.20%	1.80%
Mozilla	2.60%	17%
Netscape	0.50%	1.60%

Browser Real Estate

As we saw above, a user’s screen size determines how much information can be displayed at one time. However, when designing for the Web we cannot use those “raw” numbers to determine how large a design should be. We have to consider the space taken up by the browser itself, and subtract that from the overall screen size to get a more accurate picture.

So, how much space does a browser take up? It depends on the browser and its default settings. The best way to approximate this is to set a monitor at the appropriate screen size, expand the browser, and take a screen grab. You can then get an idea of how much space is actually available for displaying information. However, because of the differences in the user’s browsing habits, it is difficult to come up with definitive numbers concerning the best size to work at. People may not have their browsers fully expanded, and they may have many or few toolbars open at any time. This technique provides an approximation of the size to be working at for a fixed-width design.

The below numbers show the approximate “real estate” available for the two dominant screen sizes and the current versions of the most popular browsers. These numbers assume a default installation (at least the file menu, standard buttons, address bar, favorites bar, status bar, and scroll bar).

Approximate browser real estate

Screen size	IE 6	Firefox	Opera	Mozilla	Netscape
800 × 600	779 × 400	781 × 434	777 × 427	779 × 420	781 × 389
1024 × 768	1003 × 568	1005 × 602	1001 × 595	1003 × 588	1005 × 557

Percentage-Based Design

Another way to handle the many browser variations is to make the design stretch by basing the overall layout on a percentage of screen real estate. This allows a design to conform to the available space, regardless of browser or screen size. Because of the variable nature of the layout, it is important to plan out where and how certain sections are going to stretch. It’s easy for content to wrap in unexpected ways.

This Web site, www.digital-web.com, demonstrates percentage-based design. Simply change the size of the browser to see how the content stretches to conform to it. Notice how the left and top navigation remain fixed while the content area stretches.

I often get asked what size I design at and whether or not I use fixed-width or percentage-based designs, and why. The best answer I can give is that it depends on the situation. I use both fixed-width and percentage-based designs, and determine which to use based on user research, intended audience and client expectations. If I use a fixed-width design I tend towards an 800 × 600 screen size, usually around a 762 × 400 design size. If I use a percentage-based design I will design in stretch points so that the information looks good at both of the dominant screen sizes.

Web-Safe Color

As we learned in the last article, electronic color is represented by an additive color space. It is a space in which color is defined by differing amounts of light added together. One aspect of additive color that directly constrains the designer is the notion of Web-safe color. Web-safe color, basically, is the set of colors that will render consistently in browsers on the two major computer operating systems (Windows and OS X). A true cross-platform Web-safe color palette is 216 colors.

Web-Safe Color Palette

Web-safe color hearkens back to the early days of the operating system, when video memory was in short supply and the total number of colors that could be rendered at any one time was 256. Of these, only 216 were standardized and the rest were defined by the system palettes of the individual operating systems. Death of the Websafe Color Palette? is an interesting (if slightly dated) article on the origins of the Web-safe palette (and its relevance today).

The basic idea is that various distortions in color can occur—both in the browser itself and within compressed images—when you go outside the Web-safe color palette (Also see the Web-Safe Color Palette Discussion). A good reference for Web-safe color is VisiBone’s Color Lab.

Graphics Compression

The graphics compression is used to optimize images for the Web, to make sure they are of the appropriate colors, size, and format to be rendered by the browser. Compressing graphics for the Web can be complicated, and it is often difficult to know which compression to use when. There are three options:

GIF (Graphics Interchange Format)

The GIF² is best used for bitmap images, line art, or images with large areas of solid colors.

• Color depth from 1-bit (2 colors) to 8-bit (256 colors)
• Supports transparency
• Supports limited animation
• File sizes are typically 20%-90% of the original size

Sample 8-bit GIF file (2.5KB)

JPEG (Joint Photographic Experts Group)

The JPEG³ format is best used with more complex photo-realistic images and color patterns.

• Color depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)
• Allows for quality control set in percentage
• Typically file sizes are 5%-20% of the original size

Sample JPEG file compressed at 50% (12.4KB)

PNG (Portable Network Graphics)

The PNG⁴ format was developed as a successor to the GIF and was intended to replace it. However, its adoption has been slow and all its features are not supported by all browsers.

• Color depth of either 8-bit (256 colors) or 24-bit (16,777,216 colors)
• Support for alpha channels with variable transparency
• Support for cross-platform gamma correction
• Support for interlacing
• Typically compresses images 5% – 25% better than GIF

Sample 8-bit PNG file (2.1KB)

Text

Just as there are Web-safe colors, there are Web-safe fonts. For a specified font to appear correctly in a browser, it must be available on the user’s computer. To help with this, there are predefined families (combinations) of fonts that relate to the system fonts found on all computers. The use of these pre-defined families ensures that information will be displayed in a consistent and predictable fashion. The browser will use the first available font in the specified combination, and will display the browser’s default font if none of the specified fonts are available (usually Times, Times New Roman, or Courier). The following is a list of the most common font combinations.

• Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

Related concepts

Accessibility

Accessibility refers to support for technologies and devices that are used to improve the experience of those with impairments (physical, visual, auditory) or other difficulties in accessing information on the Web. It supports the general belief that information online should be available to everyone. It is a topic of great importance and one that needs to be considered in every design project.

The W3C has a program called the Web Accessibility Initiative (WAI) that sets the international standards for Web accessibility. The WAI has set priorities and checkpoints to ensure that a site meets the necessary standards, including:

• Providing text equivalents for non-text elements in the form of an alt or longdesc tag
• Ensuring that information conveyed with color can also be read without color, or is available without color
• Clearly identifying row and column headers within a table structure for easier navigation

Usability

Usability is the study of the effectiveness of a particular Web site in satisfying the goals of users and ensuring that the site works well and facilitates interactions desired by the intended audience. It is a cross-disciplinary area of research that includes the fields of human-computer interaction, human factors, engineering, design and many others. In recent years, usability has become a benchmark concept, relating directly to the overall success of many sites. It is a topic that is far too complex to cover in one sitting, but there are many resources available online for those wishing to pursue the subject in more detail.

• Wide Open column: Digital Web Magazine
• Jakob Nielsen: Useit.com
• Human Factors International
• Association for Computing Machinery
• Adaptive Path

Audience

As Web designers, everything we do is for the user. From aesthetic and interaction design to architecture development to quality assurance, we want to provide the intended audience with a means to be more informed, efficient and effective. At the same time, knowing who your intended audience is can have many (and sometimes drastic) implications on design. A few last things to think about:

• Perform user research. Find out who the intended audience really is—do not just assume you know. This can take the form of surveys, interviews, focus groups, field studies, usability testing, etc. The important thing is to do it, and not let it get so complicated that you hesitate.
• Use an iterative design approach. Test early in the design phase (I often test with nothing more than hand-drawn sketches on paper), and test often with users of the intended audience.
• Harmonize interactions. Be sure the intentions of the users match the options available to them while interacting with the site. Interaction design and visual design go hand-in-hand, and both can provide insight into how successful the site is in meeting the user’s expectations.
• Modify as necessary. Everything discussed above should be understood as a general approach to some of the concepts unique to the Web, and contextual situations may change how you make use of them.

Conclusion

In this article, we looked at some of the constraints unique to the medium of the Web. These constraints affect how we are able to make use of more fundamental concepts, such as the principles and elements of design, but also guide us in ensuring a more successful user experience.

In the next article, we are going to tie it all together, reviewing the concepts of the previous articles and seeing how these many ideas are put into practice on the Web. We will use Web sites submitted by the readers of this column to offer some real-world examples of everything covered this far.

References

¹ W3 Schools
Back to content

² Wikipedia, GIF
Back to content

³ The Joint Photographic Experts Group
Back to content

⁴ Portable Network Graphics
Back to content

Related Topics: Basics, Graphic Design, Web Design, Browsers, Liquid Web Design