http://tc.eserver.org/dir/Design/Web-Design/Document-Design A listing of the most recently indexed works about Design and Web Design and Document Design in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Design/Web-Design/Document-Design http://tc.eserver.org/35210.html http://tc.eserver.org/35210.html As help systems continue to evolve, whatever name they are called, we will increasingly have to face responsibility for their content, and bring their expertise to what we write. The new systems provide us with all the required tools that tell us the problems with their content. It is up to us to leverage that information to provide better content, and act as ambassadors for products that we write. If writers can go a step ahead, and use their help information to sell products, and reduce the burden on customer support, we would have truly arrived. http://tc.eserver.org/35190.html http://tc.eserver.org/35190.html This Fast Track tutorial demonstrates two methods to call Context-Sensitive Help in a Web Form. We'll discover how Unobtrusive DOM/JavaScript achieves the desired result in calling Context-Sensitive help, and demonstrate how to keep the Structure, Presentation, and Behavior layers of a web page completely separate from one another ensuring good practice with current web standards and accessibility rules. http://tc.eserver.org/35174.html http://tc.eserver.org/35174.html It’s time we came to grips with the fact that not every “document” can be a “web page.” Some forms of writing just cannot be expressed in HTML—or they need to be bent and distorted to do so. But for once, XML might actually help. http://tc.eserver.org/35158.html http://tc.eserver.org/35158.html When it comes to an about page, think outside the box. Try to think of something new and creative that’s different form the rest of your site. Of course display images of you / your staff, and descriptions of each, but try to lay it out in a very fun way, whistle keeping it clean and readable. http://tc.eserver.org/34464.html http://tc.eserver.org/34464.html In several recent websites we have user tested, the site designers have placed important task critical links and information on the right hand side (RHS) of three column page layouts. The user testing was conclusive, users ignore any information presented on the RHS. We think this is a similar effect to the well documented banner blindness. It is essential to ensure that import links or information is not positioned on the RHS as they will surely be ignored. http://tc.eserver.org/34100.html http://tc.eserver.org/34100.html Fluid layouts are an undervalued commodity in web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of web designers. http://tc.eserver.org/33964.html http://tc.eserver.org/33964.html Positioning is perhaps one of the most misunderstood parts of CSS 2. Let us look a little closer at how it works. http://tc.eserver.org/33965.html http://tc.eserver.org/33965.html Pozycjonowanie z kolei jest jednym z najczęściej mylnie interpretowanych aspektów wersji 2 CSS. Przyjrzyjmy się zatem nieco bliżej temu, jak ono działa. http://tc.eserver.org/33966.html http://tc.eserver.org/33966.html Hizalama ise CSS 2’nin belki de en yanlış anlaşılmış bölümlerinden biridir. Şimdi nasıl çalıştıklarına biraz daha yakından bakalım. http://tc.eserver.org/33967.html http://tc.eserver.org/33967.html This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts. http://tc.eserver.org/33941.html http://tc.eserver.org/33941.html Fluid layouts are an undervalued commodity in web design. They put control of our designs firmly in the hands of our users and their browsing habits. They’ve also utterly failed to seize the imagination of web designers. http://tc.eserver.org/33694.html http://tc.eserver.org/33694.html I have been playing around with Crucible, Atlassian’s peer code review tool. The latest version of Crucible allows you to review Confluence wiki pages. This is a new feature, so I decided to try it out. Also, I was wondering why you might want to use an independent tool to review a wiki page, when you could instead just add comments to the page or update the page directly. http://tc.eserver.org/33227.html http://tc.eserver.org/33227.html Designing the page layouts for a new or redesigned intranet can be complex. One of the most difficult aspects is creating the first layout. Starting with an empty screen, you need to determine what will go on each page and where it will go. Using a strawman design - a design that is created with the intent of discarding it - can help to overcome many of the difficulties in the design process. http://tc.eserver.org/33228.html http://tc.eserver.org/33228.html Visual communication can be thought of as two intertwined parts: personality, or look and feel, and visual organization. The personality of a presentation is what provides the emotional impact —your instinctual response to what you see. Creating an appropriate personality requires the use of colors, type treatments, images, shapes, patterns, and more, to “say” the right thing to your audience. This article, however, focuses on the other side of the visual communication coin: visual organization. http://tc.eserver.org/33233.html http://tc.eserver.org/33233.html It appears that about one out of five Web sites (only 20%) currently are designed using a "Fluid" layout. Unfortunately, the layout most preferred by users, the "Fluid" layout, is the one implemented least often by designers. http://tc.eserver.org/33145.html http://tc.eserver.org/33145.html Designing grid systems for print is considerably more straight forward than designing grid systems for the web. First off,in print, the designer has a fixed media size - the paper size (or packaging, poster, whatever). Let's say a print designer has designed a magazine. The reader of this magazine can't suddenly increase the font size if they find it difficult to read - well they just move it closer to their eyes I guess. This is just one consideration, there are more but I'm sure you get the point. http://tc.eserver.org/33146.html http://tc.eserver.org/33146.html Fixed width grid design for the web. What is it, how do we do it and how do we implement it? For the purposes of this article, I'm going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I'm not going to. There are just so many resources and books available telling you how to create the CSS layouts you need—I'll touch on it, but I won't be going into too much detail. http://tc.eserver.org/33147.html http://tc.eserver.org/33147.html Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won't find the answers to those questions here. What I'm aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page. http://tc.eserver.org/32504.html http://tc.eserver.org/32504.html The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing – and it often is – but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer. http://tc.eserver.org/32434.html http://tc.eserver.org/32434.html Every web designer should know and understand a Web site’s parameters before lifting a finger to start designing the site. In this article, you will learn the basics required to start designing business Web sites. While this information is useful if you want to build sites for others, it can also serve as a checklist article for sites you want to build for yourself. http://tc.eserver.org/32395.html http://tc.eserver.org/32395.html Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS. http://tc.eserver.org/32405.html http://tc.eserver.org/32405.html Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started. http://tc.eserver.org/31974.html http://tc.eserver.org/31974.html Several years ago, someone used the term WYSIOP (What You See Is One Possibility) when talking about the RoboHelp HTML editor, because what developers saw in the editor didn't usually match the results. I had what I thought was an absolutely brilliant leap of logic ;-) a couple of months ago when I realized that today's WYSIWYG (What You See Is What You Get) editors are really WYSIOP, because the results are determined by whatever layout template is assigned at the time the results are viewed. http://tc.eserver.org/31740.html http://tc.eserver.org/31740.html In Publishing 2.0, Tim O'Reilly says Web 2.0 is 'any network effect that makes a system better the more people use it.' Web 2.0 isn’t just user-generated content; it’s harnessing the collective intelligence of your users to make your system better. http://tc.eserver.org/30766.html http://tc.eserver.org/30766.html Every webmaster nourishes the dream that his or her website will make it the big way. This is very much human because people carry out any task in ardent hope. What is more human out here is that earthy fellows like us base our aspirations more on speculation rather than specific set of steps undertaken to bring the dream a bit closer to reality. And this is not all, particularly in case of growth of a site which brings newer problems in the wake of its growth. It cannot be disputed that you can probably get some good web hosting on economy price. But if you expect top of the line service on this price, acknowedge gracefully that your are just asking for the moon. Probably you are not catching up with wisdom that business needs decisive investments. http://tc.eserver.org/29535.html http://tc.eserver.org/29535.html An overview of web design methods, including a survey of questions one should ask during the process. http://tc.eserver.org/28795.html http://tc.eserver.org/28795.html This podcast talks about the convergence of web 2.0 with help documentation. It mentions examples of Web 2.0 sites, such as Flickr, Payscale, and Digg, and what help files need to incorporate these same Web 2.0 features. http://tc.eserver.org/28709.html http://tc.eserver.org/28709.html A project I recently worked on required an elastic layout with two columns of equal height, each with a different background color. As usual, there was no way to tell which column would be taller. I immediately thought of Dan Cederholm's Faux Columns, but I needed an elastic layout. I also looked at the One True Layout, but this seemed buggy and required too much extra markup and too many hacks for my taste. http://tc.eserver.org/28713.html http://tc.eserver.org/28713.html Sometimes, as in web design, it's difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters. http://tc.eserver.org/28653.html http://tc.eserver.org/28653.html A print stylesheet will automatically make all your web pages print-friendly. Find out how to make one with this definitive guide. http://tc.eserver.org/28433.html http://tc.eserver.org/28433.html Grouping similar elements helps the brain quickly decode a page layout. Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping. http://tc.eserver.org/28448.html http://tc.eserver.org/28448.html HTML tables should only be used to display data in tabular form. This tutorial explains how to create tables in HTML properly. http://tc.eserver.org/28435.html http://tc.eserver.org/28435.html There is a natural flow to many visual interactions - the flow of a visual dialogue between page your features and your user's private mental commentary. http://tc.eserver.org/28434.html http://tc.eserver.org/28434.html Aside from alignment and grouping, elements can be linked using rhythm: a regular or irregular repetition of common stylistic features. http://tc.eserver.org/28400.html http://tc.eserver.org/28400.html Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page. http://tc.eserver.org/28397.html http://tc.eserver.org/28397.html Attention mapping is a tool to help you start to plan a visual layout around realistic communication between user and site. It can also be a helpful analysis tool, helping you work out what's wrong about a layout. http://tc.eserver.org/28399.html http://tc.eserver.org/28399.html 'Containment' is the effect where one or more elements is shown as part of a group or category, through a visual mechanism. http://tc.eserver.org/28398.html http://tc.eserver.org/28398.html The way elements are arranged on screen carries lots of meaning that we interpret subconsciously when decoding web pages. http://tc.eserver.org/28336.html http://tc.eserver.org/28336.html Most users spend a considerable amount of time scanning rather than reading information on Web sites. Well-designed headings help to facilitate both scanning and reading written material. Designers should strive to use unique and descriptive headings, and to use as many headings as necessary to enable users to find what they are looking for--it is usually better to use more rather than fewer headings. Headings should be used in their appropriate HTML order, and it is generally a good idea not to skip heading levels. http://tc.eserver.org/28331.html http://tc.eserver.org/28331.html All Web pages should be structured for ease of comprehension. This includes putting items on the page in an order that reflects their relative importance. Designers should place important items consistently, usually toward the top and center of the page. All items should be appropriately aligned on the pages. It is usually a good idea to ensure that the pages show a moderate amount of white space—too much can require considerable scrolling, while too little may provide a display that looks too 'busy.' It is also important to ensure that page layout does not falsely convey the top or bottom of the page, such that users stop scrolling prematurely. http://tc.eserver.org/28228.html http://tc.eserver.org/28228.html This article is based on my presentation at the Institute of Scientific and Technical Communicators' annual conference in October, 2006. Every now and then, there is a change in the value of what technical authors deliver. These are moments when organisations pay attention to technical documentation. This is because they recognise that these changes mean they can create something that will be of real value to the business and to their customers. In recent years, there have been three "waves of interestingness". The first wave was the introduction of Windows Help (WinHelp). The second major wave was the introduction of the Internet and intranets. This was a time when organisations looked at how they could transfer large amounts of information from paper to online. They were faced with issues such as how users could access and understand all this information easily - issues that technical communicators deal with on a day-to-day basis. I believe we're just about to approach the new wave, which we have called "Tech Writing 2.0". http://tc.eserver.org/27932.html http://tc.eserver.org/27932.html You can't always count on having a professional designer around to resize and position your images for you, but you'd rather your page layout didn't look like it was created by orangutans. Harvey Kane builds a script that makes your life easier. http://tc.eserver.org/27930.html http://tc.eserver.org/27930.html When the browser is told to center a background image within that container, it has to decide where the actual center lies. In the case of an odd total pixel width, the browser must select one side or the other of the central odd pixel as the "center" of the container. http://tc.eserver.org/27927.html http://tc.eserver.org/27927.html A site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes. http://tc.eserver.org/27658.html http://tc.eserver.org/27658.html The web allows us to easily provide updated documentation to our users, but why stop there? There is more to making users successful quickly than just providing documentation. By creating a complete 'Answer Station' that is accessible from the application or product, we can not only direct users to that updated documentation, but we can also provide information about technical support, consulting, training, sales, etc. This article discusses writing a proposal for an Answer Station, determining content, working with other departments to gather information, designing the site, making that design work with an existing corporate website, dealing with tool issues, and finally, going live. http://tc.eserver.org/25619.html http://tc.eserver.org/25619.html Good organization, complete information, and clear writing are, of course, key to the success of any design document, but there are some other, less-obvious techniques you can use to make your documents more readable and understandable. Here are a few of them. http://tc.eserver.org/23907.html http://tc.eserver.org/23907.html Accomplished print media communicators -- technical writers, editors, etc. -- represent a powerful resource in the fledgling development of the World-Wide Web. But they also face some of the steepest barriers to exploiting its technology effectively, precisely because they have more to un-learn. Many of the mechanical and technical skills they rely upon every day simply don't translate well to document design on the Web. http://tc.eserver.org/23264.html http://tc.eserver.org/23264.html Turning 'help' systems and 'browsers' into robust structured-document viewers: the DocBrowser. http://tc.eserver.org/23216.html http://tc.eserver.org/23216.html This interview focuses on Jesse James Garret's Visual Vocabulary, a site architecture documentation standard. http://tc.eserver.org/22651.html http://tc.eserver.org/22651.html Your product is almost ready for release. You're about to pat yourself on the back when you realize that you have no user documentation! Panic sets in. http://tc.eserver.org/21564.html http://tc.eserver.org/21564.html When I worked for a large insurance company, my team as tasked with re-designing the customer service area for a external Web site that supports annuities and mutual fund customers. I proposed redesigning the entire site including an actual help system (like with ones you can create with RoboHelp) to reduce customer service support calls. I was really surprised that everyone thought this was such a novel idea -- I thought it made perfect sense. Then, it hit me -- you don't see a lot of help systems for Web sites. http://tc.eserver.org/20551.html http://tc.eserver.org/20551.html Technical communicators around the world are turning to the World Wide Web us their primary delivery agent for on-line documentation. The transition from older forms of on-line documentation to HTML-based documents pre - sents new challenges in every phase of the documentation process: document creation, layout, access, and especially hypermedia capability The constant development of new web tools presents an even greater challenge for an organization seeking to stay abreast of technology with an ever decreasing budget. This panel will outline the basic steps in migrating to the web while focusing on one organization’s solution to meeting the challenges of restructuring its on-line documentation for web migration. http://tc.eserver.org/20287.html http://tc.eserver.org/20287.html Web knowledge bases offer an excellent platform for delivering technical documentation and customer support information. They also represent an area of great opportunity for technical communicators to expand their skills, satisfy their customers, and create value for their employers or clients. This session explores the components of a web knowledge base and the tasks involved in planning and building one. http://tc.eserver.org/19958.html http://tc.eserver.org/19958.html In 2000, the Hitachi Technical Information Department carried out a large-scale documentation project requiring the revision of 47 English manuals (about 15,000 pages) and production of the manuals in both paper and HTML formats. Many projects of this size would normally use more complex software and file formats, such as FrameMaker and SGML. However, most of the English manuals were already in Microsoft Word (hence forth 'Word') format, and we decided to use Word 2000 to convert the manual document files into HTML files directly. The presentation discusses solutions to problems encountered in this HTML conversion project. http://tc.eserver.org/19917.html http://tc.eserver.org/19917.html This is a story of how one internal project at Sun Microsystems migrated printed user and reference documentation to an internal Web site. The principle architect of this site discusses how she applied object-oriented design concepts to the Web architecture to accommodate many learning styles simultaneously. As important as the successes of this project are its failures, which offer some insight into when and how to use the World Wide Web as a communication vehicle in your overall communication strategy. http://tc.eserver.org/19901.html http://tc.eserver.org/19901.html To key to achieving a successful online documentation implementation on the intranet is to understand that the resulting system is indeed a 'system.' The need for well-written, formatted and structured documents is necessary but the interactive framework in which those documents exist is equally important. It is crucial to understand the role of each individual involved in the system from Reader to Author and I.T. provider. http://tc.eserver.org/13105.html http://tc.eserver.org/13105.html Manufacturers are currently grappling with determining whether they should put safety information on the Web and if they do how it should be presented. Technical communicators, Web content developers, and Web designers will ultimately be responsible for the presentation of Web-based safety information. This article discusses special considerations that should be given the formatting (HTML, PDF, etc.), design, (font, size, and color), and location of safety information on the Web. Additionally, areas for future research on the issue of Web-based safety information are identified.