No doubt I could list way more than seven elements from perfect blog posts, but these seven seem to cover all the most important bases.

  1. Headline: the 6 words that count most
  2. Storytelling hook
  3. Fewer characters per line at first
  4. Featured image
  5. Subheads for scanning
  6. Content and the 1,500-word sweet spot
  7. Soundbites for sharing

Interesting research that validates the trends we all see on the web. Read the full post here: http://blog.bufferapp.com/perfect-blog-post-research-data

Pictures + words = better social sharing

Pictures + words = better social sharing

Blog

You’ve seen them: pictures with words embedded in them, and words presented as images. They’re everywhere across the web. Some are memes, but more are quotes, advice, and inspirational sayings.

People identify with quotes and jokes and insights, and then they share them, both to help others and to say what they themselves are about.

They’re also a great way to spread the word about an upcoming event:

You don’t always need to have a photo or image in the background. The words themselves can be the image.

For more ideas of how images and words can complement each other (and for a little inspiration to go with), check out the images in this Huffington Post article listing wise quotes by Bill Murray.

And it’s not all decoration: There’s research to show that tweets and posts using images with embedded text get more shares and interaction. See for example “Stop Trying to Get Your Blog Posts Shared and Do This Instead” and “A/B Test: Why You Need to Include Photos in Your Tweets.”

Now that you’re sold on the plan to add thoughts and quotes in this form to your content mix, in a way that fits with your overall message, how can you create these images?

  • If you have an image editor, like Adobe Photoshop or Adobe Elements, that’s more than up to the task. You could even create a layered template to make it simpler to make consistent images quickly. If you work with a graphic designer, have her or him create some layouts for you.
  • Online photo editors like Picmonkey, Pixlr, and iPiccy usually include the ability to add text to an image, with a small selection of fonts.
  • Free sites like Picfont and Piclits are made specifically for creating images with embedded words. They generally have fewer design options, but they’re also hard to mess up.
  • Noteography is a web and mobile app for making images of just words — excellent for quotations.
  • Meme generators like Meme Generator help you build meme images, using the normal meme-standard fonts and frequently used images. Memes are a world and style unto themselves. If you want an image that fits that style, it’s easier to use a generator than to try copying from scratch.

Some tips for making a great, shareable text image:

Make sure you have the right to use the background image. You can’t easily credit the image source once you’ve posted the image to Twitter and elsewhere, so Flickr and other sources of Creative Commons images aren’t your best bet for choosing an image for the background. Instead, take your own photo, buy a photo, use one that comes with your photo editing tool, or use a plain background. Using someone else’s image without proper permission or rights is stealing, and a very bad choice.

Keep the text readable. If the image is busy — has a lot of detail throughout, with no blank or open space — put a translucent background box behind the text, or use drop shadows or outlining on the text, so it stands out. Use a simpler, bolder font face to enhance readability.

Go easy on the number of fonts and sizes of letters. Using one or two at most allows the text to stay readable. (Yes, you can find marvelous examples of text images that use lots of font faces. These are created by people who studied design and know how far to push the boundaries. If that’s not you, stick to what’s sure to work.)

If the text is very long and it’s hard to find an image on which it fits, you can skip the background photograph and use a solid or paper-effect background.

Embed your URL, name, or other identifier in the image, so people can trace it back to you. Once an image is re-shared, any links in your original post can be lost or disconnected from the image. Including a visual link back to yourself gives people a chance to find out who created the image in the first place.

Embed a hashtag too if the image is part of a campaign. For example, this post from the White House promotes a twitter campaign.

Track what happens, and notice which images and text get shared more. Also keep an eye out for others to reshare. And note which resonate the most for you.

“Ms. Closkey, president of Downtown Web design firm Big Big Design, noted that over the past five to seven years, Pittsburgh’s tweeters and bloggers have tapped into a deeply philanthropic vein and produced some remarkable charitable efforts as a result.

“‘It’s interesting because people talk about Twitter being like a water cooler or a cocktail party,’ Ms. Closkey said. ‘I think social media offers technological tools to allow people do to more of what they do in real life. We see tweetups that happen around a charity or a group of people who have a cause.’” Continue reading

How mobile is your website?

How mobile is your website?

Blog

Have you looked at your website on a smartphone or a tablet? How does it look?

It might be that you can see the whole of your site, with the logo and all the home page images visible, all shrunk down to fit the little screen. And maybe when you see this, you think, “It’s all there. It’s fine!”

But is it fine? Can you use the menu to get to other pages? Can you read what’s on the site? Can you find an address, or phone number, or some way to get in touch?

And how long did that page take to load, anyway?

For a website to be usable on a phone or tablet, it needs to work well. It doesn’t need to look exactly the same as it does on a desktop or laptop computer; in fact, it’s probably going to have to look a little different, just because of how the screen sizes and shapes differ.

And just because a site looks OK on one smartphone doesn’t mean it will look good on others.

BigBigDesign.com on an iPhone 3 or 4, according to ResponsinatorOne useful tool for exploring how websites look on various mobile browsers is the Responsinator site, which emulates many popular mobile screens (and some less popular ones). Go to http://www.responsinator.com/ and type a web address into the field at the very top, and you’ll see how it renders on different screen sizes. You can even scroll within the emulated devices to check out other pages and to see how menus work.

Some smartphone behavior doesn’t work the same in the Responsinator as it would on the actual device, if the website uses device detection scripts to modify its behavior. But this gives a partial sense of how a site behaves on smaller screens.

Being able to adjust to screen size is only part of what a website needs to be mobile-friendly. Phones rely on cellphone and data networks that can be slow or unreliable, so a site should be careful about overtaxing them.

Google offers PageSpeed Tools for testing a website to see how long it takes to load and where its bottlenecks or resource drains are. PageSpeed Tools is aimed more at web developers than at the average website or blog owner. But it can give you a heads-up if something is really bogging your site down, both for mobile devices and for desktop visitors.

Knowing there’s a problem is one thing; knowing how to fix it is another. In an upcoming post I’ll talk about options for making your website mobile — from adding a mobile alternative to redesigning with mobile devices in mind.

Photo credit for cover image: Dru Bloomfield on Flickr

Everybody knows that most passwords will remain unchanged. Yet our collective response to Heartbleed has been to patch our servers and email users asking them to do something we know most of them won’t do.

Here’s what our response should have been:

ALTER TABLE users DROP COLUMN password;

It turns out that passwords are obsolete, and they have been for a long time. Like the occasional pay phone you find in the back of a run-down restaurant, passwords have been unnecessary for years. The difference is that everyone laughs and reminisces when they see a pay phone, but nobody does that when they see a password field. But they should.

From “Passwords Are Obsolete, and they make Heartbleed a thousand times worse.” Interesting and worth a read.

How to sell a yellow shirt

How to sell a yellow shirt

Blog

What could be more boring than writing descriptions of articles of clothing for a catalog? After describing your fourteenth long-sleeved yellow shirt, you’d have to be tempted to write something wacky, anything at all that doesn’t involve percentage of cotton versus linen versus rayon, or buttons or the lack thereof.

And if writing description after description is dull, reading them can’t be any better.

The J. Peterman Company takes a different approach. Each item they sell is described with a tiny short story, along the theme that the company founder, John Peterman, travels the world to find interesting clothing and other items, and sells them to his equally interesting customers.

Consider the description for a long-sleeved yellow blouse with dark pink collar and cuffs:

The Next Big Thing.

Breakfast at The Coffee Shop.

Union Square West, not too far from the Strand.

Forget Fashion Week. Forget Madison Ave. I eat here to spot the up-and-coming (trends and people).

Veronica, for example, plays the role of struggling waitress-cum-actress, riding the N train from her little studio in Chelsea to the 14th Street station for her midnight-to-six-a.m. shift.

Wears shirts like these, just in case any director looking for the next Joan Blondell has a late-night craving for eggs Benedict.

Last month she landed a small part in an Italian thriller starring a couple names you might know. Starts shooting on location in Genoa next month.

“Some more toast, please, Veronica.”

The shirt has a name, by the way. It’s the Actress in Waiting Shirt. It’s priced comparably to shirts from other retailers. After the lovely little story of Veronica, the description includes a little more standard info you’d expect to see in a catalog: what the shirt is made of, details about its constructions, where it’s made. The major image for the shirt is a color illustration, but there are also photos of it, tucked into the lower right corner of the page.

The catalog for The J. Peterman Company is a cute little thing, sized smaller than a standard catalog and printed not on glossy paper but on heavyweight stock. It’s the sort of catalog you keep around a while.

As pretty as the catalog and illustrations are, it’s these unique descriptions and the world they evoke that make J. Peterman stand out. Sure, it may take longer to come up with a distinct story about every piece of clothing, accessory, and sundry item they sell. But the result is so distinctive, so memorable, and so much more appealing than standard catalog fodder.

Such descriptions are also what search engines rank highly, and what encourage visitors to read multiple pages of a site. So the time invested in creating them pays off in several ways.

And you can bet they’re a whole lot more fun for the writers to write as well.

Other companies do this well also: Photojojo, John Fluevog, and Betabrand all come to mind. They’re all retailers, but you don’t have to sell stuff to write interesting content.

(By the way, John Peterman is a real person, and not just a fictional company figurehead or a minor character on Seinfeld – he played second base for the Pittsburgh Pirates for three years!)

Big Big Design turns 9

Big Big Design turns 9

Blog

I founded Big Big Design nine years ago today, changing my sideline of building websites for friends into a fulltime job.

It’s been an interesting time since then, with the web and the business world changing drastically in only a few years. To think that the Web itself is only 25 years old! Most of what I work on today is completely different from what it was in April of 2005.

Whatever this year and the next 9 years bring, they’re bound to be quite unexpected as well. Perfect.

7 Essential Free WordPress Plugins

7 Essential Free WordPress Plugins

Blog

One of WordPress’s great strengths is its extensibility: You can add most any feature you need through a plugin or theme (what WordPress calls its templates). Here are 7 free plugins I find myself adding to nearly every WordPress website I set up. Most of these also offer paid, premium versions, which add even more features.

(Note that I don’t mention any security, backup, or caching plugins here. The hosting company we use is WP Engine, a managed WordPress hosting platform. They handle performance, backup, and security for our sites, so we don’t need to worry about those issues.)

WordPress SEO

WordPress SEO plugin examplehttps://yoast.com/wordpress/plugins/seo/
WordPress SEO by Yoast (Joost de Valk) provides comprehensive but easy-to-use search engine optimization tools to your site. It adds a preview to every post and page editor, so you can see how the page titles and descriptions you set will most likely look in search results. And it offers analysis and recommendations per page to help you make your site as search-engine-friendly as possible, with a minimum of effort. It includes XML sitemaps, breadcrumb paths (for better internal linking), and more.

Google Analytics for WordPress

http://yoast.com/wordpress/google-analytics/
Another plugin from Yoast (Joost de Valk), Google Analytics for WordPress does more than embed your Google Analytics code into your site. It ensures you’re using the latest code, helps you use more advanced tracking features like monitoring downloads and outbound link clicks, and metadata. Using this will make your Google Analytics reports richer and more informative, so you can learn more about what interests your website visitors.

Shadowbox JS

Shadowbox JS at workhttp://sivel.net/wordpress/shadowbox-js/
The Shadowbox JS plugin improves how visitors look at the images on your website. If a visitor clicks a thumbnail or small image on your site, the default thing that happens is they are shown either the full size image on a page by itself, with no link or button to take them back to the page they had been on, or they’re taken to an attachment page with the image on it but with a confusing title and strange layout. With Shadowbox JS, clicking a picture opens a popup, with the original page still behind it grayed out. The visitor can click through a gallery of all the images on the page. It’s a more elegant way to show photos on your site, and provides a more usable and friendly experience to your website visitors.

Header and Footer

http://www.satollo.net/plugins/header-footer
Many web management tools require you to add code to the head of the pages in your website, or to the bottom of the page: verification codes for webmaster tools, links to scripts for webfonts, traffic tracking scripts, and on and on. Some themes provide a space for you to insert such codes, but if you change themes you need to remember to copy the codes. Instead, you can use Header and Footer, which very simply injects the code you provide into the head element or into the bottom of the body element of every page in your site. It’s indispensable.

Quick Page/Post Redirect Plugin

http://www.fischercreativemedia.com/wordpress-plugins/quick-pagepost-redirect-plugin/
If you make structural changes to your site and move pages from one URL to another, you need to redirect visitors and search engines to the new URLs from the old ones. This plugin makes that easy. It’s also useful when you want to create a short, easy-to-type URL for a landing page or as a redirect to an external address.

Google Plus Authorship

Search results with and without Google Plus Authorship infohttp://marto.lazarov.org/plugins/google-plus-authorship
You can link content you write on your site to your Google+ profile. This causes your Google+ photo to show up next to your posts in search results — it’s eye-catching, Google seems to rank such results highly, and it helps people recognize you and the topics you write about. This plugin makes it easy to set up the links between your site and your Google+ profile. Check out this screenshot: The top result uses the authorship relationship, while the lower results are regular search results. Both are great, but which one would you be more likely to click?

WP to Twitter

http://www.joedolson.com/articles/wp-to-twitter/
Twitter is more than a broadcast tool, and it’s best used as a way to personally connect with people. But it’s still useful for announcements, and automatically tweeting your new blog posts ensures that you won’t forget to tell people you published something new. I’ve found the WP to Twitter plugin to be reliable and simple to set up and use.


How about you? What are your indispensable WordPress plugins?

 

Photo credit: Paul Wilkerson on Flickr