Q. & A.: Style ConsciousSkip other details (including permanent urls, DOI, citation information)
This work is protected by copyright and may be linked to without seeking permission. Permission must be received for subsequent distribution in print or electronically. Please contact firstname.lastname@example.org for more information. :
For more information, read Michigan Publishing's access and usage policy.
While it might evoke images of late nights spiked with lots of caffeine and Maalox, the phrase "putting the issue to bed" at least used to guarantee some degree of closure. In the world of paper and ink, once copy was edited, layouts were complete, and galleys were checked, that was the end of the story.
Were life so tidy in the era of online publishing. Now putting an issue online is often the start of a cycle of updates and reader reactions that can assume a life of their own.
No matter the size or frequency of their publications, online publishers have to plan for such updates and feedback. One of the most important aspects of that planning is moving to ensure uniformity in the publication over time.
One key to uniformity is creating a style guide. In large operations, the style guide can be used to create templates into which updated information is automatically formatted. For smaller publishers, style guides take on a more prevalent role, offering day-to-day guidance as updates are created manually.
The Need for a Style Guide
My involvement in a project has brought home the importance of creating a style guide. The project, BaltimoreStories.com, began in fall 2001 as a collaboration of four classes at Towson University: Documentary Film and Video, Broadcast Journalism, Photojournalism, and my Writing for New Media class. Throughout the semester, students from the four classes worked in multimedia teams to find the best stories in six Baltimore neighborhoods. Partly, this project is an attempt for my suburban university to reconnect with the city of Baltimore; partly, it's an attempt to see how far multimedia storytelling can be taken in exploring a topic.
From the beginning, the BaltimoreStories.com project was conceived of as a "living magazine." That is, after the initial teams published their stories, the site would be regularly updated with multimedia work from subsequent classes — in some cases within other disciplines. New neighborhoods would be added as needed, and community residents would be invited to share their own stories.
There's where the trouble begins. During the inaugural semester of the project, we were fortunate enough to have a talented student designer — Kelly Janschek — to help put the pieces together in a pleasing, coherent design. Regular meetings between the faculty also allowed us to resolve key issues (e.g., the format for all multimedia) so the content would be uniform from one part of the site to the next.
After the initial issue was put to bed, however, Kelly would be out of the picture. Faculty who wanted to add student work to the site would have to ensure that new content conformed to the original work. That's the same problem many publishers face: changing staff members who need to ensure that new content blends seamlessly with the old. A style guide helps guarantee that uniformity.
A style guide is also critical when a site is being enhanced or redesigned. Different authors and coders can render sections of a site distinctly different; that leads to viewer confusion.
A style manual can be created on paper or online. Online guides have the benefit of being easily accessed and easily updated. Online style manuals can be created in the same format as the site itself, a step that will help uncover bugs in the design guidelines. One caution: If your style guide contains confidential information, you probably will want to password-protect it or put it on an intranet.
What Goes in a Style Guide?
In the rest of this piece, I'll use the example of the style guide we are creating for the BaltimoreStories.com project. (If you'd like to see the finished product, please check out http://www.baltimorestories.com/styleguide [formerly http://www.baltimorestories.com/styleguide].) The BaltimoreStories.com style guide has to convey information on several aspects of the online publication:
- Editorial style
- Branding and credit
- Page design
- HTML coding
- Digital audio
- Digital video
- Slide shows
- Accessibility concerns
- Online file directory structure
In addition, the guide would include the mission statement for the site — not something every would-be contributor will be familiar with — and links to useful Web-design resources. Finally, the guide also would include templates of the site's pages, clearly marked for insertion of new material.
Most of the topics that this guide addresses should be pertinent to any online publisher. Let's look at the scope of each section:
This section covers a range of topics related to preparation of editorial content (text) for the site. To start with, the section needs to address matters of punctuation, capitalization, acronyms and the like. The simplest way to handle this is to specify a common reference guide. In our case, that's The Associated Press Stylebook and Briefing on Media Law as the final word. In addition to thorough coverage of the topics listed here, the AP Stylebook contains a short but useful section on handling Internet terminology (e.g., how to spell "e-mail," how to cite a URL). Publishers of more scholarly material would likely choose a manual that specifies citation style, such as The Chicago Manual of Style.  In addition to (or in place of) such a guide, most publishers need a supplemental stylebook that covers local or specialized terminology. Putting such material online as a searchable guide increases the chances that contributors will actually use it. (For more on this topic, check out "Editorial Style and Usage." [formerly http://www.webreview.com/1998/02_06/webauthors/editorial.shtml])
Branding and credit:
Every publisher should strive to ensure that all content on a site is clearly branded as part of that site. This section should contain guidelines on creating page headers and footers and identifying rich-media content. For instance, with the BaltimoreStories.com project, we decided that every audio clip should end with the same "station identification," "You're listening to BaltimoreStories.com." And don't overlook the obvious: in our case, noting that proper style for any printed references is BaltimoreStories.com — with that precise capitalization and the dot-com ending.
This section should include as much information as possible about the look of the pages on the site: color palette; list style; and so on. A good example of such a section can be found in the online style guide for the Bibliographical Center for Research [formerly http://bcr.org/stylemanual/design.html], itself the subject of a recent article on the center's design of its style manual.
By now, no one should need to be told that clear navigation is critical to a site's usability. But as Jakob Nielsen has pointed out, too many navigational choices can be as confusing to a site visitor as can too few. Nielsen recommends giving users an indication of where they are in the site as well as the option of moving up a level on the site. Even on a site as simple as BaltimoreStories.com — with a mere three levels of pages — Kelly and I spent a good bit of time determining a workable navigation scheme:
- The home page offers links to each neighborhood table of contents page, as well as to the staff listing and our copyright notice. Finally, the page will offer a link to get the free RealPlayer.
- Each neighborhood table of contents (second-level) page offers a left-hand navigation bar with links to the home page and the remaining neighborhood contents pages (in a specified order). The body of the page offers links to content (third-level) pages containing each of the four types of content available for each neighborhood: text, audio, video, and photos.
- Each content page offers a left-hand navigation bar with links to the home page; the table of contents page for the current neighborhood; the other content pages for the current neighborhood; and the remaining neighborhood table of contents pages. The body of the page offers either actual content (for text pieces) or a summary and a link to the multimedia content (which is served via RealPlayer).
In addition to setting out these rules, the BaltimoreStories.com style guide will specify the rules for modifying that scheme as more content is added over time.
If you're fortunate enough to never have to get under the hood and deal with the HTML code on your site, you might wonder what there is to specify about it in a style manual. The answer is "a great deal." A style guide can address matters from the simplest (whether HTML tags should be capitalized or lowercased; whether attribute values should be placed in quotes) to more complex (how to create an em dash; what information to include in meta tags; what colors to use for hyperlinks) to ultra-technical (such as how to use server-side includes). In addition, this is where information on Cascading Style Sheets should be kept if they are used. Once again, the BCR Style Manual offers a great example page [formerly http://bcr.org/stylemanual/graphics.html]. And Molly Holzschlag raises some points worth considering in a column on her days at Microsoft.
Even the most text-heavy Web site includes some graphics. For the sake of consistency, a style guide should specify the size of graphics to be used on the site; the format of graphics; where graphics should be placed on the server; and requirements for IMG tags (e.g., including values for height, width and border as well as including alternative text for each image). If a color palette is used for a publication, it should be specified. The BaltimoreStories.com manual also will offer links to templates for the logo and text graphics used throughout the site, as well as to a template used to create the soft edges used on photos on the site. In all cases, it's important that templates be high-quality original PSD, TIF, PNG or uncompressed JPGs, not Web-optimized graphics that cannot be easily manipulated.
Consistent treatment of body copy and headings is vital to ensuring that a site looks professional. This section should specify the typefaces used in various elements of the site and any variations in color and size. This isn't just a matter of pleasing the eye; as the Yale Style Manual notes, "A consistent approach to the titling, headlines and subheads in your documents will aid your readers in navigating through a complex set of Web pages."In addition, the manual should specify typefaces, colors and sizes for any text graphics used in the site (this information can be linked to the online templates).
Multimedia is the heart of the BaltimoreStories.com project. The digital audio section of the style manual will specify the format used (RealAudio), the sampling rate, bit rate and mode. The manual will also explain the process needed to capture audio files to a computer and convert them to streaming format (*.rm); provide the code needed to create hyperlinks and companion locator (*.ram) files; and specify what directory *.rm and *.ram files should inhabit on the server.
Similar to the digital audio section, this section of the manual specifies format and settings for the video clips used on the site (including frame size — in our case, 192 by 144 pixels), as well as information on capturing, streaming and transferring files to the server.
To lower download time and prevent plug-in overload, we decided that photo essays should be delivered in the Real Slideshow format. That way, site visitors need only have a current version of the free RealPlayer to view or listen to any multimedia content on this site. Again, the style manual specifies settings, as well as information on capturing, converting, and transferring files to the server.
As I noted in a recent JEP column, accessibility of Web pages for all users is becoming an essential issue. This section of your style guide should provide guidance for making various types of Web content accessible to users with disabilities. For instance, this section might specify that all audio clips should be accompanied by text transcripts for those with hearing problems. This section can link to the graphics section's discussion of the ALT tag.
Online file directory structure:
Keeping things tidy on any but the smallest Web site requires attention to file structure from the get-go. Some aspects of this are straightforward: Video clips, for instance, should reside in the video subdirectory. But large projects might require subdividing even the subdirectories. And some files can wander around like lost souls if your manual doesn't specify homes for them. For instance, all RealMedia files require a companion *.ram file that simply lists the URL of the media (*.rm) file. For the sake of consistency, all *.ram files should be directed to the same place — perhaps a real subdirectory.
If you don't already have a style manual, it's worth your time to review some of the more popular ones. A good place to get started is Edit-Work.com's Recommended Style Manuals, Dictionaries, and Reference Books.
If you're looking to create a style manual of your own, you might want to check Lana Castle's "Style Meister: The Quick-Reference Custom Style Guide" [formerly http://www.castlecommunications.com/smbook.html]. In addition to including a variety of widely accepted guidelines in quick-reference format, the book also covers the process of creating custom style guides and supplies tools for organizing and tracking style decisions.
If you create your own manual, you'll need to pay attention to updating it, just as you update your site. If possible, appoint a style czar who can watch for new terminology, add new sections as the need arises and act as a court of last resort when questions come up that are not covered in your manual.
Thom Lieb is an associate professor of journalism and new media at Towson University in Baltimore. Among his courses is Writing for the Web. He is the author of Editing for Clear Communication and has written and edited for magazines, newspapers, newsletters and online publication. He holds a Ph.D. in Public Communication from the University of Maryland at College Park and a master's of science in Magazine Journalism from Syracuse University. You may contact him by e-mail at email@example.com.
2. Jakob Nielsen, "Is Navigation Useful?" Alertbox, 9 January 2000, http://www.useit.com/alertbox/20000109.html
3. Yale Style Manual-Editorial Style, http://www.info.med.yale.edu/caim/manual/pages/editorial_style.html
Links from this article:
BaltimoreStories.com Style Manual, [formerly http://www.baltimorestories.com/styleguide/]
BCR Web Site Style Manual, [formerly http://bcr.org/stylemanual/design.html]
BCR Web Site Style Manual example page, [formerly http://bcr.org/stylemanual/graphics.html]
Lana Castle, "Style Meister: The Quick-Reference Custom Style Guide," Independent Publishers Group, 2000, [formerly http://www.castlecommunications.com/smbook.html]
Edit-Work.com Recommended Style Manuals, Dictionaries, and Reference Books, http://www.edit-work.com/webstyleguide/booklist.html
Molly Holzschlag, "House Style at Microsoft: In Front of and Behind the Scenes," WebTechniques, September 1999, http://www.webtechniques.com/archives/1999/09/desi/
Brenda Kienan and Daniel A. Tauber, "Editorial Style and Usage," WebReview.com, 6 February 1998, [formerly http://www.webreview.com/1998/02_06/webauthors/editorial.shtml]
Thom Lieb, "Access Code Redux," Journal of Electronic Publishing, December 2000.
RealPlayer software, http://www.real.com/player/index.html?lang=&loc=&src=011011realhome_2
Real Slideshow software, http://www.realnetworks.com/products/slideshow/basic.html
Michael Sauers, "Style Guidance," WebTechniques, May 2001, http://www.webtechniques.com/archives/2001/05/sauers/