Blogging for Fun and Profit - Part 2 - A Picture Is Worth 1000 Words

  • Posted on: 9 June 2014
  • By: Shawn DeWolfe
A picture is worth 1000 wordsBlogging is about good prose and links to helpful information. Images are important to the presentation of your content. Here are some tips for how to make images, layout and looks improve the delivery of your message.

Images

The Super Basics

There are some real basics that, just when I assume they’re well known, I get surprised.
  • Images should be made in three formats:
    • GIF: good for tables and line art; bad for photos
    • JPEG: good for photos and it's the all around the middle bowl of porridge
    • PNG: these rock, but they come with a hit. They’re large files but they can be made to be partially transparent. I like them, but if a site is slow to load, it may be because of a run amok love of portable network graphics.
  • Make sure your image is small enough to fit into your blog.

The Other Stuff

  • Make sure your image matches the subject matter. Don’t go so generic that the image could be coupled with anything.
  • Use an image you have rights to use. Take the photo yourself. Or source out Creative Commons images. More on Creative Commons.
  • Make sure you use an alt tag and a title tag in your image call. For example <img src=”example.jpg” title=”Example image” alt=”Example image” /> these tags will be picked up by web browsers used by people with accessibility issues. Likewise, search engines will read these tags and this practice apply context to the image.

A Tale of Three Images

With all of my blog posts, I build three images minimum:
Teaser Image: My front page puts small images beside the teaser text for each post. I have a rule that the images are all 200-pixels wide and then I play with the height to suit the image. You may want to have may all of your images set to a consistent width and height.
Headline Image: I put a large image at the top of my posts. Headline images set the tone for the piece that follows.
Social Media Image: When you share your post on social media, you need an appropriate image that will be coupled with your post. Ideally, you need to have two images, a small image referenced by og:image should be at least 200 pixels in both dimensions.
When you share your post ... you need an appropriate image that will be coupled with your post.< /a>< /div> The large version of the image should be preferably 1500 pixels by 1500 pixels. When you post these large images to the likes of social media, they will crop the top and bottom of the image-- keep this in mind, otherwise you might see some unfortunate cropping. Images will be often downsized to 470 pixels wide by 245 pixels tall. In Drupal, you can add the social media message to the Meta Tags functionality. In WordPress, the SEO By Joost plug-in allows for the coupling of your image to your post for uptake by social media sharing.

Layout

Break-Up

I remind myself of this time and again: break up your text. Too often do I have a long complex and interconnected idea that fits inside of one paragraph. If a paragraph fills a page; or if the content is overtly dry, you have to break it up a little.
Ways to break up a long pieces of text:
  • sever the paragraph where you can get away with it.
  • snug in a small image, right aligned.
  • use a callout to pull out some winner phrase or factoid.
  • lists (see what I just did?)

Columns

Writing for the web is decidedly different from print. In print, columns are a necessity, but pages are only magazine or broadsheet sized, they go on and on. Novices to the web will think the concept of columns map into print. What they usually miss is that additional columns are common, but they contain sidebar information that take people away from actual piece; or add backgrounder information related to the piece. If you have to make some scroll to read down the page, that’s a fail.

Call Outs

My vision is shot. On a bad day, I may only read call outs-- those big excerpts of wisdom is articles. You can add those into your blog posts. More than that, you link them to Twitter as words of wisdom.

<div style="width: 200px; font-size: 18px; font-weight: bold; float: left; margin: 10px;"><a href="https://twitter.com/share?text=The+price+you+set+on+yourself+intrinsically+affects+how+customers+value+you+as+a+freelancer.+ http%3A%2F%2Fshawn.dewolfe.bc.ca/blog/100k-okay.html" target="twitter">Tip #1 : The price you set on yourself intrinsically affects how customers value you as a freelancer.</a></div>

If you don’t feel like making a call-out, I’m here to help! I built
a little call out builder!

Looks

The Theme

Make sure your blog’s theme is mobile friendly-- that is commonly described as “responsive.” For the sake of consistency, you may have to compromise your design just a little: some whitespace may have to persist when you show off your blog on a high resolution view if you want the small mobile view to have some passing resemblance to the large version.

The Colors

Everyone has favorite colors. Black text on white is a classic, but you can consider other combinations that play well together. Go with a color scheme that is easy to see at a glance. Even if your blog is about pirate booty, think carefully before you cast your brown text on a stained treasure map background.

The Font

Use a font that is generally available on all browsers: Arial, Times New Roman-- they’re safe bets. If feel like you’re up for it, your font can be a web delivered font. Some services off web fonts for a small fee. Google offers web font for free: https://www.google.com/fonts

In the quest to deliver good content, try to remember images, looks and the layout.
Image is compliments of Pixabay. Pixabay, let's go for a beer sometime.

Last updated date

Monday, June 23, 2014 - 18:02