Close
Close

How to Work With Designers to Design Your Blog

This guest post is by Rob Cubbon.

Psychologists have long been aware of the halo effect—a situation in which our judgment of a person’s character is influenced by our overall impression of them.

The same is true of websites. Rightly or wrongly, we judge a website first and foremost by the way it looks.

Think of your favorite blog and close your eyes for a second. Can you picture elements of the blog’s design (the logo, the colors) clearly? I bet you can; and I bet you like it!

So now that you know how crucial a blog’s design is to its success, how do you go about getting a great blog design if you’re not a designer?

What type of blog design do you require?

The first thing you need to decide is exactly what sort of blog design you require. Do you need:

  • A small amount of customization of an existing theme: This would be the cheapest and simplest option—you could just have your logo tacked onto the Genesis Generate theme, for example.
  • A fully customized child theme built on top of a solid theme framework: You might use Genesis or Thesis, with more unique features.
  • A completely customized WordPress theme.

Either of the first two options would be sufficient for most blogs. A general rule would be the less you change a chosen theme, the less you’ll spend on design and the simpler the process will be.

I’ve had to “rescue” many blogs where someone has created a completely custom theme that the owner then finds unwieldy and difficult to work with. WordPress is the most ubiquitous CMS on the planet for a reason. The popular WordPress themes and theme frameworks are popular for a reason. Work with them rather than against them!

Working out the brief

Next, you must spend a good deal of time working out your brief. While a good designer will likely have their own questions to ask you, you’ll have trouble finding good designers if you don’t know what you want or need in the first place.

To begin, ask yourself which sites you admire. What is it about them you like? Is it the colors, the look and feel, the functionality? Visit them and answer these questions as specifically as you can.

Then, think about your own site. These are some of the major points you should include in your brief:

  • What should it look like? Do you have any examples of websites you wish to emulate without copying?
  • Who is your target audience? List the target readers’ ages, genders, geographic locationd, what sort of work do they do, etc.
  • Would you like the site to be responsive to phones and tablets?
  • Do you need a logo? What other logos do you like, or would like yours to be on a par with? Specify that you’d like the logo supplied as a small image, a large image, and in the original vector file format.
  • Do you require any other design collateral? For example, business cards, email templates, a Twitter background, a Facebook page design, a YouTube channel background, etc.
  • What functionality do you require? Do you want to be able to change around widgets such as featured posts, signup boxes, featured video, etc., on your home page as well as the sidebar(s)?

Don’t sacrifice user experience for design. Websites first and foremost need to work. So don’t get too complicated with the design brief. Simplicity is key.

Your brief should also include URLs of example websites you like and the specific parts of the sites you want to emulate on your blog.

Choosing a designer

Regardless of your budget, always try to find one person who can competently do all the work you require (design, development, email templates, logo design, etc.) if it is at all possible. You’ll win on two counts: simplicity and cost.

If you don’t know of a good designer, you can try LinkedIn Groups and the freelance sites such as oDesk and Elance, which show potential candidates’ previous work history and client feedback.

Once you start to get responses, you can begin to whittle them down. Some of the replies you get can be easily rejected. Other designers may have excellent portfolios but can be passed over because their skills aren’t appropriate. If a designer doesn’t have a blog design that you like in their portfolio, then it’s not a good idea to choose them.

If you have chosen a child theme on the Genesis theme framework, for example, you can specify this in the job description, and then only consider designers who have experience with Genesis.

Narrow the candidates down to a group of about five to ten, and then contact these designers with your brief. After they’ve reviewed it, they’ll be able to answer your questions about availability, timeframes, and costs. You will be able to remove more of them from consideration once you have this information.

At this point, check the the candidate’s references. Contact anyone who has previously employed their services and ask how the project went, as well as any other specific questions you’d answers to. This not only gives you peace of mind, it can also give you tips for working with particular designers.

Hopefully at the end of that process, you’ll be left with one or two designers who will be a perfect fit for you.

Working with contracts and copyright

Contracts and copyright are huge topics that vary enormously from country to country and from designer to designer.

If you are dealing with a designer through oDesk or other freelancing sites, you’ll use the contractual and payment arrangements there.

If you’ve contacted a designer privately, they’ll likely send through contracts in order to specify payment and work arrangements. Always read these contracts and suggest amendments, if necessary, to ensure the contracts specify exactly the deliverables and the timeframes expected of the designer.

Copyright ownership also needs to be covered. Copyright to designs tends to stay with the creator—the designer. This can be signed over for a fee, but that rarely happens. The work of the designer should only be used for the initially intended purposes, so don’t imagine you can repurpose a design for some other reason down the track.

Communicating with the designer

A good designer will ask you the right questions about the website you envisage, and will prepare and amend visuals of the home page and other pages in the site so you’ll know what you’re getting.

If you have chosen a designer online, there may be language, cultural, and geographical barriers to communication. This makes the initial brief writing and communication even more important. In these cases, you may want to start with the logo design to see how well you work together, and then move on to the website if that goes well.

But in all cases, make sure you and your designer agree on every detail of the brief and contracts, and understand the work involved.

What you can do

There are many elements that go towards creating a great looking blog, but if you can communicate the values of simplicity and clarity to the designer, you’ll be halfway there!

What about your tips? If you’ve ever worked with a designer to design a blog, we’d love to hear your thoughts in the comments.

Rob Cubbon is a web designer and blogger.

A Basic Visual Design Guide for the Visually Incompetent

This guest post is by Anabelle of Read, Write, Live.

Have you ever woken up one day, looked at your blog’s header and other visual elements, and thought, “My, this is ugly!”

You need a visual redesign.

What to do?

There are two solutions to this problem: you hire a designer to work on your new visuals from scratch, or you try to do it yourself. The first solution can come at a cost, so cash-strapped bloggers can easily be tempted to try building their blog’s visual elements by themselves.

But what if, like me, you’re visually incompetent? I mean, really incompetent? You can’t draw a stick figure to save your life, and you know absolutely nothing about the basics of visual design. You’re a writer, after all, and writers are better off writing than playing around with pictures.

And yet, you can’t afford a designer, so you need to find a way, any way, to do it yourself.

In this article, I will share the lessons I have learned trying to redesign my blog visuals on my own—header, logo, and all.

Start with software that you understand

We’ve all tried to play with those complex professional photo and visual design programs. You load a picture or an empty canvas and you think “Wow, with all these great tools, I’m sure I can come up with something amazing!”

Well, not so much. After five minutes of trying to understand the functions of the program, you give up. This happened to me time and time again, until I discovered a nice little Mac app called Logoist.

Logoist is simple and has all the functions I need. I can use cliparts from its extensive library, add text, apply filters and effects and insert pictures and photos. Its interface is intuitive and it has a few tutorials to show you the ropes. It also has automatic grid lines that help align all your elements. This simplicity let me create more freely than any professional design program could.

There are a lot of apps and programs you can use for both Mac and PC. Some are free and most are reasonably priced. You don’t have to go for the $500 creative suite to get the job done.

Black and white are your friends

I’ve always worked under the principle that, when in doubt, you should take the simplest route. In visual design, black and white is a great base to start with.

A black and white design looks professional, clean, and easy to work with. You don’t have to worry about colors matching or clashing. You know your text and your visual elements will be readable on a computer screen, a tablet or a smartphone. Black and white reminds readers of printed paper, something that’s ubiquitous and familiar. It’s trustworthy.

But of course, black and white can become a little bland. To add variety, choose one (and when I say that, I really mean one) accent color for your sidebar widgets, for the picture in your logo, or for the blog title in your header.

For example, on my writer’s website, I decided to go with dark red. It’s a color I like, and I think it brings about the right amount of visual interest. On my blog, I count on the pictures inserted in my posts for a blast of color.

Play with fonts

For my blog’s header, I decided to keep everything simple and play with fonts rather than pictures or images. Each word of my title (Read, Write, Live) uses a different font that expresses something unique about that word.

“Read” is in a formal, serif type that you could find in a book or newspaper. “Write” is in a handwritten-looking font that illustrates the act of writing on paper and separates it visually the other two words. “Live” is in a bold, sans-serif font with unexpected lines. I added a small ornament (one of the cliparts in Logoist) in the middle for visual interest.

Here’s the logo version, with the first letter of each word:

Blog logo
Fonts are great because you can give personality to words and ideas before they are processed by the brain through reading. They leave an instant impression, and can make or break the viewer’s desire to read on.

A tool I love for choosing awesome fonts is Google Fonts. If you’re tired of Times New Roman and Comic Sans, Google Fonts has an impressive collection of independent, public domain fonts you can use.

Be yourself, be realistic

The most important thing when you’re stuck having to design your own visual elements without training is to be honest with yourself. If you don’t know how to use vector software, then don’t. There are a lot of solutions that are within your reach and your abilities.

You also need to be realistic: there is no substitute for a professional design. As much as a self-designed header and logo can fill in temporarily, as soon as you get a steady flow of readers, you’ll be expected to get some custom, professional visual design on your blog. But as a beginner or novice blogger, a handmade, simple header and minimal visual elements can go a long way

One last thing: remember to have fun. I can tell you that this kind of visual work can be absorbing and exciting when you really get into it. I didn’t know I could come up with something so attractive on my own. I was very proud of the results, and it got me compliments from readers too!

Have you ever tried to design your own visual elements? Do you have any other basic visual design tips you’d like to share with the visually incompetent among us? I’d love to hear from you!

Anabelle is visually incompetent and would rather write about books, writing and living life with purpose at Read, Write, Live. She’s also a professional freelance writer for hire.

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 fiverr.com.

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.

9. Comments

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 Grovo.com.

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.
NYtimes_desktop_mobile

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:

nytimes_mobile_versions

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:

mashable_desktop_mobile

ethan_desktop_mobile

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:

techcrunch_desktop_mobile

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.

wapple_plugin

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.

wptouch_plugin

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.

wordpress_mobile_plugin

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 Onbile.com.

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.

how_to_use_onbile

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:

samph_desktop_mobile

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.

boston_globe_site

small_boston_globe_site

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 Grovo.com, 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:

1. instagr.am

Love it or hate it, instagr.am 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 instagr.am 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\.)?yourdomain.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feeds2.feedburner.com/yourdomain [NC]
#RewriteRule \.(gif|jpg)$ ñ [F]
#RewriteRule \.(gif|jpg)$ http://www.yourdomain.com/stealing.gif [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.