You are invited to participate in:
The Power of Self

Full details at: http://artistswanted.org/?tal

This competition is about your story, your images and the power they hold. From Salvador Dalí to Cindy Sherman the self has been the subject of most all the art world's greats. The self-portrait transcends medium, style and period, existing in the vast space between the personal and prophetic. We all have a self-portrait. Show us yours!
Our panel of judges including actor Steve Buscemi, director/producer Chris Weitz, Guggenheim Curator Helen Hsu and Flavorpill Founder Sascha Lewis will select one portfolio of self-portraits for The Grand Prize:

six months of FREE living at The Edge in New York City or $7007 cash
an art-star reception in New York City
international publicity
a feature in 3rd Ward Magazine

The public will also cast their vote and the highest rated portfolio will receive The People's Choice Award:

$1,000 in cash
an art-star reception in New York City
international publicity
This is your moment to be discovered, send us your best work: http://artistswanted.org/?tal
Deadline: January 14th, 2010 11:59 p EST.

Pameran Karya Siswa SMSR Di JNM

Sedikitnya 200 karya siswa kelas 3 SMSR Yogyakarta (SMK Negeri 3 Kasihan) digelar di Jogja Nasional Museum (JNM) Gampingan Yogyakarta, 9 - 13 Juni 2009. Karya-karya yang dipamerkan merupakan hasil tugas akhir (TA) siswa kelas 3 program keahlian Seni Lukis, Seni Patung, Desain Grafis, Kria Kayu, dan Kria Keramik.

Kepala Sekolah Haris Wahyudi mengatakan, pameran tugas akhir selalu diupayakan digelar di luar kampus, meskipun sekolah sudah memiliki galeri yang cukup representatif buat pameran. Tujuan utama pameran menurut Haris agar siswa lebih percaya diri dan memiliki pengalaman berpameran di tempat yang telah dikenal publik. Lebih dari itu, pameran bertujuan agar nama SMSR Yogyakarta yang sudah dikenal masyarakat ini dapat tetap eksis.

Pameran tugas akhir ini dibuka oleh Suwarno Wisetrotomo, pengamat seni rupa yang juga alumnus SMSR Yogyakarta. Dihadiri oleh mitra kerja, Komite Sekolah, dan seluruh orang tua/wali siswa kelas 3. Pada event ini sekaligus dilakukan upacara penyerahan siswa kepada orang tua sebagai wujud pertanggungjawaban sekolah terhadap pelanggan.

Pagelaran batik ala Harajuku pukau ratusan anak muda Jepang

Minggu, 30 Nopember 08 Tokyo, Koran Internet:
Tepuk tangan riuh diiringi hentakan musik hip-hop menjadi saksi kemeriahan pagelaran busana batik bergaya Harajuku (busana kontemporer anak muda Jepang) yang dihadiri sekitar 200 kawula muda Jepang yang memadati sebuah klub malam di kawasan Roppongi, Tokyo, Sabtu malam. Sebanyak 44 koleksi dari perancang busana Tiarma Sirait ditampilkan oleh belasan model cantik dan langsing asal Jepang, sebagai bagian dari acara peringatan 50 tahun hubungan persahabatan Indonesia - Jepang. Setiap kali sejumlah model tampil di atas catwalk, decak kagum dan tatapan mata pengunjung tidak pernah lepas dari lenggak-lenggok gerakan para model yang malam itu mengenakan batik dengan warna yang mencolok mata berpadu dengan corak batik yang saling "bertabrakan" . "Heeee, sugoi (hebat, red)," begitu komentar seorang gadis muda Jepang usai menyaksikan pagelaran yang dihadiri juga oleh kalangan diplomat, wartawan dan juga sejumlah pebisnis muda Jepang. "Saya memang sengaja membuat busana batik untuk kalangan anak muda Jepang, kalangan yang dengan mudah untuk tertarik dengan sesuatu yang baru," kata Tiarma Sirait kepada Antara usai pagelaran. Tiarma yang baru saja mendapat penghargaan bergengsi dari Olympic Fine Art atas karya lukisnya itu begitu tertarik menggelar pameran busana batik yang menargetkan kaum muda Jepang. Begitu mendapat tawaran dari Javarism, panitia yang menggelar acara tersebut, ia langsung saja menyatakan setuju. "Memperkenalkan Indonesia saat ini tentu memerlukan cara yang lebih kreatif. Batik bergaya Harajuku bisa menjadi awal perkenalan akan Indonesia dari cara yang bisa diterima kalangan muda Jepang," kata Tiarma yang juga memboyong sebanyak 200 karyanya untuk dijual pada malam itu. Menurut dia batik memang sudah cukup dikenal di Jepang, tetapi belum menjadi suatu fashion pilihan, padahal potensi batik untuk menjadi busana dunia sangat luar biasa. Tokyo, sebagai salah satu bagian dari tren mode dunia merupakan tempat yang perlu terus dipilih sebagai ajang pagelaran batik agar memiliki gaung yang juga mendunia. Sementara itu, Dubes Jusuf Anwar mengemukakan bahwa pagelaran "Harjutik" atau perpaduan gaya Harajuku dan batik merupakan keberanian anak muda Indonesia untuk menampilkan karya kreatifnya di luar negeri. "Memperkenalkan Indonesia tidak selalu melalui acara-acara resmi, tetapi pagelaran seni busana juga bisa menjadi ajang diplomasi yang baik untuk mengenalkan Indonesia secara berbeda," kata mantan menteri keuangan itu. (Mnr/Ant)

Tiarma SiraitKomp. PPR - ITB Blok F no.10
Dago BengkokBandung 40135 INDONESIA POLENG STUDIO
Tel: +62 22 91760013 and +62 22 2504013 Fax: +62 22 2516473 or +62 22 2504013
email: polengstudio@ yahoo.comhttp://tiarma. multiply. com/Tiarma Sirait / tiarma@gmail. com / +62 81931413838 (idn) / tiarma sirait (skype) / polengstudio (ym) /

rakhmat supriyono, INDONESIA AGAINST PORNOGRAPHY (?), 145 X 145 cm, oil on canvas, 2008

Photographer

source

editorial style online style photography

Photographer

EDITORIAL STYLE ONLINE STYLE PHOTOGRAPHY Online style

For most Web writing you should assume that your carefully crafted prose will not be read word by word. This is not the case, of course, for texts such as journal articles or teaching materials: in many cases these more complicated texts will be printed and read offline. But most online information is best presented using short segments of texts written in a clear, concise style and with ample use of editorial landmarks.

Prose style

Our writing style example below explains the steps involved in creating a successful Web site. The first style is vague and verbose. The second is concise: we simply list the facts. It is this second writing style that is most suitable for Web documents. Most Web readers are looking for information, and they find it not by reading a Web page word by word but rather by scanning the page for relevant items.

Vague and verbose. You must read every word in this paragraph in order to understand the steps involved in creating Web sites:

Web site development is a complex process that involves many steps and tasks that range from budgeting to design and evaluation. First, you need to define the scope of your project and determine a budget for site development. Then you need to survey and map the structure of your information. The next step is to establish a look and feel for your site, and then comes the actual construction of your site. Once your site is finished you need to make sure people know that it's there and how to find it. Finally, you should spend time evaluating your site's effectiveness. As you embark on the process of developing a Web site, keep these steps in mind and make sure that you have the organizational backing, budget, and personnel you need to make the project a success.

Concise and factual. In this version, we turned the wordy explanation of the process into a concise list of steps to follow:

The process of developing a Web site generally follows these steps:

Site definition and budgeting
Information architecture
Site design
Site construction
Site marketing
Tracking and evaluation

Before beginning to develop a Web site, make sure you have the organizational backing, budget, and personnel you need to perform these steps successfully.

Other stylistic considerations

Be frugal. Make sure that the text you present is worth something to the reader. Avoid empty chatter like welcome text or instructions on how to use the site. Users should be able to determine who you are by your navigation and page design, and your interface should be clear enough that it doesn't require instructions. Don't use the first paragraph of each page to tell users what information they'll find there. Instead, start with the information, written in the concise and factual prose style shown above.
Stick to the point. Write in easily understood sentences. Steer clear of clever headings and catchy but meaningless phrases that users must think about and explore further to understand.
Cultivate a voice. Web readers welcome a measure of individuality from their information sources. With so many competing sources, a unique voice may help distinguish your pages, but beware of going "over the top." When it comes to attitude, there is a fine line between engaging and annoying.
Think globally. Remember that you are designing documents for the World Wide Web and that your audience may not understand conventions specific to your little corner of the world. For example, when including dates, use the international date format of day / month / year . Also, avoid metaphors and puns that may make sense only in the context of your language and culture.

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

typography consistency photography

Photographer

TYPOGRAPHY CONSISTENCY PHOTOGRAPHY Consistency

As in traditional print publishing, high-quality Web sites adhere to established type style settings consistently throughout the site. Consistency gives polish to a site and encourages visitors to stay by creating an expectation about the structure of a text. If sloppy, inconsistent formatting confounds this expectation, you will confuse your readers and they may not return.

You should decide on such settings as fonts, inter-paragraph spacing, the size of subheads, and so on and then create a written style guide to help you maintain these settings as you develop the site. This step is especially critical for large sites that incorporate numerous pages.

If you choose to use CSS you will have powerful tools to maintain the consistency of styles throughout your site. This is particularly true if you opt to use a master style sheet for your whole site via the "Link" option in CSS .

Example: Plain HTML page


Example: Page with HTML and CSS

source TYPOGRAPHY CONSISTENCY PHOTOGRAPHY http://webstyleguide.com

site design chunking information photography

Photographer

SITE DESIGN CHUNKING INFORMATION PHOTOGRAPHY "Chunking" information

Most information on the World Wide Web is gathered in short reference documents that are intended to be read nonsequentially. This is particularly true of sites whose contents are mostly technical or administrative documents. Long before the Web was invented, technical writers discovered that readers appreciate short "chunks" of information that can be located and scanned quickly. This method for presenting information translates well to the Web for several reasons:

Few Web users spend time reading long passages of text on-screen. Most users either save long documents to disk or print them for more comfortable reading.
Discrete chunks of information lend themselves to Web links. The user of a Web link usually expects to find a specific unit of relevant information, not a book's worth of general content. But don't overly subdivide your information or you will frustrate your readers. One to two pages of information is about the maximum size for a discrete chunk of information on the Web.
Chunking can help organize and present information in a uniform format. This allows users not only to apply past experience with a site to future searches and explorations but also to predict how an unfamiliar section of a Web site will be organized.
Concise chunks of information are better suited to the computer screen, which provides a limited view of long documents. Long Web pages tend to disorient readers; they require users to scroll long distances and to remember what is off-screen.

The concept of a chunk of information must be flexible and consistent with common sense, logical organization, and convenience. Let the nature of the content suggest how it should be subdivided and organized. At times it makes sense to provide long documents as a subdivided and linked set of Web pages. Although short Web documents are usually preferable, it often makes little sense to divide a long document arbitrarily, particularly if you want users to be able to print easily or save the entire document in one step.

Hierarchy of importance
Hierarchical organization is virtually a necessity on the Web. Most sites depend on hierarchies, moving from the most general overview of the site , down through increasingly specific submenus and content pages. Chunks of information should be ranked in importance and organized by the interrelations among units. Once you have determined a logical set of priorities, you can build a hierarchy from the most important or general concepts down to the most specific or detailed topics.

Relations
When confronted with a new and complex information system, users build mental models. They use these models to assess relations among topics and to guess where to find things they haven't seen before. The success of the organization of your Web site will be determined largely by how well your system matches your users' expectations. A logical site organization allows users to make successful predictions about where to find things. Consistent methods of displaying information permit users to extend their knowledge from familiar pages to unfamiliar ones. If you mislead users with a structure that is neither logical nor predictable, they will be frustrated by the difficulties of getting around. You don't want your users' mental model of your Web site to look like this:

Function
Once you have created your site, analyze its functionality. Efficient Web site design is largely a matter of balancing the relation of menu, or home, pages with individual content pages. The goal is to build a hierarchy of menus and pages that feels natural to users and doesn't mislead them or interfere with their use of the site.

Web sites with too shallow a hierarchy depend on massive menu pages that can degenerate into a confusing "laundry list" of unrelated information:

Menu schemes can also be too deep, burying information beneath too many layers of menus. Having to navigate through layers of nested menus before reaching real content is frustrating:

If your Web site is actively growing, the proper balance of menus and content pages is a moving target. Feedback from users can help you decide if your menu scheme has outlived its usefulness or has weak areas. Complex document structures require deeper menu hierarchies, but users should never be forced into page after page of menus if direct access is possible. With a well-balanced, functional hierarchy you can offer users menus that provide quick access to information and reflect the organization of your site.

Summary
The most important step in planning your site is to organize your information. Thinking carefully about what you want to say and how you want to say it requires that you become intimately acquainted with your site content. Create outlines, chunk your information into sections and subsections, think about how the sections relate to one another, and create a table of contents. This exercise will help immensely when it comes time to build the individual pages of your site and may determine the eventual success of your Web site.

A well-organized table of contents can be a major navigation tool in your Web site. The table is more than a list of links — it gives the user an overview of the organization, extent, and narrative flow of your presentation:

www.kodak.com

source SITE DESIGN CHUNKING INFORMATION PHOTOGRAPHY http://webstyleguide.com

site design resource lists, other related sites pages photography

Photographer

SITE DESIGN RESOURCE LISTS, OTHER RELATED SITES PAGES PHOTOGRAPHY Resource lists, "other related sites" pages

The World Wide Web is growing so rapidly that even the large commercial Web index services such as Yahoo! and Excite are only partial listings of the information accessible through the Web. When authors begin to build Web sites, their first page is often a collection of favorite links to sites related to their profession, industry, or interests. In a corporate or institutional site, a well-edited, well-maintained "Other useful sites" page may be the most valuable and heavily used resource.

source SITE DESIGN RESOURCE LISTS, OTHER RELATED SITES PAGES PHOTOGRAPHY http://webstyleguide.com

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