Stellar tips for styling your content area

The con­tent area of your blog is where your posts are dis­played once you pub­lish them. It is prob­a­bly the most impor­tant of your web­site because it is the heart of your blog. Every­thing in that space is the rea­son why peo­ple visit your blog, so you have to work extra hard to make it easy for peo­ple to nav­i­gate it and read it.

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

Stel­lar Tip #1: Large para­graphs — A huge a mistake

When you write a blog, it is a golden rule to not write huge para­graphs. Huge para­graphs of text are so bor­ing to read and will often lose the atten­tion of a reader because there’s no orga­ni­za­tion involved.

4 things you can add to break up large paragraphs

1. Head­ings for main ideas (h3, h4, etc.)
2. Lists (num­bered, and bullets)
3. Images
4. Just press “Enter” if you think you could divide a para­graph that talks about two or more dif­fer­ent ideas

So that’s pretty much stuff you already know (hope­fully). You don’t have large para­graphs in your posts do you? Pretty much, if you have any­thing longer than 5 – 6 good sen­tences, you should look into con­dens­ing it, or break­ing it up.

Stel­lar Tip #2: The Extremely Impor­tant Headings

Head­ings are the tags you use in your posts to sep­a­rate text and make it look cleaner. They are also great for orga­ni­za­tion pur­poses as they divide the con­tent up into dif­fer­ent sec­tions easy.

There are a few tricks I have learned to mak­ing the BEST of your head­ing tags in a cou­ple of dif­fer­ent aspects.

Mak­ing the best of your Head­ings: SEO wise

This is a huge mis­take we used to have here on Blo­gus­sion, and I want to talk about it to pos­si­bly help you out on your blog.

So as you know, the head­ing tags (H1, H2, H3, H4, etc.) have SEO ben­e­fits for your web­site. Cor­rect me if I’m wrong, but depend­ing on the head­ing tag you do use, it will be weighed dif­fer­ently by search engines.

So for exam­ple, H1 tags will be “weighed” dif­fer­ently by search engines than any other head­ing tag. The H1 is seen as the tag that holds your impor­tant con­tent that search engine crawl­ing your site should pay more atten­tion to.

So, when you style your posts, be care­ful how you use your head­ings. I have my rec­om­men­da­tions for how to use head­ing tags for the best SEO benefits:

• H1: Wrap H1 tags around the title of your arti­cle. With H1 tags being the most impor­tant, and your con­tent being the most impor­tant, it is a good idea to com­bine them both.
• H2: Don’t use H2 tags in your post. Use that tag for your site title. Your site title is impor­tant too, so use the next best tag to wrap your title in.
• H3 + H4: Use these tags in your post.

My stu­pid mistake

When we first started Blo­gus­sion, we used H2 tags to wrap around our title. Not good. Luck­ily, it was an easy fix. How­ever, we still use H2 in our posts — and that’s prob­a­bly 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 some­thing we change for the best of Blogussion.

Mak­ing the best of your Head­ings: Design Wise

Your head­ings should be eas­ily dis­tin­guish­able from your reg­u­lar con­tent. Ways to do that:

• Use a much larger font
• Add a bottom/top border
• Add a back­ground to the text
• Add an icon
• Make head­ing text a dif­fer­ent color, font, or case.

Some great exam­ples of head­ings on some other blogs are:

1. Smash­ing Magazine

Smash­ing Mag­a­zine adds a thick bor­der under­neath each of their head­ings. It’s a great way to dis­tin­guish the head­ings between the reg­u­lar text.

2. Stand Out Blogger

Stand Out Blog­ger makes dis­tin­guish­ing between a head­ing and reg­u­lar text easy by adding a sim­ple back­ground gra­di­ent to his text.

3. Tutorial9

Tutorial9 uses a dif­fer­ent color in their head­ings, as well as a larger font. It doesn’t take an idiot to see the dif­fer­ence between the head­ing and nor­mal text here.

4. Asnio

Asnio does 3 things with its head­ings in a post: Adds an under­line, dif­fer­ent font, and dif­fer­ent color text. Mak­ing things even eas­ier to tell apart.

So, the key to mak­ing really great head­ings are to make them sub­stan­tially dif­fer­ent from your nor­mal text. It’s not hard to do with CSS, and will make your con­tent look much more inter­est­ing with them.

Stel­lar Tip #3: Add Images that flow well with your content

Images are one of the most impor­tant things to add to your con­tent 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: pic­tures speak louder than words, a pic­ture is worth 1,000 words, etc. But the one thing I notice con­stantly when peo­ple use images in their post is the lack of time they put into includ­ing them. It may just be because I’m a pixel per­fec­tion­ist, but some pic­tures are poorly inte­grated into some people’s blogs.

How to for­mat 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 pro­fes­sional. A great exam­ple of how frames can make your images look great is in the NETTUTS arti­cle “The Best Tuto­ri­als and Free­bies of 2008″.

I will tell you how to add frames. It just takes a bit of CSS code. Add the fol­low­ing any­where 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 what­ever image you want it to show around.

2. Wrap your post title around an image

The same way we have an intro­duc­tion image to all of our posts here. We wrote a tuto­r­ial on how to do it in our arti­cle How To: Wrap the post title around an image.

3. Wrap para­graphs around image (WordPress)

It looks really great if your image has text wrap­ping around it. To do that, all you have to do is align the image to the right, or left and the text will auto­mat­i­cally work around it.

It isn’t always auto­matic, you may have to add some CSS to your file. Remem­ber, this is Word­Press 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;
}

Stel­lar Tip #4: Limit the amount of adver­tise­ments in your posts

On too many blogs, I see way too many ads being put into a post at once. Some­times I see like 2 or 3 AdSense ban­ners at the top of a post, and then more through­out the post. Even a lot of inline ban­ner ads. There is noth­ing wrong with hav­ing these things in your con­tent area, but you have to be cau­tious as to how many you put in and how.

Refer back to the sec­tion in this arti­cle “how to for­mat images in your post”, and use the same con­cepts for ads too.

Stel­lar Tip #5: Never stop look­ing for ways to improve your con­tent area

Like any part of your web­site, always look for ways to improve the way your con­tent is dis­played. Tweak the font size if you get com­plaints that it’s too big, or too small. Mess with the image you use in your bul­let points. There are so much things you can tweak and improve in your con­tent area. Do any­thing to ensure that your con­tent looks fantastic!

Fin.

Wow, I let that post get long! What are your tips for mak­ing your con­tent area look amaz­ing? Share them in the com­ments sec­tion, or add on to some­thing that has already been stated in this post. Can’t wait to hear your opinions!

Go to top