_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 2 : Designing for a variety of displays

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  Wiley and the book authors, 2002 Overview Brief Synopsis:  The problem  Dealing with unknown monitor resolutions  Standard monitor sizes and resolutions  Typical resolutions table  “Live” space in the browser window  Fixed versus flexible web page design  Designing “Above the Fold”  Monitor color issues

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 The Problem One of the most vexing aspects of web design is knowing that your page is at the mercy of the software and hardware configuration of each individual user A page that looks great on your machine may look radically different, or perhaps even ghastly, when viewed on another user’s setup This is partly due to the browser’s functionality and the individual user’s preferences (font size, colors, display resolution, etc.) It is important to keep in mind that the diversity does not end there  Some users may be watching your web page on TV  Others may be viewing it in the palm of their hand on a PDA or cell phone  Others may print out your pages which yields even more variations

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 Dealing with unknown monitor resolutions Browser windows can be resized to any dimension, limited only by the maximum size of the monitor One of the most widely discussed topics on web design forums is what monitor resolution to design for  There is no single answer to this question  It is largely a decision based upon your target market and the purpose of your site

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 Standard monitor sizes and resolutions Computer monitors come in a variety of standard sizes, typically measured in inches (e.g. 15”, 17”, 19”, 20”, and 21”, etc.) More meaningful, however, is the monitor resolution (the total number of pixels available on the screen. When you know the available number of pixels, you can design your graphics and other page elements accordingly Resolution is related to, but not necessarily determined by the monitor size The higher the resolution on a given monitor, the more pixels are packed into the available screen space. The result is smaller pixels, which will make your graphics and text appear smaller. For this reason, web measurements are generally made in pixels, not inches. Something appearing an inch wide on your screen may look much larger or smaller on other screens

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 Typical resolutions WindowsMacintosh 640 x 480 (6%)512 x x 600 (51%)640 x x 768 (35%)800 x x 1024 (3%)832 x x 1200 (< 1%)1024 x x x x x 1200

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 “Live” space in the browser window Knowing the resolution is just the beginning. The operating system (e.g. the task bar) and browser itself use much of this space On a computer with a 640 x 480 resolution can typically display usable space of 620 x 303 for IE and 618 x 301 for Netscape At 800 x 600, IE makes 780 x 423 available and Netscape gets 778 x 421 These are just theoretical extremes, browser options may take even more of this space away and if the window is not maximized, you may have far less space available to display your website

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition8  Wiley and the book authors, 2002 Fixed versus flexible web page design Related to the discussion of available screen real estate is whether or not you should design your pages to have a static layout or a flexible one which flows into the available spacestatic layout flexible one Some designs may require a more fixed layout, but most should be able to be made flexible  Creating flexible websites is generally more difficult for those who have a background designing for print medium in which the layout is always fixed

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition9  Wiley and the book authors, 2002 Flexible design Web pages are flexible by default. The text and elements in a straightforward HTML file flow into the browser window, filling all available space, regardless of window size Disadvantages to a flexible design include:  On large monitors, the text line length can get out of hand when the text fills the width of the browser making it difficult to read  Elements float around on large monitors, making the design less coherent and potentially more difficult to use  Flexible designs can be unpredictable Effective flexible designs will make use of tables and style and graphic elements using relative (percentage) measurements. You could create a table with blank columns on the left and right side of the page that take up 10% each of the available space making the pages easier to read since the text does not flow all the way to the borders.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  Wiley and the book authors, 2002 Fixed design If you want more control over the layout of a page, you may opt to design a web page with a fixed width that stays the same for all users Advantages to this type of design include:  Basic layout of the page remains the same regardless of resolution  This gives you better control over line lengths  Web pages can be made to be similar to print layouts in other docs Disadvantages:  If the browser window is smaller than the size you designed your page for, the entire page will not be visible (especially important for page width)  Type size cannot be accurately controlled across browsers  Large amounts of “white space” may be displayed if the resolution is much larger than what the page was designed for  It’s difficult to get exact placements of elements on a page

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition11  Wiley and the book authors, 2002 Designing “Above the Fold” Newspaper editors have always designed the front page with the most important elements “above the fold” Likewise, the first screenful of a web site’s homepage is the most important real estate of the whole site and should include  The name of the site/company  Primary message  Purpose of the site  Navigation to other parts of the site  Any other crucial information  Banner ads Never design a site where the user has to scroll right-to-left for your target’s resolution. Many users will scroll up and down if they’re interested in the site. Few will scroll right-to-left.

_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition12  Wiley and the book authors, 2002 Monitor color issues Monitors also differ in the number of colors they are able to display. Typical monitors will display 24-bit color depth (17 million colors, 16-bit color (65000 colors), or 8-bit (256 colors) Macintoshes also have a different color palette than Windows computers. Even different Windows computers may display colors differently depending on the monitor There is a set of 216 “web-safe” colors which will display correctly on Windows and Macintosh computers. Your graphics program may allow you to set the colors of your graphics to just this limited list of colors