Image by Heraklit

The Security Thing

Security is a good reason to upgrade, but it's not always as good a reason as it might seem. Some blogs over-emphasize the risks of security, to get you to upgrade.

For instance, the normally excellent Weblog Tools Collection wrote about security holes due to free themes, and then said "The moral of this story is that you need to upgrade your WordPress blog now to WordPress 2.5."

Upgrading to WordPress 2.5 will not solve exploits coming from your theme. You must resort to other measures to do that. As a respected WordPress authority, it wasn't fair for them to imply otherwise.

WordPress 2.5 packed a host of new features into it, but how big were the security fixes? Not very; just a more secure login. That makes sense; security fixes are for the minor releases, not the majors.

And if WP 2.3.3 has had 3 versions to fill up holes in the 2.3 release, and WP 2.5 has had no patch-ups but a whole load of new feature code, is it possible that WP 2.3.3 is actually more secure than 2.5? I don't know, but I'd love to hear opinions.

It Isn't Broken, Don't Try to Fix It

If your blog is working the way you want it to, why try to fix it? There are 3 good reasons to leave things alone:

• Not all plugins work with new versions of WP.
• It takes time to upgrade.
• New features in WP may have no appeal to you.

I'm perfectly happy with WordPress 2.3. The new features in 2.5 are great, but not for me. The only reason I would upgrade is to keep up with security.

Should WordPress take this into account? Offering minor releases for many versions of WordPress is not plausible, but perhaps security updates could be given via a plugin? Again, I'd love to hear opinions on whether or not that is a possibility.

How I Do It

I tend to upgrade based on 3 rules:

• Never upgrade to a major release immediately. Things will never be perfect in the first try, and version 2.x.1 is always soon to follow. Save yourself some time by waiting for it.
• Check plugin compatibility first. If it's poor, don't upgrade major releases. You can test compatibility by looking for the plugin in the codex compatibility page, or reading the latest comments on the plugin's home page.
• Always upgrade to minor releases (e.g. 2.3.2 -> 2.3.3). Minor upgrades rarely cause plugin incompatibilities, which makes the upgrade a fast process, and they usually fix security holes, which will appeal to everyone. So a minor upgrade bypasses all 3 of the reasons not to upgrade.

I'm not running 2.5 yet, and have no plans to for a while. What about you?

 
Image by Apesara

As always, the answer is; it depends on your blog.

Why Have It On the Right?

• Western readers read left to right. When scanning a page, we will scan left to right (And top to bottom). Put your sidebar on the right, and the first thing a reader will scan over will be your content.
• Many people still use 800x600 resolution. When designing your theme, it's tempting to work with a 1024px wide layout. The extra space is great for the majority of your users.

  However, a good few are still on 800x600 monitors, and will have an annoying horizontal scrollbar to work with. If your content is on the left, they will not have to scroll to read it. The scrollbar will only be needed to see the sidebar.

• Your blog will look like a blog. As a blogger, I would rather read an article on a blog than on a regular website. I love the personal nature of blogs, how they're written by people who are truly enthusiastic about their topics, and the social interactions possible. Most bloggers will feel the same.

Why On the Left?

• Western readers read left to right. In the same way as above, readers will see the left side of the page first. If you blog for profit, your ads may be more important than your content. Put your sidebar on the left so that readers eyes have to drift over them.
• The eye tends to focus on the center of the page. With your content on the right, the headline starts closer to that center than it would if the content was on the left. The result is that it is easier for the reader's eye to skip straight to the content.

  This is more true for minimalist sites, which don't have other attention grabbing elements to distract the natural eye movement (For example, Astheria)

• Matt Harzewski has an interesting idea on how different types of sidebar content could influence the decision. Read more in Right vs. Left Sidebar.

Sidebars that are mainly navigation should go on the left because it feels more natural to look for navigation there. If you have a lot of navigational links, it might be a good idea to put them in a sidebar.

Conclusion

In most cases, the strongest argument is for the sidebar to be on the right. Putting your content first is paramount for most of us, and I want my blog to look like a blog.

However, every design is unique, and different designs have different requirements.

Priority for the adverts or ultra-minimalist designs are two such situations, but there are many more. Depending on the style and graphics in your theme, a left sidebar may feel better. And if it feels right, it usually is right.

Which side is your sidebar on? Did you consciously put it there, or was it a natural decision?

Depending on you, we'll either keep it up, or get rid of it. Please vote in the poll below, or leave a comment, to let me know your thoughts.

So without further ado, here's issue 1, WordPress vs Movable Type.

The images are licensed under Creative Commons, so feel free to republish, provided you link back. And a big thanks to the artist, mcoy. Much better, even at drawing stickmen, than I'll ever be.

PS - If you didn't know, the name is a play on the awesome XKCD comic. By far, the best comic on the web!

The first 43 are all free, and many come with a range of color variations. The last section is probably free, but you'll need to email the authors to be certain. Click an image to visit the source of the icon.

Circular Feed Icons

Glossy Web2.0 RSS Icons

Rectangular

Miscellaneous

The "Probably Free, But Ask The Owner"s

The following icons are the ones I found in various blog sidebars or Flickr, but couldn't find the original source of. They link to the page I found them on. If anyone knows any of the sources, please let me know so I can give them credit.

With all those icons to choose from, you have no excuse for not finding an icon to suit your blog's design. And a huge thanks to all the designers who gave us these icons for free!

Bonus: Whatever you do, I wouldn't recommend using any of the alternative icons considered for Internet Explorer 7.

DOMtabs is a free script and by using the guide below, its quick to install. I've also created a simple stylesheet that you can use to easily restyle your DOMtabs.

You can see DOMtabs in action in the sidebar here on Pro Blog Design. It is a very user-friendly way of saving space on the page, and cutting your clutter.

Lastly, this guide is written with WordPress in mind, but the script can be used anywhere. If you're on another platform, try applying the steps to your own platform, or read the help on the script's site, and comment here for help if you need it.

5 Step Guide to Install DOMtabs

1. Download the script from the official site, and unzip it on your computer.
2. Upload the domtab.js file to your theme folder in WordPress.
3. Download pbd_domtab.css (Right click, "Save Target As" or "Save Link As"), and upload that to the theme folder as well.
4. In header.php, paste the following above </head> :
   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />
5. In sidebar.php, or in a widget if you use widgets, paste the following where you want the DOMtabs to go:

   <div class="domtab">
     <ul class="domtabs">
       <li><a href="#t1">Tab 1</a></li>
       <li><a href="#t2">Tab 2</a></li>
       <li><a href="#t3">Tab 3</a></li>
     </ul>
     <div>
       <a name="t1" id="t1"></a>
       <p>Insert contents of the first tab here,
   e.g. The code for a plugin.</p>
     </div>
     <div>
       <a name="t2" id="t2"></a>
       <p>Insert contents of the second tab here.</p>
     </div>
     <div>
       <a name="t3" id="t3"></a>
       <p>Insert contents of the third tab here.</p>
     </div>
   </div>

And that's you done. If you want to add another tab, just make another copy of one of the sections. There is no limit on the number you can have.

You can customize the colors and appearance by editing the pbd_domtab.css file. The lines to change have been highlighted at the top of the file.

If you have any problems, just comment below and I'll help out.

One way to solve this problem is to create a page specifically for new readers. It is very easy to do, and will help convert more of your one-off visitors into loyal readers.

Don't Change Your Home Page

The traditional blog home page is well suited for returning visitors. It lists the most recent articles first, it emphasises headline so they can be easily scanned, and has a clear About link for learning more about the blog itself.

This is what a person expects from a blog, and that alone is a good reason to give it to them. The New-Visitor page must be something people choose to use; not something that is forced upon them.

Building Your New-Visitor Page with Just 3 Steps

1 - Start with a simple Question & Answer section. Think about the questions a keen new reader would ask, and answer them.

The crucial thing to remember is that this is not your About page. Information about you and your blog (e.g. Why did you start it?) will be of little use to someone solely interested in the content.

Some questions you might answer would be:

• What is this blog about?
• How will it help me?
• Do you offer services for further advice?
• Where can I find the ________? (e.g. Free WordPress themes)
• What is _______? (Explain something unusual from your blog, e.g. RSS, or Twitter)
• Do you have a post on ________? (Literally. Explain how to search for a post, and that if that fails, they should email you with their question, and you might write a post about it).

2 - Move on to an introduction to the topic. This may involve articles you have written especially for this purpose, with basic language and concepts that a novice would need to know. Otherwise, you could link to external resources that you would recommend for beginners.

3 - Create a selection of your better articles, to let readers see the quality of the blog they're on. There are a few ways of doing this:

• Set up a site map with all of your articles, and link to that.
• Manually link to a selection of your best posts.
• Post a number of your most popular tags.
• Link to a special Post Roundup post (e.g. Pro Blog Design in 2007 and Beyond).

4 - Ronald Huereca from The Reader Appreciation Project has come up with a few more ideas for what could be useful, so check those out as well.

Getting People to the Page

All that remains is to give people a way of finding the page. You could do this simply by adding a link to your About-Contact list of links. Other, more forceful, methods would be to place a link specifically where new visitors will look:

• Near the logo or slogan. These areas quickly become blind spots to regulars, but a first time reader is highly likely to scan your tagline.
• Above the post headline. A rather intrusive approach, but practically guaranteed that your link will be seen.
• In one of your ad slots (if you have any).

One of the above would work better for a blog like this one, where the About links aren't overly noticeable.

And that's that. Visitors should now find your blog that little bit less daunting at first.

Is there anything else you would add to the page? Let me know if you decide to make one for your blog.

Why then, would we treat them the same?

The answer is that if we had an easy choice, we wouldn't. But we don't have the luxury of such choice. It would take a complicated setup to serve two different pages to new and returning visitors, and might merely confuse your visitors.

Instead, we can use an easier method. We use our regular home page for our regular visitors, and link to a special made-for-newbies page, for the newbies.

What Does a New Visitor Want to See?

• Information about the site. Let's say a huge James Bond fan opens two new tabs. One is a page from IMDb, and the other is a James-Bond-only blog. Which is he more likely to read?

  IMDb may have great content, but for someone new to both sites, the blog is going to have the edge. If you have an edge on a topic, don't waste it.

  This is a very obvious example (How could you load that blog without knowing it was about Bond?), but an edge isn't always so obvious. What about a metablog aimed at part-time bloggers? Or a gadget blog focusing only on affordable gadgets? Some edges may need to be spelt out more bluntly.

• Introduction to the topic. If you write advice on a certain topic, a large number of your readers may be complete novices on the topic. An authority blog on the topic would cater for these users, with a series of posts covering the basics and culturing an interest.

  These readers may go on to become some of your strongest readers. People always have a sweet spot for the ones that helped them at the start. For example, who here can't remember the site/book/person that first taught them HTML?

• Practical articles from your archives. Some of your posts contain practical advice; advice that can be acted on immediately. But other posts are more theoretical, and contain ideas that a reader might have to think more about.

  For instance, my article on comments and trackbacks is a practical one, with code you can use right away. This one however is intended to make you think. It's about an idea that I want to experiment with and think holds promise, but I don't have any hard proof that I'm right.

  A new reader may need to be sold on you before they put too much faith in your ideas. A good referral link/RSS counter etc. may gain that trust for you, but if not; helping the reader out with some practical advice certainly will.

How Does This Differ From a Returning Reader?

Returning readers are more likely to be after:

• Recent articles and changes. The regulars know the score; all about you, your blog, and your blog's topic. They just want to see what has changed since their last visit.
• Key articles from your archives. On their first visit, they may have picked up on a few of your most popular articles. So what now?

  If you've been blogging for any length of time, then you have a massive archive built up. A reader isn't going to browse through all of that on their own. You need to pick out some of your better articles and highlight those. A "Popular Posts" list may not be enough.

• More info about you personally. On first visiting a blog, you have no interest in learning about the person behind the posts. But if it's your 4th visit to the blog, that could all have changed. The author's name, a photograph, other blogs etc. You suddenly take much more notice of these things.

  I can name dozens of bloggers and their blogs, and each of them I have visited multiple times. I can't name a single blogger whose blog I have only visited once.

More To Read in Part 2

You can now read the second part, Building a Page for First Timers, in which I talk about the practicalities of this idea.

What should be on your newbie page? What is the best format for it? How do you link to it? By that time, I will also have implemented this on Pro Blog Design, so you'll be able to use my setup as a template for your own.

What do you think of this approach to new visitors? Do you do anything special for them on your blog?

As bloggers, we all want to put as much content as we can on the page, but make it look like as little as we can.

It's an interesting paradox, which doesn't always have an answer.

In certain circumstances however, there are indeed ways of cheating the rule, and serving your readers better by doing so.

In this article, I will talk about the 5 main options available to you, and by knowing them, you might find ways to apply them to your own blog.

1 - Dropdowns

When you navigate the web, you are constantly given sets of choices and told to pick one. Links in a blogroll. Pages in a navbar. Countries in a signup form.

Sadly, dropdowns tend to make the information slightly harder to read than it would otherwise have been. And they have the stigma of being old-fashioned.

But on the plus side, they hide a lot of text until it is called for, preventing your page from getting cluttered.

It's a balancing act with no set rules. Dropdowns work well on large lists of options, but not so well on small lists. The obvious example is a huge list of countries in a signup form.

We can go further than that however, and use dropdowns as a way of hiding information that is not going to be useful to the majority of your visitors. For example, monthly archives, and even category archives, may appeal to just a few of your visitors, so they could be dropped down.

2 - Pop-up Windows

Pop-ups are a black word in the internet world, and for good reason. They are slow to load, can't simply be opened in a new tab, and have been abused by spammy advertisers for years.

The advantage of a pop-up is that it gives you a whole page to fill. Furthermore, it grabs a user's full attention as they've just loaded a brand new page.

In general, pop-ups will annoy your users. As such, they should never be used for regular content, and only for links a user will only load once. e.g. Email subscription forms, eBook downloads and streaming videos players.

3 - CSS Overlays

CSS Overlays are a modern version of the pop-up. They allow you to load a new page over the current page. Have a look at Lightview to see some examples, and find out how to implement it yourself.

They have the advantages of loading faster, working better with new-tab-ers, and haven't been abused for as long.

Underneath it all though, they aren't that different to pop-ups. Overlays are best used for content that was too big for the current page, but too small to justify a new page, e.g. Loading full versions of thumbnail images, or a few paragraphs defining a term.

4 - Hidden Divs

Hidden divs allow users to toggle the visibility of certain content. You can read more about them and how to implement them, in my article, Cut Category Clutter and Toggle Visibility.

Hidden divs are a great way of hiding/showing little snippets of content that might otherwise cause clutter, such as lists of sub-categories and quick definitions. They can also be put to more creative use, such as hiding/showing answers to a quiz.

The drawback is that users won't realise they're clicking a toggle link as opposed to a real one. This will cause problems for people who attempt to open the link in a new window (It won't load).

5 - DOMtabs

DOMtabs is a very clever implementation of the simple hidden divs mentioned above, and you can see them in use in the sidebar here, in the brown "Popular Posts" area. They allow you to tab your content into a smaller area.

The web site explains clearly how to set it up, and contains a few default styles already.

Odds are, you've seen DOMtabs before. It is perfect for bloggers wishing to add a few more widgets to their sidebar. My only advice here is that it probably works best for text content, as opposed to images. Visual content (e.g. MyBlogLog, RSS, Entrecard etc.) works by catching your eye, but if a person has clicked a tab to load the content, you already have their attention.

Beyond that, DOMtabs could be used to display multiple author bios in the sidebar or footer. It is also used very regularly in the homepage of "magazine" themes.

Those are the 5 best methods I know of. Do you use any of them on your blog? Or have you come up with something different altogether?

In blogs in particular, the sidebar is a big part of your design. But also in blogs, they tend to be quite poorly done. The reason is that very few of us design our sidebars with content in mind.

I'm guilty as well. When I first designed the sidebar for this blog, I was thinking about leaderboard ads and various widgets. Since then, I've dropped the ads, changed the widgets and added a sideblog.

Odds are, your sidebar content has changed in the course of your blogging as well. It is important to reassess your entire blog every now and again, but the sidebar is one area that you should pay particular attention to because of its changing nature.

In this post, I want to go through how I reassessed mine, and worked to improve it. You can then apply the same process to your own blog.

You can click on the image below to see a full-size comparison of the two.

Step 1 - Organize Your Content

You cannot design well without knowing what you are designing for. The first step is to list out all of the content you are designing for, and prioritize it by importance.

To do this, I wrote out all of the sections that I was interested in having (Widgets, RSS, sideblog etc.), and ran them through my prioritization flowchart, to get the following order of importance:

Group 1 - Slogan, Subscription Options, Search Bar
Group 2 - Nothing
Group 3 - Services Advert
Group 4 - Categories, Popular Posts, Recent Posts, Sideblog
Group 5 - Top Commenters, Twitter

Step 2 - Reassess the Layout

Now you must look at the underlying layout for your new sidebar.

I have written before about 3 column vs 2 column layouts, and chosen 3. There were good reasons for it at the time, but the sidebar has changed, and the reasons no longer applied.

3 column layouts work very well with sidebar images. Adverts? MyBlogLog widgets? Flickr photostreams? They all look good in 3 columns.

However, I now have very few images in my sidebar. The RSS button and the Services advert are the height of it. Instead, I have much more text than I did originally. Thin, 3-column sidebars are not easy to read from.

Look at the comparison image above and compare reading a sideblog description in the old and in the new. The extra horizontal space in the new sidebar makes the content much more legible, which was crucial for both the sidebar and the twitter widget. Even the long headlines are improved now as they all fit on a single line.

Step 3 - Reassess The Design

Another reason for redesigning my sidebar was it had become both bland and cluttered. Does the original style of your sidebar still suit?

For me, the blandness arose because the original design was very simple. It was meant for leaderboard adverts and images, not text and lists of links.

The clutter arose as I added more and more content. The sideblog was the last straw. All designs have a breaking point where you can't reasonably force any more content upon them.

The first priority was the clutter. The RSS area was no longer well highlighted, and telling one section from the next was a chore. I solved this problem by dividing the content into very distinct sections, with ample padding. Depending on your own blog's design, you could do something similar, or use well highlighted headings perhaps?

I also used the DOMtabs script to "tab" the majority of the textual content.

All that remained then was to design. What you do here will depend on your own blog's design, but I found that adding contrasting background colors worked well and brought a new life to the blog. I'm not entirely sold on them yet though. The Twitter widget in particular is more eye-catching than it needs to be...

Step 4 - Special Circumstances

There are always elements of a design that need special consideration. As you redesign your blog, feel free to treat certain sections differently than normal. In my case:

• The search bar is under-used here, so I moved it into the DOMtabs area. It even looked better here as it's not large enough to have its own "section".
• According to the prioritization, the sideblog is more important than Twitter, but the sideblog is just text on the page background, and looks better at the end of the column (As opposed to having a "gap" in the middle of the design).
• The list of categories is not shown by default. Instead, I felt that the list of popular posts was more useful to a visitor, and so I show those instead. More to come on this in a future post.
• As Brian Purkiss recently pointed out, people can get the search and email subscribe bars mixed up. This is particularly true in my case with such a hidden search bar, so I've added the word "email..." to my email form. This, combined with the obvious sectioning of the sidebar (The bright orange background!) should help stop that mistake.

That is how I ended up with the design you now see. It's not perfect, and in another few months, I might redesign it again, but it is much better than its predecessor.

Does your blog's sidebar still suit its content? Or would a redesign be good for you as well?

And to the regulars here, what do you think? Better or worse than the original? (And do you use Twitter?)

And last of all, there was a bit of a hiccough with the DOMtabs code, so if you happen to spot "<div id="stupidtabs"></div>" in my source code, you'll know why...