_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 3: Web Design Principles for Print Designers

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  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, 2 nd Edition3  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, 2 nd Edition4  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, 2 nd Edition5  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,,,,,, and and will use some form of a Courier font

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  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, 2 nd Edition7  Wiley and the book authors, 2002 Why specifying type is problematic CSS and the 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, 2 nd Edition8  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, 2 nd Edition9  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 ( ) system. Graphics created on a Windows box, generally look washed out on a Mac

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  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, 2 nd Edition11  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, 2 nd Edition12  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