BlogDragonIndia

Introduction

When designing blogs I noticed there are a few different design elements that I have to take into account every time. I have broken these different design elements into nine different parts. The more attention you give to each part, the better your overall blog design will be.

1. Header
2. Content Area
3. Primary Navigation
4. Secondary Navigation
5. Headlines
6. Comments
7. Post’s Footer
8. Footer
9. Advertisements

1. Header

The header is the first thing most visitors see when they come to your blog and it is also one of the most important. It is important for branding and making your blog stand out apart from the millions of other blogs. It is important that the header be unique so that is is memorable. This is why headers are usually given the most attention to in blog design, even by people who don’t do anything else with their blog design.

Examples of great blog headers:

1. Octwelve

Octwelve is a good example of using a cute character in the header to make it very distinct from other blogs. It also does a good job of quickly telling you what the blog is about in the header.

2. Cult foo

I like how Cultfoo’s header just breaks the boundaries of rounded corners and rectangles. This creates a very distinct and appealing header for a blog.

3. Darkmotion

I am a big fan of darkmotion’s style as you can tell if you have read my other posts. And one of its strong points is its very cool header design. It is just so playful and really draws me in.

How to make your header design great for your blog:

1. The first element in a blog design that I like to design is the header, because I feel that it sets the tone for the rest of the blog design. So I recommend to decide on what message you want to convey, title, and taglines before getting to work in photoshop. This will prevent a lot of headaches and changes down the road.

2. While there are many different ways you can design a header for you blog, it is important to remember to prioritize the communication of the purpose of your blog above everything else. A reader needs to be informed as quick as possible as to what the purpose of your blog is.

3. Get creative and don’t be afraid to try different things until you find a header design that works for your blog. This is generally the first thing people see when they come to your blog so make it memorable.

2. Content Area

The content area is where your readers will spend most of their time when they are on your blog. It is important to make sure that this area is easy to read and have minimal distractions. It is also important to create a well established hierarchy where the different elements of your design gets less emphasis as your go down.

Examples of great content area:

1. Simplebits

Simplebits’ content design is easy to read and the links pop just enough to be noticed, but not too much to be distracting. It has a very soft look to it.

2. We Love WP

One of the biggest problems with dark designs is that it is hard to read, but when done right it can work very well. WeLoveWP uses a soft light brown that doesn’t contrast too much with the dark background so it is easy to read.

3. We Break Stuff

I like the combination of color and dotted underlines for the links used here.

How to design a great content area:

1. Build a hierarchy that establishes a flow where there is less emphasis as it goes down in the list. For example, headings should pop more than links and bold texts.

2. Keep the design of the content consistent. This lets the reader know that they are reading information that are closely related to each other due to their similarity.

3. When styling links, make sure that they pop out enough to call attention to it, but not so much that it is distracting when reading.

3. Primary Navigation

The primary navigation is the set of links that lead to different areas of your blog. This is usually placed on the top near the header, but it doesn’t need to be. It is good practice to place it near the header though, because that is where most users will expect them and look for them.

Examples of great primary navigation:

1. A list apart

A List Apart is one of the best examples of good primary navigation design on the top.

2. Mindtwitch

Mindtwitch is a good example of using texture to make the primary navigation pop out more.

3. Jogger

Jogger’s primary navigation is simple and easy to do, but it serves its purpose and has been integrated into the design just as well.

How to design a great primary navigation:

1. Keep the amount of primary navigation links low. There is no hard number for the max amount of primary navigation links, but I would recommend under 6 or 7.

2. Primary navigation links should be reserved for major areas of your blog that you want the reader to have access to on every single page of your blog. If they don’t need it on every page, consider putting the link in your secondary navigation area.

3. Examples of common primary navigation links are contact and about. What your specific primary navigation links would be depends on how you structure your blog and what you want people to pay attention to.

4. Secondary Navigation

The secondary navigation is the set of links that lead to different sections of your blog. This usually comes in the form of some sidebar. Secondary navigation is important because it gives your readers easy access to other parts of your blog that the primary navigation does not cover.

Good links to put in your secondary navigation are popular posts, links to series pages, and other items of interest that you want your readers to have quick access to from anywhere.

Examples of great secondary navigation designs:

1. Elitistsnob

I like how each section in the sidebar is given its own clear area so it is easy to read and find what you are looking for.

2. Mancub

I like how the sidebar just seems to slide out from the content and is clearly separated from the content.

3. Designdisease

Design Disease uses shades of orange here in order separate the different sections of the sidebar very well.

How to design a great secondary navigation for your blog:

1. Just as with the primary navigation, only include necessary links and do not fill it with random links for no reason.

2. Divide the secondary navigation into different clear areas for different types of links. This will help keep the secondary navigation organized and easy to use.

3. Do not clutter your secondary navigation with unnecessary widgets that doesn’t really help the reader find what they are looking for. That calendar might look cool, but it doesn’t really help anyone.

5. Headlines

The purpose of headlines is to draw your readers in and make them want to read the rest of your blog’s post. The best way to do this is by making your headlines pop out. This can be done in a variety of ways so get creative.

Examples of great headline designs on blogs:

1. Henry Jones

Henry Jones’ blog is an example of a very simple headline design yet it does what it is suppose to do and that is to draw the user’s attention to it. Henry also uses cute icons to draw the user’s attention to the date and comments.

2. I Love Typography

This is a great example of what you can do with pretty much the font and color to make a creative and interesting headline for a blog.

3. Blogsolid

Blogsolid if an example of using an interesting design near the headline to draw the user’s attention towards the headline.

How to make your headlines pop.

1. An easy way of doing this is by making the color for your headlines different from your body text.

2. You can also use a font that is different from your content. The most common way of dong this is to use a serif font for your headlines and a non-serif font for the rest of your content.

3. Size. While size might seem like a given, I still see people who change the size of their headlines only a little bigger than their content, which makes it hard to tell if it is a headline.

4. A pretty popular way of making your headlines pop is by making the date of the post stand out. This blog uses this technique.

6. Comments

Comments are where the discussion of your posts take place and it is important to design this area in a way that it promotes communication. You can do this by making it easy to tell different comments apart, adding numbers so it is easy to refer to other comments, make the author’s comments different enough so that it sticks out and is easy to scan when a user scrolls down the comments.

Examples of great comment designs:

1. Chris Shiflett

Chris’ comment design is very simple and easy to read. It separates the comment from the author’s information into different sections that makes it easy to glance at for information.

2. Darkmotion

I like the separation of author’s information and content here into different blocks. It makes it really feel like a conversation with each other.

3. Blog Design Blog

I am including my comment design, because a lot of people said they like it. What do you know, I like it too! I went through dozens of variations before I settled on this one and I used the following guidelines when designing it.

How to design a great comment design:

1. Make it easy for a reader to see that each comment is separate from each other. An easy and common way of doing this is by alternating the colors for the comments. You could just as easily separate comments by putting it into clearly separate areas of real estate.

2. Design the author comments so they pop out more than regular comments, but not so much that it doesn’t look like it is part of the discussion. Small changes in color or design can do this well.

3. Separate miscellaneous information like name, date, and number from the actual comment itself. It makes it easier to quickly scan a discussion and if they want to they can read the misc. information if they want to.

7. Post’s footer

The post’s footer element refers to the area at the end of a post and before the comments section. A post’s footer often gets neglected so much it is ridiculous. It is a very valuable area of real estate on your blog design as it gives you a chance to direct your readers attention to other important articles on your blog after they have read a post.

People spend hours perfecting other elements of their blog design, but when it comes to the footer of the post they just stick in one of the default safe designs. But is it really safe when it sucks?

Examples of great footer designs for posts:

1. Freelanceswitch

I really like Collis’ blog designs. They are really sharp, clean, and a very close attention to details. The footer for Freelanceswitch’s post does a real good job of separating the content from the extra information provided in the footer.

2. PSDTuts

This is another one of Collis’ blog designs. This one focuses the user’s attention to different places the reader can vote for or bookmark the content if they like it. I really like the attention he gave to it and how the next section uses a different background color to separate it from each other.

3. Standards for Life

I really like the clean feel of Standards of Life’s footer for its posts. The alternating colors for the similar posts is a nice touch as well as the design of the foot notes. (foot notes not shown in screenshot)

How to design great footers for the posts of your blog:

1. Give the footer of the post a clear area separate from the content. This lets the reader know that it is not part of the content and it also helps it pop out more. You can do this by using a different background color.

2. Decide what you want in the post’s footer before beginning the design of it. This will help cut out unnecessary garbage and make the design process more smooth.

3. One of the best content to put in the post’s footer is links to related posts. This makes it easy for your reader to find other interesting posts on your blog.

8. Footer

Footers are interesting in that most people don’t really use it and just stick a copyright on the bottom with some basic links. But they are a great way to add more secondary navigation to your blog without overflowing your sidebar.

When people arrive at your footer, they would have just finished reading your article and maybe some comments. At this point it is good to provide secondary navigation that can lead them to other great articles you have on your blog.

Great secondary navigation links would be to your popular posts, other great posts, and recent posts. You could also stick a small about section or more contact information if one of your goals is to have them contact you.

Examples of great footer designs on blogs:

1. Designshack

I like how Designshack uses its footer as its main secondary navigation and doesn’t use a sidebar.

2. Web Designer Wall

I like the attention to detail that Nick spent on his footer. It looks like he spent the same amount of time as he did on his header and the result is amazing.

3. Chris Shiflett

This is a good example of a clean and simple footer that does what it suppose to do very well.

How to design a great footer for your blog design:

1. Design the footer so that is contrasts with your regular content. This will let users know that they have reached your footer and makes it pop out to them.

2. Only include links you think people who have read your article would like to see. Avoid miscellaneous information that doesn’t really help the user at this point like recent comments.

3. Keep it simple and don’t go crazy with the design. Focus on making it useful and usable.

9. Advertisements

More and more blogs are using advertisements on their blog so it has become an important element to design for. An ad placed with no thought to the blog design sticks out pretty badly and will make your blog design look terrible. You also have to be careful with the placement of your ads so that it doesn’t overpower the content.

If users are too distracted by your ads, then they won’t be able to read your content. So while you might get money for the click, they are less likely to come back to your blog. You should prioritize your content over your ads at all times, but if you design and place the ads right then you will still be able to make money while retaining your readers.

Examples of great ad designs on blogs:

1. Copyblogger

Copyblogger uses the standard 6 125 x 125 ads as well as a bigger one on top. They are clearly labeled as sponsors and before you even see the ads you see their tagline, which shows how much they prioritize their content over their ads.

2. Webdesignerwall

Webdesignerwall uses not only the standard ads, but has one inside the blog content. It is clearly labeled and designed in a way so people can tell it is not a part of the content easily.

3. Problogger

Problogger uses a small banner on top of the standard ads next to its logo really well. It does not overpower the logo or content at all.

How to design for ads?

1. If you are going to have ads on your blog, then you must take this into account as early as possible in your design. Preferably during the pencil and paper stage of the design. This gives you the most flexibility in changing your blog design so that ads fit seamlessly in it.

2. The most popular methods of advertisements on blogs are google’s adsense and 125 x 125 banner ads. Google’s adsense is a lot more flexible since they come in various dimensions so find one that works for you. 125 x 125 ads are less flexible, but they are usually placed in the sidebar next to each other in a block of six ads.

3. After you figure out the ads you want to use on your blog, go find examples of it and copy n’ paste them into your mock up. This will help you figure out how it works in your design and allows you to make quick changes until it is how you want them.

4. Remember when designing your blog design to make the ads noticeable, but not overpowering the content. The sidebar is generally the best place to put them. The worst place to put them is where they can be mistaken as actual navigation links.

Google has an ad that is just a bunch of links and I have confused them more than once as navigation links. Labeling the ads as sponsors helps with this problem.

I often get asked this question by people who have been blogging for some time, but are new to blog designs. They want to get rid of their blog design templates and take their blog to the next step by having a custom blog design. There is usually just a little problem, they don’t have the money to hire someone or the expertise to build one for themselves. If this sounds like you or you just want to learn even more, then this series just is for you.

In this series, I will focus on how I would learn how to create a blog design if I were to start all over again from the beginning without any knowledge in the area of blog designs, web design, or graphic design. Basically starting over from scratch with the goal of creating an awesome blog design for my blog.

In the process, I will show you how you can create a blog design for your own blog. While there are thousands of ways to approach learning how to create a blog design, I will approach it in a way that I have found to be very efficient when it comes to learning any new skill and getting it to an above average level. These are the basic steps I feel that a person needs to pass through in order to reach a level where their skill is good enough to create a blog design from scratch. I find that a lot of times people new to something tend to take these steps in the reverse order and only after failing a few times do they managed to get all the steps or just end up giving up altogether.

I must warn you though that this method is not for everyone. It is not a method that will get you a good blog design tomorrow; there are actually no methods that can do that unless you can pay someone a lot of money. This method is about building the fundamental skills in order to build a great blog design.

1. Figure out what you need to know and the price you must pay

There are a few skills you need to learn and there is no escaping that. Creating a good blog design is a huge time sink in the beginning, because there is a learning curve. Prepare to invest a lot of time and patience, even more so if you have less experience in something related to blog design.

2. Buy, borrow, or steal the best books

There is no substitute for a good book on CSS/XHTML, graphics design, and typography. Can you get by with online resources only? Yes, you can, but there will be a lot of gaps in your knowledge that can frustrate you. It is just not worth it when your local library is likely to carry a good book. I used my library extensively and purchased ones I couldn’t get through the library.

3. Gather the best online resources

Online resources should be used as a supplement to books and not a replacement. Online resources are often very specific in what they teach so they do not cover everything you need to know.The exception is with php though because you really only need to know snippets of php code to create a blog design unless you are trying to do something very complicated. I found a php book to be very valuable for when I was writing a plugin for WordPress.

4. Learn from the best

Find out what the best are doing and imitate them. This does not mean copy their designs. What it means is to not reinvent the wheel by using what already works. There is a reason blog designs don’t have circular navigations that fly around because it does not work. Learn from others and your skills will grow fast.

5. Experiment with your blog design

There are a ton of good tutorials that will teach you specific skills you need to create a blog design, but after that there is no escaping trial and error. Behind a good blog design are many failed ones that you don’t get to see. Persevere and your blog design will be godly.

To be continued…

Despite the fact that the words ‘blog’ and ‘blogging’ were added to our vocabulary lately, most people have known the meaning of these words for hundreds of years. They just called it by a different name.

It was known as a ‘diary’ instead of ‘blog’ and people never dreamt to make money with their everyday writing. Millions of diaries have been either been destroyed, thrown away, or still collecting dust in drawers and attics. What a waste of resources and potential income that could be derived from this precious content!

A new generation of folks has become smarter and more capitalistic. Instead of writing in a conservative journal, they begin blogging on the Internet and turn every word into cash. Even if these words are written with grammatical mistakes. The laziest Internet users went even further! They learned how to make short video clips with camera or cell phones and begin to profit from this video content instead of the writing content.

Here is no question that anyone can write in a personal diary: Men, women, teenagers, retired people, educated professionals, and school drop-outs, etc can enter their thoughts into a diary. Yes, anybody can do it! But for some mysterious reason many people believe that blogging is much more complex than writing in a diary. Believe me, it is not.

Of course, instead of a book and pencil you will need having a computer with an Internet connection and being able to type with at smallest amount one finger. As soon as you have a computer and a subject to write about, you are all set for making money with blogs. Attractive soon, people who don’t have blogs will be as rare to find as those who don’t have email. You better learn now how to do it now or in future you could be rapidly left at the back.

 

Blogging has most likely been the most fun internet marketing motion I’ve undertaken in my online business. I love to write, and reach out to my website visitors with new information, news, reports, opinions, or articles that I’ve bent that depiction a little of my character and give my readers something they want to hear. Not only is it fun, but it’s free, profitable, and generates hoards of traffic to your site, give that you make class posts with quality content and know how to market your blog. There are good ways and bad ways to blog, so here are a few essential things to keep in mind when making your blog posts:

First you have to write something that people will be interested in reading, and reading regularly. Posting your articles to your blog is the best way to get quality content on your blog, but it’s also good to write about your own personal experiences and opinions. Your articles should be at least 500 words, and your personal comments can be shorter, but still containing quality content. You don’t want to post just one incredible article packed with content, you want to post many, and try to make a blog post every day, every other day, or even paper so that your readers know that your blog is fresh and updated regularly. The first a small number of months that your blog is launched are critical months when you want to attract a allocation and give them enough that they bookmark your place to come back to it frequently. Giving your blog a domain name that’s easy for them to retain information and represents your contented with good keywords is also a good idea.

There’s another thing you can do with your original articles to gain exposure to your blog, and that is submitting them to a blog carnival. This means submitting them to a site that features and summarizes maybe 5 excellence articles on an exact topic. Other blogs will link back to this carnival host, giving you more excellence transfer Also, when you make a blog post, you can link to other people’s blog articles, which leaves an entry resting on their post to your post. It may attract other bloggers to you, who may in turn link back to your posts.

Once you have a blog, you want to expose it to the right viewers. A good way to do this is by making comments on other people’s blogs whose content is related to your content. If you randomly post comments all over the place on blogs unrelated to what your site is about, then you won’t generate the kind of traffic you want. Stick to your place, and you will get readers from that niche wanting to click on your blog link at the end of your comments. It’s also a good idea to encourage people to make comments resting on your blog posts, and to reply to these comments to keep a conversation going. The more explanation that are absent on your blog, the more other people visiting your blog will realize you have something important and valuable to say, in addition to they will want to read it to find out what the entire buzz is about.

I have also joined a blog traffic exchange to get traffic to my blog, but you can also submit your blog to different blog directory sites, such as Blog Top Sites. This site allows you to add a small bit of HTML code to your blog so it can be rated in a particular category and will help get you more traffic and better ratings. If you remember to not only make quality content for your blogs, but also market your blog efficiently by commenting, linking, and submitting frequently to the right places, you will be on your way to having a accepted and well-visited blog!

Choosing a blog theme is gory hard work if you are going to does it right. Lately I said “Not all themes are equal“. I thought I had chosen a solid theme, it turns out I was wrong.

Note that in the Google bot’s opinion, my categories were more important than anything else. I investigated other sites that were using the same theme, and the results were pretty similar.

Now I could have a blog consultant look at optimizing my theme, but that would take hours and a few hundred dollars. I’m just not ready to use that kind of money on a blog which doesn’t make any money!

So I was back to the drawing board. Here are my top 5 steps to choosing a blog theme.

Step 1. Researching

Firstly you need to understand the basics of what makes a good blog template. I read, amongst others, the following articles.

Are Your Blog Theme Keeping Readers Away, Five Free, and Beautiful Word Press Themes to help your SEO and its follow up Five More wonderful and Free Word Press Themes by Sarah Lewis from Blogging Expertise? Sarah had presented some enormous themes, but none of them actually grabbed me. What it did do was provide me a better idea of what I should be looking for.

Step 2. Defining your Requirements

So, from my research I strong-minded what I wanted from a theme (and the first few are straight from Sarah’s post):

A. Emphasizes blog name

B. Has unique page titles

C. Has a good code structure

D. Emphasizes post title

E. Aesthetic wish list (3 2 columns, photo image, not too wide a border up top, customizable, widget ready, not too narrow on a page…)

F. Not too many bugs, as I wouldn’t know how to fix these.

G. Validates, or nearly validates in terms of technical specifications via the Markup Validate

Step 3. Investigating

This is most likely the most time consuming. It requires visiting theme after theme (Word Press Theme Viewer is a great place to start), reading comments, seeing how much support is being offered by the developers of the theme and visiting the developers website as often they have released other themes.

Look for fast responses from developers when bloggers experience complexity or bugs with the theme. I appreciate that the many wonderful themes have been generously provided free of charge, but if you’re not very experienced at fixing glitches you are going to require a developer or community forum to provide a minimum level of support.

Step 4. Testing / Validating

When you find a theme that you think might suit your criteria, look for where it’s actively being used. Methods I used were to look at trackbacks to a theme and also comments and follow links to these blogs. If the blog isn’t using the theme, then there’s a possibility that the owner may have experienced problems. Another method is to Google the theme name (or how the author likes to be credited on the template).

Once you’ve found the theme in action check how the Google sees the posts in the blog. Do this by using “site: example.com” (or site: www.example.com) in the Google search box. You would ideally be looking for the post title and the first few words of a post. This will vary (and may be prefixed by the date or author), but what you DON’T want to see is the same “blurb” under every result.

Assuming you like what you see, go to the Markup Validate and test the URL of the blog that is using the theme you are considering. Being given the green light would be extremely rare, but you are looking for (according to Sarah) probably less than 15 errors. In general the more errors, the sloppier the coding except for of course, this could be because of customization by the blog owner, so you need to look at the type of errors and the scale. You can as well validate your CSS via the CSS Validate.

This is a topic probably most excellent left to an expert, but if you have a indistinct idea about CSS you can get a feel for the sternness of the errors.

Step 5: Installation, Customization and Follow-up

So assuming you’ve found a theme that you are contented with the next step is to install it (most themes come with installation instructions) and decide it. As soon as you’ve done this do a quick Markup Validation on top of your URL and see how it looks. This is significant because it give you a benchmark BEFORE you go making any changes to it. If you find any errors, see if you can highlight where they are.

Throughout your customization stay checking to see if any new errors are showing up. I know I had a few appear with things in my sidebar, but I managed to weed them out.

Finally, ensure with Google in a day or so to how your posts and pages are being indexed, and irritated your fingers that you don’t call for to start the process again (this is where I’m at).