Transcript Chapter 3: Web Design Principles for Print Designers

Web Design in a Nutshell
Chapter 3: Web Design Principles
for Print Designers
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
1
 Wiley and the book authors, 2002
Overview

Brief Synopsis:









The web is not like print
Typography on the web
Text in graphics
Why specifying type is problematic
Embedded fonts
Color on the web
Color in browsers
Shifting and dithering
The web palette in numbers
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
2
 Wiley and the book authors, 2002
The Problem

If you are accustomed to designing for print, the Web
introduces a number of new concepts and new ways of
doing things.



Part of what makes web design unique is that the pages are
displayed on a computer monitor, not paper, requiring
familiarity with new color models.
In addition, you need to work within the unique environment of
the web browser.
HTML brings its own limitations to the mix
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
3
 Wiley and the book authors, 2002
The web is not like print


The single most difficult challenge in making the transition from print
medium to web design is that on the Web, you cannot control absolutely
the way your page looks to the end user
Designing for the unknown: a number of factors will directly impact the
design and functionality of a web page








Unknown browsers
Unknown platform
Unknown user preferences
Unknown window size
Unknown connection speed
Unknown colors
Unknown fonts
The best advice for conquering the unknown is to let go of some of the
control you are accustomed to having over the page. Elements shift
around, text resizes, and pages look different to different people
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
4
 Wiley and the book authors, 2002
Typography on the Web


HTML was created with the intent of putting ultimate control
of the presentation in the hands of the end user. The most
resounding impact of this decision is apparent when it comes
to typography
About the only thing you can be sure of is that you have 2
fonts to work with: a proportional (variable-width) font and a
fixed-width font. Graphical browsers usually display
proportional fonts by default



Netscape uses Times (or Times New Roman) by default
Internet Explorer uses Helvetica by default
Fixed-width fonts are used for rendering the following HTML tags,
<pre>, <tt>, <code>, <kbd>, <samp>, and <xmp> and will use some
form of a Courier font
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
5
 Wiley and the book authors, 2002
Text in graphics


Designers quickly learned that the sure-fire way to have
absolute control over font display is to set the text in a graphic.
It’s common to see headlines, and titles, etc. rendered as GIF
files.
Advantages:



You can specify the text font, size, letter spacing, color, and alignment
Everyone with a graphical browser will see your page basically the same
way
Disadvantages:



Graphics take longer to download. Text may not be viewable until the
graphics have been completely downloaded.
Content is lost on non-graphical browsers (alternative text in place of
graphics helps).
Information in graphics cannot be indexed, searched, or copied and
pasted (the alt attribute helps here as well).
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
6
 Wiley and the book authors, 2002
Why specifying type is problematic

CSS and the <font> tag give web designers some control over
which fonts are attempted to display in your web pages, but the
fonts selected must be present on the client’s computer to be
effective.




Backup fonts or font families can be used to somewhat overcome this
problem
Specifying fonts and sizes is still more like “recommending” the font you
want to display
Type size is traditionally specified in points (approx. 72 points
per inch). Points sizes do not translate wall between platforms
and resolutions.
Microsoft has introduced “web fonts” which are generally going
to be available on computers with IE 5+ installed:

Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times
New Roman, Trebuchet MS, Verdana, & Wingdings
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
7
 Wiley and the book authors, 2002
Embedded fonts


MS & Netscape introduced incompatible ways of
embedding fonts within web pages that would be
downloaded when the page was read. However, these
methods were not commonly used and Netscape has
since stopped supporting this feature
Additional copyright problems also make distributing
fonts in this manner illegal as fonts are generally
copyrighted material
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
8
 Wiley and the book authors, 2002
Color on the web

The Web requires designers to think about color in new ways


Color on computer monitors: Since monitors use light for displaying
colors, traditional systems for specifying color for print (CMYK,
Pantone, etc.) do not apply. Monitors also differ in the number of colors
they can display
Monitors display colors by combining red, green, and blue light (RGB).


RGB is a 24-bit system, with 8 bits of data devoted to each of the 3 color
channels.
Gamma (a numerical adjustment for the nonlinear relationship of voltage
to light intensity) refers to the overall brightness of a computer monitor’s
display.

Images and pages created on a Mac (1.8) generally look a lot darker when
viewed on a Windows (2.2) or Unix (2.3-2.5) system. Graphics created on a
Windows box, generally look washed out on a Mac
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
9
 Wiley and the book authors, 2002
Color in browsers (the Web palette)



An interesting problem arises when colors from the full 24-bit
color space need to be displayed on an 8-bit display.
Rather than relying on the computer’s system palette, browsers
reduce and remap colors to their own built-in palette.
This benefits web designers because it guarantees that images
will look more or less the same on all 8-bit (256 color) systems.


If the browser is running on a 24-bit or higher display, the palette does
not come into effect and all colors will be displayed accurately (more or
less).
The web palette consists of the 216 colors shared by the Mac
and Windows system palettes. Web-safe colors may shift or
dither when viewed on Unix systems
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
10
 Wiley and the book authors, 2002
Shifting and dithering

When a browser running on an 8-bit monitor encounters a color,
it does its best to approximate it using colors from the web
palette.



Sometimes colors are simply replaced by, or shift to, the nearest available
web palette color. Color shifting can result in large discrepancies
between how a color is rendered on 24-bit vs. 8-bit displays
Browsers may also approximate a color by dithering (mixing pixels of
similar colors available in the palette, resulting in a random dot pattern).
This is common in images, although IE may dither background colors as
well.
Shifting and dithering also take place when viewing 24-bit
graphics on 16-bit displays as well. This can be very
pronounced when you have a graphic whose background color
is numerically identical to the background color on the web
page. You will typically see an edge around the graphic in this
situation which would not exist on a 24-bit display.
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
11
 Wiley and the book authors, 2002
The web palette in numbers


The web palette recognizes six shades of red, six
shades of green, and six shades of blue resulting in
6x6x6=216 colors.
There are 3 systems used for defining RGB values




Hexadecimal: “#RRGGBB”
Decimal: “rgb(rrr,ggg,bbb)”
Percentage: “rgb(rr%,gg%,bb%)”
You can also use one of 147 named colors from the
Scalable Vector Graphics (SVG) specification
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
12
 Wiley and the book authors, 2002