How to Overcome Browser Challenges in Web Design
This chapter is from the book
This chapter is from the book
This chapter is from the book
)
- “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. A test page in Internet Explorer 9.
)
Figure 4.2. A test page in Safari 6.
)
Figure 4.3. A test page in Chrome.
)
Figure 4.4. A test page in Firefox.
)
Figure 4.5. A test page in Nexus 7 Chrome.
)
Figure 4.6. A test page in Opera.
)
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. 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. 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. 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.
- Vischeck (http://vischeck.com/) provides examples of color blindness and converts existing websites to showcase how they appear to people with different types of color blindness (Figure 4.11).
Figure 4.11. The Vischeck page.
- Contrast Analyser (http://www.paciellogroup.com/resources/contrastAnalyser) uses the W3C’s contrast ratio algorithm to determine whether colors have enough visibility or contrast and shows how colors look to people with different types of color blindness (Figure 4.12).
Figure 4.12. The Contrast Analyser.
)
)
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:
- People with mobility issues, such as those with carpal tunnel syndrome, may prefer to navigate via keyboard (http://webaim.org/techniques/keyboard/).
- People with reduced dexterity appreciate clickable areas that aren’t too tiny, and forms that don’t time out before they can finish filling them in (http://otal.umd.edu/UUPractice/mobility/).
- People with hearing impairments rely on captions or transcripts (http://webaim.org/articles/auditory/).
- People who are susceptible to photosensitive epileptic seizures want to avoid blinking elements (http://www.w3.org/TR/understanding-WCAG20/seizure-does-not-violate.html).
- People with learning disabilities that affect reading, such as dyslexia, can be helped by good typography, user-selectable type and background colors, and having content available in audio format (http://www.bdadyslexia.org.uk/about-dyslexia/further-information/dyslexia-style-guide.html); audio content also helps people with low vision.
- People with cognitive disabilities affecting memory and attention do better with simple navigation and no distracting animation (http://www.ncdae.org/resources/articles/cognitive/).
- Best practices include the use of alt attributes, unambiguous copy, title attributes for links, proper HTML structure, and graceful degradation (http://webaim.org/techniques/alttext/).