Design Elements that Kill a Blog & How to Fix Them

The death of a blog is a sad thing to witness. Strangled by pervasive advertisements, bludgeoned by the overuse of pop-ups, and drowned in huge blocks of text, too many good blogs are found wanting.

Many bloggers believe incredible content overshadows design, but it’s actually quite opposite–bad design overshadows good content, every time.

Does this mean you must create or invest in a dazzling web design? Not necessarily. I find that the best design is often quiet usability, where your blog design anticipates the reader’s needs and quickly serves them. The main function of content is serving readers. This is also true for design elements like search boxes, about me pages, and footer navigation. Creating a clean and usable blog will do three things: highlight your content, keep readers on your site longer, and prop you up as a professional.

Let’s take a look at how to improve your blog with design elements. First, we’ll look at what to avoid:

What to Avoid

1. Too Many Fonts

I’m a fontophile, and feel about fonts how most women feel about shoes. I understand how easy it is to get carried away with fonts, but it’s important to restrain yourself. Using too many fonts in your design will cause eye fatigue. When visitors tire of adjusting to each font on your page, they’ll simply click away.

Instead, utilize two fonts on your page, maybe three, if you include a specialized logo. Find web-safe fonts that are quickly loaded on every browser. Stay away from scripts or handwriting fonts, though. Large type is preferable–stick for size 14 or even larger. No one should be squinting to read your blog.

2. Too many ads

Advertisements fuel a lot of blogs, but there must be a delicate balance in your monetization. You rely on readers clicking your ads, but you don’t want to bombard them with too many ads. In my very humble opinion, in-text advertising is unadulterated evil. An ad-heavy blog comes across as scammy.

Instead, be choosy about the ads you sell on your blog. Don’t attach ads to every element on your blog, like text or images. Rather, place ads on the sidebar, but not both sidebars. Choose one, preferably the right side.

3. Big Blocks of Text

Big Block Of Text

It’s a sad fact that many readers will not hang on to your every word. Because of this, blog posts should be scannable. Break up texts into digestible bites. Forget the rules of grammar–it’s okay to have only two sentences in a paragraph. (I’m sorry, Mrs. Anderson.)

To further improve readability, incorporate bullets or numbered lists.

4. Pop-Ups!

Few things are more annoying than pop-ups. Pop-ups were almost beaten into submission a few years ago, only to make a roaring resurgence in 2013. Although everyone is doing it doesn’t mean that you should do it. Readers are immediately turned off by pop-ups.

But, how do you inform visitors of your wonderful, resourceful newsletter? There are better ways; we’ll cover this in the second half of this article.

5. Auto-Play Music

Autoplay Music

Yes. This is still a thing. Auto-Play music is akin to a person who, while hiding from a crazed murderer, accidentally coughs. That murderer will hunt down said person. I feel that way when a site I’ve just opened automatically starts playing music. There’s no greater satisfaction than closing down that tab.

6. Captcha

The use of captcha has killed more blogs than the prior 5 elements combined. Captcha does an excellent job of keeping bots away, but it has the same effect on humans. Captchas are difficult to decode (or maybe I’m the only one who must re-attempt a minimum of 5 fives). Whenever I see a captcha as a comment requirement, I just skip the comment. Avoid this happening to your blog. Comments breathe life into blogs.

What to Include

1. Responsive Design

Mobile Responsive Design

Is your blog easily readable by mobile devices? If not, that’s your most important mission. With almost a billion smartphones in service, a sixth of the world’s population has mobile access to your blog. How will you serve them?

By implementing a responsive design that works on whatever platform used by your blog visitors, you will improve your usability and visitor retention.

2. A Tagline

tagline

Not everyone who arrives on your blog will know what it’s about. This is your opportunity to evangelize your brand. A tagline defines what your blog is about in one simple sentence. It should go underneath or close to your logo.

3. Start Here Page

starthere

When a first-time visitor arrives at your site, disillusioned and scared, don’t let them wander around aimlessly, hoping that they find what they’re looking for. A “Start Here” page guides visitors to your best blog posts, and informs them of how awesome you are.

Closely associated to the “Start Here” page is the “Top Posts” in the sidebar widget. Do both for maximum benefit. Showcasing your best, or most popular blog posts will only increase their popularity.

4. About Me Page

about

An “About Me” page is crucial to any design. It may be difficult to write your own bio, but it’s important to put a personal touch on what is often an impersonal experience. On your “About Me” page, share who you are, why you blog, and where you can be reached. Be sure to include your email or a contact form (even if you have a contact me page), as well as your social media links.

A lovely bonus is having a picture of yourself. It lends credibility to your site. Even better, include an introductory video of yourself. It really makes you appear trustworthy.

5. Footer Navigation

footer

After I’ve scrolled through your posts, the last thing I want to do is scroll back up to find your menu navigation. Add navigation to your footer, as well.

You can also add a contact form to your footer, as an easy way to reach you, without forcing the visitor to take extra clicks.

6. White Space

whitespace

You need a lot of white space. And white space is not necessarily “white.” It can be any color, as long as it’s devoid of words and pictures. The emptiness of white space gives respite to the eyes.

7. Call-to-Action

call-to-action

In Things to Avoid, we briefly discussed the evil that is pop-up advertisements. Now, we discuss what to use instead: header calls-to-action. If you are advertising your eBook or newsletter, the most unobtrusive, yet effective way to do that is by placing an opt-in header at the top of your blog. It’s infinitely better than pop-ups–I immediately click away a pop-up, without even reading it. I will linger at the top of the page to read any important updates. It’s prime real-estate.

Another great place to put a call-to-action is at the footer, to remind readers who have just finished reading your content.

8. Search Box

search-box

Search boxes are necessary, and should be prominently displayed near the top of your blog. Readers want to be able to track down information quickly and effectively. If you do not have a search box, it’s hurting your usability.

9. Amazing Images

photo

Approximately 65% of the population are visual learners. This means your blog must include something to stimulate the optical nerves. Fortunately, great resources abound; many of them are free. Allow pictures to craft your story.

10. Use Thumbnail Links Whenever Possible

links

It is always possible. In conjunction with the above, use thumbnail links to related topics at the end of your blog posts. Readers are very likely to click these links, enticed by the related material and the pretty pictures.

In Summary

Good design is about what you include and also what you exclude. It takes effort to avoid the minefields that many bloggers have fallen victim to. Creating a balanced design that’s classic, but also fresh, starts by treating readers as king, content as faithful servants, and design as the castle.

What are your least favorite design elements?

Why and How to Make Your WordPress Blog Mobile Friendly

There was a time when mobile phones were devices used for the sole purpose of making phone calls; that was all it was capable of. But that was then. Fast forward to today, every big website has a mobile version. If your website lacks a mobile friendly design, you are losing the ever growing community of mobile web users. It is estimated that the number of mobile internet users will overtake that of desktop users some time very soon. So, it’s high time you took care of your mobile visitors by providing a mobile friendly interface of your website for them. Ignoring mobile users is the worst thing you can do now as this is no more a matter of choice. The internet today is mobile friendly. Which is why it is essential to learn how to make your WordPress blog mobile friendly.

Why go mobile?

Almost everyone has a smartphone these days and more than for calling, they use it to access internet. If you don’t optimize your site for mobile devices, it will look cluttered and unreadable on a mobile phone’s screen which is much smaller than a desktop or a laptop. Having a mobile friendly design makes your site legible and clean to a mobile visitor. Another benefit is that people appreciate the fact that you cared enough to create a mobile optimized site for them and that adds to your authenticity. If your site is not mobile friendly, visitors that land on your site from mobile devices are more than likely to leave it right away seeing the cluttered interface. Having a mobile version simply makes those otherwise leaving visitors stick around just like the visitors from larger screens.

Even if some of your mobile visitors manage to read the content on your not-so-mobile-friendly site, they are more likely to miss your call to action. Every good website has a call to action, be it subscribe to the email newsletter, complete a form, buy a product or anything for that matter. By having a design that is optimized for mobile devices, you can ensure that your call to action gets seen by the mobile visitors too.

Having a mobile friendly version of your site has some SEO benefits too. The fact is Google wants every site to have a mobile friendly design in order to help Google serve it to searches made from smartphones. Google has already made mobile search a top priority as the number of searches made from smartphones is on the rise.

Different ways to make your blog design mobile friendly

There are several ways to make your website design suitable for viewing on mobile devices such as smartphones and tablets. However, we’ll look into the 3 most commonly followed methods here.

1. Use a responsive theme

responsive-themeUsing a responsive wordpress theme is the easiest way to optimize your site for mobile visitors. A responsive theme adjusts itself according to the device being used by the incoming visitor. So a visitor from desktop or laptop will see a wide interface whereas mobile visitor will get the interface that fits on his screen without any cluttering. Most of the times, all you need to make your site mobile friendly is just a responsive theme and it is the most popular method for making your site mobile friendly.But it has its drawbacks too, the responsive themes do not reduce the size of images being used and you would have to do this manually for your site to load faster on slow connections of mobile devices. However, having a mobile friendly layout itself is half the work done.

2. Use a plugin

We use wordpress plugins to solve most of our site related issues and there are plugins that can make your blog mobile friendly too. The perk of using a plugin is that you can install and start using it within a matter of minutes. It does not require you to have any knowledge on optimizing sites for mobile. Here are some popular plugins you can use for this:

WPtouch: WPtouch mobile plugin instantly makes your site a mobile optimized, touch friendly website that can be viewed perfectly on all mobile devices. It detects the device of your incoming visitor and provides them the suitable version of your site. You have more options to customize the design according to your taste. The premium version of WPtouch mobile offers even more exciting features like automatic video and photo scaling, support for retina and HD displays, etc.

WP Mobile Detector: WP Mobile Detector plugin can identify if the visitor is using an ordinary mobile phone or a smartphone and it displays a suitable version of your site layout differently for each of them. It can detect and support over 5000 different mobile devices. WP Mobile Detector also provides mobile statistics and comes with 7 built-in mobile friendly themes. The premium version lets you create custom themes and display ads for mobile devices.

Jetpack’s Mobile Theme: This plugin suite brings some features of wordpress.com to your self-hosted WordPress site. It comes with a mobile theme which is snappy and fast loading on mobile devices. The mobile theme will use the design elements from your desktop WordPress theme by default but you can customize it with some simple modifications on CSS.

3. Design a separate mobile version of your site

If you create separate mobile version of your website, you will have two separate websites, a desktop site and a mobile site. The mobile site is usually given an alias like m.yoursite.com and it helps people recognize that they are on the mobile version. When someone visits your site on a mobile device, they get redirected to the mobile site automatically. Having a separate site for mobile users can help you provide different content for mobile and desktop users. You can always control what the mobile visitor sees, and the content on desktop version of your site will not affect this. The only drawback is that you have to make the changes on desktop and mobile sites separately and this will consume more time. Designing a separate mobile version of your website used to require technical skills before, but now there are many services that would help you easily create and host one for free.

How to build the mobile version of your site

You can either hire a developer to get this done for you or follow this simple guide to build one with a free service called dudamobile.

1. Head over to http://my.dudamobile.com and sign up for a free account.

2. Once you create your free account you will be redirected to the dashboard. Click on “Create mobile site’ button over there.

3. In the new popup box, select ‘Use an existing website URL’ and enter your website URL, site nickname and choose the category your site belongs to.

4. Click on ‘Convert’ and you will be presented with the editor page where you can customize the looks of your mobile version. There is a preview panel to the right of the editor. Once you are done with customizations, click on ‘Next’.

5. You will be taken to the page editor where you can add different objects like social sharing buttons and other widgets. Once you have added required elements and everything looks fine, click on ‘Next’.

6. In the next page, you will be asked to select a plan for the service; premium plan has features like ad free site, custom subdomain like m.yoursite.com support and many more. We shall go with the free plan in this tutorial. Select free plan and click on “go live’.

7. As a final step, click on ‘Setup my mobile redirection’ and you will be provided with a JavaScript code which you will have to add on your site. Alternatively, you can search for ‘Mobile Website Builder for WordPress by DudaMobile’ in the WordPress Plugins repository and install the plugin. And voila! You have a separate mobile version of your site now.

To get your m.yoursite.com alias, you will have to upgrade to dudamobile premium.

Things to keep in mind

Using a responsive theme is the best option among all these as you will have less work to take care of. It has to be noted that using free plan of services like dudamobile can have a negative impact as the URL of your mobile site begins with their domain. If you have a blog, it is better to go with the responsive theme or wordpress plugin method rather than creating a separate mobile site. Creating a separate site with m.yoursite.com alias is better if you have a static website where new content is not added very frequently.

Please let us know in the comments below… Do you read a lot of websites on your mobile phone?