Create a Professional Blog Logo on a Budget

This guest post is by Samuel of Internet Dreams.

I am a logo hunter! What that means is I almost always stop and look at a new site’s logo. Almost like shooting at it, but with my eyes!

Believe it or not, this now has a profound influence on whether or not I feel I am going to enjoy reading the new blog, or want to check out this new site.

The logo of a site is like the cover image on that new blockbuster movie on the block. As the design of a blog is important in a visitor’s eyes, the logo is that cherry to the top of the ice cream.

Because a logo can have a profound effect on a user, I decided to create beautiful looking logo for my blog. It was tough to think about how I was going to create it, though.

I thought of creating the logo myself, but I kept telling myself I wasn’t going to be able to create one I liked.

But that thought changed down the road, as you will read later on.

A novel solution

Many times, your creations, such as a new design or a new article, you won’t really like. This is fine, since the sense others get from seeing our creative projects is different from ours.

To solve the problem, I decided to hire a designer to design a new logo for me. Nope, the logo didn’t cost me a million bucks. All I did was get a design idea for only five dollars from

I am not going to lie to you: I did not get a fully done, professional logo out of the box, just for five dollars! But I got the idea and the design layout from Fiverr, and it was worth every single penny.

I will show you step by step how to get this done, and how you can do this yourself without another designer’s help. Note that you will need to have some sort of knowledge of Photoshop to use this technique—but if you don’t, I’ve included some resources to help below.

1. Find a graphic designer using the reviews

This step could be the hardest part of the process. It’s important to make sure you hire a credible designer who gets the job done.

When I look for designers on Fiverr, I usually first send a message to the designer to gauge their interest. If they respond pretty quickly, I know the communication is going to be fine.

My designer

As you’re reviewing designers on Fiverr, look for the designer’s rating, and look at the reviews of that individual at the bottom of their profile.

2. Tell the designer what you are looking for.

You need to tell the designer what you want. Try to be as accurate as tell them as much as you can.

Tell them your ideas, because they will definitely need those ideas for their outline. But also tell them the colors and size you want, and give them some concept for the design—such as “excitement” or an object related to your blog.

This is the message I sent to the logo designer to explain what I was looking for:

Name: Internet Dreams

There will be no description for the logo. I prefer it be a text logo that is creative in a way. I really like a minimal design with the letters being the main focus. Design it dreamy in a way, but not too light either.

The color blue is the primary option. Experiment with different colors if you want. This is the website it is going on. Please try to make it stand out from that greybackground.

Message me with any questions, and thank you for doing this! :)

3. Don’t expect it to look perfect, since you’ll finish the design yourself.

You are paying this designer only five dollars. Don’t expect them to do the whole work and make a design worth hundreds like the other top logos out there. Remember, you get what you pay for on Fiverr.

I worked with the designer till the outline was exactly how I wanted it to be. This is how I received my “finished” logo from my Fiverr designer:

The first logo

There’s not much color or texture in the initial design. But the concept of the design is what I really liked. So I took it from there myself!

4. Make the logo look professional with limited Photoshop skills

After receiving your initial design, always thank the designer for his fine job. A designer has certain skills in first thinking up the outline of a certain logo. So, thank him and give him a good review of his work.

Now, it’s your job to finalize the logo!

The final logo

Don’t freak out, or think you have to be a Photoshop guru. All you are going to do from here is select a font that you like, and add it anywhere on your logo.

The cloud in my logo is what I added to make it more “dreamy.” Also I enhanced the look of the bubbles by using a free PSD created by a graphic artist.

If you don’t have great Photoshop skills, have a look at PsdTuts+. This is the website that I have learned many Photoshop skills from.

How’s your logo looking?

Nothing about this is hard. I am no expert in Photoshop, but I did learn some techniques along the way. Trust me: having a few basic skills in the use of Photoshop is worth it.

Your logo is the brand image of your blog. Many people will recognize your site by the logo you have on it. Not only the logo will be created by you, but also other aspects of the design of your blog will need to be enhanced, and you can do it with those basic skills.

If you do run into some problems on your end and do not feel comfortable to use Photoshop yourself, then that isn’t a problem either. There plenty of places on the internet where graphic designers are waiting to finish your work.

Or, just hire the same designer again from Fiverr, and let them finish the job. It’s your choice!

Have you done any designing yourself for your own blog? If you did, tell us how it went in the comments.

The online world can be a very complicated place. There is too much information all over! My name is Samuel and I own Internet Dreams. Internet Dreams is a place where you can engage and learn how to set up and succeed with your blog or site. Internet Dreams talks about SEO, blogging, social media, and much more….. Follow Internet Dreams on Facebook!

9 Elements of the Perfect Post

This guest post is by Ginny Soskey of Shareaholic.

A perfect blog post is hard to come by. Sometimes the mistakes are small, like a grammatical error, and other times the mistakes are so glaring that you just can’t look away.

You spend so much time coming up with post ideas, optimizing, editing, and promoting that you should make sure your posts are near perfect so your efforts don’t go to waste.

To help you make sure you’ve covered all your blogging bases before you hit “post,” I’ve created a handy infographic outlining the perfect post with some key learnings below:

9 Elements of a Perfect Blog Post

1. Headline

It’s essential to start your post off with a great headline.

In Shareaholic’s publisher network, the most shared websites tend to optimize for keywords in their headlines, include headlines less than ten words, and stick to “list” and “how to” kinds of posts.

Think of your headline as a tweet—would you click through to the link if it showed up on your feed? Crafting a headline in the form of a tweet also ensures that your headline is short enough to be shared via Twitter.

2. Sub-header

People like to scan, and large blocks of text scare them off. Try to break up your copy with several sub-headers as it will make it easy for readers to digest your content. Having sub-headers will also help them to comprehend your post as the main points are brought immediately to their attention.

Numbers, bolded text or larger font size are all ways you can create sub-headings for your blog. If you have several authors for your blog, be sure to tell them how you want your sub-headers to be styled in your editorial guidelines.

3. Optimized copy

SEOmoz’s infographic of the perfectly optimized blog post will guide you to see where you should place your keywords throughout your post.

To identify your keywords in the first place, make sure to check your content analytics tool to see what organic keywords and topics are popular with your readers.

4. Multimedia

Having visual and interactive elements to your blog post is essential to engaging visitors on your blog. Find stock photos or Creative Commons Licensed material using Compfight or even create one of your own.

The best part about using visuals in your posts is that it’s easy to reuse them to promote your blog on Pinterest, which Shareaholic found to be the fifth largest traffic source in the world. Among our publisher network, we notice that websites with branded visuals get the most shares on Pinterest while along benefitting from the brand exposure of including their name in those shares.

5. Embedded CTAs

Ultimately, you want your readers to take some form of action from your blog. That could mean subscribing to your blog so they come back again, or maybe downloading an ebook or other offer from you.

Make it easy for them to do so by embedding a call to action (CTA) in your post. From what we see in our publisher network and on our own blog, CTAs above the fold do the best, as your readers don’t have to scroll to take action.

6. Sidebar

This is prime real estate on your blog, as it is displayed no matter which article your readers are viewing. Use this area to show off links to your social networks, subscriptions to your RSS feed and email list, and free downloads of white papers, infographics or badges.

One of my favorite plugins for the sidebar is Social Media Widget—it’s easy to customize and use for bloggers of any level. Having these buttons will help keep your readers connected with you long after they leave your article.

7. Social sharing tools

After you create content that people enjoy, you need to make sure it’s easy for them to share it through their social networks.

Make sure your social sharing tools are prominently displayed on each post. Also, you should choose social sharing buttons that your readers are likely to use—you can use content analytics to determine where people are sharing your content and then include those social networks in your sharing buttons.

8. Related content

It’s not always love at first “site”: it may take a few posts to convince your reader to share your content or subscribe to your blog.

A related content tool speeds up this process by engaging your current readers with suggested posts at the bottom of each article you publish. This is sure to increase your pageviews and improve your overall time on site.


As social media has gained popularity, commenting on a blog post has expanded from the real estate directly below the post to other networks like Facebook and Twitter. Commenting systems have evolved to accommodate to this change and one of my favorites is Livefyre—it works in realtime and integrates seamlessly with Facebook or Twitter.

Knowing how to optimize your layout for maximum pageviews and social shares is incredibly important to growing your blog. What are some of your favorite tools to help create a perfect blog post? Share your thoughts with us in the comments.

Ginny Soskey is a marketing manager at Shareaholic. Shareaholic creates social sharing, related content and content analytics tools for more than 200,000 websites, reaching 300 million people each month. You can keep up with Shareaholic on the Shareaholic blog to get more tips on blogging.

How to Build and Monetize a Mobile-Optimized Blog

This guest post is by Thomas Samph and Matt Convente of

For bloggers, creating a mobile site can seem daunting. Without the time, money and a working knowledge of various coding languages, a mobile site can seem out of reach.

But today, just like anyone who only has a desktop version of their website, that thought process is outdated. Mary Meeker, a partner at Kleiner Perkins Caufield & Byers, noted in her 2012 Internet Trends report that mobile traffic today accounts for 10% of total Internet traffic.

What’s more, way back in 2010, she predicted that mobile users would surpass desktop users by 2014. Even more recently, the Google Mobile Ads Blog released an infographic showing that in the United States, 47% of searches for information about Olympic athletes or news about the Olympics were conducted on mobile devices.

In other words, the rewards of going mobile far outweigh the risk. Plus, with the myriad of tools at our fingertips, creating a mobile optimized site isn’t as difficult as it sounds.

So let’s take a look at why you need a mobile optimized site. Then we’ll show you how to do it. And of course, let’s not forget to monetize, too.

Why have a mobile site?

Even by the time Meeker released her Internet Trends report at the All Things Digital conference in May, we knew where the Internet was headed. The Internet is going mobile, and bloggers need mobile sites.

Here’s a short case study: think of all your favorite sites. The majority is already mobile-optimized, and there’s a great reason why. Whether readers are checking in before they go to bed, as they’re waking up, or on the go, mobile-optimized sites offer great user experiences no matter what device readers are using.

Let’s see a demonstration. Below is a screenshot of the New York Times desktop version, to the left, and its mobile version, to the right.

When you access the New York Times from a mobile device, you actually get the same version of the site as from a desktop browser, just smaller. This is what you want to avoid by creating a mobile version of your site.

“But wait,” you say, “The New York Times has an app that I can access from my mobile device.” True; but there’s a large difference between native mobile apps and mobile versions of sites.

Whereas a native mobile app requires a brand new infrastructure (i.e. lots of time and resources), a mobile version of a site simply means that the existing site is presented to mobile users in a user-friendly format. Plus, a mobile version of a site doesn’t require its own content management system.

To see the difference, let’s take a look at the New York Times native mobile app, and the mobile-optimized version of their site:


In comparing the two, we can see that there’s much more functionality in the native app to the left, but the mobile version to the right is a huge step up from looking at the desktop version of the New York Times on a small screen.

Now that the difference between a native mobile app and a mobile optimized site is clear, there’s one distinction still to make. We’ll illustrate that with the following two sites:



Both Mashable and Ethan Marcotte have mobile versions of their sites. But there’s a subtle difference between the two, which has huge implications on how easy (or difficult) it will be for you to create a mobile optimized version of your site.

When Mashable’s site detects that a visitor is accessing it from a mobile device, it shows that visitor the mobile version of the site, instead of the desktop version.

Ethan’s site, on the other hand, uses responsive web design, where the elements of the site rearrange themselves depending on the size of the browser. Check it out by clicking and dragging the corner of your browser on his site to make the content bigger and smaller. You’ll see that all the content shifts and rearranges itself based on the size of your browser.

In fact, Ethan Marcotte wrote the book on responsive web design. He’s a good act to follow. But following him is not easy, by any means. Responsive web design is a very difficult emerging trend in coding and design, and few people can pull off a site like Ethan’s.

So, bloggers are left with a decision when it comes to creating mobile-optimized sites: create a mobile version of a blog, or build a site using responsive web design.

How to make a mobile-optimized site

Using a plugin

There are several methods you can use to create a mobile optimized site. But anyone with a Blogger blog has it easy: Blogger blogs are automatically set up with a mobile-optimized version. If you use WordPress, the easiest method is to use a WordPress plugin.

To see what your site might look like after you use a WordPress plugin to create a mobile-optimized version, check out TechCrunch’s browser version compared to its mobile site:


WordPress, which powers TechCrunch, has a number of plugins that can optimize your site for mobile—all you need to do is install one of them.

Wapple Architect will display the mobile version of your website to visitors with mobile devices. It supports AdMob and Google Adsense, and allows you to retain the URL structure of your current site, instead of having to create a new subdomain for the mobile version.


WPtouch is another popular WordPress plugin that, like Wapple, is fully customizable to your needs. There’s also an option for mobile visitors to switch back to the desktop browser version if they wish to do so.


The WordPress Mobile Pack transforms WordPress blogs into mobile sites quickly and easily, while offering a range of customizable features. Again, you’ll have the ability to manage your ads through AdMob or Google Adsense. With this plugin, however, you can view mobile analytics apart from your desktop analytics.


By using these plugins, you ensure that those visiting your site from a mobile device will see the mobile version only. Problem solved.

However, if you’re looking for more customization, or you’re not using WordPress, check out

Instead of building a mobile site from scratch or installing a plugin, Onbile lets you build a slick mobile interface with no coding. You can choose from several themes, customize the pages, and link in your RSS feed.


Once you’re done building, grab the redirect code and place it in the index of your site, and you’re ready to go.

Here’s the transformation of my website:


Unlike WordPress plugins or Blogger mobile sites, however, the free version of Onbile requires that you keep the Onbile advertising banner on your mobile site—not the best choice if you’re looking to keep your mobile site monetized.

Still, using WordPress plugins or sites like Onbile that let you build your own HTML5 mobile site can be a great quick-fix for anyone looking to appeal to mobile traffic without having to get their hands dirty with code.

In the next section we’ll discuss some more in-depth methods of creating a great mobile presence with responsive web design. The feint of heart can skip to the last section!

Using responsive web design

Responsive web design is a way to build mobile capability into your existing site. This method is much more difficult than building another version of your site and redirecting, such as with Onbile, and it requires a deeper strategy and planning to pull it off.

For another great example of responsive web design in action, check out the Boston Globe’s site. Note that as you change the size of your browser, the content of the site changes as well.



This is made possible by media queries, which control the adaptation of site layout and content based on certain conditions, such as screen resolution, orientation, and pixel density. Media queries are placed either in your master CSS file, or in a separate file; it’s really up to you. Having them in your master CSS file means you have one less file to load, but having a separate file for responsive styles makes them easier to maintain.

However, no matter which method you choose, you must place your responsive styles after your main styles. This is because browsers render code from top to bottom. If your responsive styles are placed above your main ones, they won’t be activated when they’re needed.

Here are some sample media queries that you can run to adjust the layout of a page when a visitor’s screen resolution is a certain size.

1. Make a layout that adapts to a max screen width of 600 pixels (likely a phone):

@media (max-width: 600px) { CSS goes here }

2. Make a layout that adapts to screens between 768 and 850 pixels (likely a tablet):

@media (min-width: 768px) and (max-width: 850px) { CSS goes here }

The last step to a successful mobile site is to add the viewport meta tag in your header. This determines a device’s width and informs the mobile browser, making it a necessary supplement to media queries. In order words, media queries adjust your CSS to varying widths, whereas viewport tags determine the starting width of the device a visitor is using right now.

In addition to device width, viewport tags can also assign initial and maximum scale. Here’s an example meta viewport tag:

meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”

Here, initial-scale should be set to 1 so the correct responsive styles are displayed for your specific mobile device. The maximum-scale value can be whatever you want, though it’s important to note that zooming on a mobile device might cause some site elements to break, similar to zooming on full-width browsers. If you want to disable zooming, set maximum-scale to 1.

Let’s not forget to monetize

For any blogger who uses AdSense, it will be fairly easy to keep the mobile version of your site monetized. And if you don’t already, you can use AdMob, another Google advertising service designed specifically for mobile devices, to serve mobile banner ads to your mobile site.

Still, there are several common problems with advertising on mobile sites:

  • No Flash: It was slightly shocking to developers when Apple announced that Flash would not be supported on their mobile devices. Sites built with Flash were relegated to the broom closet, in favor of HTML5 and javascript. Many ads themselves, let alone entire mobile sites, are built with Flash. So, with limited support on Android devices, and no chance on Apple devices, Flash ads are a no-no on mobile.
  • Ad display size: The screen area of mobile devices is much smaller than desktops, so many ad sizes simply won’t do on mobile. The biggest victim of mobile is the vertical sidebar.
  • Ad file size: The speeds at which you can download data to a mobile device have still not caught up to those of a desktop. This means you need to be mindful of the loading time for your ads. Large files will take a while to load, and can also force your other content to load more slowly. When sites are slow to load, people leave.

However, those problems have some quick solutions:

  • No Flash? No problem: Instead of using Flash, try an animated GIF if you want a moving ad. Flash files are large, slow to load, and probably won’t even display on most mobile devices. Animated GIFs are a quick fix.
  • Getting the right ad display size: Square or almost-square ad units are best for mobile designs, because they’ll fit on most devices as long as you place them correctly.You can also use a rectangular adhesion banner that is fixed to the bottom of the mobile browser. Fixed banner ads have an identical pro and con: it’s always there. Be mindful of height, especially in landscape viewing mode, as a fixed ad that is too tall will cover up too much of your site. For a reference, check out the iab guidelines for digital ad units.
  • Fixing ad file size: Export your ad images using a “Save for web” or equivalent option in your editing software. This will compress the file size and make it acceptable for mobile.

How mobile’s your blog?

To prepare for the mobile traffic of the future, bloggers need mobile sites. Although some methods are more time consuming and difficult than others, there’s a way to do it for bloggers of all skill levels.

And with more and more data surfacing about the volume of mobile traffic, from Mary Meeker’s reports to the mobile search volume at the Olympics, going mobile is all the more necessary.

Do you have a mobile-optmized blog? How’d you build it? Tell us in the comments.

Thomas Samph, a product analyst, and Matt Convente, a front-end developer, both work at, an online training and education platform for cloud-based software.

What to Put Above the Fold on Your Blog, And Why

This guest post is by the Blog Tyrant.

Above the fold

The Blog Tyrant is a 26 year old Australian guy who plays video games at lunch time and sells blogsfor $20,000 a pop.

The 5 Keys to Blog Usability

This guest post is by Neil Patel of Quick Sprout.

The user is king. That’s what a lot of pundits are saying these days, from usability experts to SEO gurus and content marketing pros.

Actually, it’s always been true, and it’s why the mantra “content is king” has always been so important. Content is exactly what users wanted. Naturally, you should give them what they want.

But content isn’t enough today. Total user experience must be baked into blog content if you want to make it bigger and better so that you stand out and dominate in your space. These five elements of user experience are essential to doing just that.

1. Navigation

When it comes to a site heavy with content like a blog, navigation is essential. The primary job of navigation is to lead the user around the site. When it comes to a blog, this is especially important. The goals are as follows:

  • New content should be available and obvious to users. They shouldn’t miss out on anything.
  • New users should be able to understand in a short period of time what content is exactly available.
  • Users should know how to find the content they want. They are looking for answers, and it’s your job to get them to the relevant content.
  • Older content should be available to users who liked newer, related content.

In the end, it comes down to putting the content where your users can find it. And the number one navigation strategy rule is this: the navigation should never change even though new content is being added.

Let’s deal with a couple of typical navigation problems: finding old content and keeping users reading.

A blog that is just a few months old will not run into navigation problems. There just simply isn’t enough content. As that blog grows, however, and new content is added, you will begin to run into navigation problems, namely older posts are getting lost and forgotten.

That’s not good.

The common way to handle this is by adding a Monthly Archives widget to the blog. That is probably the worst possible way you can handle this problem.


Instead, put your content in proper categories and use a workable search system.

The Popular Posts sidebar widget is a great place to start. And instead of allowing the plugin algorithm to decide which content should go there, you make the choice. It’s better to choose based upon your experience and what your analytics are telling you, than to let the machine guess.

The same is true for adding older posts as related material at the end of posts. This is how Smashing Magazine does it:

Internal links are also another great way to improve the navigation of older posts. This way you can give them related material that’s immediately relevant to what you are writing about … and may even expand on a point.

There are two ways of doing this correctly. One is to make the links organic to context, so that they flow, like I did in my 8 Things Blog Readers Want More Than Just Content:

Or you can highlight the post by suggestion it as additional reading, like James Aultucher does in his 10 Things to Do When They Don’t Call post:


One way you don’t want to link to older posts is like they sometimes do at Freakonomics:


That is neither helpful for SEO purposes, or to users. It’s bad user experience. You are not giving users any indication of what is behind the link, and that slows users progress.

The goal is to keep them reading. Once someone lands on your site, you want them to stay. Otherwise you have high bounce rates. That’s why a Popular Posts or Recommended Reading plugins are essential.

Categories are useful for navigation when done right, but I don’t use categories because my tests have proven they aren’t useful. But perhaps they make more sense for your blog. If that is the case, you always need to keep three rules of thumb in mind when creating them:

  • Keep the number of categories to a bare minimum: Remove categories that have fewer than five posts until you can fulfill your category authority plan and create more content in those silos.
  • Use keywords that explain what the site/blog is about: A user should be able to look at your list of categories and understand immediately what the site is all about. Here are some categories I would use: Advanced SEO Techniques, Web Analytics, Digital Marketing, and Entrepreneurs. In fact, your category labels should come from your SEO keyword research.
  • Use categories only when you can justify them as being useful to help users find content: They should be intuitive and easy to understand. A confusing category list can sow distrust in your user.

Here’s a poor example of category use by Dumb Little Man:

Copyblogger demonstrates a clean, unique, and simple way of using categories:

While categories can prove useful, you should always test to see if they are helping or hurting you.

2. Speed

In a 2009 Google study, it was reported that a 0.5 second delay in page-load time caused a 20% drop in traffic. Amazon experienced a similar drop in traffic and revenue due to a fraction-of-a-second load delay.

More recently, Google has reported that slowing down search results by as little as 400 milliseconds will actually increase dropped searches from 0.2% to 0.6%.

That’s a huge drop in traffic for 400 milliseconds, so it pays to minimize the page speed. This is usability 101. It forces you to always ask if that new feature you want to embed on your page is worth the drop in load times and traffic.

You might like the flashy features, but they can dramatically slow down site performance. And don’t get fooled by the fact that internet connection is speeding the web up. How much site load speeds impact user experience will always be important. Just look at how it impacted Google.

I’ve covered the topic of speed extensively in How Design Your Blog for Awesome SEO, as have authors here at ProBlogger.

3. Focus

When it comes to creating a user experience that will make your blog better, the focus of your blog is equally as important as any of the onscreen, tangible things we have been talking about.

For example, page load speed and conversion are both actions that can be measured. Focus is less tangible, but highly important.

Let me share some common mistakes people make to show you what I mean:

  • Trying to please everyone: A blog that thinks everyone is its target user is going to be a miserable failure.  But you can’t simply pick an industry and then think you are narrow enough in your focus. For example, saying that your target audience is people who love food is still too broad, especially if you want to dominate that space. You have to pick a unique, narrow segment of that broad space. People who love hospital food may be a little too narrow, but you understand what I’m saying.
  • Confusing your content with your context: Sometimes you can attract the wrong audience by giving them the wrong content. If you run a social media blog, for example, but write content about postcards, or something totally from left-field, like home-made beer, you might get your user to come to your site, but he or she won’t stay.
  • Hiding behind everyone else: Another focus mistake occurs when you copy someone else’s success and provide nothing new or unique to the conversation. Say you love what Seth Godin is doing, and think you have some worthy things to share. Your blog will flounder if you don’t define some way to make you different than Godin. You just simply can’t compete.

A good, focussed blog strategy has the following elements:

  • Narrow definition of what you are trying to accomplish: As I mentioned above, your blog should be focused on delivering content that fits into your definition of cornerstone content.
  • Narrow definition of your target user: Your defined cornerstone content should fit perfectly with your defined target user. These should really mirror each other.
  • Unique selling proposition: Next, your focus should be on something that your competitors don’t provide. And this should be a focus that you regularly highlight. The harder you can make the focus uncopiable by your competitors, the longer you will be able to dominate the space.
  • Cornerstone content creep: A narrow focus will also help keep you from straying too far off topic when it comes to creating content. A warning sign that you may be experiencing cornerstone content creep is that your category list keeps growing.

Creating a focused strategy begins with user research and analysis of your competitors. And as you do your research, you’ll come up with a lot of ideas. It’s key that you rank these ideas in order of importance. Keeping just the top two will help you keep your focus narrow.

4. Display

You may not think about display too much, but whatever stage you are going through in your design process, you will need to think about how most visitors will see your layout depending on what screen resolution they use. Remember that you want to give users what they want.

This means that you have to take into consideration height and width and line length. But that’s not so easy. High-resolution monitors have a high screen resolution, which means users get in a habit of browsing in small windows in which the browser window resolution is much smaller.

In other words, we want to know the size of people’s browsers’ content windows.

So your first step is to figure out who your average user is.

Look at your Google Analytics and see the average screen resolution of your visitors. This data will also tell you about their preferences and behaviors. Then see which user is staying on your site longer, and start to design user display size toward that average profile.

In an older study in which over 18 million screenshots above the fold on browsers, most users will be able to see content that is located within a 500px by 800px space. Over 80% will see the content in a display that is 1000px wide, while the remained browse in a display that is 1250px wide.

The moral of the story is that you need to design displays for your average user. For most, that means the layout will be less than 1000px wide. To give you an idea of what you can do with that, check out The Big Picture Blog by the Boston Globe.

5. Readability

Readability is all about what your user reads on the screen. And the golden rule to good readability is this: the easier your content is to read, the better.

If you want to see how your blog ranks when it comes to readability, run it through the readability test. In the meantime, here are the basics behind good readability:

  • Contrast font color with background color: This is critical, because it’s easier to read font text when its color contrasts with the background on which it appears. Black text on white background is the most basic and easiest to read:


    Just so you can see how awful a bad contrast can be, check out this pink on blue page:


    Also, check your site with Vischeck to see what colorblind people see when they visit.

  • Break your copy into chunks. Large blocks of text will discourage people from reading.
  • Use bullets. 
  • Keep your paragraphs short. 
  • Keep your columns narrow so the eye doesn’t have to travel across the page too far: The best line length is between 60-80 characters. This metric should remain constant across different browsers and screen resolutions.
  • Avoid backgrounds that are busy: Think of MySpace and how awful those pages were to read. Talk about distracting!



  • Keep it simple: From your home page to an article page to your contact page, a user should know quickly what the site is about and what the main goal is of that page, wherever they are.

  • Keep the font style clean: A sans-serif font is the easiest to read on the web. Serifs are the little hooks at the end of letters in fonts like Times New Roman and Courier New. Helvetica and Calibri are good sans-serif fonts.
  • Avoid tiny fonts: That will certainly cause eye strain and frustrate your user. Font size 12 or larger is optimal.

Blog usability means content usability

It used to be that content was king. It still is from the perspective of the user. You need to deliver that. But it’s not enough these days. Your readers want a good experience, too.

In 2012 and beyond the user is king, and so you need to design your blog with these usability elements in mind: navigation, speed, focus, display, and readability. It’s essential to get these right if you want to attract and keep more visitors and create a link-worthy blog.

So, what other elements of usability do you feel are important for creating a killer blog? Share your perspective in the comments.

Neil Patel is an online marketing consultant and the co-founder of KISSmetrics. He also blogs at Quick Sprout.

Looking Good: Simple Ways to Create Sensational Blog Images

This guest post is by Jo Gifford of Cherry Sorbet Creative.

Blogs that look great attract the attention of the reader, it’s as easy as that. Your content might be amazing but if your blog has a terrible aesthetic you are missing out on a slice of magic to make people enjoy their stay.

In 2011 visual social media platforms like Pinterest and insta.gram exploded in use, signalling a trend towards lifecasting in a more visual way, which applies to the blogosphere too; readers want your pages to look interesting. The more they stay on your site and engage, the prettier those stats look too.

This post gives some simple and easy ways to create and generate original and eyecatching imagery for blogs, without needing to be a designer. So, let’s get looking good:


Love it or hate it, is a fantastic way to create eyecatching imagery for use on a blog, all from your mobile. I use inkstagram, which uses my instagram sign in to produce an easily scrollable stream (instagram itself is a little limited in image access). From there, I click on an image and copy the URL to add into the blog post. At this stage, the SEO savvy among you will want to make sure your image title and alternative text is changed to something relevant.

2. Screen grabs

Screen grabs of images or text can make an easy collage tool. If your screen is full of images, text, maybe a mindmap of work in progress, consider capturing the screen and taking it into an image editor for a vibrant and personal illustration for your blog.

3. Picnik

I love to use Picnik, an online image editor which is currently free in premium form until April when it is fully taken over by Google Creative kit. Both Picnik and the new Creative Kit in Google + allow images to be re-sized, effects added (including saturated and lomo effects), the inclusion of frames such as polaroids, and the addition of text too. This makes them great alternatives to Photoshop and are free resources online, so are easily accessible.

By editing and creating your own images you can have a fabulous looking blog post without worrying about Creative Commons licences or the dreaded copyright, and you needn’t be a designer!

4. Polyvore

Polyvore is a website used mainly by the fashion blogging world, but has useful features for all bloggers. Simply create an account, and go to “create a set”. You can then literally drag and drop a multitude of images including useful things like notebooks, post it notes, coffee stain and paint splash effects, alongside all sorts of images. Add text in some great fonts too by dragging and dropping text.

Once the set is finished you can click the “publish to WordPress” section; before you go ahead with it, simply copy and paste the code and add to your html section in your post.  Polyvore automatically includes links to the products in the set, but you can deselect the check boxes to have code without the links. Voilà, original, fabulous imagery with a footprint on another site to boot!

5. Collages

There are some great apps available to help you make collages for post inclusion. I currently use Picframe for iPhone and iPad which allows photos from your library to be added into collages. You can drag and drop, re-size and alter frame edges and effects, and also export to to add a filter and share in your stream or on Flikr.

I also use a desktop application collage maker for larger and more complex collages—there are myriad options available and a quick google search will provide some free collage resources for you. I happen to use an Apple App store called Collage Maker, and I find it to be really handy and effective.

6. Camera

It’s great to take a camera put and about with you if you have one. I use a Nikon D40 to snap away at places, signs, buildings and all sorts of interest. You never know what might appear that has relevance to a blog post you are writing, and you can always crop in, edit the images and form as part of a collage. Using a digital SLR allows a igher resolution to zoom in and crops parts of images not so easily done with iPhonography.

7. Creative Commons search

Creative commons images are images licensed by the creators to be used with a attribution link. You can search for images using the Creative Commons search tool, which may produce some exciting work you have permission to include on your site. Remember to attribute where necessary though.

8. iStock

iStock is a fantastic and inexpensive library of images that are perfect for bloggers. Images and illustrations are purchased in block of credits, and web friendly images can be very cost effective indeed for the odd post here and there.

So, go forth and get creative! Your readers will love you, I promise.

Jo Gifford is a designer, writer, blogger and founder of Cherry Sorbet Creative. Working primarily in the beauty, fashion and lifestyle industries her work spans graphic design for print and web, social media management and training, copywriting and editorial for on and offline publications. You will find her blogging as Dexterous Diva, on Twitter both as Dexterous Diva and Cherry Sorbet, and on Linked In.

Make Your Blog Load Faster than ProBlogger: Part 2

This guest post is by Devesh of WP Kube.

A few months ago, I wrote a guest post here called How to Make Your Blog Load Faster than ProBlogger. Today, I’ll go into some more detailed advice to help you speed up your site even more.

If you’re a blogger, you already know about the importance of blog loading speed, and the role it plays in search engine rank and marketing your blog. But if this is new territory for you, here are three quick reasons why you need to speed up your blog:

  1. Google includes website loading speed as an important metric in their ranking algorithm. If you want your blog to rank high in the search results, you need to make sure your blog loads faster than others.
  2. It can increase the quality of your blog’s user experience and engagement. Having a good-looking blog won’t make your readers’ experience better if it takes ages to load. You need a theme that loads fast and is well coded.
  3. It can help you decrease your bounce rate, and we all know that the lower your bounce rate, the better your chance of driving engagement and generating leads.

Before we get started, check out these five tools you can use to measure your WordPress blog’s loading speed.

1. Optimize your database

One of the very first things that a blogger needs to do is optimize your blog database and delete the post revisions. You can use phpmyadmin to clean up the database, but if you don’t want to play with phpmyadmin, you can set up WP-Optimize instead.

Make sure to remove all the unnecessary tables, old post revisions, and spam comments from your blog’s database. You can use the Better Delete Revision plugin to remove those post revisions, too.

2. Use CloudFare

CloudFlare is a (free) service that makes your blog faster, safer, and smarter. In other words, CloudFlare supercharges websites. It is a CDN service that will protect and accelerate your website, and doesn’t interfere with the WordPress Caching system (W3 Total Cache).

This plugin keeps your blog safe from the Hacking attacks, spammers, and bots by challenging them with a CAPTCHA system whenever it doubts a user’s authenticity. With this tool, you’re easily able to block the spammers’ IPs and websites with just few clicks.

3. Use the P3 plugin

P3 (Plugin Performance Profiler) is one of the best plugins for those wanting to see a performance report of their blog. It comes with a lot of great features, but primarily, it can show you what plugins are slowing down your blog.

It creates a profile of your WordPress site’s plugins’ performance by measuring their impact on your site’s load time. Often, WordPress sites load slowly because your plugins are pooly configured, or because you’re using so many of them. By using the P3 plugin, you can home in on anything that’s causing your site’s load time to slow.

Note that this plugin uses the canvas element for drawing charts and requires Firefox, Chrome, Opera, Safari, or IE9 or later. This plugin will not work in IE8 or lower.

4. Disable hotlinking

Hotlinking is when other sites link directly to the images hosted on your blog from their blog posts or pages. This makes your server load high and decreases the loading speed of your blog.

It is very important to disable hotlinking. To do so, add the following code to your blog’s .htaccess file. Make sure to back up your .htaccess file before you begin to make any changes.

#disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)? [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)? [NC]
#RewriteRule \.(gif|jpg)$ ñ [F]
#RewriteRule \.(gif|jpg)$ [R,L]

Make sure to allow your feeds to display the images, however.

5. Limit front page posts

Limit the posts that are shown on your home page. Never show the full posts on the home page, because this will make your site very slow to load. Imagine you have more than eight posts on your home page, and all of them are of 600 words or more—it will likely take a significant amount of time to load the home page.

You should use the excerpts on the homepage and most other pages, instead of showing full posts. To use the excerpts, find the below code in your index.php and other pages that list posts, like archives.php, category.php, and so on.

<?php the_content();?>

Replace that code with this:

<?php the_excerpt();?>

More resources

For more ideas on speeding up your blog, see:

These are simple tips that can help you to make your blog load faster than ProBlogger. What others can you share to increase blog speed?

Dev is a part time blogger and blogs about WordPress Marketing at WPKube. Hit him up on Twitter if you need anything, Dev will be quick in responding and helping you out.

Six Steps to Make Sure Your Site Is Ready to Go Viral

This guest post is by Nancy Sathre-Vogel of Family on Bikes.

I couldn’t believe what I was seeing. Surely Google Analytics was confusing my site with another, way more popular site. There was no way my visitor numbers could be so high!

And yet they were. One of my posts had taken off and was spreading like wildfire. Those viral post phenomena that happen to others were now happening to me.

The first day, 17,000 visitors came to my website. The next day we topped out at 56,000. Readers were coming in droves.

It was exciting. It was exhilarating. My site, viral! Wow!

And then I took a moment to see what they were seeing. Oh my.

I, like so many other bloggers, had figured people would come to my site in the way I had designed it. They would enter via my homepage, then click on to individual posts. Everything was ready for that kind of traffic.

But the viral post, 50 Lessons I wish I had learned earlier, wasn’t following that pattern. Hundreds of thousands of visitors were pouring into my site directly to an individual post. When I took time to evaluate that post, I realized just how unprepared I was.

For the next few days, my husband and I scrambled to get our site up to snuff. We evaluated and planned and created images and installed widgets. Had we done all that before the spike hit, we could have captured more of that traffic.

Maybe it’s not too late for you. Here are six steps you can take to make sure your site is ready to capture new readers when one of your posts starts spreading like wildfire.

1. Create a new page with no text at all

You don’t want to be distracted by a post; you want to look at everything else on the page. Study your title, your sidebars, your footer. Look at the layout with no post there at all and see what kind of message it sends. Is it consistent with your goals?

2. What do you want your readers to know about you and/or about your site?

That one viral post may or may not be typical of your other posts, so make sure you’re crystal clear in terms of communicating what you’re about on every page.

Our site is about the lessons we learned as we bicycled from Alaska to Argentina, but nowhere on the viral post was that information to be found. Had the new readers entered through the home page, they would have read all about it, but they didn’t. So they didn’t! They had no idea what we’d done or what we were about. We quickly put together a brief bio to add to our sidebar.

3. What do you want your readers to do?

Do you want them to be inspired to take further action? Buy your book? Sign up for your newsletter? Make sure that action is spelled out on every page. Maybe you’ll take care of it with a widget on your sidebar, or maybe a popup. However you want to get the message to them, make sure readers know what you want them to do when they enter your site.

We had written some books, and wanted to direct attention to them. But that information was on the home page, not on individual posts. We scrambled to get that up on the sidebar too.

4. Can they easily share your post?

If your Twitter and Facebook share buttons are hidden away down in the gobbledygook at the bottom of the post, how likely is it that your readers will find them? Likewise, if the buttons appear only at the top of the post, what’s the likelihood that they’ll scroll back up after reading?

Don’t clutter your site with share buttons everywhere, but make it easy for readers to find and access them.

5. Are your RSS feed, signup, Twitter, and Facebook buttons easy to find?

If your reader likes what he sees, you want to make it easy for him to follow you.

6. Are your categories self-explanatory and detailed enough?

Put yourself in the shoes of someone coming to your blog for the very first time. Will they be able to find the info you’ve just encouraged them to look for?

Remember that you’ve got only a few seconds to capture a new reader. Whichever page they use to enter your site, that’s the page that needs to be prepared. Which means, of course, that every page needs to be prepared. If you’ve done everything you can to get key information in your sidebar, header, and footer, then you’re ready to go. Let it fly!

Nancy Sathre-Vogel is chief blogger at Family on Bikes. Together with her family, she spent three years cycling from Alaska to Argentina. Now, she back at home writing books and blog posts about their adventures.

Why You Should Create Your Own Graphics for Your Blog

This guest post is by Naveen Jayawardena of sleepWRITER.

When I decided to start a blog on sleep habits, I wanted to try something different. As any aspiring blogger, I was trying to stand out from the crowd. And I did it by creating my own graphics.

Now I run my blog exclusively with “home-made” graphics. My readers love it and I enjoy making graphics as much as writing posts.

The alam bully, who features on Naveen's website

I am not a professional graphic designer. So I can assure you that most people can learn how to make graphics with a little practise.

I am a self-taught amateur graphic artist. And I started out from scratch. And I will tell you how to do it yourself.

I use “home-made” graphics for each and every one of my blog posts. If you are wondering whether this is worth all the trouble, then consider these benefits you can get from using graphics:

  1. Graphics blend in with the blog design more easily than photos. I have limited my blog design to few colors and could not have achieved this without the use of graphics.
  2. It’s much cheaper than buying photos or graphics.
  3. It introduces your own, unique voice to the your posts via graphics.
  4. You can come up with the right picture for the posts every time.
  5. You can explain difficult concepts with infographics.
  6. Making graphics is fun. Drawing a few sketches after writing a post can help you relax and think creatively.

How do you start?

If you’re an absolute beginner, I suggest you start simply. Don’t worry about your graphics not being lifelike. The idea is to create your own style, with which others can identify your graphics.

You can draw something on paper and scan it, or take a picture of it from a digital camera. This is a very basic method of using graphics. You can draw cartoons and add lists in your own handwriting.

At some point you need to learn to use graphics software. I use Adobe Illustrator, but there are plenty of other software packages that can do a good job. I suggest you stick to one and learn it well.

You can learn from books, web tutorials, video tutorials and by attending classes. There is a range of brands under each category, and most of them cover the basics. I used video tutorials but I feel that having someone to show you the ropes can help you learn faster. Take time to learn the basic functions, and remember that learning keyboard short-cuts can save you a lot of time in future.

Once you have the basic skills in place, you can explore on your own. But if you are serious about graphics, then there are plenty of online tutorials that teach you, step-by-step, how to create advanced graphics. I use online tutorials to sharpen my skills and also to learn new “tricks.”

To create good graphics, you need to be a good observer. Look at the graphics on stock graphic collections and libraries. What techniques are they using? Can you replicate them? Look at the graphics and cartoons that appear on newspapers and websites and learn.

Once you are confident in making graphics, then you can adopt your own style and technique. When I write a post, I also think of the graphics which can go with it. If I don’t get a good idea for a graphic, I finish my writing and visit again with a fresh perspective for a graphic idea.

What are the drawbacks?

It would be unfair if I told you only the good side of creating your own graphics. I have encountered few disadvantages of using graphics for my blog:

  1. Detailed graphics take time. This can affect your posting routine. But with practice, you can create them faster. You can recycle old graphics to save time.
  2. It takes time to learn to make graphics. It took me few years to master the art of graphics and I still learn. It is not a quick fix.
  3. It may not suit all types of blogs. But it is worth a try.

Graphics can be a nice addition to your blog. I hope I inspired at least a few of you to bring your inner artist to your blogs! Please do share your own experiences using graphics on your blogs.

Naveen Jayawardena is a doctor by profession and blogs during his free time. You can find plenty of graphics and sleep tips at sleepWRITER.