One of the best things you can do to set the tone of a blog post and encourage people to read beyond the heading is to include an image. Most bloggers understand this, because an awful lot of them use images in their posts. But "misuse" of images is more common than "use" of images, if you have the perspective that the purpose of an image in a blog post is to communicate.

Here, then, are 6 rules (I could have called them guidelines, but then no one would argue with me) for using images in your blog posts which deserve a yellow flag when violated:

1. One image per post.

Blog posts are usually short; 300-800 words is a commonly suggested length. That small amount of text simply does not create enough screen real estate to accommodate several images without looking cluttered and unreadable (you DID want people to read your post, right?). The idea of "less is more" has never been more applicable. In cases where multiple images are truly called for (e.g., you have a series of photos showing attendees at an event), you can use one anchor image with a link to launch a Thickbox slideshow (or similar). This is also a good technique to use when you need a large image to show critical detail.

2. Put the image at the top of the post.

Put the image where visitors can see it immediately, right below the heading of your post. I personally like to align the image to the right at the top of the first paragraph: the image is where they can see it and connect it to the heading, but it doesn’t block their entry into the post text as it might if it were aligned left.

3. Make sure the image relates to the heading of the post.

An image should not leave your readers wondering what the connection is with the post, either before or after (or if) they read it. The image should immediately and clearly support or illustrate an idea in your post heading. Most people view disconnects and non sequiturs as annoying, rather than intriguing. If you can’t find an image to relate to your heading, consider changing your heading.

4. When looking for images, bring along your sense of humor.

A little humor or irony in an image (as long as it’s obvious: reread no. 3) can draw people into the post. It’s a bit like telling a little joke before a speech. Of course, if the "joke" is inappropriate or misleading, then you’ve created another issue. So don’t do that.

5. Crop and size images appropriately before uploading.

Any time you see an image that seems to take forever to load in a post, chances are you’re looking at a big image that has been scaled to fit, rather than sized to fit (i.e., the blogger uploaded a 1200-pixel-wide image and scaled it down to 220 pixels wide in the blog editor, instead of resizing the image to 220 pixels before uploading). Get an image editor and learn to use it to crop and size images, at minimum.

6. Don’t use clipart or stock photos. Unless they’re pretty good.

A lot of clip art and stock photography is trite and awful and over-used. But some of it is clever and very good and it perfectly illustrates your concept. Put your photo-editor hat on and refuse to use the former. Under no circumstances should you use an image of a multi-ethnic and gender-balanced group of young people with perfect teeth dressed in business casual gaping in awe at the screen of an open laptop in a brightly-lit conference room.

Tags: Communication, Design/Development

Although I design and develop on a Mac Powerbook, I mostly ignore Safari for two reasons:

1. Safari is about as standards compliant as browsers get, so it rarely needs any special attention.
2. Safari is used on fewer than 4% of all computers (and it seems to have peaked).

I use Firefox almost exclusively (although I’m now experimenting with Chrome for Mac), because it’s very standards compliant, and it gives me about 99% of the same results as a PC version of Firefox. Using FF in my development process means I have the biggest browser covered (that’s right, FF has over 46% of the market, with IE6-IE8 combining for just over 37%). I use crossbrowsertesting.com to hunt for problems in IE. Ideally, I want my work to look the same in all browsers (but I’ll settle for “close” in IE6).

That said, I try to keep in mind an old saying in the web design business: The most important browser to develop for is the browser on your client’s screen. One of my clients is an ad agency, and they are completely tied to Safari (I’m pretty sure they’ve heard of Firefox, but…). So, looking good in Safari is a priority on their projects. Rarely is there a need for a hack, but occasionally it happens.

There seems to be only one reliable CSS-only way to target Safari (incidentally, it also targets Chrome, which has almost 3x as many users), outlined way back in 2007 by Dustin Brewer. You can put this in your style sheet to enclose Safari-targeted rules:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

But then you have a hack in your style sheet. I find it’s easier to maintain (and find) hacks by putting them into a different file, and your basic style sheet is more likely to validate. I experimented with using the above selector in the header to point to a different stylesheet, but had some issues (don’t remember now what they were). Finally, I settled on putting the following in the header, following the basic style sheet link:

<style type="text/css" media="@media screen and (-webkit-min-device-pixel-ratio:0)">
<!––
<?php include("includes/safariCSS.php"); ?>
––>
</style>

This displays the contents of an include file, displaying CSS rules in the header as an "internal style sheet." The contents of the php include file consists of CSS rules, but is not a CSS document. Internal style sheets in the header are usually to be avoided due to maintenance and consistency issues, but by using an include, the Safari CSS for all pages is editable in one file.

By the way, the CSS rules from the include appear in the header for all browsers, but the “@media…” statement means all but Safari and Chrome ignore the styles. Given that I’ve done websites with some extremely complex CSS and only needed 2-3 rules targeting Safari, I don’t think this approach risks adding much overhead.

View a Demo | Download Demo Files

Server Side Scripting Reminder: Because the include is PHP, which renders on the server, the files will not work locally on your computer. To see the results of your experiments, upload the files to a server that supports PHP.

Tags: CSS, Design/Development, PHP for Designers

I have a lot of blogs and news sources in my reader. So many I can’t possibly read them all every day and stil get any work done. But there are relatively few I consider indispensable, and on the face of it, they don’t seem to have a lot in common. Subject-matter-wise, they’re all over the board. There is a common thread, however; or maybe a couple of threads. Each of the following does at least one of two things on a consistent basis:

1. challenges me to think about something in a new way
2. offers usable information that I can incorporate into what I’m doing

Now that I think of it, those [apparently] rare ingredients comprise a recipe for blogging success. I know my own posts can’t boast of either more than occasionally, and perhaps it’s the consistency that’s the real trick with the recipe. Each of these are very successful blogs with lots of readers, so they’re obviously doing something right.

My most valued feeds, in alphabetical order:

Chris Brogan – The guy is practically synonymous with social media in general, and blogging in particular. He preaches the word on social media as a marketing strategy to the faithful, the backsliders, and the non-believers. And he knows what he’s talking about. A must-read for people involved even peripherally with online or social media marketing.

CSS-Tricks – One of the few web dev blogs that consistently presents useful and interesting information. Chris Coyier puts out nuts-and-bolts stuff, like explanations of absolute and relative positioning, centering a navigation bar, etc. But he also offers code snippets, downloads, and a forum. Worth a daily visit.

Duct Tape Marketing – John Jantsch offers practical and pragmatic advice for small businesses. He’s packaged his approach in a book, webinars, and a 14-lesson training program. I have bought and read the book, and recommend it highly for small business owners. His blog posts prod and educate. His website is full of links and resources. If you own a small business, you should be reading this blog.

Fuel Your Creativity – For me, FYC is more about inspiration than anything else—a site that feeds the designer part of my soul.

Hubspot – Hubspot is working to bring measurability to social media marketing. Their blog is a major training resource for business people trying to figure out how to benefit from "attraction" marketing, as opposed to "interruption" marketing. They sell a service that helps measure the effectiveness of online marketing efforts, but they’re not pushy about it. And they offer free webinars and a lot of great how-to-market-online information.

Seth’s Blog – Seth Godin does blogging all wrong. He doesn’t allow comments on his posts, his blog is hosted on Typepad rather than on a webhosting platform he controls, and he apparently spent no more than a couple of minutes customizing his blog’s appearance. But Seth is a marketing guru’s guru and an iconoclast’s iconoclast. He can succeed by doing things differently because he’s Seth Godin. He delights in flipping concepts on their heads. He turns kvetching into a useful exercise in logic. And often, he asks some interesting questions. His posts and observations are usually short, often simple, and almost always thought-provoking (consider that a warning).

ThemeGrade – ThemeGrade fills an important need in the world of WordPress blogs: it reviews and rates WordPress themes on code and SEO compliance based on standardized testing. Before ThemeGrade, it was up to you to figure out if it was a good idea to install and spend time modifying that cool theme you loved the look of. TG ranks themes with gold (currently about 3% of submitted themes), silver (13%), bronze (31%), or no rating (currently 53% of submitted themes). We’re proud to say our Evo4 CMS WordPress theme was rated silver.

WNYC’s Radio Lab – Maybe the most interesting audio on the Internet. Jad Abumrad and Robert Krulwich have fun exploring interesting ideas and we get to go along for the ride. The audio programs get posted about every other week, so this isn’t a daily listen. The podcasts are 15-60 minutes each, and every one is more than worth the time.

WP Beginner – There are several "How-to" WordPress sites, and a lot of them are good, but WP Beginner is my favorite, because it usually serves up something I need or have wondered about. And though it’s suitable for beginners as its name suggests, there is plenty of advanced information there also, simply and straightforwardly presented.

Zen Habits – I’m a regular reader of Buddhist and zen materials. Being mindful and present, appreciating simplicity: these are things that are difficult to bring into our working lives. But that’s what Leo Babauta’s blog is about, and I appreciate its quiet, gentle, and practical advice about working, living, and balance.

So that’s my list of indispensable feeds. I hope there’s something on it that helps you. If not, well, we don’t have a complaint department, but feel free to tell me what should have been included on the list. And Merry Christmas.

Tags: Blogging, Communication, Education, RSS Feeds