The Future of Mobile Browsing (Infographic)

We’ve spoken a lot here about responsive design and mobile optimization for your blog here on For Bloggers By Bloggers.

There’s a reason for this, though, and it’s not just that we’re all smartphone and tablet geeks (okay, maybe some truth in that). Look at trends and reports looking at the future of browsing, and it’s clear mobile is going to become ubiquitous very soon.

So, if you’re not ready for mobile browsing – whether responsive design or mobile optimized design – you’re going to miss out.

Don’t take our word for it, though – check out this handy infographic on responsive design from Dot Com Infoway and what platforms you should be considering.

Then keep checking back in on FBBB for the latest tips and updates on making your blog responsive or at least ready for the imminent mobile onslaught.

responsive-web-design-infographic

Why You Need a Responsive Blog Design Instead of a Mobile-Friendly One

When you read a blog, what’s your preferred method – desktop browser or mobile (say, smartphone or tablet)?

According to our analytics here at For Bloggers By Bloggers, our mobile browsing traffic accounts for around 3,500 visitors per month (or around 10% of our visitors), and they tend to stay on the site longer than desktop visitors.

So it makes sense for us to ensure these visitors are looked after. Because we run on WordPress, we’re automatically mobile-friendly (meaning visitors on mobile browsers will get a nice replication of our design on their phones).

We could also install a plugin like WPtouch Pro, to optimize the mobile experience even more. But I’m not a fan of either of these approaches – instead, I much prefer a responsive design for mobile visitors. Here’s why.

You Keep Important Information

If you visit a site that’s running a mobile plugin, you usually see this kind of display (taken from WPtouch Pro), or similar.

WPtouch Pro

As you can see, it gives you a nice, clean look and feel and breaks the blog posts down into easy-to-manage excerpts that you can click through to. Run the pro version of the plugin, and it also gives you more theme  designs to play with as well as an iPad-specific setting.

The problem is, if you have a lot of call-to-actions (CTA) on your blog, you lose them with a mobile plugin. Sidebar ads, for example, disappear. Subscription boxes also disappear.

Now, you can set up description options on the plugin, but this isn’t as seamless a flow as having a pop-up box reminder or dedicated after-post box to encourage your readers to click your CTA.
You Don’t Need to Hold, Click and Stretch

One thing I really hate about sites that are simply mobile-friendly is that I have to either double-tap, or hold the screen and stretch it, to read what I’m interested in.

Because a mobile-friendly site just replicates your web design but on a much smaller scale, there’s no way you’ll see all the information in the same way you would on a standard browser.

Take this screen grab of the BBC website – it does a good job of replication, but you just know that’s going to involve a lot of manipulation when you start to click on articles:

Mobile friendly

Now, this may not be an issue for some folks but, again, if you – the blogger – are using your blog to make money and sell ads, etc, you’re going to lose a lot of your CTA when readers zoom into your main content.

As your blog post zooms into view, your sidebar disappears off-screen, until you scroll over that direction. If, indeed, your reader can be bothered to do that.
Responsive Design is More Than Just a Mobile Browser Solution

While there’s no doubt in my mind that responsive design is the best solution for mobile browsers, it offers a bit more than that. Because responsive design adapts to any screen size, it’s also great for widescreen displays as well as smaller desktop or laptop screens.

The layout of a responsive design identifies your display and adapts accordingly. It also keeps your CTA’s, whether at the top of the screen or below the main content.

Responsive Themes by StudioPress

It’s a smooth transition from web browsing to mobile responsive browsing – and for me, that beats any other option hands down.

Also, for any blogger that cares about the community experience when on-site, responsive design also means your blog adapts around your reader, as opposed to them having to adapt to you – an immediate plus for you over other bloggers.

So, now you know why you’d want responsive, how do you make sure your blog is leaning this way?
Taking Your Blog Responsive

The good news is, there are a variety of ways to make your blog responsive, and they’re all suited to your needs – whether you want to buy a custom-made solution, or dabble with some coding and CSS work yourself.
The Custom Solution with Studiopress

I’m a huge fan of the Studiopress developer house. They’re the guys that build the Genesis framework, used on this site with the Focus child theme (affiliate links).

Because Studiopress knows the value of user experience and site-wide design, they have a roster of responsive themes ready to install on your WordPress blog immediately. They even have a handy theme chooser tool, to let you see the currently available responsive designs, and help you choose the right one for you.

I use the Studiopress designs on every blog I create now, and I also make sure I go with one of their responsive designs – and the feedback from readers and subscribers validate that choice.
The CSS Coding Solution

CSS is the script that site developers use to create everything from styling to specialized areas, call-outs and much more. CSS3 is the latest version, and that update introduced the concept of media queries.

This is essentially the piece of code that changed everything, and made responsive design a reality. By implementing media queries into your design, you can choose which query you prefer, based on the device you want to make your site more palatable for.

Studiopress founder Brian Gardner has a great piece on media queries over at his blog, along with links to some other useful resources, so it’s definitely the place to start of you’re thinking of coding responsive design into your site.

How about you – have you made the switch to responsive yet? What’s been your experience when visiting responsive sites versus mobile-friendly ones? Let’s talk below.
inShare

How to Install WordPress

What is WordPress? – a nice introduction to the platform and why it’s so popular.

How to Build a Blog for Beginners- a walk-thru of the basic blog set up process
WordPress.com versus WordPress.org – a comparison of the two versions of WordPress and which one is right for you.
How to Install WordPress – how to use an FTP program if your host doesn’t offer one-click install.
The WordPress Dashboard – an overview of the main features of your Admin area.
Creating a New Post – how to create a new post and some of the tools available for that.
Edit an Existing Post – how to tidy up a post, make changes, correct errors, etc.
Categories and Tags – understanding the difference between these two important features of WordPress.
Creating and Editing Pages – how to make your blog or site more functional with specific pages.
Adding Images – how to sex up your content with the right image.
Embedding Video – a key tool for many bloggers, this shows you how to use video on your blog posts.
Media Library – understand what your media library is, how to compile an image archive and more.
Managing Comments – should you moderate, assign filters, and more in this video about a blog’s most active section.
Creating Links – how to drive more traffic to older posts with clever link strategies.
Changing the Theme – spruce up your look and feel with a new design. This will show you the free options as well as the premium ones.
Widgets – the lifeblood behind a blog’s functionality, turn yours into a powerhouse with the right widgets and where they should be placed.
Custom Menus – make your blog easy to navigate as well as functional with the right menu options.
Plugins – the beauty of WordPress is the sheer amount of customization you can do with plugins, from better SEO to ecommerce options, social sharing and much more.
Adding Users – how to create a multi-author blog, and set parameters for their use of the blog.
Tools – get up-to-speed with importing and exporting content and more with these handy WordPress tool tips.
Settings – make your life easier on your blog by only using the settings you need, versus those WordPress says you should use.

5 Ways the Right Photo Can Get You More Blog Readers

If you are like me, your blog posts take some time to write. Sometimes lots of time.

And if you fight The Princess Syndrome, they can take even longer.

I’ll toss a topic around, let it marinate. Even start a post and abandon it because I’m not feeling particularly passionate about it.

So by the time I’m finished, I want to be finished.

I want to knock it out of my brain so those guys Stephen King calls The Boys in the Basement can come back. You know, the ones with more bright, shiny ideas?

But wait. Now I have to think about a photo?
Why photos engage your readers

Because words alone are boring.

Your visitor needs a reason to read your post. If she sees too many words squeezed together, all bunched up, like they’re in a hot room and can’t breathe, well, she’ll feel the same way.

Because, let’s face it, we’re all attention-disordered.

The right photo will pull us by the shoulders and make us stop long enough to read the post.

Because at least 60 percent of your readers are visual learners.

Cave men knew it. A picture just makes us sit up. Makes us remember a story. And the research on how we learn shows that 60 percent of us are more engaged by the visual. We actually take in and retain information better when we see it (as opposed to just hearing it).

Because photos work beautifully with analogies and metaphors.

The photo is the powerful partner of metaphor. Something is like something else and here, this photo helps you see that.

Because a photo will pull your readers into the post.

We are all curious creatures. We are hard-wired to want to know why. Photos can make your reader wonder, “Why is this here?” And she’ll have to read your post to find out.

Because photos evoke emotions and give your business a personality.

Photos set the tone. Love. Fear. Laugh-out-loud funny. On my own blog, I don’t take myself too seriously and my photos reflect that.
5 ways the right photo can get you more blog readers

The right photo can increase reader engagement and blog post views by:
1. Conveying the overall feeling or emotion of your post.

I wrote a post recently on why negative headlines work. I was going for hate or anger with my image. The photo: A crazy-looking rock star guy sticking his tongue out.

negative blog post headlines

2. Illustrating a metaphor or analogy that is part of your main idea.

I wanted a way to explain why we gave up our baby, our 10-month-old Internet marketing business and went back to a sole focus on our 16-year-old graphic design and copywriting firm.

I was looking for a way to show how needy and contentious the baby was and how jealous our 16-year-old was because she had lost our love and attention. The photo: A very cute baby staring out from the page, focused, looking like he wants all your attention.

3. Evoking surprise or curiosity.

I wrote a post on my marketing blog about finding your niche. In it, I talked about whether “nichifying” your business too much might leave you with too few prospects and clients.

I gave the example of Swedish cowboys who collect Star Wars memorabilia as perhaps too limiting a niche. The photo: A Marlboro Man-type cowboy with his horse.

4. Complementing your headline.

This is a good way to engage your reader. But don’t look for a photo that, in a boring way, is exactly what your headline is saying, I mean, literally.

In one post in a series on marketing with enewsletters, the one on building your list organically by getting permission to send your letter out first, the photo was a little boy in a classroom holding up his hand, waiting to be called on by the teacher.

5. Simply making your reader smile.

Okay, I’ll admit. Some photos I choose just because of the smile factor. I wrote a post called, The Crazy Cat Edition: Does the Real You Show Up Online? It started with the story of my cat, who is a ventriloquist. He imitates the sounds of lots of different animals and I never know which cat is showing up until he starts talking.

And that introduced my post on the importance of showing up online with a consistent and unique voice. The photo: the craziest-looking cat I could find.

What about you?

Do you use photos in your posts?

Do you enjoy reading blog posts with appealing photos more?

What kinds are you attracted to?

Any tips to share?