I'd Rather Be Writing - Tom Johnson » Web Design

What Would a WordPress Template for Chapter Sites Look Like?

Tom Johnson — Tue, 02 Feb 2010 14:00:08 +0000

Last week Will Sansbury mentioned to me that one of his ideas with the Atlanta chapter site was to provide an example or template of how WordPress could be used for chapter sites. I got to thinking, why isn’t there a standard WordPress template for chapters and SIGs to use?

Further, in WordPress 3.0, WordPress MU and regular WordPress will be merged. This is huge, because it means you’ll be able to create child blogs with a regular WordPress install. Essentially we could have one site like stcchapter.org with dozens of child blogs, containing subdomains such as intermountain.stcchapter.org, wyoming.stcchapter.org, and so forth.

For those chapters that just wanted a simple web solution, they could create a child blog from this site. They could also point their regular domain to the site. The themes and plugins available in child blogs are dependent on what the parent blog chooses to provide.

I think the idea of providing a site template from WordPress is ingenious. It made me think about exactly what a chapter WordPress template would look like. I wish I could say our Intermountain-STC site is a perfect example, but it’s not (not yet anyway). I spent a good chunk of time this weekend tweaking a few things. Here are several elements that I think a chapter WordPress template would have.

Subpage Lists

To accommodate this simplicity, the sidebars for each of the pages should show all the subpages for the current page. And here the amount of content in the sidebar can be as abundant as you want, from three page links to thirty or more. The submenu page list hides the complexity. (Fortunately, showing a list of subpages for the current page is simple with the LJ Subpages Widget plugin.)

Subpages appear on right for the selected page, allowing you to hide the complexity of information up front and only show the information when a user is on the relevant page

Custom Sidebars

Implementing custom sidebars feature takes the concept of the subpage lists to another level. Each main page should not only show the subpage list for the current page but also have an entirely unique sidebar showing content specific to that page.

Why? Two reasons. If you have the same sidebar content for each page, the reader’s eye becomes blind to it. So even if you have the changing subpage list at the top, the reader may not notice the changing links if the rest of the sidebar remains the same. But if the entire sidebar changes for each of the seven or eight main pages, that’s something you notice. The reader can anticipate that the sidebar content will contain unique content for the specific page he or she is viewing.

The sidebars are unique for each page the user is on. For example, with the Jobs page, the user can see information on subscribing to job email alerts and a jobs RSS feed.

Second, having a custom sidebar for your page gives you more room to present information for that page in an attractive format. You can give more information to the reader above the fold, without having to scroll.

Author Pages

Above all else, a chapter site should be collaborative. Multiple chapter members should be able to access it, author content, and publish. You want to highlight and promote the collaborative nature of the site. Posts usually contain a byline, and the byline is a hyperlink to the author’s name that shows the author’s bio and posts. The default author template called is the author.php page, so you can customize this page to show the author’s picture and bio information at the top, like this:

Author pages show contact information, profile text, and posts published by the author

You can also show a list of authors in your sidebar (see the lower-right section of the image above).

Special Widget Sections

One of the cool things about WordPress is the drag-and-drop widget feature. You drag the widgets you want into the sections on the right. Most people don’t realize that you can create additional sections for your widgets that map to different areas of your templates. For example, you can create 10 or more special sections that correspond with the different pages. This way the people who maintain the site can configure the sidebars without even touching the code.

In the following screenshot, you can see that I’ve created a new sidebar section for each of my main pages. You can now drag whatever widgets you want into each of those sections, depending on what you want in the sidebar for that page. This is one way you transform WordPress into a CMS.

You can create new sections for your widgets

Custom Homepage

Rather than showing About information or a list of the latest posts, I think the home page best serves its purpose by showing the next chapter meeting, the latest jobs added to the site, the latest blog posts, and general news. The home page of a chapter site should give you a summary of all the important information you may need to know.

The home page shows a summary of the most important information

These are just my initial thoughts about what a chapter WordPress template might include. I’m currently trying to convert the Intermountain-STC.org site into exactly this template. Any thoughts on what else a chapter or SIG site would need?

Blog Sponsors

Fragmented Communities and the Chapter/SIG Web Site Problem

Tom Johnson — Mon, 01 Feb 2010 15:33:18 +0000

Recently Will Sansbury and I gave a webinar to STC community leaders on chapter and SIG websites. Rather than giving a static, one-way presentation about theoretical concepts with web design, or boring people with technical details they probably didn’t care about, we held the webinar more like a design review workshop, not too different from a writing group workshop.

Although I spent three years in a creative writing program holding exactly these types of writing workshops, in which a group of people provide feedback on the story or essay someone submits, it never crossed my mind that designers probably sit around tables doing the exact same thing with websites.

Design Reviews

Regardless of the topic, the methodology of the workshop is mostly the same. In a tactful way, you explain what works well and what could be improved. Others either agree or disagree with your analysis, and hopefully they explain why. The only difference between critiquing creative stories and websites is in the questions you ask. Rather than ask, what’s the story here? Are the characters believable? Does it have arc? You ask questions about findability, simplicity, readability, and so forth.

I found that in looking at websites, my feedback could be grouped into about seven categories:

Purpose

What are you trying to achieve with the site?
What do you want the audience to do on the site?
What do you want feedback about?

Findability

What are some things your users might be looking for? Is it easy to find them?
If you search for something, are the results accurate?

Simplicity

Is the site navigation simple to understand?
How does the site handle submenus to provide additional information?
Is the site busy?
Is there enough white space in the site?

Readability

How easy is it to read the content?
Is the font size, column width, leading, and typography working together in a readable way?
Can I subscribe to the content with Facebook, Twitter, RSS, or e-mail to read it in the format I want?
Are the paragraphs small, broken up with lists, blockquotes, and other formatting varieties?

Interactivity

Can I add comments on things I read?
Can I read other people’s comments and reply to their comments in a threaded way?
Can I contact someone through an email address or contact form? If a contact form, do I know where it goes or if it sent correctly?
If I have a job to post, can I submit the details myself? Can I even post it myself?

Content Appeal

Is the content interesting to read?
Is the content current?
Can multiple people author and maintain content, so that all the burden isn’t placed on one person?
Do you integrate your news into real-time articles/posts on the site?

Design Appeal

Where do my eyes focus naturally focus on the site?
Are there any design element repeated?
Is the site attractive to look at? Why or why not?

For more on running a design review, see Scott Oberkun’s How to Run a Design Critique and Makiko Itho’s The Delicate Art of (Web) Design Critique.

Trends from the Analysis

If you go through each of these categories, you usually find something worthwhile to say. We analyzed six different sites: Quality Process SIG, Twin Cities, Heartland, Tech Editing SIG, Orlando, and the Contracting and Independent Consulting SIG.

The webinar description suggested that we would explore ways to build attractive online sites where members could interact and find value, because fewer and fewer people are physically gathering for meetings.

As we moved through the sites, it was clear that a lot of people were trying to move in exactly this direction — towards collaboration and participation. The Quality Process SIG adopted SharePoint to make it easy for numerous people to author content. Twin Cites integrated a social networking component in a custom CMS where members could friend each other, add personal details, and even write blog posts. Orlando was in the process of moving their content to WordPress because their old site was a “dinosaur.” The Tech Editing SIG built their content on a wiki platform containing a section that showed posts from their email list discussions in an automated way.

What’s Missing

To enable participation and collaboration, many of the platforms allowed you to comment, subscribe, interact, log in, and manage the content. This makes sense.

But the platform is only the first step. Whether you’re using WordPress, Drupal, Joomla, SharePoint, Ning, or any other Web 2.0-capable technology, a larger ingredient is missing from the recipe for a thriving online site where members naturally gravitate to for interaction. Your site can be as interactive as anything can be, and yet still remain dormant, unused, unexplored, rarely visited, and rarely even noticed unless you provide a reason for people to come together as a community.

For example, although the Twin Cities site offers the ability to friend others, blog, and add personal details about your location, interests, and other details, it isn’t generating the activity you see on Facebook.

What’s interesting about Facebook isn’t that it allows you to write on other people’s walls, provide status updates, or add other people as friends. What’s interesting is that so many people are on Facebook, checking it and posting to it daily or even hourly.

Is it possible to create an online platform that technical communicators would use with as much popularity as Facebook or Twitter or even Stack Overflow?

The problem, I think, is in gathering a critical mass of community. Chapters are so small, it’s hard to see much activity from members on a site. For example, our chapter now has about 20 members (as opposed to about 75 from last year). To think we’ll convert the site into a thriving hub of online interaction is an illusion. You need thousands of people to build up the exchanges that take place in a popular community. When you have the thousands of people coming to your site every day, they begin to interact, and the interactions fuel more comments and replies and posts. At some point, you have a thriving community. But you don’t build a community without a critical mass of participation.

Without a critical mass of people to form a community, you end up with a dormant-looking site — for example, what most chapter sites look like.

The Ning Community Scott Abel created comes closest to the thriving online site where members can interact, but even that site seems underused. I just logged into the other day for the first time in months.

Again, the main problem is in the critical mass. There just aren’t enough people in chapters to form a presence on a site. Chapters and SIGs fragment the already small online technical communicator audience.

Additionally, although SIGs have greater potential for online interaction, most of the activity is often better expressed through e-mail listservs and threaded forum discussions. As old-school as email or forums are, they’re fast, immediate, and reach almost everyone.

The Solution?

I’m not really sure what solution is for chapter and SIG sites to move from dormant sites to thriving hubs of interaction. Technical writers are a small niche of overall people on the web, and when you fragment that already small niche into even smaller groups of chapters and SIGs, they never seem to come together in a critical mass of people.

This problem isn’t unique to our group. It’s a problem that stems for many independent publishing locations and sites. Conversations are taking place on blogs here and there, email listservs here and there, forums here and there, and the consequence is a bunch of whispers that you can’t hear (unless you look in each of the individual places).

I believe the solution won’t involve centralizing the information/people into one site and location. Instead, it will involve aggregating the sources through RSS and other technology.

Blog Sponsors

Web Site Critique and WordPress Q&A Webinar This Thursday

Tom Johnson — Tue, 26 Jan 2010 15:33:58 +0000

Date: Jan 28, 2010
Time: 1 pm EST
Platform: Genysys (on the web)
Cost: Free for STC members
Registration required

Will Sansbury and I are giving a webinar on web design and WordPress this Thursday as part of the STC Community Leaders series. In the webinar, we plan to look at about five chapter/SIG sites in depth, examining what they’re doing well and how they could be improved. The sites will merely provide examples to spark discussion about web concepts and techniques (helping us move in a descriptive rather than prescriptive direction).

Here’s the description of the webinar:

Because most communities have far more virtual participants than physical participants, establishing a strong web presence where members can find information, interact with each other, and access resources is critical. In this community webinar, we’ll review a handful of chapter or SIG sites and discuss what’s working well and how they might be improved. We’ll also talk about WordPress — a popular platform many chapters are using for their websites. As a WordPress consultant, I deal with all kinds of WordPress questions, from customizing themes to implementing specific plugins, tweaking the stylesheet, inserting PHP tags, and fixing crashed sites. If you’re currently managing or implementing a WordPress site, bring your questions and I’ll try to answer them. I’ll also go over my top 10 recommended WordPress plugins. [Note: I wrote the description before asking Will to join me in the presentation, so excuse the first person point of view.]

If you’re planning to attend the webinar and you want your site critiqued, let me know. Otherwise, I’m thinking of looking at these five sites:

The webinar will have a WordPress bent to it, because it’s the platform I’m most familiar with. Technical how-to is always less interesting that concepts, so I only see the discussion veering off into WordPress when we mention ways to implement concepts/techniques in a practical, easy way. I’m also familiar with Joomla and Mediawiki, so if one of those solutions makes more sense, I’ll talk about them.

You can sign up for the webinar here.

Note: In my experience with Genesys, you have to call in via phone. You can’t use your computer speakers. So if you’re calling internationally, you might want to use Skype.

Blog Sponsors

Implementing Google Custom Search on WordPress

Tom Johnson — Fri, 08 Jan 2010 15:20:49 +0000

Google Custom Search can dramatically improve the search results for your WordPress blog or any other site. WordPress is a great blogging platform, no doubt about it. But the built-in search feature is terrible. As I’ve searched for keywords from past posts to respond to reader questions, I would continually come up empty-handed.

As a solution, I incorporated Google Custom Search, which is a free service that allows you to embed a Google search box and results (limited to just your site and any other sites you specify) on your site.

Try it out by searching for something using the search at the top of my sidebar. Not only are the search results more accurate, when you start running a few searches, you begin to see how your site appears to people who search for you in Google.

Canonical Posts

One thing I immediately realized was that a lot of my archives pages were appearing in posts. The search results would begin with my blog title followed by the word archives followed by the post title (which was then truncated due to space constraints). It’s important to have just one version of your post in Google’s search results, so that your other posts aren’t competing against each other. (For more on this, research canonical URLs in WordPress.) I also wanted the search engine result to begin with the post title.

To fix the display of the results, I implemented the All in One SEO plugin and configured the plugin’s settings so that only the single post would appear in the search results, not the archives. I then created a sitemap (using the Daigon Design sitemap generator as well as the Google XML Sitemap plugin), generated both sitemaps, and linked to the Daigon Design sitemap in one of my latest posts so that Google would reindex all the posts on my site.

Implementing Google Custom Search

Implementing Google Custom Search in a WordPress site can be a little tricky. The Google Custom Search WordPress plugin didn’t work for me, so I just copied the Google code manually.

Google gives you two pieces of code: code for a search box and code for the search results. Choose the iframe option before generating the code. For the search results page, type the name search. Insert the search box code in your sidebar somewhere. Then create a page called Search that uses a page template with the search results code. Also copy the search results code into the search.php page of your theme.

As you accrue more and more posts in your blog, you need an fast and accurate way to retrieve posts based on vaguely remembered keywords. WordPress’s built-in search won’t always find what you’re looking for. If users are savvy, they can use site:yourdomain.com keywords to search your site at Google.com. But embedding the search form directly on your site is much more user-intuitive.

Blog Sponsors

Site Critiques and WordPress Q&A — Community Leaders Webinar Jan 28

Tom Johnson — Sat, 05 Dec 2009 07:08:29 +0000

I’m giving a webinar for STC community leaders on January 28 titled “Site Critiques and WordPress Q&A.”

Here’s the description:

Because most communities have far more virtual participants than physical participants, establishing a strong web presence where members can find information, interact with each other, and access resources is critical. In this community webinar, we’ll review a handful of chapter or SIG sites and discuss what’s working well and how they might be improved. If you want to have your site reviewed, send me the URL before the webinar.

We’ll also talk about WordPress — a popular platform many chapters are using for their websites. As a WordPress consultant, I deal with all kinds of WordPress questions, from customizing themes to implementing specific plugins, tweaking the stylesheet, inserting PHP tags, and fixing crashed sites. If you’re currently managing or implementing a WordPress site, bring your questions and I’ll try to answer them. I’ll also go over my top 10 recommended WordPress plugins.

Blog Sponsors

The Seven Deadly Sins of Blogging: Sin #4, Being Unreadable

Tom Johnson — Sat, 17 Oct 2009 13:48:30 +0000

The fourth sin in my ongoing Seven Deadly Sins of Blogging series (being fake, irrelevant, boring, unreadable, irresponsible, unfindable, and inattentive) is being unreadable. Readability is probably the easiest sin to correct, especially if you’re familiar with your stylesheet.

Reading Instincts

A while ago I moved The Content Wrangler to WordPress and used a Massive News theme as a starting point. I liked the way the Massive News theme looked, but something kept bugging me about it. The text seemed tiny, and the layout was busy. But Scott didn’t complain about this, so I ignored it.

Massive News theme — the text of the posts isn't very readable, and the layout is busy

A couple of weeks after the launch, I found myself constantly pressing Ctrl++ to increase the font size so that I could read the posts. Increasing the font size reminded me of another site I read regularly: Lorelle.WordPress.com. Lorelle’s font and leading (space between lines) always struck me as large and spacious, but very readable. I could lean back and comfortably read the content.

Lorelle.wordpress.com — you can lean back and comfortably read the content

I finally asked Scott if he wanted me to increase the font size a bit and change the layout from three columns to two. He said yes. I also increased the leading and narrowed the main column width.

Now when I visit Scott’s site, my eyes focus on the text in the main column, and I can read it without strain.

Making the content more readable on The Content Wrangler

In this post, I focus on the following ten elements for making your blog more readable: font size, line height, line length, typeface, background, subheadings, paragraphs, white space, graphics, and invisibility.

Line Height

Line height, or the distance between lines, also affects readability. Smashing Magazine recommends something rather formulaic: “Line height (in pixels) ÷ body copy font size (in pixels) = 1.48.” You may have to do a little algebra to figure this out, but if your font size is 13px, your line height should be about 19 pixels in order to equal 1.48.

Mark Boulton adds more reasoning to line height:

A simple rule is your leading should be wider than your word spacing. This is because when the balance is correct, your eye will move along the line instead of down the lines.

When you see a site that has line height (leading) narrower than the word spacing, it does disrupt your visual flow across the page. To change your line height, look for the line-height property in your stylesheet.

Line Length

Line length refers to the column width of your paragraphs. Mark Boulton says that “a general good rule of thumb is 2–3 alphabets in length, or 52–78 characters (including spaces). ” Smashing Magazine also notes that classic studies in typography recommend a width between 55 and 75 characters.

This makes sense for readability, because newspapers have narrow columns. Narrow columns make it easier to read (for a good example, check out the Washington Post). However, despite the ideal of 55 to 75 characters in length, Smashing Magazine found that popular sites have an average width of about 89 characters. This is due, I believe, to the need to fit a 600 pixel wide image or HD video into a post.

To adjust your line length, look at the div tag that starts your main content column. Usually there’s a width property for this div tag. Just decrease it appropriately.

Typeface

The Smashing Magazine study found the most common typefaces for body copy on popular sites to be “Arial (28%), Verdana (20%) and Lucida Grande (10%).” About 60 percent of the popular sites they analyzed use sans-serif for the body copy. For sites using serif fonts, Georgia is the most common.

It’s common to use a contrasting font for headers, with Georgia and Arial being the most common. Basically, a good typeface doesn’t draw attention to itself. Stick with the norms.

Background

Smashing Magazine says that invariably, all websites they studied had light backgrounds. You may run across a dark website with white font, and in some cases the combination may be readable. But mostly, popular sites have light backgrounds. Johno on I Love Typography.com adds:

Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.

If you do have contrasting colors, Johno recommends grayscaling the colors to see if it is still readable. Also note that sites with dark backgrounds are typically seen as entertainment sites, so unless you want that connotation, stick with light background. With a light background, people reading your site at work won’t be embarrassed.

Subheadings

Subheadings refresh the reader’s eye, allowing readers to quickly skim and see what your post contains. Here’s a good example of subheadings from CopyBlogger:

Subheadings break up long chunks of text and make the content more readable

CopyBlogger Sonia Simone explains,

Blog and newsletter readers want meaty content, something that’s worth the time they take to read it.

But piling a mountain of words in front of readers doesn’t work too well. A page of solid black text looks like, well, work.

So in front of your 20-foot tall stack of words, you put a series of steps. You break your content into manageable pieces, separated by mini headlines or subheads. Each subhead is a step up the staircase.

Each time your reader comes to another subhead, she thinks, “Well, I’ll just read to that next little headline there.” Then she reads another section, and another.

Subheads break your copy into little potato-chip tasty bites. And we all know how hard it is to stop at just one potato chip.

In other words, subheadings help you get around a problem with blogs: readers want substantial content but dislike reading large stretches of text. The subheading breaks up the text and allows the reader to move step by step through your content. Subheadings also facilitate skimming. Where possible, add a subheading every several paragraphs. It goes without saying that you should keep your subheadings parallel. I also recommend making your subheadings a different color for contrast.

Paragraphs

Have you ever landed on a web page that looks like the writer’s Enter key was broken? Long chunks of text without paragraph breaks are extremely unreadable. If you’re accustomed to academic styles, you may have been taught that a good size paragraph covers 2/3 of the page. This is what a literature professor once explained to me, because he wanted to see me “develop my points.”

However, online reading experiences tire people out much more quickly than print. Content isn’t double-spaced as it is in academic essays. Newspapers often break paragraphs every couple of sentences just to make it easier to read. In the Sonia Simone blockquote above, you can see how generous she is with new paragraphs.

White Space

Apple has increased the appeal of simplicity in design. Simplicity often involves removing rather than adding. When you simplify or declutter a blog, you often increase the amount of white space. One site that shows good use of white space is Z-oc.com.

Good use of white space makes your site both breathable and readable.

White space has an interesting paradox: The absence of graphics and text plays a significant role in increasing comprehension of the content. The absence of content is what draws the eye towards content. The negative blank space (which possesses nothing) creates a sense of sophistication and elegance. The sense of simplicity and absence of graphics and text is what contributes toward a richer, deeper and more complex artistic expression.

Donald Peterson explains,

In western culture we associate uncluttered spaces with good taste, refinement and affluence. It is also more restful to the eye to read or view items that have a generous amount of white space surrounding them. That is why museums always use broad white walls as a backdrop for paintings on display.

On the Web, white space is essential when the viewer is required to read large amounts of content. Generous margins and clear simple layouts make it easier for the eye to work. Cluttered layouts tire the eye quickly and hinder clarity. Also, just as in advertising, uncluttered layouts convey a sense of good taste and refinement.

You can increase white space in a variety of ways — increasing the padding in your columns and around images, decluttering your banner area, increasing the leading and font size, increasing the space between the body and sidebar, increasing margins between paragraphs, and adding space in other places.

Graphics

One of the common documentation formats I create is the quick reference guide. Quick reference guides provide one or two page instructions in a brief, concise format. I often look through magazines to get ideas for layouts. After creating quick reference guides for several years, I’ve concluded that adding a strong graphic to the quick reference guide significantly increased the appeal of the guide. However creative I could be with text layout, it is the image, especially a diagram, that makes the quick reference guide attractive.

In web design, images also play a key role in increasing appeal. An image can break up what might otherwise be a long essay. Images provide concrete examples to communicate what you’re saying. Images provide balance and eye candy to give variety to the reader’s eye. For example, I’ve tried to add images to this rather lengthy post, both to break up the text and provide examples.

Invisibility

My final point about readability is to keep your design invisible. You want the reader to focus on the content, not the design around the content. Guilherme Zühlke O’Connor explains,

While the purpose of art is to draw the attention to itself, to make the viewer forget the world for a while and concentrate on it, the purpose of design is just to sit there, without being noticed, while the viewer pays attention to something else.

Design is a support area, the designer’s job is to leverage someone else’s message and not to draw attention to his own work. Design is an area for team players, for group work. And design must take the user into account.

Good design doesn’t jump out at you. It makes the content jump out at you. You find yourself disregarding the design instead of focusing on it.

Conclusion

Although there are other ways to increase your blog’s readability, these are the most important elements to consider:

font size
line height
line length
typeface
background
subheadings
paragraphs
white space
graphics
invisibility

Blog Sponsors

Smashing Magazine Lists 10 Web Usability Guidelines

Tom Johnson — Mon, 28 Sep 2009 04:35:20 +0000

Smashing Magazine recently posted 10 Useful Usability Guidelines and Findings. The 10 guidelines are as follows:

1. Form Labels Work Best Above The Field
2. Users Focus On Faces
3. Quality Of Design Is An Indicator Of Credibility
4. Most Users Do Not Scroll
5. Blue Is The Best Color For Links
6. The Ideal Search Box Is 27-Characters Wide
7. White Space Improves Comprehension
8. Effective User Testing Doesn’t Have To Be Extensive
9. Informative Product Pages Help You Stand Out
10. Most Users Are Blind To Advertising

It’s good information, though nothing too surprising. In looking at my site, I don’t have many forms or faces. The quality of the design is mostly invisible to the content. Users do have to scroll to see all the recent post titles (sidebar ads took a priority with real estate). My links are blue. My search box is 42 pixels wide, mostly because it looked better in the sidebar that way.

The whole theme emphasizes white space, and paragraphs and images have plenty of padding. I haven’t done any user testing, but I do receive positive feedback now and then. I don’t have product information pages, and as for users being blind to ads, I set the ad order to mix with every page reload (this is supposed to increase visual attention).

At the end of Smashing Magazine’s usability guidelines, they also offer some interesting tips on typography. According to a study of about 50 popular websites, Smashing Magazine concludes the following about the optimal typography:

Line height (in pixels) ÷ body copy font size (in pixels) = 1.48

Line length (pixels) ÷ line height (pixels) = 27.8

Space between paragraphs (pixels) ÷ line height (pixels) = 0.754

Optimal number of characters per line is 55 to 75

Layouts usually have a fixed width (pixel-based) (92%) and are usually centered (94%). The width of fixed layouts varies between 951 and 1000 pixels (56%).

The home page shows excerpts of 10 to 20 posts (62%).

58% of a website’s overall layout is used to display the main content.

I had to check my stylesheet for some of this information. For the most part, my typography isn’t too far off from what Smashing Magazine recommends:

My line height, 20px, ÷ 13px font size = 1.54
My line length, 620px, ÷ 20px line height = 31
My space between paragraphs, 14px, ÷ 20px line height = .70
My characters per line is about 85
My layout has a fixed width and is centered. The layout width is 1,000px.
The home page shows the latest 15 posts (I just increased that from 10 to 15)
At least 75% of my website’s overall layout displays the main content (I moved the “What I’m reading section” into the main feed).

The only part where I deviate outside of Smashing Magazine’s recommended typography is with my characters per line. I set my post width at 620px specifically so that I could show HD videos, which look best when shown at 620px because the minimal dimensions of an HD video are 1280 x 720px. Cut that in half to keep the ratios proportional, and you end up with 640px in width. Subtract 20px for padding, and you end up with 620px. (Perhaps you thought I hadn’t calculated this before?) The sad part is that I’ve haven’t posted nearly as many videos as I planned, but that’s another discussion.

For more details on Smashing Magazine’s typographical study, see Typographic Design Patterns and Best Practices. Here’s what they cover in that study:

1. Serif vs. Sans-serif (most use sans)
2. Which Typeface Is Most Popular?
3. Light Or Dark Background?
4. Average Font Size For Headlines
5. Average Font Size For Body Copy
6. Optimal Line Height For Body Copy
7. How Many Characters Per Line?

I’ll give you a short summary of that post. Most people use sans-serif fonts for both headlines and body, although it’s more common with the body. The most popular typefaces are Georgia, Arial, and Verdana. Almost invariably, the more popular sites have light backgrounds. The average font size for headlines is 18-20 or 24-26px. The average font size for body copy is 13px. The optimal line height is the equation above, line height ÷ font size =1.48 (if your font-size is 13, then your line height would be about 19px). The optimal characters per line is somewhat in conflict with their findings. They write,

According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line. Surprisingly, our study shows that most websites have a higher number. We counted how many characters could fit on one line using the design’s default font size. The result, which is an average of 88.74 characters per line (maximum), is extremely high. Of course, this maximal number is different from the average number of characters per line, which in general ranges between 75 and 85 characters per line. Still, the range is way above the conventional range — quite peculiar.

Aha! So my wider post width is actually similar to the post widths of the popular blogs included in their study. I think part of the reason is that popular blogs usually have a lot of images, and you need a decent post width for images to look attractive. Hence the wider width.

Blog Sponsors

New Content Strategy SIG

Tom Johnson — Sun, 27 Sep 2009 07:18:40 +0000

Rahel Bailie has started a new SIG focused on content strategy. SIGs are special interest groups sponsored by the STC, involving other STC members also interested in sharing about the same topic. Rahel writes,

We welcome the participation of any STC members who are engaged in content strategy, want to develop the skills to become a content strategist, or simply want to know more about content strategy.

Rahel is trying to bring content strategy more prominently into the discipline of technical communication. Expect a more visible content strategy presence at the next Summit. If you’re interested in the Content Strategy SIG, definitely get involved — they’re looking for more people to join the group. You can learn more about content strategy here.

Blog Sponsors

Interactive Google Map of Where I Work

Tom Johnson — Mon, 06 Jul 2009 02:21:29 +0000

I recently helped added some map functionality to a blog focused on Bellingham real estate to give users a better sense of the various neighborhood locations in their area. I used the Google XML maps plugin because it seemed to work best, and ever since then I’ve been playing with Google maps.

Mapping technology has come a long way in the last several years. You can now embed a rich Google map directly into your blog or site, draw boundaries on the map, add landmarkers, and so on — all without almost any technical knowledge. Here’s a map of the area I work in downtown Salt Lake City. Click on each of the squares to read a little blurb about that area.

Where I work

I don’t use maps much in my job as a technical writer, but maps are commonly used in just about everything else. Every time you have a meeting (for example, an STC meeting), you can embed a Google map on the website. If you have a garage sale, embed a map to your house. Planning a barbecue? Embed a map to the park or area you’re having it. I biked a long trail this weekend that I’m eager to add to Google maps. I also have a friend who geomaps trails all the time.

Google maps are fun to play with. To create your own boundaries, go to http://maps.google.com, sign in, and click My Maps. Then click Create a New Map and draw the appropriate boundaries with the available tools.

To embed your custom Google map on your blog, install the Google XML maps plugin, configure the settings, and then just add a link to your custom map (on your custom map, click the link button in the upper-right to get the link to the map). The plugin automatically converts the link into an embedded map.

The ease of inline maps with WordPress is quite cool. I can imagine a ton of situations where the map can make it easy for people to understand directions and locations — much more than the antiquated way of providing an address and letting people unfold a giant paper map.

Blog Sponsors

“What I’m Reading”: A New Feature on My Site and a Tweak of Writer River

Tom Johnson — Wed, 24 Jun 2009 13:43:18 +0000

I’m trying something a little new on my blog. Previously, every time I read a cool post, I submitted the link to Writer River. The problem with that, however, is that posting to another site isn’t such a smart search engine optimization (SEO) strategy. Using the Writer River method, people who follow trackbacks don’t follow them back to my site (idratherbewriting.com), but rather go to another site (writerriver.com).

Additionally, it’s more beneficial for me to link to others from my idratherbewriting.com site, because it has a higher authority than writerriver.com. Links from higher authority sites are more beneficial in transferring search engine visibility than links from lower authority sites. For example, a link from NYTimes.com will push you to the top of Google results while a link from Sam’s vacation blog probably won’t have much influence.

So here’s what I did to better search engine optimize my site. I created a new section on my site called What I’m Reading. The page shows all the posts I’m reading (which I want to share), with short commentaries or summaries about the content. This way I keep the keywords and links on my site. I’m hoping that this strategy will create more pull back to my own site and will increase the rank of those I link to, more so than links from Writer River.

I didn’t want to limit my reading page to blogs only, because I read books too. So I used Shelfari, an online bookshelf site, to embed a few bookcases of books I’m reading, books I plan to read, and books I’ve read. If you buy a book through one of my Shelfari bookshelves, I will someday get Amazon affiliate revenue. It just made sense to consolidate everything I’m reading on a single page.

Technically, setting up this What I’m Reading page wasn’t that easy to do. The WordPress geeks can read on for the details, because this post is moving from conceptual to technical information. “What I’m Reading” is a category on my site hidden from the main page and RSS feed. I also excluded the posts from appearing in the Next and Previous links at the bottom of the home page (index.php).

I then used a custom category template, naming it category-1246.php, so that when users click the What I’m Reading category (the category ID is 1246), it opens category-1246.php rather than category-php or archives.php, which is the generic template for all categories. With this custom category template, I customized the sidebar, added some intro text at the top and inserted the javascript code from Shelfari to display the bookshelf widgets.

In the custom category template (category-1246.php), I also hid the post title and manipulated the styles a bit. I hid the title tag because I’m using the WordPress Press It bookmarklet to quickly and easily post links from the articles I’m reading while viewing the articles (rather than logging in to my WordPress dashboard to post them). The Press It bookmarklet automatically creates a link to the article I’m reading, so I didn’t want this link to be redundant with the title of the post—hence I removed the title from the category-1246.php template.

However, here’s where it got tricky. Trackbacks are one of my main SEO strategies, because most people are curious to know what you’re writing about them, even more so than what you add in the comments below their posts. A trackback sends a notification to the original blog authors that someone has linked to them. It’s like tapping them on the shoulder and saying hey, this is what I’m writing about you.

The problem is that a trackback’s link opens the single post template (single.php) rather than the category-1246.php template I customized. This leads to a major shortcoming of WordPress: you can customize category.php, but not single.php.

With a little research, I found a script that I could insert into my functions.php file that gives me the same functionality with single.php as category.php, so I then created a custom single-1246.php that matched category-1246.php, and I added a note at the top letting people know a bit about the page, because I didn’t want people thinking I was scraping their feed (according to Feedburner, about 100 people are scraping [stealing and reposting] my RSS feed). My short commentary and summary next to their links also helps avoid the appearance of scraping.

I also created a custom RSS feed and email delivery option for content specifically on my What I’m Reading page. However, I wanted the posts to update my regular Twitter feed (where I have most of my followers). Using Twitterfeed, I pointed the secondary RSS feed to my main Twitter account, so now I have two feeds pointing to my Twitter account. When my main feed updates Twitter, the tweet is prefaced with New Post. When the What I’m Reading feed updates Twitter, it’s prefaced by Recommended Read.

Now, there’s another complication. I’m not abandoning Writer River (a community link blog I started) by any means. I’m trying to move to a model that allows more flexibility and automated submissions. To accommodate this, I had to change Writer River a bit. First, because of all the spam that keeps seeping through, I changed the default registered user role to Contributor (which means I’ll have to approve their drafts first). For people I recognize, I’ll keep their role as Author.

Additionally, the Writer River home page now shows an aggregated RSS feed rather than links to the direct Writer River posts. The aggregated RSS feed displays results from my What I’m Reading category feed, the Writer River feed, and anyone other “good-reads” type feeds that people want to submit to me. The items in the feed are sorted by date.

To aggregate the feeds, I used Yahoo Pipes, which allows you to create and filter and apply rules to large numbers of feeds, and then spits out a single RSS feed from those multiple feeds.

I created a page on Writer River called Latest Posts, and I set this as the home page of the site rather than a reverse chronological list of only the latest posts from Writer River. (You can do this with WordPress through the Settings > Reading options.) On this new Writer River home page, I used the Simplepie plugin for WordPress to parse and display the Yahoo Pipes feed.

The benefit of displaying an aggregated Yahoo Pipes feed on Writer River rather than just content posted to Writer River is that it allows every blogger to do what I’ve done with my What I’m Reading page. Bloggers can simply designate a category that says “Recommended Reads” and select it when they post links to something worth reading.

I guess this assumes the bloggers would also be on WordPress, because WordPress has feeds for each category by default. For example, the feed for my What I’m Reading category is http://idratherbewriting.com/category/whatimreading/feed. I’m not sure if the same is true for Blogger and other platforms.

So if you’re a blogger and you have a category for good-reads, or something similar, let me know what the RSS feed is and I’ll aggregate it with the Writer River Pipes feed.

Finally, to encourage people to share links on Writer River, I created a Spring Widget, which is a little RSS reader that anyone can embed in the sidebar of their blog. To get the code for the Spring Widget, just click the Get this widget link below the Spring Widget.

I want to personally thank Alistair Christie, a tech comm. podcaster and blogger in the UK, for providing feedback and advice on how to handle the Writer River setup. If anyone else has suggestions for me, please let me know.