« dojo.moj.oe: parody of script.aculo.us homepage in Dojo
Safari now available on Windows »

Voice and Tone: Writing to reflect your personality as well as your message (Part 1)

Voice and Tone: Writing to reflect your personality as well as your message (Part 1)
Last week someone posted a question to the WordNerds group regarding the importance of voice and tone in writing. In particular she wanted to know how to convey the importance of voice and tone to colleagues who aren’t professional writers. Not having covered this topic previously I thought I’d give it a go.

scale.jpg
Scale of tone? Or is there more to it?

Last week someone posted a question to the WordNerds group regarding the importance of voice and tone in writing. In particular she wanted to know how to convey the importance of voice and tone to colleagues who aren’t professional writers. Not having covered this topic previously I thought I’d give it a go.

Voice and Tone, is there a difference?

After prowling the Web looking for various references on the subject I’ve found that opinions differ on this. Some treat the terms interchangeably, while others see key distinctions. For the purpose of this blog, I will define voice to represent the personality and/or style of the writer and tone to reflect the mood or attitude of the writing in relation to its audience and goal. Today I’ll focus on tone.

Tone and formality

Writers often think of tone as a measure of formality, striking a more serious mood and style for an academic paper, a not-as-serious mood (the equivalent of business casual clothing) for an informative blog entry and a light mood and casual style for an e-mail to a friend. They do this in regard to their audience and publication as though there were a corresponding scale that shows that serious, matter-of-fact writing is taken more seriously by peer-reviewed journals and professors, while a laid-back tone is more welcomed by friends.

While this makes sense to a degree, I’m not sure that such a scale is accurate. When deciding whether a writer is well-informed and making a good case, I’m more likely to consider how the information is organized, the logic of the arguments made, and any related sources, than I am the seriousness of tone. Where I will consider the tone is when it comes to readability. Is the piece so dry that I’m asleep before I finish? Does it match the subject matter? Is it appropriate to the message or does it make the writer seem disingenuous? Some writers will strike a serious tone to seem more authoritative, when in fact that tone seems false, making us question—rather than trust—the authority.

When matching seriousness of tone to audience it’s equally important to match the tone to our goals. Are we writing to inform? To persuade? To warn? To amuse? To console?

If I were writing guidelines for the safe-handling of sodium, my first instinct might be to take a very serious tone. Sodium is dangerous, it shouldn’t be touched by human hands, mixed with water, bla bla bla. Yet, if I’m giving these guidelines to students, I want them to pay attention, both to keep them safe and to keep them interested. While I want to make sure they don’t hurt themselves, I also don’t want to scare them away from the study of chemistry. Rather than just giving them somber warnings about explosions, perhaps it would be appropriate to follow the example of Theodore Gray—who documented his sodium party experiments in text and video. Gray’s tone is moderately serious with a hint of humor, clearly demonstrates the dangers of sodium, yet still makes one want to learn more about it. Had he kept his tone too serious or dry no one would have paid much attention, but by striking the right balance, his story was passed along and mentioned in Slashdot and other media.

Tone and attitude

To be serious, or not, is but one measure of tone. Plenty of people stop there, but I think there is much more to it. Humorous writing may be sarcastic, flippant, silly or ironic (among others). Complaints can be angry, bitter, sad, cautious, polite, intense, etc. Tone comes in a wide range of attitudes, some of which may overlap. This is where things get tricky. It’s (relatively) easy to write something that sounds serious and professional. That’s the tone I’ve used so far today. But have I struck the right mood? In taking a straightforward approach to the topic, am I sounding condescending or collegial? Pedantic or informative? Have I so bored you that you’re now asleep—dreaming that your lobster ice-cream franchise failed because you just couldn’t compete with your rival’s spicy crab cones?

These are the questions I must ask myself. When I re-read something, I’ll question the mood. Is it too dry? Too goofy? Too dark? Does it suit the topic? Will it engage the reader? Today the fight has been to avoid being too dry or condescending. My goal is to offer some friendly advice, not to come off as some authoritarian know-it-all. To capture the right mood, I’ll need to keep tweaking things. I’ll replace sentences like:

“Writers are often confounded by such nuances.” (Man, that sounds pompous.) with “This is where things get tricky.”

Then I’ll make sure that I’ve used contractions and added a few quirky ideas—such as the bit about the lobster ice-cream. Perhaps I’ll also switch perspective. Notice how the bits I’ve written in first person seem more friendly than those in third person? Vocabulary, perspective and punctuation can all color the tone of the text. With that in mind I’ll keep reading and tweaking until it sounds good enough to post. Good enough depends on your objective—given my time restraints I’ll spend less time polishing a blog entry than I might an article for print publication. (That’s my disclaimer in case I still didn’t get the mood spot on!)

Recommendations

Choosing a tone, writing, then editing to reflect that tone seems to be what works best for me. It also helps to let someone else read your work. They may notice an attitude that you didn’t. When they suggest a change to a word or phrase, take it under consideration. As writers we’re often protective of our work, but if we’re writing to be read, then we need to listen to our readers. They won’t always be right, but they won’t always be wrong either. Viewing your work through their eyes, will give you a new perspective, and often some very good ideas.

Also remember, you don’t always have to sound serious to be taken seriously.

Voice and Tone Resources

To learn more, read Part 2: Voice

Usenet Newsgroups: Anachronistic Service or Useful Communication Tool?
Earlier this week ITS announced that it would be taking down the Usenet news server as of December 5, 2007. In a fit of nostalgia, I opened up my newsreader (Mozilla) to leave a farewell message on cwru.general. Oddly enough, my message got a response; others (not many) were still using Usenet! This led me to wonder what had happened to newsgroups. Did the generation that grew up on the Web not know about newsgroups, or did they know about them but prefer the Web? In this age of Web 2.0, where some update their Facebook status by the hour, users pose questions on discussion boards such as http://forum.case.edu, and writers merge their Twitter, Pownce and Jaiku posts into central RSS feeds that can be shared on their Tumblr blogs, is there still a place for Usenet news?

Seamonkey Reader

Google Groups
alt.politics.usa.constitution as seen in
Seamonkey (above) and Google Groups (below).
Click on the images to enlarge.

Earlier this week ITS announced that it would be taking down the Usenet news server as of December 5, 2007. In a fit of nostalgia, I opened up my newsreader (Mozilla) to leave a farewell message on cwru.general. Oddly enough, my message got a response; others (not many) were still using Usenet! This led me to wonder what had happened to newsgroups. Did the generation that grew up on the Web not know about newsgroups, or did they know about them but prefer the Web? In this age of Web 2.0, where some update their Facebook status by the hour, users pose questions on discussion boards such as http://forum.case.edu, and writers merge their Twitter, Pownce and Jaiku posts into central RSS feeds that can be shared on their Tumblr blogs, is there still a place for Usenet news?

I think perhaps there is. But before we ponder that, perhaps we need to review—for those who don’t know—what Usenet is/was all about.

History

Many users today think of the World Wide Web and the Internet as being interchangeable. But as most of you know, the WWW is only one of many protocols used on the Internet. Back in the era before the WWW (which most users didn’t access until 1994-95), Usenet was one of the most popular features of the Internet. To some it still is.

First created in 1979, Usenet allows users to share thoughts and ideas with one another on a variety of topics ranging from the Internet itself to the latest episode of CSI. While T. V. viewers now discuss their favorite show on Web-based forums, in those days folks dissected X-Files episodes on alt.tv.x-files. (Actually they still do.)

How Usenet is used

As one uses a Web browser to surf the Web, one uses a newsreader to subscribe to and read/respond to newsgroups. Some news readers are stand-alone programs, while others are built into e-mail programs or Web browsers and Internet suites. Once the reader is installed, the user configures it to connect to a news server just as one would configure an e-mail program to use a certain e-mail server. Most Internet service providers offer news server access.

With the newsreader installed and configured to access the appropriate server, users can then subscribe to any of thousands of newsgroups based on their interests. This will be familiar to those of you who use RSS readers to read blogs. With a newsreader you would typically call up a searchable list of the newsgroups provided by your server and subscribe to those you like. Once subscribed you would select a group from your subscription list and download the latest headers (subject lines, that link to messages) to read the various posts. From there you can respond to an existing discussion or start a new thread, just as you would on a discussion forum, but more similar to e-mail in that you can include attachments.

There are thousands of newsgroups available on the internet with topics ranging from alt.tv.survivor to alt.politics.usa.constitution. Many of these will be available through your Internet Service Provider’s news server, but some may be limited to certain servers.

To learn more about using Usenet newsgroups refer to the resources listed at the bottom of this entry.

Is Usenet still viable?

Given the research I’ve done today, Usenet seems to be alive and well—particularly in certain circles. Those circles would be those interested in file sharing. As I’ve been exploring this issue I’ve noticed two trends:

  • Newsreaders such as Binary Boy geared towards optimizing music, picture and movie sharing
  • Uncensored News Servers, such as Tera News offering uncensored access to groups, anonymous posting and firewall counter measures

I’d like to think that the above are being used to provide more efficient news reading or to give access to users living in countries with unreasonably strict censorship laws; but I’m guessing these folks are making their money by offering an easy way for people to trade naughty pictures and pirated media. With prices for some servers ranging anywhere from $7 to $49 (and up, depending on download limits) per month, I don’t think folks are signing up to share their grandmother’s bundt cake recipes.

What about the rest of us? Is Usenet still a good way to share information, discuss politics and find out how to clean the headlight lenses on your ‘96 Passat? I think it could be. This evening I installed Mozilla’s Seamonkey Internet Suite, on my home computer, to use as my newsreader and subscribed to some of the groups I’d read in the past such as alt.www.webmaster. The group was alive and well, filled with the same kind of reasonable questions, helpful advice, spam and people who shouldn’t be thinking of starting a Web design business, as it always was. Newsgroups are like that, but so are discussion boards. Some members will be knowledgeable, others never will be, and some just want to push their product or start a flame war. A lot of good information can still be traded.

If one is looking for discussion geared towards very specific topics I think Usenet works well for two reasons.

  • One Stop Shopping: One can subscribe to groups on cars, sports, T. V. shows, politics, philosophy, etc. and view them all in one place as one does with RSS readers.
  • Threaded Discussion: This format is really easy to use. You are presented with a list of headers, so you can choose which topic to read, and then all the messages in the thread are listed below (the way this works may depend on your reader). Google Groups offers Web-based access to newsgroups, but if there are more than a few messages in a given topic it can be very hard to follow. Google presents them in full in order, rather like Gmail. But when you get a few hundred this also involves multiple pages and can be tricky to navigate.

Perhaps I’m just being nostalgic, but this still seems like a pretty efficient way to communicate. Back in the day, I got a lot of good information from newsgroups, and I think if one chooses a group with an active, knowledgeable subscriber-base one still can. And if that is the case one can use these to network, share ideas, promote Web sites and blogs (but only in the context of providing meaningful content to the group) just as one can with Web-based services.

What do you think? Is there a place for Usenet in your social media world?

Usenet News Resources

P.S. When mentioning specific newsgroups I linked to them using the news protocol. These will only work if you have configured a newsreader in your browser and are using a server that includes that particular group.

John Lilly , CEO of Mozilla, Interviewed
Sean Ammirati of ReadWriteTalk has posted an interview with John Lilly, the new CEO of Mozilla. Listen, or read the transcript. Ok. In Firefox 3 is the killer browser. And I think I’ve been using the Beta since Beta 1 and Beta 2 is even better. Even in the Beta, we’ve surpassed the quality of Firefox 2. […]

Sean Ammirati of ReadWriteTalk has posted an interview with John Lilly, the new CEO of Mozilla.

Listen, or read the transcript.

Ok. In Firefox 3 is the killer browser. And I think I’ve been using the Beta since Beta 1 and Beta 2 is even better. Even in the Beta, we’ve surpassed the quality of Firefox 2. So I already encouraged my mom and my grandmother to update their Firefox 3 Beta 2. I thinks it’s a killer product. It holds up in a lot of new areas. It works well on Mac, on Linux and works well in Windows as always.On labs, there are two things in particular. I’m really excited about the efforts on mobile were working on. I think a lot of folks wondered what about what we’re going to give mobile. And we’ve waited for a pretty long time. But we really felt like we needed to wait until the industry started to open-up a little bit.

We are trying not to overload users with a lot of new features. We’ve done a lot of stream lining. A few years ago we cam out with Firefox 1. It was a good’s a good product, but it was 1.0. With Firefox 2 we started adding a lot of what people were expecting. And then I think Firefox 3 really represents a streamlining and a maturation of the user interface. But it really means it fits into the Mac. The Macintosh theme really works. We have Linux system integration and icons. I think that it’s going to feel like a much better product to people, especially people who give you aren’t
so techy. But I think it will retain all the openness that the techy population, like myself, like.The one featured that everybody really likes, other than the fact that the memory usage is better than ever and the performance is better than ever, is
the URL bar.

Instead of just typing the URL and having it remind you what the URL is, you can type any word in the name of the document. Like if you went to a site about the Simpsons, you could just type Simpsons in the bar and it will show you all the sites with Simpsons in the title. And it’s just one example of maybe 15 different ways we’re helping people find the places they’ve been to before or the place that they want to get to. So I think navigation around the information space is getting increasingly important. The web is pervasive or humungous and getting larger. And just being able to find what you want, find what you’ve visited is the key. So I think that the colloquialism around here is to call it the awesome bar instead of the URL bar.
That’s just one example of hundreds of hundreds of user interface tweaks that we’ve made. And I think are going to make a little difference to people.

So I suspect that we’ll start to participate DataPortability.org. They’ve got to start doing something sooner or later. So like doing the actual work there is going to be the key. Of course OAuth and that kind of stuff we’ve starting to experiments with. That stuff will be very important for Weave. So I suspect we will start to participate in dataportability.org, but we haven’t yet.

dojo.moj.oe: parody of script.aculo.us homepage in Dojo
Peter Higgins had a little fun, and created a parody of the script.aculo.us home page: dojo.moj.oe. The site shows off the new easing code that Robert Penner contributed to Dojo: A small change in the Animation system to accommodate the inclusion of the entire set of Robert Penner’s Flash easing functions to The Dojo Toolkit. They were contributed under CLA […]

Peter Higgins had a little fun, and created a parody of the script.aculo.us home page: dojo.moj.oe.

The site shows off the new easing code that Robert Penner contributed to Dojo:

A small change in the Animation system to accommodate
the inclusion of the entire set of
Robert Penner’s Flash easing functions to The Dojo Toolkit. They were contributed
under CLA to the Dojo Foundation, and ported to JavaScript (dojox.fx.easing) by Bryan Forbes,
a Dojo committer, and maff mastermind.

He had released them BSD some time ago, officially. This CLA only insures a clear
traceable licensing path: written permission from the author. Its a huge win for JavaScript, and
the toolkits using or wanting to use those functions (Dojo now included). A big personal
Thank You is in order, from all the OpenWeb.

The dojo._Animation change is transparent, though these functions will not work
with the Dojo 1.0.x branch, basically because numbers were being clipped beyond “100%” of
the Line (like in the elastic easing functions, the “snap back” after overshooting the
target).

The moj.oe demo started out as a simple preview of this _Animation change, and the
fun easing functions. The gravity button uses the bounce transition to drop the circles
to the ground (and bounce), the snap-back when you drag the circles (or logo) uses
the elastic easing function, and the “Live Download” dialog uses the backIn easing method when
you click “hide”, for that “little boost immediately before leaving” …

Dojo.moj.oe

CSS Tip: Positioning photos with floats
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos.

bluepavilion.jpg
Night shot of one of three recently dedicated light pavilions on Superior Avenue.

In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace=”5″ vspace=”5″ align=”right” into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property “float” to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page’s existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call “photoright.” The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

blades.jpg
Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

  • .photoright is the name of the class. Usually class names don’t include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
  • float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
  • padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
  • margin: 0; specifies that I have 0 pixels of margin on all sides. I’m using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
  • font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I’ll leave the merits of various font-sizing methods for a later discussion.)
  • color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3’s. Because the text is small I’ve made this slightly darker than the usual lime color.
  • font-style:italic; specifies that the caption will be italic.
  • width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use
    ’s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else’s. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.
Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I’ve put this at the very beginning of my entry:

Blue Pavilion
Night shot of one of three recently dedicated light pavilions on Superior Avenue.

metalgrass.jpg
Close-up of first pavilion, floated left.

In this example I’ve used a class that defines a width of 200 pixels, the same width as the photograph. Note that I’ve included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn’t define the width. I’ve left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I’ve included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn’t include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

Our new addition
The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team.

The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team. Gina comes to us from Kent State University where, in her capacity as Senior Web/Editorial Specialist, she worked on—among other things—the award winning Kent State Magazine Web site.

Gina is just settling in right now, getting her computers configured and such, but we’ll soon have her busy building sites, answering questions, and sharing her insights here on the Web Development blog. (In fact I’ll be tagging her to follow up on a blog meme later today.)

This entry was posted on Tuesday, January 15th, 2008 at 10:00 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.