Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

How to Overcome Browser Challenges in Web Design

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book
Browsers have different levels of support for CSS features, as well as different interpretations of how to render HTML. By using tools like normalize.css and validating on multiple devices, we can address many of the challenges of web design. However, there’s no substitute for knowing and learning about your audience and working to build them the best site possible, as Christopher Schmitt advises in this chapter from Designing Web and Mobile Graphics: Fundamental concepts for web and interactive projects.
  • “I like the challenge of trying different things and wondering whether it’s going to work or whether I’m going to fall flat on my face.”
  • —Johnny Depp

The Web Environment

Browsers have come a long way to produce a great base experience for visitors, but you might be inadvertently creating a situation where visitors see a different presentation than the one you think you’re giving them.

Revealing Browser Issues

The following screenshots show how one page compares in different browsers: Internet Explorer 9 (Figure 4.1), Safari (Figure 4.2), Chrome (Figure 4.3), Firefox (Figure 4.4), Nexus 7 Chrome (Figure 4.5), Opera (Figure 4.6), and Mobile Safari iOS on an iPad (Figure 4.7).

Figure 4.1

Figure 4.1. A test page in Internet Explorer 9.

Figure 4.2

Figure 4.2. A test page in Safari 6.

Figure 4.3

Figure 4.3. A test page in Chrome.

Figure 4.4

Figure 4.4. A test page in Firefox.

Figure 4.5

Figure 4.5. A test page in Nexus 7 Chrome.

Figure 4.6

Figure 4.6. A test page in Opera.

Figure 4.7

Figure 4.7. A test page in Mobile Safari on an iPad.

TABLE 4.1 showcases which Cascading Style Sheets (CSS) features are supported by various browsers. A “Y” means the browser supports the CSS feature natively. An “N” means the browser does not support it. A “P” means the browser does support the feature, but it needs a custom CSS prefix in order for the feature to display. The custom prefixes will be explained in more detail in Vendor Prefixes later in this chapter.

Table 4.1. CSS Feature Support by Browser

Browser

Columns

Border Image

Gradients

Text Shadows

Internet Explorer 9

N

N

N

Y

Safari 6

P

Y

P

Y

Chrome

P

Y

P

Y

Firefox

P

Y

P

Y

Nexus 7 Chrome

P

P

P

Y

Opera

Y

P

P

Y

Mobile Safari iOS on iPad

P

P

P

Y

Using a Test Page

Now let’s break down the test page to show which features are in it and how they are implemented. The test page covers some basic and advanced CSS functionality:

  • CSS3 multi-column lets you set text in columns. In web design, you don’t see multiple text columns unless the designer manually adjusts the number of words for each column or uses a JavaScript patch.
    div {
     column-count: 4;
    }
  • CSS3 border-image lets you wrap an image around an HTML element. As the HTML stretches as text is added or removed, for example, the image stretches and adapts.
    div {
     column-count: 4;
     border-image: url(border-img.png) 10px;
    }
  • CSS3 gradients sets color transitions in the background of elements.
    div {
     background: linear-gradient(to bottom,
     rgba(30,87,153,1) 0%,
     rgba(41,137,216,1) 50%,
     rgba(32,124,202,1) 51%,
     rgba(125,185,232,1) 100%);
    }
  • CSS3 text-shadows lets you put one or more shadows on text.
    div h1 {
    text-shadow: 0 1px 1px #bbb,
      0 2px 0 #999,
      0 3px 0 #888,
      0 4px 0 #777,
      0 5px 0 #666,
      0 6px 0 #555,
      0 7px 0 #444,
      0 8px 0 #333,
      0 9px 7px #302314;
    }

Color

We perceive the color around us thanks to our eyes, which are electromagnetic spectrum detectors. Colors make up only a small portion of this spectrum, which encompasses x-rays, gamma rays, microwaves, radio waves, all the colors we see, and much more.

A computer screen is made of tiny dots, or pixels, arranged in a grid. These pixels change color depending on what the computer instructs the monitor to display (Figure 4.8).

Figure 4.8

Figure 4.8. Zooming in closely on a raster image shows the blocks of color arranged in a grid like the grid of pixels that makes up the screen.

The screens in our desktop PCs and mobile devices don’t show colors the same way. No universal calibration system for on-screen color currently exists. Color on computer monitors can vary due to the display brand, the video card brand, the screen’s age, the operating system, the amount of ambient light, colors appearing next to each other, and the age and condition of the viewer’s eyes. A further translation happens in printing: some colors that are visible on a screen, where they’re made with light, can’t be printed with any kind of ink or toner (bright, pure blue is the classic example).

No matter how carefully you choose the colors on your screen, they’ll never be absolutely accurate since there is no single standard for displaying them.

Screens and Pixels

Units of measurement are expected to be a constant. The problem with constants is that they change.

Take the humble meter, for example. How we determine the starting and ending point of the meter has altered over human history. In the 17th century, a meter was proposed to be part of the distance of the equator to the North Pole. One ten-millionth of the distance to be exact.

In 1875, a meter was then defined as the length of a platinum-iridium bar created by the International Bureau of Weights and Measures near Paris (see http://museum.nist.gov/object.asp?ObjID=37). Numerous bars of the same length were made and distributed around the world.

Some two hundred years later, the meter transformed again and is no longer tied to a physical object. A meter is now the distance light travels in a vacuum over 1/299,792,458th of a second. What will it be in the future? And don’t ask me what happens to the length of a meter if you happen to be near a black hole, where light can’t escape.

Defining a Pixel

The pixel has similar identity issues. What defines a pixel is a matter of when you ask the question. If you are a web designer working in the 1990s, the pixel would be about 1/96th of an inch and it would be fairly constant across operating systems and monitors. Now when you ask about the size of a pixel, the answer will depend on which kind of pixel you mean.

These days, people aren’t “surfing the World Wide Web” with just the desktop anymore. The web can be accessed on screens that are 3.5 inches diagonal held close to the face, and on 60-inch TVs from across the room. To provide roughly the same experience on this wide range of devices, on-screen elements need to end up looking about the same whether they’re being seen from 10 inches or 10 feet.

Let’s say we set a head’s font size to 24px. If we then look at that head on a retina display and a regular laptop, there should be no difference in size (Figure 4.9).

Figure 4.9

Figure 4.9. The same headline seen in Chrome on an iPhone 5 with a 4-inch, 1136 × 640-pixel screen and in Safari on a MacBook Pro with a 13-inch, 1280 × 800-pixel screen.

The W3C has recommended a standard visual angle pixel size that hardware and software manufacturers can refer to while developing their products. What this means is that web developers can use the CSS pixel as their unit of measurement, and let the browser and OS take care of mapping it to the device pixel, whatever its physical size may be. (There’s just one hitch: so far, a perfect solution for scaling up photographic images hasn’t been found, as we’ll see in Chapter 13, “Images for Responsive Web Design.”) The CSS pixel is an absolute length unit that is anchored to the reference pixel, which is an angular measurement (TABLE 4.2).

Table 4.2. The CSS Pixel and the Reference Pixel

Type

Derived from

Used by

reference pixel

visual angle

physics of light

hardware+OS makers

CSS pixel

fixed+anchored

reference pixel

designers/developers

Accessibility

While monitors continue to improve in terms of color clarity, generating millions of colors as faithfully as possible, there are segments of the population who won’t be able to see them. Seven percent of men cannot distinguish between red and green colors. Can you see the colors in Figure 4.10?

Figure 4.10

Figure 4.10. A “normal” image compared to an image seen as a red-green color blind person sees it.

These deutan color vision deficiencies, along with others, must be taken into consideration when designing with color.

Testing for Color Blindness

To check your design for color blindness issues, there are a couple of online tools.

Color Vision Is Only One Part of Accessibility

Color blindness is just one accessibility issue. Designing for accessibility in general is another of the challenges of web design:

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus