Category Archives: Social Media

Some simple guidelines to make your blog look designed, without hiring a designer.

WHY should you care?

Blogs are all about content. We use a blog platform to deliver good content to our audience, and thus promote our businesses or our brand.

How your content is presented, however, can either improve your message, or hinder your message.

Your audience, before they even read your content, is looking at how it is designed, how it looks visually on the page. If the presentation isn’t appealing, they might not read it, or they might read it, but discount it.

If I own a store, I know that in order to get my audience to walk through the door, the store front needs to be clean, the windows organized and the walkway swept. Once people enter my store, my merchandise needs to be polished and presented in such a way that highlights it and that makes it easy for customers to find what they are looking for.

If I own a salvage yard and sell bits and pieces of salvaged items and my customers expect to dig through piles of dusty stuff to find hidden treasure at a bargain price, then I might not worry about how organized or clean my warehouse is. However, if I DO sell treasures and I expect to sell them for what they are worth, I am going to be very aware of how I design my store’s interior and exterior and how my content is presented.

A blog should follow the same principles. If you want people to be able to read your content easily and to value your content, there should be some design consistency in how it is structured.

Step one is KEEP IT CONSISTENT.

The key to good design is consistency. Less is more on well designed websites. The designer chooses a select few fonts, colors and font sizes and these are used in moderation for emphasis. The more you have a variety of shapes, fonts, font sizes and colors on your site, the more cluttered and hard to read it will be.

On your blog, make sure you use consistent capitalization. This is the easiest change you can make to have your site look more professional.

Look at the image below that shows all different treatments of capitalization. It looks like a mess.

Compare it with the image below:

It is much easier to read what the words are saying, if they follow a consistent system of capitalization.

Fortunately, you can fix your blog capitalization with just a few lines of code in your blog theme style sheet. You don’t have to go back in and retype every single blog post title, tag and category name. Using CSS you can transform text to be capitalized, uppercase or lower case.

With these few lines of code in my style sheet, I was able to make all of my blog titles, category names and tags capitalized.

.sidebar_list a {text-transform:capitalize; }
.entry-title { text-transform:capitalize; }
.headline_area { text-transform:capitalize; }

Decide what capitalization you are going to use and contact your blog programmer to make the changes for you, or if you are comfortable doing so, go in and edit your themes style sheet yourself.

On websites that are designed well, things line up.

Keep the WIDTHS OF YOUR IMAGES consistent within a blog post, and even from one post to another.

In good design, things line up visually. Often, a blog will show multiple posts on one page. The width of all the images on all these posts are going to visually relate to one another. If you are using varied sizes  and proportions of images, then it it will start to look disorganized.

The easiest way to avoid this pit fall is to  choose a consistent width for ALL of your blog images.

Under your settings, in the Media section, you can set the widths of how large you want your large, medium and thumbnail images to be on the site.

(These dimensions will depend upon the blog theme that you are using and how wide your post area is.)

I recommend  filling in these settings and then sticking to them when you upload images to your blog posts.

When you click to upload an image, once you’ve selected it, at the bottom of the window you can indicate what size it is and how to align it. If you’ve filled in these values in your media setting, it is a simple step to ensure that all your images are given consistent widths.

If all of the images have a consistent width, then your blog will start to look organized, and the content will be easier to read.

If you want to re-size your images before you upload them to your blog to make sure they are all the same widths, a great free online tool for re-sizing and editing images is http://resize.it.

Step two is KEEP IT SIMPLE.

The blog text editor is not conducive to complicated design layouts. Unless you have a custom theme created with custom fields for displaying specific data, it is best if you stick to the most simple formatting. Put your content in short paragraphs. Use ordered and unordered lists. Upload images and video. But avoid any fancy formatting.

The most successful blogs visually follow a simple pattern for their blog posts. They might start with an image at the top of the page. Then put in a paragraph or two. Then another image or video, and then more text as needed.

They find a pattern that works for the type of content they are going to be blogging about, and they consistently use that pattern on all of their blog posts.

Think about how long your blog posts are typically going to be, figure out a simple  structure that would work for the majority of your blog posts, and stick with that.

This is particularly important if you have side bars in your blog. Side bar content can often be busy and varied. If your blog post content is simple and restful to the eye, the audiences’ attention will settle on it naturally. If the blog content is displayed in a disorganized and cluttered manner, it will blend with the clutter in the side bar, and the content will be harder to read.

THINK TWICE ABOUT ALIGNING IMAGES LEFT AND RIGHT

Be very careful when having the text wrap to the right and left of images. It is tricky to get images that are aligned left and/or right with text wrapping around them to look like balanced design elements in your blog post.

Your blog post is going to be viewed on all different computers, platforms and browsers and what looks great on your computer, might not look the same on another.

The illustration below shows how left and right aligned images can be problematic.

In example 1, the images have different widths, and it looks sloppy.

In example 2, 3 and 4, the images have the same width and are inserted above the paragraph, so they look much better than example 1.

However they illustrate how the same text and images can appear on different browsers depending upon browser settings. You think your blog post is aligned beautifully, but someone else might see the images in an entirely different configuration depending upon how their browser treats font sizes and line height.

Also, beware of inserting an image in the middle of a word or sentence by accident. It might look fine when you preview your blog post. Because the text is wrapping to the right or left of the image, where it is placed in the word or sentence is not noticeable. But the appearance of your blog post when translated into other platforms, like rss feeds and emails, will degrade.

The code that your blog editor adds to the image to tell the image to go right or left on your blog’s website page is not recognized by email clients (gmail, mac mail, outlook etc..), so if your blog posts are being sent to subscribers via email, for them, any image that is aligned left or right on your blog will be stuck right in the middle of the text where you inserted it.

This image below illustrates an email that I received from a blog subscription. The blog post, although it looked fine on the blog, did not look good as an email.

For this reason, I recommend inserting images in between paragraphs and not aligning them left or right..

Think about how long your blog posts are going to be generally, figure out a simple  structure that would work for the majority of your blog posts, and follow that structure on all of your posts.

In Summary

  • Keep the formatting simple.
  • Follow a consistent pattern for the formatting of blog posts throughout the blog.
  • Stick to the same capitalization rules throughout the blog.
  • Choose three image widths for large, medium and thumbnail images and make sure all of your images throughout your blog, stick to these widths.

If your content is well designed, it will be easier to read, and the audience will value it more.

Photo credit 1 –  Photo credit 2

Adding an image with link to your blog’s side bar

Adding an image with a link to your blog’s side bar is a great visual tool for promoting something within the blog, or for offering visual call outs to other websites. It is not quite as easy as a drag and drop tag cloud, however, it is not hard to do either, once you know a little bit of html code.

The first thing to do is to upload the image to your blog media library.

Make sure that the dimensions of the image will fit within your blog’s side bar dimensions. I would suggest keeping the image under 200 pixels wide. The image needs to be a png, jpg or gif image.
Click on the “Add New” under the Media bar in your wordpress dashboards left navigation (see image)

Once on the upload media page, click on the button to choose the files to upload, browsing for the image on your computer.

Once you’ve selected the file and upload it, copy the FILE URL. This is important. Select it, copy it, and paste it into a sticky note or a document so that you can retrieve it later. (see image below)

Now that you have the location of the image on the server, Save all changes and go to the Widgets area of your wordpress admin (under Appearance)

Then select the side bar that you want to place the image with link into – the left side bar (Sidebar 1), or the right side bar (Sidebar 2).

Find the text widget in your widget selections. click on the text widget, hold it down and drag it onto the side bar where you want the image to go.

Once you’ve dragged the widget to the side bar, click on the down arrow to open it up so that you can edit it.

Here is what you want to type:

(NOTE: When I say “image-location”, I am referring to the location of the image that you uploaded to your media library. You copied that location and saved it. When I say “link-url”, I am referring to the website address that you want to link to, be it a page on your blog or another website.)

<a href=”link-url“><img src=”image-location” border=”0″ /></a>

Tip 1: if you want the link to open in a new window, include  target=”_blank”   in the <a> tag.

For example, <a href=”link-url”  target=”_blank”><img src=”image-location” border=”0″ /></a>

Tip 2: Make sure to include the http:// at the beginning of your link-url. (see image below)

When you are done, hit the Save button.

Make sure to check it out on your blog to make sure it worked.

adding e-commerce to your blog

Adding e-commerce to your blog is easy with paypal. If you have a paypal standard business account, you can easily generate sophisticated “add to cart” or “buy now” or even “donate” and “subscribe” buttons to your blog posts. This is an inexpensive way to add shopping cart options to your blog. This video shows how easy it is to log into your paypal account and generate the code to add a shopping cart button to your blog posts. Paypal takes a percentage of your sales, similar and comparable to other merchant services, but it charges no monthly fees. I recommend paypal to my clients, and, when shopping online, I prefer to check-out with paypal whenever the option is given me. In the video below, I show how easy it is to create e-commerce buttons for your blog.

If you found this tutorial useful, feel free to test the button below and make a donation.


embedding flickr slideshows with video into your blog

Flickr has a pro membership. For 24.95/year or $47.99 for two years, you get unlimited uploads and storage, unlimited sets and collections, access to your original files, stats on your account, add-free browsing and sharing and video upload tools.  Flickr’s pro membership lets you upload video clips up to 90 seconds in length and 150mb.

Flickr slide shows are not the most elegant, but with the ability to add video, what a great addition this can be to your blog or website!

  • on a travel site or real estate site, to show a montage of photographs and  videos of a featured location
  • on a cooking site, to intersperse “how to” video and photos of the final products
  • start a photo slide show with a video introduction.
  • piece together a slide show of multiple videos – to create a full length tutorial or demo.

In three easy steps you can create a set of photos and videos on flickr, and then embed that set into your blog or web page.

  1. Log into flickr, go to upload photos and videos (under the “You” menu in the top navigation). Upload your photos and videos. Make sure you have selected that anyone can see your photos.
  2. Once your photos and videos are uploaded, click on the “Organize” link in the top navigation, and then click on “Sets and Collection”.  In the top left click on “Create a new set”, and drag your photos and videos from your photo stream at the bottom of the page onto your set. Your screen should look like this:
    flickr-new-set

    Once you’ve dragged all the photos and videos into your set, hit the save link at the bottom of the left column to save your new set.

  3. Click in the top right the link that says, “Your photostream” to return to your photos. In the right column you should see your sets. Click on the image representing the set that you want to share, and then click the “slide show” link in the top right. When the slide show loads, click the “Share” link in the top right. This will give you embed code to add it to your blog or website. Make sure you switch to the html view in your blog editor before pasting in the code.

I created a set of images of our puppy, and included a quick video that I shot this morning – just to test how it would work.

View my slide show of our miniature schnauzer, Rosco, below.

If you don’t want people to be able to download your flickr photos, when you log into flickr, in the top navigation under ‘You’, choose ‘Your account’ and then click on the ‘privacy and permissions’ tab. The first setting is “Who can download your pictures” and there is an ‘edit’ link to the far right of it. Click on that link to adjust the settings.

can twitter hurt my business?

I signed up for twitter in February of 2008, but have only recently been really studying the twitter stream. What I first observed appeared to me very unprofessional – people chatting back and forth (similar to my kids IM-ing their friends). However, I am now realizing that there are different reasons to use twitter, and each use begets a different interaction.

Here is what I have come up with.

1. Using twitter to broadcast and promote your business & brand.

2. Using twitter as a source of incredible resources in your field – for education (I love this about twitter).

3. Using twitter to network with professionals in your field.

4. Using twitter to socialize with people who share similar interests.

Some people who twitter, sign up for multiple twitter accounts – each one geared towards a different type of interaction.

Why? Because different interactions attract and repulse different followers.

Example: If I am using twitter to promote my business – linking to blog posts and helpful resources, twitting about special offers and classes, I will get followers that are interested in what I offer, and that is what they expect. If suddenly I start chatting with someone who watches American Idol, and we start chatting back and forth about our favorite contenders, the people who are following me for business information may get annoyed and unfollow quickly. Then, when I do have a great idea or product to broadcast – my potential clients aren’t with me anymore.

It makes sense, then, to have one twitter account for socializing, and one for business.

*************

ADVISE (from the mom in me)

Keep it clean –  What you twitter about is public domain, you don’t know who is listening in. It is easy to feel insulated when chatting with friends and colleagues – but keep in mind that potential clients and referrals may be reading what you write. If you don’t want to potentially damage your professional reputation, be polite, be respectful and don’t cuss.

Don’t take it personally –  It is okay if the people you follow don’t follow you back. Remember that twitter is a wonderful resource for information. Keep focused on WHY you followed them in the first place, and don’t get hung up on the popularity contest.

Expand your wardrobe – If you are going to use twitter to both promote your business, and to socialize, create more than one account – just like having your work clothes for the office and your casual clothes for the coffee shop. First impressions are important.

************

AND BACK TO MY QUESTION…

Can twitter hurt my business? I would like some feedback on this. My take is that it won’t hurt, but it might not help if you’re not clear what you’re using it for. Right now the only draw back that I see, is that it can be addicting – and can really cut into productivity if you’re not careful.

What do you think? How does twitter effect your business? And do you have some good twitter resources to recommend? Please comment.

Creating an avatar image with gravatar

Heather Goff

Ever wonder why images or photographs sometimes appear next to people’s comments on blogs?  Those images are called avatars, and it is really easy to create an avatar image for yourself. You, too, can have a photograph or icon that will follow your comments around the internet.

Why would you want to do that? For branding, and to call attention to your comments. You don’t need to use a portrait. You could use your logo, for example.

Below, I am going to walk you through, step by step, how to create your custom avatar image using gravatar.com.

  1. The first thing to do is to have an image on your computer that you want to use. I used a photograph taken of me by Lynn Christoffers – a Martha’s Vineyard Photographer.It doesn’t have to be square. Gravatar will let you crop it once you upload it.
  2. Step two: Go to http://www.gravatar.com
  3. Step 3: Click on the “Sign up now” link. (view image below)gravatar12

  4. Step 4: Enter the email address that you want your avatar image associated with. (see image below)gravatar21
  5. Step 5: They will send you a confirmation email.
    Click on the link in the confirmation email to activate your account. (see images below)
    gravatar3

    gravatar4

  6. You will then be directed to a page that will ask you where the image is that you want to upload.gravatar51

  7. Choose where it is. Search for the image and upload it.
  8. You will then be able to crop it to be the perfect avatar image.

    gravatar7

  9. When you’re done cropping, you will be asked to rate it based on the image content.gravatar8

  10. The final step is to assign the image to your email address. Just check the box next to the email address that you want to associate with the avatar, and click on the “use for selected address” button. Then you’re done. It is that easy.
    gravatar9

You can log into gravatar at any time to update your avatar images or add new email addresses.