graphics screen resolution photography

Photographer

GRAPHICS SCREEN RESOLUTION PHOTOGRAPHY Screen resolution

Screen resolution refers to the number of pixels a screen can display within a given area. Screen resolution is usually expressed in pixels per linear inch of screen. Most personal computer displays have resolutions that vary from 72 to 96 pixels per inch . The resolution of the display screen is dependent on how the monitor and display card are configured, but it's safe to assume that most users fall into the lower end of the range, or about 72 to 80 ppi.

Images destined for print can be created at various resolutions, but images for Web pages are always limited by the resolution of the computer screen. Thus a square GIF graphic of 72 by 72 pixels will be approximately one inch square on a 72-ppi display monitor. When you are creating graphics for Web pages you should always use the 1:1 display ratio , because this is how big the image will display on the Web page. Images that are too large should be reduced in size with a sophisticated image editor like Adobe's Photoshop to display at proper size at a resolution of 72 ppi.

source GRAPHICS SCREEN RESOLUTION PHOTOGRAPHY http://webstyleguide.com

page design page length photography

Photographer

PAGE DESIGN PAGE LENGTH PHOTOGRAPHY Page length

Determining the proper length for any Web page requires balancing four factors:

The relation between page and screen size
The content of your documents
Whether the reader is expected to browse the content online or to print or download the documents for later reading
The bandwidth available to your audience

Researchers have noted the disorientation that results from scrolling on computer screens. The reader's loss of context is particularly troublesome when such basic navigational elements as document titles, site identifiers, and links to other site pages disappear off-screen while scrolling. This disorientation effect argues for the creation of navigational Web pages that contain no more than one or two screens' worth of information and that feature local navigational links at the beginning and end of the page layout. Long Web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible:

Scrolling
In long Web pages the user must depend on the vertical scroll bar slider to navigate. In some graphic interfaces the scroll bar slider is fixed in size and provides little indication of the document length relative to what's visible on the screen, so the reader gets no visual cue to page length. In very long Web pages small movements of the scroll bar can completely change the visual contents of the screen, leaving the reader no familiar landmarks to orient by. This gives the user no choice but to crawl downward with the scroll bar arrows or risk missing sections of the page.

Long Web pages do have their advantages, however. They are often easier for creators to organize and for users to download. Web site managers don't have to maintain as many links and pages with longer documents, and users don't need to download multiple files to collect information on a topic. Long pages are particularly useful for providing information that you don't expect users to read online . You can make long pages friendlier by positioning "jump to top buttons" at regular intervals down the page. That way the user will never have to scroll far to find a navigation button that quickly brings him or her back to the top of the page.

info.med.yale.edu

All Web pages longer than two vertical screens should have a jump button at the foot of the page:

www.ynhh.org

If a Web page is too long, however, or contains too many large graphics, the page can take too long for users with slow connections to download. Very large Web pages with many graphics may also overwhelm the RAM limitations of the user's Web browser, causing the browser to crash or causing the page to display and print improperly.

Content and page length
It makes sense to keep closely related information within the confines of a single Web page, particularly when you expect the user to print or save the text. Keeping the content in one place makes printing or saving easier. But more than four screens' worth of information forces the user to scroll so much that the utility of the online version of the page begins to deteriorate. Long pages often fail to take advantage of the linkages available in the Web medium.

If you wish to provide both a good online interface for a long document and easy printing or saving of its content:

Divide the document into chunks of no more than one to two printed pages' worth of information, including inlined graphics or figures. Use the power of hypertext links to take advantage of the Web medium.
Provide a link to a separate file that contains the full-length text combined as one page designed so the reader can print or save all the related information in one step. Don't forget to include the URL of the online version within the text of that page so users can find updates and correctly cite the source.

In general, you should favor shorter Web pages for:

Home pages and menu or navigation pages elsewhere in your site
Documents to be browsed and read online
Pages with very large graphics

In general, longer documents are:

Easier to maintain
More like the structure of their paper counterparts
Easier for users to download and print

source PAGE DESIGN PAGE LENGTH PHOTOGRAPHY http://webstyleguide.com

site design contact information and user feedback photography

Photographer

SITE DESIGN CONTACT INFORMATION AND USER FEEDBACK PHOTOGRAPHY Contact information and user feedback

The Web is a bidirectional medium — people expect to be able to send you comments, questions, and suggestions. Always provide at least one link to an email address in a prominent location in your site. You can request user information and feedback using Web page forms and then use a database to store and analyze their input.

The logistical and support staff implications of creating a popular Web site are often overlooked until a crisis develops. Rolling out a new, heavily trafficked Web site is like suddenly adding a second front door to your enterprise. Who will greet the people who come flooding in? Who will answer their questions about your organization and its products and services? Who will collect and analyze the information you receive from your readers? Before you add this functionality to your Web pages, be sure you have an infrastructure in place to handle the fruits of your success.

Street addresses, phone numbers, fax numbers
It is amazing how often site developers forget that not all communication with the organization goes through the Web site. Even if you have a great Web site, people will still want to call you, send you mail and express packages, and fax you documents. Your home page should include the same contact information you provide on your stationery, marketing materials, and business cards. If your home page design doesn't allow adequate space for this information, at least provide a link to another page with contact information.

Maps, travel directions, parking information
Your Web site is an ideal place to make travel information available to clients, visitors, vendors — anyone who needs to find your organization. Graphic maps, text-based directions, local hotel information, and even internal floor plans can ensure that your visitors will be able to reach you easily and efficiently.

www.montereybayaquarium.org

source SITE DESIGN CONTACT INFORMATION AND USER FEEDBACK PHOTOGRAPHY http://webstyleguide.com

graphics png graphics photography

Photographer

GRAPHICS PNG GRAPHICS PHOTOGRAPHY PNG graphics

Portable Network Graphic is an image format developed by a consortium of graphic software developers as a nonproprietary alternative to the GIF image format. As mentioned earlier, CompuServe developed the GIF format, and GIF uses the proprietary LZW compression scheme owned by Unisys Corporation. Any graphics tool developer who makes software that saves in GIF format must pay a royalty to Unisys and CompuServe.

PNG graphics were designed specifically for use on Web pages, and they offer a range of attractive features that should eventually make PNG the most common graphic format. These features include a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image's content, which allows Internet search engines to search for images based on these embedded text descriptions. Unfortunately, the PNG graphic format is not yet widely supported, and the current implementation of PNG graphics in the major Web browsers does not fully support all of PNG's features. This should change over the next few years, but do not make a commitment to PNG graphics until you are sure that most of your audience is using browsers that support PNG.

source GRAPHICS PNG GRAPHICS PHOTOGRAPHY http://webstyleguide.com

multimedia animation photography

Photographer

MULTIMEDIA ANIMATION PHOTOGRAPHY Animation

Most Web animation requires special plug-ins for viewing. The exception is the animated GIF format, which is by far the most prevalent animation format on the Web, followed closely by Macromedia's Flash format. The animation option of the GIF format combines individual GIF images into a single file to create animation. You can set the animation to loop on the page or to play once, and you can designate the duration for each frame in the animation.

www.jonesandjones.com

Animated GIFs have several drawbacks. One concerns the user interface. GIF animations do not provide interface controls, so users have no easy way to stop a looping animation short of closing the browser window. They also lack the means to replay nonlooping animation. Second, the animated GIF format does not perform interframe compression, which means that if you create a ten-frame animation and each frame is a 20 KB GIF , you'll be putting a 200 KB file on your page. And the final drawback is a concern that pertains to animations in general. Most animation is nothing more than a distraction. If you place animation alongside primary content you will simply disrupt your readers' concentration and keep them from the objective of your site. If you require users to sit through your spiffy Flash intro every time they visit your site, you are effectively turning them away at the door.

There is a place for animation on the Web, however. Simple animation on a Web site's main home page can provide just the right amount of visual interest to invite users to explore your materials. There, the essential content is typically a menu of links, so the threat of distraction is less than it would be on an internal content page. Also, subtle animation such as a rollover can help guide the user to interface elements that they might otherwise overlook. Animation can also be useful in illustrating concepts or procedures, such as change over time. When you have animation that relates to the content of your site, one way to minimize the potential distraction is to present the animation in a secondary window. This technique offers a measure of viewer control: readers can open the window to view the animation and then close the window when they're through.

source MULTIMEDIA ANIMATION PHOTOGRAPHY http://webstyleguide.com

typography cascading style sheets photography

Photographer

TYPOGRAPHY CASCADING STYLE SHEETS PHOTOGRAPHY Cascading style sheets

This division between structural logic and visual logic is on its way to being reconciled through the use of Cascading Style Sheets . Style sheets provide control over the exact visual style of headers, paragraphs, lists, and other page elements. For example, if you prefer H3 headers to be set in 12-point Arial bold type, you can specify those details in a style sheet. In this way you can retain the logical use of HTML's structural tags without sacrificing graphic design flexibility.

At this writing, however, the major Web browsers offer inconsistent and incomplete CSS support. Although both Microsoft Internet Explorer version 3.0 and higher and Netscape Navigator version 4.0 and higher support CSS, their exact implementations of it differ. A most frustrating example of this is the margin property. Standard HTML headings float far above the paragraphs they describe. With style sheets authors can designate more suitable margins in a heading style declaration. Yet the Netscape browser adds the designated amount to the standard margin, whereas Explorer simply adds the margin defined in the style sheet. The upshot is that until the browsers offer a more consistent implementation of CSS, only a handful of properties can be used reliably.

www.dartmouth.edu/~engl02

So what do you do when you know the advantages of preserving the document structure but you want to design Web pages that are attractive and functional enough to capture and sustain an audience? You compromise. In the sites we create we use a grab bag of tricks to present as polished and sophisticated a page design as we can manage within the boundaries of "official" HTML. We use no proprietary HTML tags, such as those specific to Internet Explorer or Netscape Navigator. Our approach to typography emphasizes visual design over structural purity. Wherever possible, we use "plain vanilla" HTML to describe document structure and CSS to define visual layout. We do not strive for complete control and consistency for our pages but instead accept a certain degree of variability between platforms and browsers. Where CSS falls short, however, we dip into our grab bag of tricks rather than sacrifice visual integrity. We believe that this is the best compromise until everyone can shift over to a mature implementation of CSS and leave plain HTML behind.

Advantages of CSS
This book is not a manual on HTML, and covering the full design implications of Cascading Style Sheets is well beyond the scope of this chapter. If you are not using CSS to manage the graphic design of your Web site, however, you should at least be planning a transition to CSS technology within the next year.

Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites:

Separation of content and design. CSS gives site developers the best of both worlds: content markup that reflects the logical structure of the information and the freedom to specify exactly how each HTML tag will look.
Efficient control over large document sets. The most powerful implementations of CSS will allow site designers to control the graphic "look and feel" of thousands of pages by modifying a single master style sheet document.

Style sheets provide greater typographic control with less code. Using plain HTML, you need to define the physical properties of an element such as the <H1> tag each time you use it.

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

When you define these properties using CSS, that single definition, or rule, applies to every instance of the <H1> element in all documents that reference the style sheet.

H1

In addition, style sheets offer more formatting options than plain HTML tags and extensions. For example, interline spacing, or leading, can be controlled using style sheets, as can such text properties as letterspacing and background color. And fortunately the text formatting properties are implemented well enough across browsers to be used with some consistency.

How style sheets work
Style sheets are not new. Every graphic Web browser has incorporated style sheets. It just wasn't possible to modify the fixed styles that browsers used to determine, for example, exactly how H1 headers look on the screen. The fundamental idea behind CSS is to let site authors and users determine the size, style, and layout details for each standard HTML tag.

If you have ever used the "styles" features of a page layout or word processing program, you will understand the basic idea behind CSS. The styles feature of a word processor is used to determine exactly how your titles, subheadings, and body copy will look, and then the copy is formatted when you apply a style to each element. Once all the copy has been styled, you can change the look of each occurrence of every element simply by changing the style information. CSS works in the same way, except that with CSS you can set up one master style sheet that will control the visual styling of every page in your site that is linked to the master style sheet:

info.med.yale.edu/caim/hhmi

source TYPOGRAPHY CASCADING STYLE SHEETS PHOTOGRAPHY http://webstyleguide.com

interface design user-centered design photography

Photographer

INTERFACE DESIGN USER-CENTERED DESIGN PHOTOGRAPHY User-centered design

Graphic user interfaces were designed to give people control over their personal computers. Users now expect a level of design sophistication from all graphic interfaces, including Web pages. The goal is to provide for the needs of all your potential users, adapting Web technology to their expectations and never requiring readers to conform to an interface that places unnecessary obstacles in their paths.

This is where your research on the needs and demographics of the target audience is crucial. It's impossible to design for an unknown person whose needs you don't understand. Create sample scenarios with different types of users seeking information from your site. Would an experienced user seeking a specific piece of information be helped or hindered by your home page design? Would a casual reader be intimidated by a complex menu scheme? Testing your designs and getting feedback from a variety of users is the best way to see whether your design ideas are giving them what they want from your site.

Clear navigation aids
Most user interactions with Web pages involve navigating hypertext links between documents. The main interface problem in Web sites is the lack of a sense of where you are within the local organization of information:

Clear, consistent icons, graphic identity schemes, and graphic or text-based overview and summary screens can give the user confidence that they can find what they are looking for without wasting time.

Users should always be able to return easily to your home page and to other major navigation points in the site. These basic links should be present and in consistent locations on every page. Graphic buttons will provide basic navigation links and create a graphic identity that tells users they are within the site domain. In this site, for example, the graphic header appears on every page:

www.fastcompany.com

The button bar is efficient and predictable , and it provides a consistent graphic identity throughout the site.

No dead-end pages
Web pages often appear with no preamble: readers can make or follow links directly to subsection pages buried deep in the hierarchy of Web sites. They may never see your home page or other introductory site information. If your subsection pages do not contain links to the home page or to local menu pages, the reader will be locked out from the rest of the Web site:

Make sure all pages in your site have at minimum a link back to the main "home" page or, better yet, a home page link along with links to the other sections of the site.

Direct access
Users want to get information in the fewest possible steps. This means that you must design an efficient hierarchy of information to minimize steps through menu pages. Studies have shown that users prefer menus that present at least five to seven links and that they prefer a few very dense screens of choices to many layers of simplified menus. The following table demonstrates that you do not need many levels of menus to incorporate lots of choices:

Number of menu items listed

Number of nested menus
5
7
8
10

1
5
7
8
10

2
25
49
64
100

3
125
343
512
1000

Design your site hierarchy so that real content is only a click or two away from the main menu pages of your site.

Bandwidth and interaction
Users will not tolerate long delays. Research has shown that for most computing tasks the threshold of frustration is about ten seconds. Web page designs that are not well "tuned" to the network access speed of typical users will only frustrate them. If your users are primarily general public browsers "surfing" the Web via dial-up modem connections, it is foolish to put huge bitmap graphics on your pages — the average modem user will not be patient enough to wait while your graphics download over the phone line. If, however, you are building a university or corporate intranet site where most users will access the Web server at Ethernet speeds or better, you can be much more ambitious in the use of graphics and multimedia. Many home computer users can now use high-speed DSL or cable modems to access the Web. However, industry observers expect that it will be at least another five years before Web designers can count on most home users having access to high-speed Web connections. In general, be conservative with Web graphics. Even users with high-speed connections appreciate a fast-loading page.

Simplicity and consistency
Users are not impressed with complexity that seems gratuitous, especially those users who may be depending on the site for timely and accurate work-related information. Your interface metaphors should be simple, familiar, and logical — if you need a metaphor for information design, choose a genre familiar to readers of documents, such as a book or a library. Highly unusual, "creative" navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable interface burden on the user.

www.amazon.com

The user interface for your Web site should follow the general navigation and layout conventions of major Web sites because your users will already be used to those conventions. Users spend most of their time on sites other than yours, so avoid highly unusual interfaces if you wish to attract and keep a large audience.

The best information designs are never noticed. An excellent model of interface design is the Adobe Corporation Web site. Graphic headers act as navigation aids and are consistently applied across every page in the site. Once you know where the standard links are on the page header graphics, the interface becomes almost invisible and navigation is easy:

www.adobe.com

For maximum functionality and legibility, your page and site design should be built on a consistent pattern of modular units that all share the same basic layout grids, graphic themes, editorial conventions, and hierarchies of organization. The goal is to be consistent and predictable; your users should feel comfortable exploring your site and confident that they can find what they need. The graphic identity of a series of pages in a Web site provides visual cues to the continuity of information. The header menu graphics present on every page of the Adobe site create a consistent user interface and corporate identity:

www.adobe.com/type

Even if your site design does not employ navigation graphics, a consistent approach to the layout of titles, subtitles, page footers, and navigation links to your home page or related pages will reinforce the reader's sense of context within the site. To preserve the effect of a "seamless" system of pages you may wish to bring important information into your site and adapt it to your page layout scheme rather than using links to send the reader away from your site .

Design integrity and stability
To convince your users that what you have to offer is accurate and reliable, you will need to design your Web site as carefully as you would any other type of corporate communication, using the same high editorial and design standards. A site that looks sloppily built, with poor visual design and low editorial standards, will not inspire confidence.

Functional stability in any Web design means keeping the interactive elements of the site working reliably. Functional stability has two components: getting things right the first time as you design the site, and then keeping things functioning smoothly over time. Good Web sites are inherently interactive, with lots of links to local pages within the site as well as links to other sites on the Web. As you create your design you will need to check frequently that all of your links work properly. Information changes quickly on the Web, both in your site and in everyone else's. After the site is established you will need to check that your links are still working properly and that the content they supply remains relevant.

Feedback and dialog
Your Web design should offer constant visual and functional confirmation of the user's whereabouts and options, via graphic design, navigation buttons, or uniformly placed hypertext links. Feedback also means being prepared to respond to your users' inquiries and comments. Well-designed Web sites provide direct links to the Web site editor or Webmaster responsible for running the site. Planning for this ongoing relationship with users of your site is vital to the long-term success of the enterprise.

source INTERFACE DESIGN USER-CENTERED DESIGN PHOTOGRAPHY http://webstyleguide.com

site design site guides photography

Photographer

SITE DESIGN SITE GUIDES PHOTOGRAPHY Site guides

Unlike print media, where the physical heft and dimensions of a book or magazine give instant cues to the amount of information to expect, Web sites often give few explicit indications of the depth and extent of the content available. This is especially true when the home page does not provide an extensive listing of internal site links. Although search facilities offer users quick access to your content, they are no substitute for a clear, well-organized exposition of your site's contents. Even the best search engines are relatively stupid and have only the most primitive means of assessing the priority, relevance, and interrelations of the information resources you offer in your Web site.

Tables of contents or site indexes
Tables of contents and keyword indexes of the information in your Web site are an easy way to give readers a clear sense of the extent, organization, and context of your site content. Tables of contents and indexes are familiar print conventions; readers understand them and will appreciate the overviews, perspectives, and efficient navigation they afford. The main difference between Web-based indexes and their print counterparts is that a Web site index need not be as extensive or detailed as a book index because you can always use a search engine to find every obscure reference to a keyword. A Web site index should point to the most relevant and useful occurrences of a keyword and ignore minor references .

www.ikea-usa.com

Site maps
Site maps give the reader an overview of the site contents. Site maps come in two varieties: graphic diagrams that literally use the "map" metaphor and organized list links to major pages within the site.

The form of graphic site maps varies from hierarchical branching diagrams to geographic metaphors, but they all share the same limitations:

Graphic maps of large or complex Web sites are at best simple metaphors that convey only the approximate outlines of the site content. Computer screens offer limited space, so site map graphics tend to oversimplify and exaggerate hierarchies of information. The results are seldom worth the time and expense involved in making the graphic, unless you mean to convey only the broadest outlines of the site structure. Unless your Web site deals with information that is inherently spatial , text-based tables of contents or indexes will always be more efficient and informative.
Graphic site maps are often complex graphic files, which are harder to change as your site evolves.
Graphic site maps are inherently large graphics and are slow to download.

Site maps based on carefully organized text links of major menus and submenu pages and major page titles are much more informative than graphic maps and can easily be updated as your site matures. Most effective text site maps are really just expanded tables of contents. As such they are instantly familiar and understood by the vast majority of the readers in your audience. Bitstream's site map is a particularly well designed example of this type:

www.bitstream.com

source SITE DESIGN SITE GUIDES PHOTOGRAPHY http://webstyleguide.com

editorial style links photography

Photographer

EDITORIAL STYLE LINKS PHOTOGRAPHY Links

Two basic types of links are used in Web sites: navigational links connect pages within a site and the classic hypertext links offer parenthetical material, footnotes, digressions, or parallel themes that the author believes will enrich the main content of the page. Although navigational links can cause problems in site design, more disruptive is the overuse or poor placement of hypertext links.

Hypertext links pose two fundamental design problems. They disrupt the flow of content in your site by inviting the reader to leave your site. They can also radically alter the context of information by dumping the reader into unfamiliar territory without preamble or explanation.

The primary design strategy in thoughtful hypertext is to use links to reinforce your message, not to distract readers or send them off chasing a minor footnote in some other Web site. Most links in a Web site should point to other resources within your site, pages that share the same graphic design, navigational controls, and overall content theme. Whenever possible, integrate related visuals or text materials into your site so that readers do not have the sense that you have dumped them outside your site's framework. If you must send your reader away, make sure the material around the link makes it clear that the reader will be leaving your Web site and entering another site by following the link. Provide a description of the linked site along with the link so users understand the relevance of the linked material.

www.theatlantic.com

Maintain context
The key to good hypertext linking is to maintain context, so that the reader stays within the narrative flow and design environment of your site. If you place a simple link on your page, these plain links will work within a single browser window — your content will disappear and the linked page will fill the window. If you use this kind of link to point away from your site, you will probably lose your readers.

The simplest way to maintain context using links to other sites is to add the TARGET="main" argument to your link tags. This will cause the linked page to appear in a new browser window in front of the one containing your page. This feature allows your reader to access new material without losing visual contact with your site.

www.usablenet.com and www.section508.gov

Frames offer a more complex way to maintain narrative and design context. Using frames you can split the browser screen between your site and the material you wish to bring up with a link. Frames allow you to supply commentary on material in another site and also to maintain navigation links back to your site .

Placing links
Links are a distraction. It is pointless to write a paragraph and then fill it with invitations to your reader to go elsewhere. You can minimize the disruptive quality of links by managing their placement on the page. Put only the most salient links within the body of your text, and remember that these links should open new browser windows so that you don't supplant the original pages. But most links do not belong in the middle of the page — they won't be important enough to justify the potential distractions they pose. Group all minor, illustrative, parenthetic, or footnote links at the bottom of the document where they are available but not distracting.

www.digital-web.com

If you do place links in the body of your text, pay close attention to your language. Never construct a sentence around a link phrase, such as "click here for more information." Write the sentence as you normally would, and place the link anchor on the word or words that best describe the additional content you are linking to.

Poor: Click here for more information on placing links within your text.
Better: Avoid problems with Web links by managing their placement within the context of your document.

source EDITORIAL STYLE LINKS PHOTOGRAPHY http://webstyleguide.com

typography white space photography

Photographer

TYPOGRAPHY WHITE SPACE PHOTOGRAPHY White space

The vertical space in a text block is called leading, and it is the distance from one baseline of text to the next. Leading strongly affects the legibility of text blocks: too much leading makes it hard for the eye to locate the start of the next line, whereas too little leading confuses the lines of type, because the ascenders of one line get jumbled with the descenders of the line above. In plain HTML it is not possible to implement true leading, but CSS offers leading control . In print one general rule is to set the leading of text blocks at about 2 points above the size of the type. For example, 12-point type could be set with 14 points of leading. We suggest generous leading to compensate for longer line lengths and the lower resolution of the computer screen, for example, 12-point type with 14 to 16 points of leading.

Indenting paragraphs
There are two major schools of thought on denoting paragraphs. The classic typographic method uses indents to signal the beginning of a new paragraph . However, many technical, reference, and trade publications now use a blank line of white space to separate paragraphs. Indented paragraphs work especially well for longer blocks of prose, where the indents signal new paragraphs with minimal disruption to the flow of text. Blank line spacing between paragraphs, in contrast, makes a page easy to scan and provides extra white space for visual relief. Either approach is valid as long as the paragraph style is implemented consistently throughout the site.

To indent paragraphs without using CSS, you can insert several non-breaking space characters at the start of each paragraph. You can also use a transparent single-pixel GIF graphic as a spacer and adjust its horizontal spacing. If you are using CSS you can set the exact spacing for the indentation using the "text-indent" property of paragraphs.

nbsp; nbsp; nbsp; nbsp; To indent paragraphs without using CSS, ...


<IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" HSPACE="8">To indent paragraphs without using CSS, ...


<P STYLE="text-indent: 8pt">To indent paragraphs without using CSS, ...

To separate paragraphs with blank lines you could put a paragraph tag at the end of each paragraph. The paragraph tag adds a full blank line between paragraphs. To adjust the amount to an amount less or more than a full blank line you can use the CSS "margin" property, but beware of spacing inconsistencies between browsers. You can also use the line break tag followed by a transparent single-pixel GIF graphic as a spacer to control the space between paragraphs. As always when using a spacer graphic, be sure to include empty ALT text to hide the image from assistive technologies and text-only browsers:

<BR>


<IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" VSPACE="2">

source TYPOGRAPHY WHITE SPACE PHOTOGRAPHY http://webstyleguide.com

site design continuing education photography

Photographer

SITE DESIGN CONTINUING EDUCATION PHOTOGRAPHY Continuing education

The audiences for heuristic, self-directed learning will chafe at design strategies that are too restrictive or linear. The typical corporate or academic user of such sites is usually fairly knowledgeable in the subject area. The Web is an ideal medium for "just in time" training, where users pick just the specific topic where they need education. Flexible, interactive, nonlinear design structures are ideal for these readers because it is difficult to predict exactly which topics will most interest them. The design must permit fast access to a wide range of topics and is typically dense with links to related material within the local site and beyond on the World Wide Web. Text-based lists of links work well here for tables of contents and indexes because they load fast and are full of information, but well-designed graphics and illustrations are also needed so that this easily bored audience will stay involved with the material. Contact times are unpredictable but are often shorter than for training or teaching sites because the readers are usually under time pressure. Easy printing options are another must for this audience.

info.med.yale.edu/intmed/cardio/imaging

source SITE DESIGN CONTINUING EDUCATION PHOTOGRAPHY http://webstyleguide.com

web style guide preface to the first edition photography

Photographer

WEB STYLE GUIDE PREFACE TO THE FIRST EDITION PHOTOGRAPHY Preface to the first edition

THIS BOOK IS FOR ALL THOSE who wish to publish durable content on the Web. Durable content is not guided by trends; good design will withstand the test of time, whereas trends quickly become frivolous. Success in Web design goes beyond technology and fashion. To create Web sites that endure you need only to communicate your ideas clearly and effectively to your readers.

Though still young, the World Wide Web has already undergone several transformations. The framers of the Web were scientists who wanted to create a device-independent method for exchanging documents. They devised HTML as a method for "marking up" the structure of documents to allow for exchange and comparison. Their focus was on the structural logic of documents, not the visual logic of graphic design.

But the Web quickly caught on as a publishing medium; no communication device is more inexpensive or far-reaching. As a tool for communication, however, Web authoring with HTML has limitations. With their focus on the structure of documents, the originators of the Web ignored those visual aspects of information delivery that are critical to effective communication. Once the Web was established as a viable publishing medium, these limitations became obvious and cumbersome. Pages that conformed to HTML standards lacked visual appeal, showing little evidence of the past five centuries of progress in print design. Graphic designers took this relatively primitive authoring and layout tool and began to bend and adapt it to a purpose it was never intended to serve: graphic page design.

The Web viewing audience was also beginning to refine its tastes. The pioneering Web "surfers" who were content to skim the surface of Internet documents are now outnumbered. People are turning to the Web for information — information with depth, breadth, and integrity.

Our purpose for writing this book is to offer basic design principles that you can use to make your content as easy to understand as possible. We explain how to use design as a tool, not as an objective; your Web design should be almost transparent to the reader. We show you how to create a user interface that will allow visitors to your site to navigate your content with ease. We offer suggestions on how to write Web documents; this is a new genre with its own style and guidelines. We delve deep into Web images — color, resolution, compression, and formats — and discuss the benefits of publishing images on the Web. We cover the stylistic and technical issues surrounding the addition of dynamic media to your Web site. All the guidance we offer shares a single purpose: to make your message clear to your readers.

This is not an HTML manual, nor is it a book on graphic design. It is a practical guide to help you design Web sites for the long run.

Many people have given generously of their time and advice during the preparation of this book and of the Web site that preceded the book. At Yale University Press we extend our warmest thanks to Jean Thomson Black, Laura Jones Dooley, and James J. Johnson. We also thank Craig Locatis, Donald Norman, and Edward Tufte for their valuable contributions.

I extend heartfelt thanks to my friends and colleagues at Yale University Center for Advanced Instructional Media: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Marsha Vazquez, and Jeff Colket. In particular, I'd like to thank Carl Jaffe for over ten years of friendship, wise counsel, and practical advice, much of which now appears on these pages. I'd also like to acknowledge and thank my co-author and good friend Sarah Horton for her friendship, for her partnership in this enterprise, and for convincing me that converting our Web Style Guide site into a book was a good idea.

I am especially grateful to the following individuals for their comments, suggestions, assistance, and counsel over the development of this book and companion Web site: Anne Altemus, Emmett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Kathryn Latimer, Howard Newstadt, Noble Proctor, Lynna Stone-Infeld, Jan Taylor, Mi Young Toh, Tom Urtz, and Cheryl Warfield.


— PL

I thank my co-author, Patrick Lynch, for asking me to join him as co-author of the second edition of the online Web Style Guide. Little did he know where that invitation would lead, and I am grateful for his unfailing friendship and good humor throughout the development of this book. I am deeply indebted to Pat and his colleagues at Yale University Center for Advanced Instructional Media for taking me in some years back and teaching me how to see.

I am indebted to my many colleagues and friends at Dartmouth College for their support, suggestions, and counsel, especially John Hawkins, Sheila Culbert, D. Randall Spydell, Ned Holbrook, and Robert M. Murray. I also thank the faculty whose sites appear in this book: Joan Campbell, Eva Fodor, Sally Hair, Allen Koop, Thomas Luxon, and Gerard Russo.

I also thank Malcolm Brown for his steadfast support.


— SH

source WEB STYLE GUIDE PREFACE TO THE FIRST EDITION PHOTOGRAPHY http://webstyleguide.com

web style guide preface to the second edition photography

Photographer

WEB STYLE GUIDE PREFACE TO THE SECOND EDITION PHOTOGRAPHY Preface to the second edition

AS IS THE CASE WITH MANY innovations, the Web has gone through a period of extremes. At its inception, the Web was all about information. Visual design was accidental at best. Web pages were clumsily assembled, and "sites" were accumulations of hyperlinked documents lacking structure or coherence. Designers then took over and crafted attractive, idiosyncratic, and often baffling containers for information. The Web became a better-looking place, but many users hit up against barriers of large graphics, complex layouts, and nonstandard coding. Every site was different, and each required users to relearn how to use the Web, because "real" designers could not be bound by standards or conventions. Instead, designers pushed the boundaries of HTML, using workarounds, kludges, and sleight of hand to design on the cutting edge.

Today, the field of Web design is seen much more as a craft than an art, where function takes precedence over form and content is king. Innovative designs using fancy navigational doodads are generally seen as an annoyance standing between the user and what he or she seeks. Large graphic eye-candy, no matter how pleasing, is simply wasted bandwidth. Like 1960s architecture, much of yesterday's Web design now makes users wince and wonder how it could ever have been fashionable. Instead, today's Web designers are also information architects and usability engineers, and a user-centered design approach is the key to a successful Web site. Instead of constantly requiring users to relearn the Web, sites are beginning to look more alike and to employ the same metaphors and conventions. The Web has now become an everyday thing whose design should not make users think.

The guidance we offer in Web Style Guide has always been grounded on the functional aspects of design. In this second edition we extend our focus on functionality with additional sections on Web site accessibility, Cascading Style Sheets, and flexible page design. We include additional sections on information architecture, site maintenance, and multimedia design. And we have added illustrations and updated our Web site examples to reflect current best practices.

In addition to all those who contributed to the first edition of Web Style Guide, and whom we acknowledge at the end of the first edition preface, we thank Jean Thomson Black, Laura Jones Dooley, Joyce Ippolito, Maureen Noonan, Nancy Ovedovitz, Deborah Patton, and Amy Steffen at Yale University Press for their hard and high-quality efforts in producing this second edition. We are particularly grateful to Lou Rosenfeld for supplying such a lively and cogent foreword.

I extend heartfelt thanks to my friends and colleagues at Yale Center for Advanced Instructional Media and the School of Medicine's Web Design and Development unit: Carl Jaffe, Phillip Simon, Sean Jackson, Kimberly Pasko, Jim Soha, Janet Miller, Victor Velt, Crystal Gooding, Michael Flynt, Kathryn Latimer, Venkat Reddy, and Russell Shaddox. In particular, I'd like to thank Carl Jaffe for fifteen years of friendship, wise counsel, and practical advice, much of which now appears on these pages. I'd also like to acknowledge and thank my co-author and dear friend Sarah Horton for her friendship, for her partnership in this enterprise, and for convincing me that converting our Web Style Guide site into a book was a good idea.

I am especially grateful to the following individuals for their comments, suggestions, assistance, and counsel over the development of this book and companion Web site: Anne Altemus, Emmett Barkley, Richard Beebe, David Bolinsky, Stephen Cohen, Frank Gallo, Scott Hines, Peter Kindlmann, Howard Newstadt, John Paton, Noble Proctor, Stacy Ruwe, Virginia Simon, William Stewart, Lynna Stone-Infeld, Jan Taylor, Frans Wackers, and Cheryl Warfield.


— PL

I thank my excellent colleagues in Curricular Computing at Dartmouth College: Jeffrey Bohrer, Malcolm Brown, Barbara Knauff, Mark O'Neil, Susan Simon. I also thank the Dartmouth faculty whose sites we use as examples: Joan Campbell, Sheila Culbert, Eva Fodor, Karen Gocsik, Sally Hair, Julie Kalish, Allen Koop, Thomas Luxon, and Gerard Russo. Finally, I am grateful to Andrew Kirkpatrick at the CPB/WGBH National Center for Accessible Media for casting a knowledgable eye on the sections on Web site accessibility.


— SH

source WEB STYLE GUIDE PREFACE TO THE SECOND EDITION PHOTOGRAPHY http://webstyleguide.com

graphics summary file formats photography

Photographer

GRAPHICS SUMMARY FILE FORMATS PHOTOGRAPHY Summary: File formats

Uses for GIF and JPEG Files
Netscape Navigator, Microsoft Internet Explorer, and most other browsers support both GIF and JPEG graphics . In theory, you could use either graphic format for the visual elements of your Web pages. In practice, however, most Web developers will continue to favor the GIF format for most page design elements, diagrams, and images that must not dither on 8-bit display screens. Designers choose the JPEG format mostly for photographs, complex "photographic" illustrations, medical images, and other types of images in which the compression artifacts of the JPEG process do not severely compromise image quality.

Advantages of GIF files

GIF is the most widely supported graphics format on the Web
GIFs of diagrammatic images look better than JPEGs
GIF supports transparency and interlacing

Advantages of JPEG images

Huge compression ratios mean faster download speeds
JPEG produces excellent results for most photographs and complex images
JPEG supports full-color images

source GRAPHICS SUMMARY FILE FORMATS PHOTOGRAPHY http://webstyleguide.com

page design layout tables photography

Photographer

PAGE DESIGN LAYOUT TABLES PHOTOGRAPHY Layout tables

If you simply place a chunk of text on a Web page, the dimensions of the viewer's browser window will determine the line length. When the user resizes his or her window, the text reflows to fill the new space. Although this adaptable "feature" of Web documents is central to the premise of the Web, it can hinder the user's experience with the content. All the issues of legibility, readability, and style that we discuss in this manual rely on the Web designer's ability to position words, images, and screen elements on the "page" with some precision. Without some adherence to established typographic conventions you may confuse and ultimately lose your readers.

Because of the limitations of HTML and the inconsistencies of CSS, the only reliable layout tools for site designers at this time are HTML tables.

www.dartmouth.edu/~sources

Line length
The ideal line length for text layout is based on the physiology of the human eye. The area of the retina that is used for tasks requiring high visual acuity is called the macula. The macula is small, typically less than 15 percent of the area of the retina. At normal reading distances the arc of the visual field covered by the macula is only a few inches wide — about the width of a well-designed column of text, or about twelve words per line. Research shows that reading slows and retention rates fall as line lengths begin to exceed the ideal width, because the reader then needs to use the muscles of the eye or neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on a page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text. Use tables to limit the line length, ideally to ten to twelve words per line.

Margins
Margins define the reading area of your page by separating the main text from nontext elements, such as interface elements and other unrelated graphics. Margins also provide contrast and visual interest. Use table cells to establish margins, and use them consistently throughout your site to provide unity.

Columns
One common use of tables that increases both legibility and functionality of page layouts is a multicolumn layout, with the page divided into columns of main text, site navigation, and perhaps a third column with page-level navigation, pull-quotes, and links to related sites. Multiple columns provide a flexible space for variations in page layout and narrow the text column to a comfortable line length.

Gutters
In print the space between columns is called a gutter. Gutters keep columns from running into one another:

You can use tables to create gutters in three ways: by adding a cell to your table that functions as the gutter, by using the CELLPADDING attribute of the TABLE tag , and by using the CELLSPACING attribute of the TABLE tag :

Borders
When we talk about tables we are not speaking of the beveled beauties that HTML offers to present tabular content. We are using tables to get around the limitations of HTML, and we are using them in ways for which they were not intended. These are invisible tables whose sole purpose is to give us control over page elements, so be sure to set BORDER="0" in your TABLE tag. And if you do use tables to present tabular information, use spacing, alignment, and indents, not borders, to delimit tabular information.

www.dartmouth.edu/~chemlab

source PAGE DESIGN LAYOUT TABLES PHOTOGRAPHY http://webstyleguide.com

page design design grids for web pages photography

Photographer

PAGE DESIGN DESIGN GRIDS FOR WEB PAGES PHOTOGRAPHY Design grids for Web pages

Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user's input and system activity.

Grids bring order to the page
Current implementations of HyperText Markup Language do not allow the easy flexibility or control that graphic designers routinely expect from page layout software or multimedia authoring tools. Yet HTML can be used to create complex and highly functional information systems if it is used thoughtfully. When used inappropriately or inconsistently, the typographic controls and inlined graphics of Web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase readers' confidence in your site.

No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic "backbone" you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons. To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. In larger projects it isn't possible to exactly predict how every combination of text and graphics will interact on the screen, but examine your Web layout "sketches" against both your most complex and your least complex pages.

Your goal is to establish a consistent, logical screen layout, one that allows you to "plug in" text and graphics without having to stop and rethink your basic design approach on each new page. Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web site will seem patchy and confusing.

Vertical stratification in Web pages
A Web page can be almost any length, but you've only got about forty-five square inches "above the fold" — at the top of your page — to capture the average reader, because that is all he or she will see as the page loads. One crucial difference between Web page design and print page design is that when readers turn a book or magazine page they see not only the whole next page but the whole two-page spread, all at the same time. In print design, therefore, the two-page spread is the fundamental graphic design unit.

Print design can achieve a design unity and density of information that Web page design cannot emulate. Regardless of how large the display screen is, the reader still sees one page at a time, and even a twenty-one-inch screen will display only as much information as is found in a small magazine spread:

Design for screens of information
Most Web page designs can be divided vertically into zones with different functions and varying levels of graphics and text complexity. As vertical scrolling progressively reveals the page, new content appears and the upper content disappears. A new graphic context is established each time the reader scrolls down the page. Web page layouts should thus be judged not by viewing the whole page as a unit but by dividing the page into visual and functional zones and judging the suitability of each screen of information. Notice the vertical structure of the home page reproduced below. The top screen of information is much denser with links because it is the only area that is sure to be visible to all users:

www.ynhh.org

source PAGE DESIGN DESIGN GRIDS FOR WEB PAGES PHOTOGRAPHY http://webstyleguide.com

graphics browser-safe colors photography

Photographer

GRAPHICS BROWSER-SAFE COLORS PHOTOGRAPHY "Browser-safe" colors

The color management system currently used by Web browser software is based on an 8-bit, 216-color palette. The browser-safe color palette is a solution devised by Netscape to solve the problem of displaying color graphics in a similar way on many kinds of display screens, with browsers running under different operating systems . Because a majority of the Web audience years ago had 8-bit display screens, 256 colors was the upper limit for the color palette. But the various versions of the Windows operating system reserve 40 colors for displaying such graphic interface elements as windows, menus, screen wallpaper, icons, and buttons, which leaves just 216 colors to display everything else. The 216 colors chosen by Netscape are identical in both the Macintosh and Windows system palettes. Although the browser-safe color scheme originated at Netscape, at present both of the dominant Web browsers use the same color management system.

Most Web users have computers and monitors set to "thousands" or "millions" of colors, so the importance of the so-called Web-safe palette has sharply diminished in the past few years. When the user has a monitor set to thousands or millions of colors all colors display properly, so there is no longer any need to restrict your color choices to the 216 Web-safe colors.

source GRAPHICS BROWSER-SAFE COLORS PHOTOGRAPHY http://webstyleguide.com

site design site structure photography

Photographer

SITE DESIGN SITE STRUCTURE PHOTOGRAPHY Site structure

If you are interested in the World Wide Web you can hardly escape references to hypertext and hypermedia. The computer press is full of fuzzy thinking about how Web-based information can somehow "link everything to everything." The implication is that with the Web you can dispense with one of the most challenging aspects of presenting information — putting it into a logical order and creating an interesting and understandable resource for readers. But if your idea of how one section of your site relates to other areas is hazy, if you have no comprehensive narrative or clear sense of organization, your readers will know it soon enough, and most will leave in pursuit of material that is better organized.

Section contents

Basic information structures
Site diagrams

source SITE DESIGN SITE STRUCTURE PHOTOGRAPHY http://webstyleguide.com

interface design accessibility photography

Photographer

INTERFACE DESIGN ACCESSIBILITY PHOTOGRAPHY Accessibility

One of the defining principles of the Web is that it should provide all people, regardless of physical or technological readiness, with access to information. Since the Web took off as a visual medium, the goals of design have been at odds with the goals of accessibility. When designers began to use large images, proprietary media formats, and complex page layouts to produce well-designed documents, the Web became a better-looking place, but those users who require clean HTML for access were shut out from many pages. Today, the course of Web design is shifting back to its original purpose. HTML has matured to offer more visual controls, so designers have more tools at hand to create structured and navigable Web sites without resorting to hacks and workarounds. Around the world, initiatives are under way to mandate that disabled users have equal access to Internet resources, including the guidelines issued by the Web Accessibility Initiative of the World Wide Web Consortium and, in the United States, the amendments to Section 508 of the Rehabilitation Act of 1973. The result is that Web interface design is intricately tied to accessibility design. It is the responsibility of Web designers to understand and support the needs of disabled users.

Alternates and fallbacks
The underlying principle of Web accessibility guidelines is simple: if you provide information in any medium besides plain text, you should always provide an alternate, or fallback, version. The notion of fallbacks is at the core of the language of the Web, allowing rich and varied content to transform gracefully under different conditions. It also lies behind the injunction that no content should become outdated and inaccessible because of the progress of technology. To meet these goals, HTML includes methods for providing fallbacks for some types of nontext content.

As an example, one of the beauties of the Web and HTML is the ability to build in "alternate" text descriptions so that users without graphics capabilities can understand the function of graphics on your pages. Blind users using specially designed software will hear the alternate messages you supply along with your graphics and so will not completely miss the content of your pictures and graphic navigation buttons. Users with text-only browsers or those who have turned off image display will see the alternate text in place of the visual content. If you use graphic menu systems for navigation, these text-based alternate menus are an especially important aid to users who cannot see your graphics . If you use graphics like single-pixel GIFs as spacers in your page layout, always be sure to include a blank ALT statement in the spacer image source tag . The blank ALT statement hides the graphic from text-only browsers and from browsers that read text aloud for visually impaired users:

<IMG SRC="pixel.gif" HEIGHT="1" WIDTH ="1" ALT="" HSPACE="5">

You should also include alternates as part of your page design for users who cannot access your primary content. For example, provide an equivalent text-only navigation menu for visually impaired users who cannot use your graphical menus. Or if you have video of a lecture or presentation on your site, include a text transcript or subtitles so that deaf users can have access to the materials.

www.organicgardening.com

Style sheets
Your content can be made more accessible if you use Cascading Style Sheets to style your pages. With CSS-styled pages, users can easily apply personalized formatting to Web documents. A page designed using red text against a green background, for example, presents a problem for users with red-green color blindness: the contrast between text and background may not be great enough for the text to be distinguishable. If the colors are set via a style sheet, users can set their browser preferences to override your settings and can apply their own style sheet to the page instead. With CSS-styled pages, the user can transform Web content into a format that addresses their requirements for accessibility.

Accessibility guidelines
All professionally designed Web sites or intranet sites should meet at least the minimum standards for accessibility as defined by the World Wide Web Consortium guidelines. The W3C Web site contains extensive information on the details of how to make your site reasonably accessible to blind, deaf, or other disabled users. Until recently Web designers faced difficulties in implementing many of the W3C accessibility suggestions because the most popular versions of the major Web browsers either did not implement newer technology standards like Cascading Style Sheets or implemented them inconsistently. Now that both Netscape Navigator 6 and Internet Explorer 5 are almost completely compatible with W3C standards, however, the reasons for not using CSS and other tools to increase the accessibility of Web information to disabled readers are disappearing.

www.w3.org/WAI

Graceful degradation
We all hope that every reader will arrive using the latest version of a major Web browser and that their computers will be state-of-the-art models using fast connections to the Internet. The reality is almost always less than ideal. You don't need to design your Web site exclusively for the lowest common denominator of current computing and network technology, but you do need to consider what your site will look like to those readers who do not have the best equipment, current software, or good Internet connections. The problems here are aggravated by the fact that Web site developers generally have much better equipment than the average Web site reader. Don't design for your machine, design for your average reader.

Always check your page designs on typically sized display screens to be sure that all major navigation and content areas fit well within the horizontal area of the screen. Usually that will limit your page layouts to no more than 760 pixels in width. Many users with slow modem connections routinely turn off the image display in their browser. Try turning off graphics in your Web browser and look at your pages — are they still intelligible and navigable? Do you use ALT statements for every graphic? Do you use blank ALT statements to hide irrelevant graphics or spacer graphics from text-only browsers?

Do not produce Web sites that depend on one browser technology or browser plug-in . Such notes on the home page of a corporate or enterprise Web site look sophomoric and will drive away most adult users. Design for everyone using major browsers released in the two previous years. If you must depend on proprietary browser plug-ins, try to position the material that is dependent on the plug-in deeper within the site, where presumably the reader will already have made a commitment to your content and may not mind the bother of having to download a plug-in to see special features. Once readers have a clearer sense of what they might gain by bothering to download a browser plug-in, they can make an informed decision.

source INTERFACE DESIGN ACCESSIBILITY PHOTOGRAPHY http://webstyleguide.com

photography

Photographer

PHOTOGRAPHY

source PHOTOGRAPHY http://webstyleguide.com

interface design navigation photography

Photographer

INTERFACE DESIGN NAVIGATION PHOTOGRAPHY Navigation

A rich set of graphic navigation and interactivity links within your Web pages will pull users' attention down the page, weaning them from the general-purpose browser links and drawing them further into your content. By providing your own consistent and predictable set of navigation buttons you also give the user a sense of your site's organization and make the logic and order of your site visually explicit. In this example the rich graphics and many links offered by the Salon technology and business page immediately draw the reader into the site:

www.salon.com

Provide context or lose the reader
Readers need a sense of context, of their place within an organization of information. In paper documents this sense of "where you are" is a mixture of graphic and editorial organizational cues supplied by the graphic design of the book, the organization of the text, and the physical sensation of the book as an object. Electronic documents provide none of the physical cues we take for granted in assessing information. When we see a Web hypertext link on the page we have few cues to where we will be led, how much information is at the other end of the link, and exactly how the linked information relates to the current page. Even the view of individual Web pages is restricted for many users. Most Web pages don't fit completely on a standard office display monitor , and so there is almost always a part of the page that the user cannot see:

Web pages need to give the user explicit cues to the context and organization of information because only a small portion of any site is visible at one time:

As the Web page designer it is up to you to provide these functional and context cues.

"Going back" and going to the previous page
All hypertext systems share a common feature that has no direct precedent in print media: going "back" through a series of links you have previously visited is not the same as paging "back" through the preceding pages of an ordered sequence of pages. When users click on a hypertext link in a Web document they often are transported from one Web site to another, perhaps even from one country to another. Once made, the hypertext link is bidirectional; you can "go back" to the Web site you just left by clicking on the "Back" button of the viewer. Having hit the "Back" button, you can move to the new Web site again by hitting the "Forward" button:

Button bars
For the information designer hypertext links are a mixed blessing. The radical shifts in context that links create can easily confuse Web users, who need organized cues and interface elements if they are to follow and understand hypertext links from one Web page to another. This is particularly true when users need to be able to follow an ordered sequence of documents. Notice in the diagram above that although the user has entered the second Web site at page 6, the site is an ordered sequence of pages.

If the standard Web browser "Back" and "Forward" buttons are augmented with "Next Page" and "Previous Page" buttons built into the page, the user will have interface tools to navigate through the information in your site in the sequence you intended. Button bars can also display location information much as running chapter headers do in printed books:

www.clemusart.com

Unlike the "Back" and "Forward" buttons, whose functions are relative only to the pages you have seen most recently, "Next Page" and "Previous Page" buttons in a document are fixed links you provide to associated documents. By providing paging buttons and links to local home pages and contents pages you give users the tools to understand how you have organized your Web site information, even if they have not entered your Web of pages through a home page or contents page. The buttons don't prevent people from reading the information in whatever order they choose, but they do allow readers to follow the sequence of pages you have laid out:

Button bars are also the most logical place for links back to your home page or to other menu pages related to the current page. A button bar can be built with text-based links or a series of individual button graphics at the top or bottom of the page:

www.dartmouth.edu/~sources

source INTERFACE DESIGN NAVIGATION PHOTOGRAPHY http://webstyleguide.com

process site construction photography

Photographer

PROCESS SITE CONSTRUCTION PHOTOGRAPHY Site construction

Only at this mature stage of the project are the bulk of the site's Web pages constructed and filled out with content. By waiting until you have a detailed site architecture, mature content components, and a polished page design specification you will minimize the content churning, redundant development efforts, and wasted energy that inevitably result from rushing to create pages too soon. Of course, you will always learn new things about your overall design as the prototype matures into the full-blown Web site. Be prepared to refine your designs as you navigate through the growing Web site and discover both weak spots and opportunities to improve navigation or content.

Once the site has been constructed, with all pages completed and all database and programming components linked, it is ready for beta testing. Testing should be done primarily by readers outside your site development team who are willing to supply informed criticism and report programming bugs, typographic errors, and critique the overall design and effectiveness of the site. Fresh users will inevitably notice things that you and your development team have overlooked. Only after the site has been thoroughly tested should you begin to publicize the URL address of the site to a larger audience.

Typical products or contract deliverables at the end of this stage should include:

Finished HTML for all Web pages, all page content in place
Finished navigation link structure
All programming in place and linked to pages, ready for beta testing
All database components in place and linked to site pages
All graphic design, illustration, and photography in place
Final proofreading of all site content
Detailed testing of database and programming functionality
Testing and verification of database reporting features
Testing of site reader support procedures, answering email, etc.
Archives of all site content components, HTML code, programming code, and any other site development materials

Maintainable code
Most business or departments in larger enterprises will contract with a Web development group to create the initial site design and to build all the pages in the first version of the Web site. They then assume responsibility for the site, doing some or all of the day-to-day maintenance and updating content as needed to keep the site current.

Often not until the practicalities of site maintenance come up do customers realize the importance of understanding the details of how the Web developer generated the HTML and other code that makes up the Web site. Although all HTML is much the same to Web browsing software, how the HTML is formatted and what Web authoring tool the developer used can make a huge difference in how the code looks to a human reader. Consider the two code examples below:

Example 1
<! — START OF SCHEDULE TABLE ======= — >


<table summary="Human Investigations Committee II schedule, FY 2001." border="0" width="100%" cellspacing="0" cellpadding="1">


<tr valign="top">


<! — =============================== — >


<td width="50%">


<p class="tabletext">


Deadline for Submissions</p>


</td>


<td width="2%">


nbsp;


</td>


<td width="48%">


<p class="tabletext">


Meeting Dates 2001</p>


</td></tr>


<! — =============================== — >

Example 2
<table summary="Human Investigations Committee II schedule, FY 2001." border="0" width="100%" cellspacing="0" cellpadding="1"><tr valign="top"><td width="50%"><p class="tabletext">Deadline for Submissions</p></td><td width="2%"> nbsp;</td><td width="48%"><p class="tabletext">Meeting Dates 2001</p></td></tr>

Which example do you find easier to understand? These code examples are exactly equivalent to Web browser software, but most people would find Example 1 significantly easier to read and understand. If you contract with a developer to build your site, it is crucial to understand how the developer writes code, what state the code will be in when the site is delivered, and whether the software used by the developer is compatible with what you will be using to maintain the site after delivery. Some Web development software produces HTML code that is nearly impossible for a human to read without significant reformatting. Other programs produce HTML code that is easy for Web programmers to read, which can make a huge difference if you decide to change Web developers or if you decide to edit HTML directly in maintaining your site. If you hire someone to create your Web site, be sure to ask what tools he or she will use to write the HTML and any other code. Ask to see examples of HTML code written for other clients. Check the code to be sure the developer inserts explanatory comments and dividers for legibility in the code. Be sure you understand whether there will be any problems or conflicts in using your favorite Web tools to edit the HTML code your Web developer produces.

source PROCESS SITE CONSTRUCTION PHOTOGRAPHY http://webstyleguide.com

site design site design themes photography

Photographer

SITE DESIGN SITE DESIGN THEMES PHOTOGRAPHY Site design themes

All presentations of information are governed by parameters determined by the objectives, the practical logistics of the chosen medium, and the audience. The figure below plots major themes for information delivery against two fundamental variables — the linearity of the structure of your presentation and the length of the typical user's contact time:

Some general modes of Web use are more structured and depend on audiences who arrive knowing what they wish to accomplish without the need for site-supplied motivation. Corporate intranets, training sites, educational sites, reference sites, and many well-known news and information sites benefit from audiences that know what to expect at a particular site and arrive there with a specific goal in mind. E-commerce and entertainment sites have a complex dual mission to balance: to motivate casual browsers to spend time in the site and become customers as well as to provide fast access to products and information to experienced users.

Naive designers and clients eager to do almost anything to attract attention to a Web site consistently make the mistake of maximizing immediate graphic impact over all other possible attributes of a site design. They have the misguided notion that if you constantly hit the reader between the eyes with a huge, noisy graphic or Flash animation, you will sustain their attention. Sometimes this does work — for about ten to fifteen seconds. "Eye candy" is a quick blast of visual sweets, but you can't build a Web site on a moment's attention. Most readers quickly tire of blaring animated graphics and the long downloads, plug-in compatibility irritations, and distracting stimuli that complicate such sites. A successful site requires real, sustained engagement, and you get that only by offering both sophisticated visual stimuli and a site that is structured to meet the needs of its audience quickly and effectively.

Section contents

Training
Teaching
Continuing education
Reference
Entertainment and magazine sites
News sites
E-commerce

source SITE DESIGN SITE DESIGN THEMES PHOTOGRAPHY http://webstyleguide.com

graphics jpeg graphics photography

Photographer

GRAPHICS JPEG GRAPHICS PHOTOGRAPHY JPEG graphics

The other graphic file format commonly used on the Web to minimize graphics file sizes is the Joint Photographic Experts Group compression scheme. Unlike GIF graphics, JPEG images are full-color images . JPEG images have generated tremendous interest among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality is paramount and where color fidelity cannot be compromised by dithering a graphic to 8-bit color. A newer form of JPEG file called "progressive JPEG" gives JPEG graphics the same gradually built display seen in interlaced GIFs . Like interlaced GIFs , progressive JPEG images often take longer to load onto the page than standard JPEGs, but they do offer the reader a quicker preview.

JPEG compression uses a sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression. You can choose the degree of compression you wish to apply to an image in JPEG format, but in doing so you also determine the image's quality. The more you squeeze a picture with JPEG compression, the more you degrade its quality. JPEG can achieve incredible compression ratios, squeezing graphics down to as much as one hundred times smaller than the original file. This is possible because the JPEG algorithm discards "unnecessary" data as it compresses the image, and it is thus called a "lossy" compression technique. Notice in the example below how increasing the JPEG compression progressively degrades the details of the image:

The checkered pattern and the dark "noise" pixels in the compressed image are classic JPEG compression artifacts.

Another example of JPEG compression is shown below. Note the extensive compression noise and distortion present in the bottom dolphin — the download time saved is not worth the degrading of the images.

Save your original uncompressed images!
Once an image is compressed using JPEG compression, data is lost and you cannot recover it from that image file. Always save an uncompressed original file of your graphics or photographs as backup.

JPEG image artifacts
The JPEG algorithm was optimized for compressing conventional pictorial photographs and is also good at handling complex illustrations. Photos and artwork with smooth color and tonal transitions and with few areas of harsh contrast or sharp edges are ideal for JPEG compression. Yet most page design elements, diagrams, typography within images, and many illustrations are composed of hard-edged graphics and bright color boundaries that are seldom encountered in photographs. The illustration below shows what happens when you compress an interface graphic in GIF format and JPEG compression :

its.med.yale.edu/mediaservices

When compressed with JPEG, diagrammatic images such as interface graphics show a noise pattern of compression artifacts around the edges of shapes and text . The JPEG algorithm is best at compressing smooth tonal transitions and cannot properly reproduce the harsh transitions at the edges of diagrammatic graphics.

source GRAPHICS JPEG GRAPHICS PHOTOGRAPHY http://webstyleguide.com

page design fixed versus flexible photography

Photographer

PAGE DESIGN FIXED VERSUS FLEXIBLE PHOTOGRAPHY Fixed versus flexible

The behavior of an HTML table depends largely on how its cells are defined. One "feature" of tables is that they try to be accommodating; they expand and collapse to accommodate their contents and to fit the dimensions of the viewer's browser window. In their most basic form, tables are not much more precise than plain text.

Example: Variable-width layout table


Example: Fixed-width layout table

It is possible to create flexible layout tables that resize gracefully without sacrificing the integrity of your design, but if you are turning to layout tables for precision you will need to use fixed-width layout tables.

Use fixed-width tables for precise layouts
Putting content into a fixed-width table means that your page layout will be stable whatever the size of the user's screen or browser window. Designing in a stable environment means that you can fix the position of elements on the page and control typographic features such as line length and spacing. A downside of a controlled layout is that on large display screens a major portion of screen real estate goes unused. You can avoid the "wasteland" effect of a fixed layout by centering the table in the browser window or by designing a background graphic to fill the empty areas of the screen.

horizon.unc.edu/ts and its.med.yale.edu

In a fixed-width table you must define cell widths with absolute values. This will keep the tables from expanding to fill the window. Then, to keep tables from collapsing when the browser window is too small to accommodate their dimensions, include an invisible image equal to the width of the cell in each table cell. These two techniques will force table cells to maintain their dimensions regardless of the size of the browser window.

its.med.yale.edu/wdd

Use flexible tables for layouts that adapt
A popular viewpoint is that designers should embrace the nature of Web documents and create flexible layouts that adapt to different viewing conditions. To do this, you need to be willing to abandon control of aspects of your page design, notably line length. Flexible design is in many ways more challenging than fixed design because it requires a deep understanding of HTML and its implementation across platforms and browsers. It also requires that you think "outside the box" of your own configuration and come up with graphics and layouts that will still "work" under varying viewing conditions.

www.fatbrain.com

Tables are inherently flexible, so one approach to flexible design is to let table cells size themselves according to their contents and the size of the browser window. Another approach is to specify cell widths using percentage values; for example, set the left scan column width to 40 percent and the main text column width to 60 percent. That way the columns will resize when the window size is changed, but they will always maintain their relative proportions regardless of the size of the browser window. You can also use a combination of fixed and unspecified table cell widths to create a flexible layout. Using this technique you specify in pixels the width of the columns that require absolute positioning — for example, a navigation column or gutter — and leave the remaining column, such as the text column, unspecified so that it adapts to fill the screen.

www.webstandards.org and www.dartmouth.edu/~ac

source PAGE DESIGN FIXED VERSUS FLEXIBLE PHOTOGRAPHY http://webstyleguide.com

site design basic information structures photography

Photographer

SITE DESIGN BASIC INFORMATION STRUCTURES PHOTOGRAPHY Basic information structures

Web sites are built around basic structural themes. These fundamental architectures govern the navigational interface of the Web site and mold the user's mental models of how the information is organized. Three essential structures can be used to build a Web site: sequences, hierarchies, and webs.

Sequences
The simplest way to organize information is to place it in a sequence. Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries. Straight sequences are the most appropriate organization for training sites, for example, in which the reader is expected to go through a fixed set of material and the only links are those that support the linear navigation path:

More complex Web sites may still be organized as a logical sequence, but each page in the main sequence may have links to one or more pages of digressions, parenthetical information, or information on other Web sites:

Hierarchies
Information hierarchies are the best way to organize most complex bodies of information. Because Web sites are usually organized around a single home page, hierarchical schemes are particularly suited to Web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand. A hierarchical organization also imposes a useful discipline on your own analytical approach to your content, because hierarchies are practical only with well-organized material.

Webs
Weblike organizational structures pose few restrictions on the pattern of information use. In this structure the goal is often to mimic associative thought and the free flow of ideas, allowing users to follow their interests in a unique, heuristic, idiosyncratic pattern. This organizational pattern develops with dense links both to information elsewhere in the site and to information at other sites. Although the goal of this organization is to exploit the Web's power of linkage and association to the fullest, weblike structures can just as easily propagate confusion. Ironically, associative organizational schemes are often the most impractical structure for Web sites because they are so hard for the user to understand and predict. Webs work best for small sites dominated by lists of links and for sites aimed at highly educated or experienced users looking for further education or enrichment and not for a basic understanding of a topic.

source SITE DESIGN BASIC INFORMATION STRUCTURES PHOTOGRAPHY http://webstyleguide.com

web style guide foreword photography

Photographer

WEB STYLE GUIDE FOREWORD PHOTOGRAPHY Foreword

HAVE YOU HEARD of the World Wide Web? If so, your understanding of this exciting new medium has probably evolved somewhat over the past few years. Here is a common evolutionary trajectory:

What is this Web thing?
The Web is just a flash in the pan.
The Web is actually pretty cool.
Hmmm, maybe we can make money on the Web.
The Web is the cornerstone of the New Economy.
There is no New Economy.
What was that Web thing?

When things change this fast, humans have a hard time adapting, keeping up, and just plain understanding what's going on. But people's reactions to the Web changed so fast precisely because so few of us really understood what it is. In fact, most of us didn't have the time to think hard about how Web sites could truly be useful and good things and how important sound design principles are to making them so.

Frenzied anxiety forced us to rush to legions of "experts" who played upon our fears that "we didn't get it." Through hype and jargon , they bullied us back to where we are today: square one.

As we return to the drawing board to figure out what we should do with the Web and our Web sites, what we needed all along becomes clear: fundamentals and fundamentally sound advice to help us think for ourselves and design for our users.

Fortunately, this wonderful little book is still here to show us those fundamentals. Patrick Lynch and Sarah Horton aren't trying to scare you with hype or jargon. They're just trying to get you to slow down, take a deep breath, and think for yourself. They'll teach you basic design principles as well as tricks of the trade, ranging from interaction design to typography, so that you can develop your own Web site or better understand and communicate with the people who are doing that work for you. More important, they will give you a broad framework that will help you understand the Big Picture of Web design. Even if you don't agree with all of their advice, you'll have a starting point from which to develop your ideas and practices.

If you're new to the Web, this is the book for you. It will give you a broad overview of a very complicated subject and get you started in the right direction. It will also make you look very smart when you carry it into meetings with your Web team.

And if you're battle-scarred, weary, and preparing mentally to do battle again, this is the book for you. It will help you synthesize what you've learned over these past few years and reshape your approach to Web site design from a more reasoned and realistic perspective. And it will also make you look very smart when you carry it into meetings with your Web team.

Now get back to it!

— Louis Rosenfeld

source WEB STYLE GUIDE FOREWORD PHOTOGRAPHY http://webstyleguide.com

typography line length photography

Photographer

TYPOGRAPHY LINE LENGTH PHOTOGRAPHY Line length

Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most Web pages violates a fundamental rule of book and magazine typography: the lines of text on most Web pages are far too long for easy reading. Magazine and book columns are narrow for physiological reasons: at normal reading distances the eye's span of acute focus is only about three inches wide, so designers try to keep dense passages of text in columns not much wider than that comfortable eye span. Wider lines of text require readers to move their heads slightly or strain their eye muscles to track over the long lines of text. Readability suffers because on the long trip back to the left margin the reader may lose track of the next line.

You can use invisible tables to restrict the text line length to about fifty to seventy characters per line . The exact character count is difficult to predict because of the way different browser software and operating systems display type sizes. In conventional print layouts, columns of thirty to forty characters per line are considered ideal.

In the end, the decision to restrict line length is a philosophical one. From a design standpoint, a measure that is comfortable for reading is good practice. One of the fundamental principles of the Web, however, is that users should be able to structure their own view. Users with a large monitor may not want their text blocks circumscribed if it means that a large portion of their screen goes unused. A low-vision user with fonts set large will not appreciate being forced to view long pages with short lines of text. So although leaving text free to fill the browser window may affect readability, following conventions may also affect the accessibility and legibility of your documents.

www.dartmouth.edu/~wug and www-3.ibm.com/ibm/easy

When designing a fixed-width layout, we typically use page layout tables with text cells no wider than about 365 pixels. If 12-point Times New Roman type is used, this cell width yields a line about fifty characters long, averaging about nine to ten words per line. We believe that this achieves the best balance between space efficiency and legibility. If you choose a flexible layout approach, use CSS leading controls to increase line spacing to 15 or 16 points . Additional line spacing allows a somewhat longer line length without sacrificing legibility.

source TYPOGRAPHY LINE LENGTH PHOTOGRAPHY http://webstyleguide.com

graphics graphics and network bandwidth photography

Photographer

GRAPHICS GRAPHICS AND NETWORK BANDWIDTH PHOTOGRAPHY Graphics and network bandwidth

Many Web users currently access their Internet service providers via 56 kilobits per second modems from their homes, offices, or remote work sites. At 56 KBps the actual download rate is only about 7 kilobytes per second . This means that a modest 36 KB graphic on your Web page could take five seconds or longer to load into the reader's Web browser. Actual data transmission rates will vary depending on the user's modem, Web server speed, Internet connection, and other factors, but the overall point is clear: the more graphics you incorporate, the longer the reader will have to wait to see your page. A full-screen graphic menu on your home page plus background graphics could leave your modem-based readers twiddling their thumbs for a full minute or more, even if they have a state-of-the-art modem and a good Internet connection. Look at your watch for a full minute, then decide whether you're willing to ask your users to wait this long when they visit your Web site.

A better strategy is to increase the graphics loading of your pages gradually, drawing users into your site with reasonable download times. As readers become more engaged with your content, they will be more willing to endure longer delays, especially if you give them notes about the size of graphics or warnings that particular pages are full of graphics and will take longer to download. At today's average modem speeds most pages designed for users dialing in from home should contain no more than 50 to 75 kilobytes of graphics.

Graphics and intranets
Luckily for graphic designers, many Web sites are created primarily for educational, organizational, and commercial users who access their local intranets and the larger World Wide Web from the school or office at Ethernet speeds or greater. Also, increasing numbers of home users now have access to higher-speed connections like DSL and cable modems. Graphics and page performance are also an issue for these users, but it makes little sense to restrict Web page graphics arbitrarily in the cause of "saving network bandwidth." The bandwidth gearheads always miss the point: graphics are what drew most people to the Web in the first place. If you've got the access speed, indulge!

source GRAPHICS GRAPHICS AND NETWORK BANDWIDTH PHOTOGRAPHY http://webstyleguide.com