Stellar tips for styling your content area

by Alex

The content area of your blog is where your posts are displayed once you publish them. It is probably the most important of your website because it is the heart of your blog. Everything in that space is the reason why people visit your blog, so you have to work extra hard to make it easy for people to navigate it and read it.

Believe it or not, there are a lot of ways to style your content area. It doesn’t seem like a lot, since mostly the only things in your content area are text and images. But there are factors such as SEO that play into how you design your content area. All of this will be gone over in the post.

Stellar Tip #1: Large paragraphs – A huge a mistake

When you write a blog, it is a golden rule to not write huge paragraphs. Huge paragraphs of text are so boring to read and will often lose the attention of a reader because there’s no organization involved.

4 things you can add to break up large paragraphs

  1. Headings for main ideas (h3, h4, etc.)
  2. Lists (numbered, and bullets)
  3. Images
  4. Just press “Enter” if you think you could divide a paragraph that talks about two or more different ideas

So that’s pretty much stuff you already know (hopefully). You don’t have large paragraphs in your posts do you? Pretty much, if you have anything longer than 5-6 good sentences, you should look into condensing it, or breaking it up.

Stellar Tip #2: The Extremely Important Headings

Headings are the tags you use in your posts to separate text and make it look cleaner. They are also great for organization purposes as they divide the content up into different sections easy.

There are a few tricks I have learned to making the BEST of your heading tags in a couple of different aspects.

Making the best of your Headings: SEO wise

This is a huge mistake we used to have here on Blogussion, and I want to talk about it to possibly help you out on your blog.

So as you know, the heading tags (H1, H2, H3, H4, etc.) have SEO benefits for your website. Correct me if I’m wrong, but depending on the heading tag you do use, it will be weighed differently by search engines.

So for example, H1 tags will be “weighed” differently by search engines than any other heading tag. The H1 is seen as the tag that holds your important content that search engine crawling your site should pay more attention to.

So, when you style your posts, be careful how you use your headings. I have my recommendations for how to use heading tags for the best SEO benefits:

  • H1: Wrap H1 tags around the title of your article. With H1 tags being the most important, and your content being the most important, it is a good idea to combine them both.
  • H2: Don’t use H2 tags in your post. Use that tag for your site title. Your site title is important too, so use the next best tag to wrap your title in.
  • H3 + H4: Use these tags in your post.

My stupid mistake

When we first started Blogussion, we used H2 tags to wrap around our title. Not good. Luckily, it was an easy fix. However, we still use H2 in our posts – and that’s probably not so good. That will be a lot harder to fix as we have over 80 posts with that tag in it, but it will have to be something we change for the best of Blogussion.

Making the best of your Headings: Design Wise

Your headings should be easily distinguishable from your regular content. Ways to do that:

  • Use a much larger font
  • Add a bottom/top border
  • Add a background to the text
  • Add an icon
  • Make heading text a different color, font, or case.

Some great examples of headings on some other blogs are:

1. Smashing Magazine

smashing-mag

Smashing Magazine adds a thick border underneath each of their headings. It’s a great way to distinguish the headings between the regular text.

2. Stand Out Blogger

standoutblogger

Stand Out Blogger makes distinguishing between a heading and regular text easy by adding a simple background gradient to his text.

3. Tutorial9

tut9

Tutorial9 uses a different color in their headings, as well as a larger font. It doesn’t take an idiot to see the difference between the heading and normal text here.

4. Asnio

asnio

Asnio does 3 things with its headings in a post: Adds an underline, different font, and different color text. Making things even easier to tell apart.

So, the key to making really great headings are to make them substantially different from your normal text. It’s not hard to do with CSS, and will make your content look much more interesting with them.

Stellar Tip #3: Add Images that flow well with your content

Images are one of the most important things to add to your content because it really adds a great touch to your post. Every post I write, I try to include at least one image into my post.

You’ve heard all of this before: pictures speak louder than words, a picture is worth 1,000 words, etc. But the one thing I notice constantly when people use images in their post is the lack of time they put into including them. It may just be because I’m a pixel perfectionist, but some pictures are poorly integrated into some people’s blogs.

How to format your images so they look good

There are quite a few good tricks to make your images and post work together with each other. Here are some truly great tips I can give you:

1. Add a frame to your images

A frame around an image really makes your image a bit more professional. A great example of how frames can make your images look great is in the NETTUTS article “The Best Tutorials and Freebies of 2008“.
nettuts

I will tell you how to add frames. It just takes a bit of CSS code. Add the following anywhere in your stylesheet:

.frame {
	background: #EEE;
	border: 1px solid #DDD;
	padding: 1em; 		/* may need to be adjusted */
}

Then, in your posts just add the frame class to whatever image you want it to show around.

2. Wrap your post title around an image

The same way we have an introduction image to all of our posts here. We wrote a tutorial on how to do it in our article How To: Wrap the post title around an image.

3. Wrap paragraphs around image (WordPress)

It looks really great if your image has text wrapping around it. To do that, all you have to do is align the image to the right, or left and the text will automatically work around it.

It isn’t always automatic, you may have to add some CSS to your file. Remember, this is WordPress only.

img.alignright {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

	a img.alignright {
		float: right;
		margin: 0 0 1em 1em;
	}

img.alignleft {
	float: left;
	margin: 0 0.5em 0.5em 0;
}

	a img.alignleft {
		float: left;
		margin: 0 1em 1em 0;
	}

img.aligncenter, a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Stellar Tip #4: Limit the amount of advertisements in your posts

On too many blogs, I see way too many ads being put into a post at once. Sometimes I see like 2 or 3 AdSense banners at the top of a post, and then more throughout the post. Even a lot of inline banner ads. There is nothing wrong with having these things in your content area, but you have to be cautious as to how many you put in and how.

Refer back to the section in this article “how to format images in your post”, and use the same concepts for ads too.

Stellar Tip #5: Never stop looking for ways to improve your content area

Like any part of your website, always look for ways to improve the way your content is displayed. Tweak the font size if you get complaints that it’s too big, or too small. Mess with the image you use in your bullet points. There are so much things you can tweak and improve in your content area. Do anything to ensure that your content looks fantastic!

Fin.

Wow, I let that post get long! What are your tips for making your content area look amazing? Share them in the comments section, or add on to something that has already been stated in this post. Can’t wait to hear your opinions!

Back to the top

by

To learn more about this author and see all of their posts, click below.

View Full Profile →

Discover the Real Meaning...

of what it means to master the psychology of your blogging practice. Find out one of the most missed aspects to blogging now, totally free!

Comments on this entry are closed.

Previous post:

Next post: