Blog Surfer

Linkbait: Tasty morsels to entice readers
It sounds nefarious doesn’t it? Makes one think of “bait and switch” or that run-down old bait store by the lake—the one where they store the containers of nightcrawlers in the same cooler as the egg salad sandwiches. Blech.

As restaurants display fresh seafood to
entice diners, you can create linkbait
to increase your readership.

This is the fourth in a series of posts that discuss Search Engine Optimization (SEO) and other Web marketing strategies.

What is linkbait?

It sounds nefarious doesn’t it? Makes one think of “bait and switch” or that run-down old bait store by the lake—the one where they store the containers of nightcrawlers in the same cooler as the egg salad sandwiches. Blech.

In reality linkbait is simply online content designed to attract an audience who will link to your site. But isn’t all content supposed to do that? In theory yes, but linkbait goes one step further. Instead of supplying the usual insight that your readers have come to depend upon, linkbait reaches out beyond your core audience, offering content that is topical, controversial or in some manner more exciting than the usual fare.

Linkbait is like your favorite birthday present. While you appreciated and needed the new sweater, books and CD’s, the Wii/Xbox/bicycle/train set/new puppy/or other object of desire was the one you told your friends about. Linkbait is the content that people tell others about through their blogs, Web site, Facebook pages, Twitters, Pownces, StumbleUpons, etc.

Examples of linkbait

Linkbait is more than supercharged content. It’s content with an edge, this edge could be something like a Top 10 list on a popular topic, a controversial opinion such as a vilification of Firefox (who would do such a thing?!), or a contest offering a popular prize. For example, Fetch Softworks has just announced their Take Fetch Back to School, Win a MacBook Contest (4 runners-up win new iPod Nanos). This contest should be great linkbait because it is geared to students, staff and faculty just beginning the academic year; offers great prizes; and is happening at a time when some of those prizes, the new iPods, are making a lot of news. As a user of their product I’ve already started pondering what to write, and as a blogger I’ve already linked to them. So I think it’s working!

When to use linkbait?

Like your birthday present, linkbait is for special occasions, meant to add to your content rather than replace it. The bait is only part of the overall mix. If you tried to use linkbait in every blog post you would soon end up with a site lacking in continuity. That wouldn’t really serve your goals. But on occasion, if you come up with a clever idea that is related to your goals, adds value to your regular content, and attracts attention, then go for it. Strategic bits of linkbait can help you expand your readership, acquire more incoming links and raise your rankings while adding a bit of excitement for your regular readers.

I could proceed to bore you with more details, caveats, pros and cons, but plenty of others have already written on the topic. If you are considering adding linkbait to your marketing toolkit, the following resources should give you much of what you need to know.

Linkbait Resources

• Wikipedia: Link bait
• Matt Cutts: SEO Advice: linkbait and linkbaiting
• An Introduction to Linkbaiting
• Golden Rules of Linkbaiting
• Andy Hagans’ Ultimate Guide to Linkbaiting and SMM
• The Art of Linkbaiting
• 2007 Guide To Linkbaiting: The Year Of Widgetbait?
• Leveraging Linkbait
• 5 Link Baiting Methods

Your home page is NOT your index; it’s your store front
Space. Designers want to preserve it and clients want to fill it up. Whether you’re a designer, a writer or a client you’ve all participated in this debate. What goes on the home page and what does not?

Space. Designers want to preserve it and clients want to fill it up. It’s not that the copywriters, marketers and others don’t like space. It’s just that they have some important points they want to make, and there is only so much room in that quarter page magazine ad, 2 page-spread, catalog, or Web page. But wait, Web pages aren’t restricted the way print is. We can make it wider—everyone has larger monitors these days. Or we can make it longer—people can scroll. No wait, we read somewhere that people don’t like to scroll. Put it all above the fold. Or put it above the place where I’d have to scroll on a 17″ monitor using a browser that has 5 toolbars. (In other words, the space we’d have in that quarter page print ad.)

Whether you’re a designer, a writer or a client you’ve all participated in this debate. What goes on the home page and what does not? At one point you may have even thought the matter settled. But then Joe in operations suggested that it would be imperative for people to get to the transportation section in one-click. If that’s on the home page, then Sally feels it is equally important to include the section on ergonomics, Brad wants to include the President’s Day sales specials, and Sonia in Plumbing Supplies has just offered up the latest kitchen sink—in scratch resistant stainless steel.

Everyone’s ideas are important. Any of these could be compelling to your reader, and supportive of your goal of selling widgets, clarifying the calculus, promoting an event or what have you. So how do you decide what goes on the home page?

Establish your home page priorities

Your Web site has one or more goals, educational, commercial or otherwise. The Web site project team has additional specific goals. They may want to sell out the stainless steel sinks to make room in the warehouse for next year’s ceramic models. They may want to promote their research to help pave the way for the grant application due in March. These are all worthwhile, but when it comes to the home page I find there are three things we should make clear to our users.

Tell them where they are.

Your home page should make clear the name of the organization and the nature of your business.

Encourage them to come in and look around.

Give them a taste (but just a taste) of what you offer, so they want to learn more.

Provide clear directions to the entrance.

Show them how to enter and navigate your space.

That’s it. If you can achieve these three steps, the rest will follow and Sonia will be able to unload those stainless steel sinks. O. K., I admit that is easier said than done. But let’s compare our site to something more tangible, with which we’re all familiar.

Your home page is like a storefront

In America, particularly in areas of urban sprawl, the well-designed storefront is rare. But if you’ve spent any time in Europe, large American cities, or small towns whose retail districts have not yet been replaced by box stores and strip malls, I think you’ll know what I mean. A store front usually has a large sign over the door (like our Web banner) proclaiming the name (and often the nature of) the business. If you are walking down the street in the hopes of buying hiking boots, the sign over Larry’s Leather Shoe Emporium will make you stop. You’ll look in the window.

If you see patent leather heels surrounded by shiny fabric, you’ll continue walking. That wasn’t the right place. If you see products by Merrell and Columbia sitting next to backpacks and logs on a field of crushed leaves, you’ll recognize that they may very well have what you need.

Next you will look for the door. Ideally it will be obvious. If there are two doors, you want one to be clearly marked as the entrance. You don’t want to walk up to a door and find a 3 x 5 inch sign with an arrow saying, “enter next door.” If you can’t find the entrance you may keep walking. But if the door is clearly marked, you will come inside and look for the hiking boot section. Ideally the store will have clear signage and displays, so you can pick out your boots and make your purchase. (Inside navigation will be the subject of a later article.)

Don’t clutter up the window

I use the store metaphor because it’s easy to visualize. An appealing display of items we want or need will entice us to enter. A cluttered display (with some exceptions) will not.

Imagine Larry’s store window with the boots and the leaves. Now lets add a stuffed deer, BB gun, hunting knife, camouflage vest, pup tent, Coleman Lantern, fake trees, a plastic owl, binoculars and a canoe. Is this a wilderness supply store or a shoe store? No matter, they have boots, so you’ll enter anyway. Now add sleeping bags, parkas, stuffed bunnies, a grizzly bear, a basket of easter eggs, and a mannequin of Little Red Riding Hood carrying an open basket overflowing with jam, cheese, sausages, wine and two crystal goblets. It’s an intriguing scene. You may stop and stare at the window for a moment. You may wonder what the display is about and you may wonder what they really sell here but you might not notice that pair of hiking boots sitting behind the bunny rabbits. Thus, you may keep walking.

Larry’s window, crowded as it may be, may still create an attractive display. But it’s also confusing. When presented with too many choices, it is easy to get confused. At that point the easier choice is to continue walking. The same applies to our Web site. If we don’t present simple and obvious choices, it is easier for the user to hit the back button and look elsewhere than to enter our site—even if we have the information or products they want. (View psychologist Barry Schwartz’s video below to learn more about the problems humans face when confronting choices.)

So what should we put on the front page?

As you are planning the page, think of the storefront and keep it simple. Include your name and a brief description that let’s people know they’re in the right place. Highlight 1-6 products, news items, special offers or announcements (not 1-6 of each). Include a simple menu with less than a dozen (6 would be good) choices that will take them to obviously distinct sections of your site. You may also include a search box, footer, related sites and other simple navigational aids, so long as they offer intuitive guidance rather than clutter. (If your site is a blog it is fine to include your primary content, i.e. your entries, on the first page, as this is standard blogging practice. I’ll address blogs another time.)

These numbers aren’t written in stone. Perhaps you really need 7 menu items rather than 6. It depends on the content. But when you justify 7 it’s easy to think that one more won’t hurt, and what about this bit, then suddenly you are up to 31 and your visitor doesn’t know where to look. Just keep thinking of that store front. While you are doing that, pretend you are the visitor, a person far less familiar with your content than you. Look at your site plan or design draft through their eyes. Does it allow you to make simple choices? Or do you have to think about where to go?

Test your content

It’s sometimes hard to tell how much is too much. Or your team may have marketing research that shows your target market wants to see 50 things on the front page. What they think they want may not be what they can really use, so test it. Create 2 front pages, one with the clutter and one with 6 menu choices. Get some volunteers (unfamiliar with your product or subject area) and ask them to answer 12 questions, the answers to which they will find in your site. Have them time how long it takes to find the the answers. For each question ask how easy or difficult it was to find the answer (on a scale of 1-6). There are many ways to test usability (I’ll write more about that later), but this one is fairly easy to implement, even on a shoestring budget, and it can give you some quick insight between what you think will work and what really does.

Homepage Design and Decision Making Resources

My friend Shirley, from Pownce, gave me the link to the Home Page Design article which offers a number of interesting insights into the role of your homepage. Other than that I thought I’d focus more on the psychology of decision making that really drives our need to make sites simple. To that end I’ve included Mano Singham’s articles on snap judgments and the Barry Schwartz video. These aren’t directly related to Web page design, but they underscore why our design choices are so important.

• UX Matters: Home Page Design
• Snap judgments (1): Mano Singham examines decision making in relation to Malcolm Gladwell’s book, Blink
• Snap judgments and prejudices (2)
• Improving the quality of our snap judgments (3)

Ted Talks: Barry Schwartz, author of The Paradox of Choice: Why More Is Less

In this video, presented by TED (Technology, Entertainment, Design) Barry Schwartz explains how freedom of choice can be stressful and make us less happy, a notion counter-intuitive to those of us raised to think that freedom choice is better. I think it’s an idea we can apply to the content choices we present to our site visitors.

WordPress Theme Releases For 1 / 23
Two Column Themes Orange and Black This is a widget ready two column theme with contrasting colors. It makes use of orange and black colors. Content area is quite big allowing to fit in more content, sidebar is to the left of the page. Sidebar comes built in with Recent Entries and Recent Comments so you do not […]

Two Column Themes

Orange and Black

This is a widget ready two column theme with contrasting colors. It makes use of orange and black colors. Content area is quite big allowing to fit in more content, sidebar is to the left of the page.

Sidebar comes built in with Recent Entries and Recent Comments so you do not have to install those plugins.

Demo | Release Page | Download

Simpleton

Simpleton is a two column theme which makes use of simple colors. The theme comes built in with recent comments and recent themes. The sidebar is big enough to fit in two rows of information.

The theme is widget ready.

Demo | Release Page | Download

UnGrid

UnGrid is a three column theme based on grids which is widget ready. The theme features an integrated banner management and a featured about section.

Font color is a bit light and could do better with a darker shade. Features a extended footer section to display more information. Comes in Greenish / Pink and Blue colors.

Demo | Release Page / Download

Three Column Themes

iPhone Theme

Widget Ready theme with vast use of rounded corners for headers. The main header area is a bit small which makes it hard to have a custom logo. Makes good use of gray color throughout the theme.

Sidebar is divided into two columns with additional space to show off 125 X 125 banners.

Demo | Release Page | Download

MackOne

A fluid theme based on dark colors consisting of red and black. The background and graphics are appealing. Makes use of white text for better visibility on the dark background.

The theme is widget ready and comes built in with related posts, Flickr support, recent comments, WordPress native tags and Socializing options.

Demo | Release Page | Download

Blue Iris

Blue Iris is a fluid three column theme with widget ready sidebars. Colors are mostly made up with variations of blue. The theme has a wide content area making it easier to add wider images.

The header section and sidebars can do with a bit of improvement. Sidebars are fitted in too close together.

Demo | Release Page | Download

A picture is worth a thousand words, but that’s not always enough
How to add captions to images in Photoshop On the Web it is preferable to place your caption in the HTML. If that won’t work and your captions are long, you should also link to a place providing a description of the image and an alternative rendering of the text. Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those…

How to add captions to images in Photoshop

On the Web it is preferable to place your
caption in the HTML. If that won’t work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.

Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.

Establish your project parameters—size matters

Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.

As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.

Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990’s) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.

Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.

Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won’t work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.

How to add text in Photoshop

For this example I’ll walk you through the steps used to caption the image used in this entry. We’ll add text on top of the image and below.

1. Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
2. Resize your photo by going to the image menu and choosing image size. Make sure that “constrain proportions” and “resample image” are checked. Set the resolution appropriate to your project. I’m using 72 for the Web. Choose the appropriate width for your image. I’m using 240 pixels.
3. Click on the foreground color and use the picker to select a color for your type.
4. Select the type tool, click and drag on the image to create your type box, and start typing your content.
5. If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
6. Switch to the selection tool to reposition your type as desired.
7. If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words “drop shadow” to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you’re competition is “Hello Kitty.”)
8. Sometimes a drop shadow isn’t enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I’ve set the opacity of the black square to 50%.
9. If you’ve tried a few of these options and your type still doesn’t look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I’ll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I’ve added .5 inches. Now just add your type to this area. If you’ve added too much space you can crop accordingly.
10. Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose “Save for Web.” Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.

Alternative Text for Captions

Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don’t show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke’s article, Accessible alternatives, to learn more about these techniques. For this example I’ve linked to a description of the image and text and placed it here on the page:

Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans’s knee. Captions built into the image read as follows:

• Spot, can’t you find a squirrel to chase? You’ve been sitting here panting on my leg for years now.
• What, and you think this is my idea of the perfect view?
• This caption is part of the image file, but sits below the picture.

In Conclusion

As you’ve seen, it’s pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.

WordPress/Automattic Publisher Blog
WordPress Publisher Blog is (going to be) written by various team members at Automattic and their goal is to help all publishers get the most out of WordPress. They will cover features that are often overlooked, highlight plugins that extend WordPress functionality and showcase interesting sites being built with WordPress. They are looking for publishers […]

WordPress Publisher Blog is (going to be) written by various team members at Automattic and their goal is to help all publishers get the most out of WordPress. They will cover features that are often overlooked, highlight plugins that extend WordPress functionality and showcase interesting sites being built with WordPress. They are looking for publishers working on innovative projects using WordPress and would like to field questions from users. From the comment that Raanan left on PressedWords, it would appear that they want to focus on large WordPress installations that are doing lots of custom work and help publishers find the proper resources.

A definite daily read!

WordPress Plugin Releases for 1 / 25
AutoInfo Autoinfo is a plugin which allows you to show information such as users online, registered users, feed subscribers, number of posts, number of ping backs, top 3 commented posts, comments, comments per post, top three commentators and more. Release Page | Download Socialize Me Socialize Me is a plugin which allows you to show custom messages to users […]

AutoInfo

Autoinfo is a plugin which allows you to show information such as users online, registered users, feed subscribers, number of posts, number of ping backs, top 3 commented posts, comments, comments per post, top three commentators and more.

Release Page | Download

Socialize Me

Socialize Me is a plugin which allows you to show custom messages to users visiting your site from Social Networking sites like StumbleUpon, Facebook, Digg, Delicious, Pownce, Twitter, Bebo and more.

You can customize each of the messages that will be shown to the user.

Release Page | Download

OutOfDate

OutOfDate is a plugin which shows a message above all the posts older than the specified number of months. Provides and option to customize the message, layout and number of months beyond which posts should carry the message.

Release Page | Download

Blogger to WordPress Redirection

The plugin allows you to redirect individual blogger posts to their respective posts in WordPress. The redirection will help you send search engine users to the right post on your new WordPress blog.

Release Page | Download

Admin Favicon

The plugin allows you to add a custom favicon for your WordPress Admin panel. Can help you to easily distinguish between admin and non admin tabs for your site.

Release Page | Download

AfLinks

AfLinks allows you to insert affiliate links into WordPress content. The plugin shows a little popup on mouse hover with a image and description of the product. The plugin is compatible for webmasters having an account with affili.net.

Release Page | Download

WP-Forum Plugin Security Bulletin
If you are currently using the latest release of the WP-Forum plugin, listen up. The websec security team has discovered a vulnerability within this plugin that can be exploited by malicious users to conduct SQL injection attacks. According to Secunia: Input passed to the “user” parameter in the WordPress installation’s index.php script (when “forumaction” is […]

If you are currently using the latest release of the WP-Forum plugin, listen up. The websec security team has discovered a vulnerability within this plugin that can be exploited by malicious users to conduct SQL injection attacks. According to Secunia:

Input passed to the “user” parameter in the WordPress installation’s index.php script (when “forumaction” is set to “showprofile” and “page_id” to a page with the “” tag) is not properly sanitised before being used in SQL queries. This can be exploited to manipulate SQL queries by injecting arbitrary SQL code.

This vulnerability when exploited successfully allows the individual to retrieve usernames, password hashes, and email addresses for all users, including administrators. However, the user has to have knowledge of the proper database table prefix. This vulnerability has been confirmed in version 1.7.4 which is currently the most recent version available for download.

Description:

WP-Forum is a WordPress plugin that enables you to have a forum directly attached to your WordPress installation. The plugin is based on Simple Forum.

[EDIT] We wish the plugin author was notified of the vulnerability and given a chance to fix it, but there was no mention of it in the advisory. So until a fix is released, we suggest that the plugin is disabled and removed.

[EDIT] As pointed out in the comments, not the same as Simple Forum WP Plugin.