Close
Close

Blog Design for ROI Rule #4: Make Posts Easy to Read

This guest post is by Gab Goldenberg of The Advanced SEO Book.

In the last instalment of the Blog Design for ROI series, I discussed the importance of showering attention on your community using design elements.

The fourth commandment of blog design for ROI is to make your posts easy to read. This ensures that your message gets across even to first-time skimmers, which helps turn them into loyal readers (and post-sharers).

There are several elements that impact on the ease with which a post is read. The primary elements we’ll cover here are:

Each individual blog post should have clear start and end points

The web 2.0 design trend contributed positively to web design practices in this regard, as it led many people to show rounded-corner graphics at the tops and bottoms of blog posts.

In itself, the roundness or squareness of the corners doesn’t matter. It’s the presence of the corner graphics that matters, because they indicate the beginning and end of the post.

You can see bottom-corner graphics in this old design of SEOBook.com’s blog:

rounded corners

In contrast to the above, it’s hard to distinguish where posts in WordPress’s Toolbox theme start and end, for lack of such graphic hints. Toolbox Theme, pictured below, uses large-font blue text links to show that a new post is starting.

no end to the post

If you didn’t know the site was a blog, though, you wouldn’t necessarily know that the links were the start of new posts, as I discovered in usability testing. Also, the blog’s name is only a little larger than the post titles. Using corner graphics clearly makes it easier to know when a post starts and ends.

That being said, the date, post categories and tags do help to distinguish the start and ends of posts. (And kudos to this theme’s designers for avoiding the calendar date icons, which are just distracting graphics.)

I’m not saying Toolbox is bad, it’s just that there’s an important improvement possible here. The flip-side is that the Toolbox theme gets some advantages from this light use of graphics, like fast loading times.

Line length and font size

Just as some forms of print are easier to read, so too it’s easier to read some particular text layouts online. For blogs, this means somewhere between 12-16 words per line, with about 12-point type.

Obviously this will vary a bit if you choose to accomodate older readers who typically prefer larger type (13 point of 14-point font sizes), but this rule is a good starting point.

Look at the legibility of my SEO blog‘s design in terms of the number of words per line, in the next image. There are a lot of words—20-22 words in each line!

line length on my blog

In contrast, you’ll find that Problogger has 12-15 words per line.

line length on problogger

These shorter lines are a lot more manageable and mentally rewarding, as readers feel that they are making progress more quickly.

It’s similar when kids choose a book with a large font and wide margins for their book report, so they can have done their homework (reading the book) in less time.

Besides your default post width and font size, which will determine post design, certain graphic elements also help readers speed through posts—and enjoy and understand them more…

Post-embedded sidebars, blockquotes, pull quotes, and image captions

Our blog posts need to be visually appealing not for the sake of art, but to help break up large sections of text into more manageable, bite-size pieces.

Pull quotes and blockquotes

Pull quotes and blockquotes, as well as post-embedded sidebars, help shorten some of the lines in your posts. This helps the reader feel like they’ll get through the post quickly.

Pull quotes are those quotes that appear on the side of a main block of text, and highlight an important quotation. (This also makes them a text tidbit, which I’ll discuss more below.)pull quote

In this, pull quotes are different from blockquotes, because blockquotes are typically complete paragraphs that are part of the main column of text. Smashing Magazine does a good job explaining the details of different quote types.

Blockquotes shorten a line by being indented, as you can see with the yellow line to the left of the content below.

Block quote indents

Post-embedded sidebars

Here’s what a post-embedded sidebar looks like (see the right-hand side of this picture), for those who haven’t yet seen one.

Sidebar

Do you see how the sidebar makes the main body of text narrower? This lets people to get through each line faster. It’s important also that the sidebar has a distinct appearance thanks to its grey background color. (You could use a border instead.)

Note: A post-embedded sidebar is different from the blog’s main sidebar.

The post-embedded sidebar offers information related to a specific post, such as biographical information on a person being interviewed, or background context on a story. The main sidebar is unrelated to a specific post and offers general information and navigation for the site overall.

Text tidbits: subheaders, bullets and image captions

I call these elements “text tidbits,” as they’re the little bits that get read most—they’re read by regular readers but also by skimmers who may skip other content, so that these tidbits are worth spending time on.

Since image captions are very highly read text tidbits, it’s important that blog themes include a caption element—even the basic grey background that is the default in WordPress.

In my personal experience, custom theme designs often forget to include a caption element. Words typed into the caption area of WordPress’ image uploader appear out of place, if they appear at all. This means visitors read fewer words, lowering the chances that they will become loyal readers.

Tables of contents

If you’re writing a long post with many sections, readers will find it useful to preview what the sections are. This way they can pick and choose what interests them.

Wikipedia of course, is the master of this technique:

Table of contents

The question of whether to follow Wikipedia’s approach of placing the table of contents as its own unique paragraph in the main body of text (as opposed to having the text wrap around it), is debatable.

On the one hand, this placement achieves the introduction’s goal, telling us what is to come. And this placement’s visual weight promotes use of the table of contents. On the other hand, a table of contents around which the main text wraps may prove less obtrusive while still communicating its point.

The answer to this question depends in part on the rest of your design, and so informal usability testing is the best way to choose which alignment option to choose.

Author profile information

It’s debatable where post authors should get credit for the post, but this matters both for new blogs and for blogs looking to encourage guest posting. On the one hand, leaving the bio to the end of the post rewards authors less—not every reader will read to the end. But placing too much content at the start of a post can be annoying for readers.

I’m in favour of a balanced approach: reward authors by showing the author’s photo and a one- or two- sentence bio with links at the start of a post. Then place a more expansive bio at the end for people who really must find out more.

The Fanciest Author Box plugin is an elegant way to create the more expansive bio:

Author bio

The balanced approach benefits both the post author and the blog owner. When visitors see a respected, familiar face at the start of a post, they’re more likely to stay and read. And as I mentioned before, the use of images (regardless of what exactly they are) lightens a post and makes it more readable.

Blog post design pointers

When choosing graphic design options for your post, always aim to facilitate a quick read that will fully express your message. The more they absorb your message, the better for you and your blog’s ROI.

  1. Ensure people know where one post ends and the next starts, so that readers scanning homepages and archive pages can easily choose a post to read.
  2. Keep the line length down to 12-15 words to help visitors read more. Occasionally, make lines even shorter with some attractive pull quotes, sidebars, and blockquotes, as this helps move readers through your post.
  3. When writing long posts, offer a content preview in the form of a table of contents. That way people know if they’ll read something of interest from the very beginning.
  4. Post author credits are an important reward for encouraging guest posts, so share some love at the start—but save the whole personal bio for the end.

How does your blog post design stack up against these guidelines? Share your thoughts in the comments.

Gab Goldenberg wrote The Advanced SEO Book – and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from seoroi.com/blog-design-for-roi.

Blog Design for ROI Rule #3: Shower Attention and Appreciation On Your Community

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

This is part 3 of Problogger’s Blog Design for ROI series. Today we’ll talk about integrating your community into your design. Since a blog is a form of social media, even if—or especially if—it’s a business blog, it only makes sense to design the blog in a way that will maximize interaction.

Let’s address the importance of interaction, though, before we delve into the details of design.

The skeptics amongst you may ask, “What are the benefits?” Heck, giving attention to others may attract trolls and other negative behaviour!

One of the great benefits is that an engaged community promotes your blog, providing word of mouth marketing. This includes social bookmarking and sharing, as well as regular links from your community members’ own sites. So you increase your social and SEO traffic. Plus building community is more enjoyable than manually requesting links and attention…

I could go on, but check out Richard’s post on techniques to measure online communities’ ROI in dollars, or my own on the intangible ROI of social media such as better hiring, partnerships, and more.

How do you show that you care about your community?

There are a number of ways to visually reinforce the importance of community on your blog, and they center around giving your community visual prominence and rewarding (“gamifying”) their behaviour.

Credit for the contribution: avatars

One easy way to do this is to use avatars—thumbnail pictures of your members that appear alongside their contributions.

If you accept guest posts, why make your guest authors anonymous? Instead, show their profile picture at the top of the posts they publish on your blog. (We’ll discuss this more in the next article in this series, on post design.) My friends at SEOmoz were some of the first people to do this:

Daily seo

Of course, this idea isn’t limited to post authors—most people comment and they are in fact the bulk of your community, so you should offer avatars to your commenters, as well.

Here’s what you want your blog comments area to look like:

Comments

What do you do for people who haven’t provided an avatar?

I’d suggest something generic that reflects your brand, perhaps with the text, “User hasn’t yet uploaded a profile picture.” The idea is that users will realize what they need to do to get the avatar to appear. (Note: avoid using the word “avatar” since not everyone knows what it means. “Profile picture” is clearer.)

Avatar

SEOmoz gets this partly right by using their logo’s starshape icon, but they omit to specify why that’s appearing instead of human picture like other people’s. It’s a missed opportunity.

It is nonetheless a step up from the generic-and-distracting images provided by certain blog commenting/avatar systems.

Distracting avatar

Why limit yourself to just showing a person’s photo and name, though?

Awards, badges, and recognition

Since you want to encourage high quality participation, as well as helping people understand why they should visit a particular member’s profile page instead of clicking elsewhere, give your members titles (or “badges”) and display these alongside members’ profiles.

When I was in high school and really into hiphop, I used to frequent a forum, NobodySmiling, that did a good job of this, placing badges (in the shape of various trophies) for various achievements alongside members’ posts. In the screenshot below, you can see an excellent example of a site that recognizes user contributions.

The moderator MetiphOracle has his title, Moderator, displayed as well as multiple stars indicating his veteran-contributor status. Additionally, his post count, win-loss record (in hiphop battles), “Vicious rating” (how frequently other members clicked his Praise or Smite links, a pre-Facebook Like function), and two microphone awards are shown.

Awards

It’s also worth highlighting that most of the awards were accessible on the basis of merit—win ten rap battles and you got a bronze mic, for example. This is important, because if the awards are only hierarchical—that is, only one person can hold an award—then it can reduce motivation for newer members.

The site admins realized that this was a very popular feature and quickly added other awards for a variety of achievements.

Awards list

That being said, being #1 (or in the top five or ten) is also very motivating to senior members—especially so if you make the achievement of that status a contest. That was the idea behind the belts, like the Vet Tourney award in the screenshot above.

You can take the idea even further though, and reward the best collaboration.

The crown award in the screenshot above went to the best crew—the group of rappers who beat other top crews in rap battles.

As someone who competed for (and won!) the crown, I can tell you that my friends and I spent hours talking on instant messenger about how we were going to do it. So the result of this kind of gamification of your community is that its members are no longer dependent on their interaction with you—they’re brought back to your blog repeatedly to interact amongst themselves, and the friendships they build.

You don’t specifically need different images for your reward badges though.

An easy way to start is to have some kind of general-purpose image on which you can overlay people’s titles. Below, SEOmoz have a gold-colour ribbon that appears below members’ answers in SEOmoz’s Q&A forum.

Displaying titles

A simple way to do this without a lot of up-front coding work—and to see if you have enough traction in your blog’s readership to warrant the coding work—is to begin with a monthly community contest.

Offer prizes for different forms of interaction—the most comments, the best comment, the best comment by someone who never won before, and so on. Then, you can have a monthly announcement for the winners, and a page where you list current and past winners.

Help and encourage members to interact between themselves

Another thing I recall being rather practical and popular on NobodySmiling—and which is now found everywhere from Skype and MSN messenger to Facebook (though not yet Twitter)—is the list of members online. Essentially, this is an invitation to members to chat or private message with each other.

Who's online

Where does the “members online now” block belong?

I’d venture to say that it’s becoming conventional to list a similar block—the Facebook Page Likers list—in the sidebar, so it’s probably a good idea to place this here. Using conventions on your blog requires less effort from your visitors.

Social seomoz

A further way to help encourage the contact via your blog’s design is to make member contact information readily accessible. You can see this done on SEOmoz member profiles:

Member profiles

Another tool that’s not pictured there is a button that lets members send each other private messages within SEOmoz, similar to the way forum software handles membership interaction.

An even better way to display this is to make the person’s contact information available at the end of all their posts and comments. You can see in the screenshot from NobodySmiling that MetiphOracle’s accounts—MSN and others—were all linked below his posts.

Accounts shown
The following excerpt from an Inc. magazine article discusses how popular review site Yelp made a point of inviting its top members to exclusive parties.

This achieved a few things: it rewarded high levels of participation, provided recognition, and helped the members meet each other and interact.

“Without the cash for a national rollout, [Yelp co-founder Jeremy] Stoppelman decided to focus on making Yelp famous locally. With the help of a buzz-marketing guru he hired on a whim, Stoppelman decided to select a few dozen people—the most active reviewers on the site—and throw them an open-bar party. As a joke, he called the group the Yelp Elite Squad.

“[Yelp investor Max] Levchin thought the idea was crazy—”I was like, ‘Holy cr*p: We’re nowhere near profitability; this is ridiculous,’” he says—but 100 people showed up, and traffic to the site began to crawl up. Because the parties were reserved for prolific reviewers, they gave casual users a reason to use the site more and nonusers a reason to join Yelp.

By June 2005, Yelp had 12,000 reviewers, most of them in the Bay Area. In November, Stoppelman went back to the VCs and bagged $5 million from Bessemer Venture Partners. He used the money to throw more parties and to hire party planners—Yelp calls them community managers—in New York, Chicago, and Boston. The company now employs 40 of these people.”

Comments as forum posts—a way to encourage repeat and deeper interactions

Perhaps the most unique—and clever—form of tying a blog into a community that I’ve seen comes from the comic, Least I Could Do (NSFW Warning: sexual humour and scantily clad cartoon women).

Instead of using a common commenting system like Disqus, Least I Could Do (LICD) gets people to go to the forum to comment on blog posts.

The way the blog and forum are tied together is that blog posts are forum excerpts. In the screenshot below, you see that the Read More link (same as the Comments link) takes you to LICD’s forum.

Post excerpt

The advantage of this approach is that forums comfortably hold longer discussions that are typically uncommon on blogs. Also, many of the community-oriented details described in this posts exists by default with forums (including easy member registration, avatars, recognition, member praise and thanks, and contact info links).

The disadvantage is that you need custom code to get your members’ avatars and other details to appear alongside their guest post author credits if you publish guest posts.

How to shower attention on your community

    • Show avatars and usernames alongside contributions: Help people stand out as individuals. The more you do this, the more likely people will be to remember each other, and members will become friendly with one another faster.
    • Visually recognize members:When people achieve certain contribution plateaus, when they get acknowledged by other community members, when they gain seniority, and when they outperform others, let them brag with badges that are visible on their member profiles.Pro tip: Make these badges embeddable on other sites so that members who are proud of their achievements can link back to your site to show off their badges.
    • Encourage members to interact: Provide links to as many contact methods as they want to provide—Skype, MSN, social media profiles, personal sites, and so on. Also, show who’s online at the moment so it’s easy for people to draw their friends’ attention to particular discussions they want others to participate in.
      Pro tip: Offer a chat room. It’s old-fashioned, but it works! Before there were live webinars, people had live events in chat rooms.
    • Use forums for comments: Encourage a community to build around your posts by putting the spotlight on members, allowing longer discussions, and more.

What design techniques do you use to recognize and reward your blog’s loyal users? What other ideas have you seen on the web? Share your experiences with us in the comments, and check back next week for the next part in our series!

Gab Goldenberg wrote The Advanced SEO Book—and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from seoroi.com/blog-design-for-roi/ .

Blog Design for ROI Rule 2: Highlight Your Key Content

This guest post is by Gab Goldenberg, author of The Advanced SEO Book.

Previously in the Blog Design for ROI series, I discussed the importance of prioritizing your email optin form within your page layout.

The next best use of space in your design is to highlight your key content.

Why does highlighting your key content matter?

There are a few reasons why this is important.

  • It helps convert one-off visitors into repeat visitors: If someone browses a few posts and realizes that they really enjoy the content, they’ll keep coming back for more. This is one reason why many blogs struggle to build a loyal following—they leave it to more-or-less random chance whether someone sees their best posts.
  • It helps repeat readers keep digging into your archives: This way, they deepen their knowledge of the subject, and associate that education with you.
  • This highlighting is also an easy, practical way to give visitors an idea of what you blog about.

When I say you should highlight key content, I don’t just mean posts, I mean your key posts and key blog categories. You can pick key categories either by popularity of the category’s posts and/or frequency of posting on that topic.

In the main content area

In this regard, I think ProBlogger’s design circa end of 2005 was a brilliant, successful approach to the problem:

Problogger header highlights key posts, categories and news/resources

Beneath the logo and banner ad, there are three visually dominant content blocks. The prominent position is one part of the story.

Another part of the success story here was the specific content featured.

  • The first block, aptly entitled Introduction – Key Articles, featured core posts. It did something quite clever that went beyond that, though—after five specific posts, it offered a single link to drive people further into other posts—the Top 20 Posts at Problogger. And it offered a broad review of past experience—a summary of the best content, if you will—in the seventh link, Lessons I’ve Learnt.
  • The second block, Tips and Hints – Toolbox, listed core categories on Problogger that still represent the blog’s topics accurately to this day—advice on publishing ads, blog design, writing and marketing.
  • The third block, for miscellaneous items, provided valuable resources like interviews, case studies and tools, as well as miscellaneous info about ProBlogger like ProBlogger News, ProBlogger In The News and a Disclaimer.

I don’t know if it was deliberate at the time, but to me the content in those blocks is arranged in increasing order of expertise. Beginners can read, “What is a blog?” Intermediate bloggers can dig through the archives to satisfy their curiosity and deepen their knowledge. Experts can see interviews and case studies with particular details, as well as tools for for implementation.

In the sidebar

Another popular place—though probably less effective—to highlight a blog’s top content is the sidebar.

Here’s how Copyblogger did it back in the day.

Copyblogger in 2006

And you’ll see that this is still where CopyBlogger highlights his top content today:

Copyblogger 2012

While CopyBlogger didn’t also link to category pages in 2006, you’ll see the design comes around and does this later, with the categories linked to above the Popular Articles section. Again, he enables people to go deeper into his subject matter and deepen their knowledge.

Email form + top content = win?

Another aspect which I like about Copyblogger’s positioning of the top content in the sidebar is that it’s right next to his email optin form.

One best practice for optin forms is to provide a [lightbox / popover] link to a sample email so people can preview what they’re signing up to. This advice comes from those well-known conversion experts, the Eisenberg brothers, founders of FutureNow. Here’s a look at their optin form.

FutureNow Optin Email form

Caveat: I said that I like this association of the email form with links to key content, because I think it’s similar to providing a sample newsletter as advocated by conversion rate gurus like the Eisenberg brothers. I haven’t tested it myself, though, so I don’t know if the analogy (sample newsletter link = top blog post links) holds true.

Raise ROI by highlighting your key content

After your email optin form, the most important element of your blog that you need to devote space to is your key content. It shows what you blog about, builds your loyal and subscribed audience, and helps people explore your archives.

Your key content is not just articles, but also categories and additional resources like tools and case studies.

Organizing the key content call-out by the intended audience’s degree of expertise is a practical way to make multiple audiences happy.

Placing the key content near your email optin form gives people a preview of what they’ll get in the newsletter, and may increase subscriptions.

I’d love to hear your thoughts on these tips in the comments. Have you tried these approaches? How did they work?

Next time, we’ll look at integrating the community you’ve built around your blog into the design of the blog itself. See you then!

Gab Goldenberg wrote The Advanced SEO Book – and you can get a free chapter here. Gab and Internet Marketing Ninjas, the folks behind the Blog Design for ROI series here on Problogger, are offering to mail you a free print copy of the Blog Design for ROI guide as a small book. Get your free copy from seoroi.com/blog-design-for-roi/ .

5 Ways to Use Images to Make Your Posts Irresistible

This week on #blogchat on Twitter, we discussed the use of images in blog posts, and I thought that some of the advice we covered there might be useful for you too. So here are my top tips for using images in your blog posts.

1. Use an image per post

At Digital Photography School, I include an image at the top of every post.

This provides a visual point of interest that draws people to read the post. Whilst the audience is particularly visually oriented, I think this is true across the board. The web is filled with rich media, and great images now. So the more you can do to make text-based posts visually appealing, the better.

In fact, some of our most shared posts on dPS are composed almost entirely of images, with little to no text at all.  Take a look at the stats on your blog for posts with images, and compare them with posts that don’t have images. You might find that the former do better with readers. They’ll almost certainly be more likely to be shared.

Eye

Image courtesy stock.xchng user L-O-L-A


2. Use images to draw the eye

Using an image at the post’s top is a default for dPS, but we also often images later in posts, too. In this way, they act almost like sub-headings to draw people down the page, and keep them engaged throughout the post.

Not only do those later images catch attention, they provide visual respite for the visitor who is diligently reading through the whole post, from start to finish. So these images serve all kinds of readers—not just scanners.

I think the trick with this is to take care with the images you use. If the reader scans from the top image to a subsequent one, you may—or may not— want that subsequent image to jar for them. It’s important to choose those images carefully, so that they tell the story you want them to.

3. Use images for RSS

Images in your posts also grab the attention of users who are subscribed to your RSS feed. In that case, they can mean the difference between your post being read or ignored.

If you think images are eye-catching on your blog—which is already heavily designed and strongly visual, just imagine what they can do to get attention in a less designed, more texty environment.

4. Trust your instincts

I choose images for blog posts based on the feeling that the image gives me more than anything else. And I’ve really found this to work well.

Often here on ProBlogger, guest posters will send us generic clipart-style images to accompany their content, and we avoid publishing these.

The best images are the ones that evoke a feeling in you and your readers. Clip art probably won’t do that! What does are images that contain people. We’re human, and biology has preprogrammed us to look into each others’ eyes.

So I find that using images with people who are looking at the camera tend to be the most engaging.

5. Take your time

Images are important—and not just to those embracing Pinterest as a medium for growing their readership!

A good image is sometimes as important (if not more important) than a good title for a blog post. On dPS, sometimes I’ll take longer choosing the image for a post than writing the post itself.

You may not spend that much time on your image selection, but if you’re not paying much attention to it, I encourage you to build some time into your posting schedule over the next few weeks to source really strong, eye-catching, and engaging images. You never know how your readers will respond, but you might see longer visits, and more sharing of your content if you do.

Are you already using images on your blog? What types work best for you? Share your advice in the comments.

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.