Close
Close

Help! My Baby is Sick and Someone is Stealing My Money!

This is a guest contribution from Andrew Grant, owner and author of The Freedom Blog.

Two weeks ago I made a shocking discovery.

I found out that my youngest child, barely out of nappies, has been infected by a terrible virus with the sinister name of SASS.

SASS spreads at an alarming rate and is highly contagious. Prevalence has doubled in the last year alone and the most frightening thing is that SASS is propagated by one of our favourite modern technologies; the smartphone!

OK, don’t worry; I’m not talking about real children. You don’t have to hygienically dispose of your iPhone, just yet.  SASS stands for Short Attention Span Surfing and I just made it up. But this fictional disease does represent a very real threat to something very precious to me; my young, fresh-faced blog.

If you are a fellow blogger, you’ll know exactly how I feel. Just like a real baby the birth of a blog is often protracted and painful, yet at the same time, strangely moving. Once mine entered the world, I was anxious to show it off, but also curiously shy in case people thought it was ugly.  I dressed it in a pretty theme, fed it with the freshest content and showered it with unnecessary plugins on the slightest pretence.

At the same time, I anxiously monitored its vital signs, reacting to every burp and hiccup; even getting up in the middle of the night just to make sure it was still breathing.

Heart beat vital signs

Image courtesy of jscreationzs FreeDigitalPhotos.net

The Danger Signs

It was during one of my nocturnal check-ups that I noticed something was wrong.

At first everything appeared normal. I noted, as usual that mobile visitors represented about twenty percent of my overall traffic, split roughly 50/50 between tablets and smart-phones, which is exactly what I would expect from reading the latest tech news headlines. Mobile is growing like crazy.

The latest report from Monetate for example, shows that mobile share of web traffic has doubled in the last year alone from 10 to 20% (in line with my stats) and businesses with retail sites now get a better conversion from their tablet users than they do from desktops. It seems we’re happier to buy on our iPads than our Dells, these days. Smart-phone users aren’t quite so keen to buy stuff, yet.  But that will change as web designers catch up with the opportunity.

Therefore, it seems perfectly feasible, as Morgan Stanley have predicted, that in less than two years, more than half the people who visit my site, or yours, will be on some sort of mobile device. So, what’s the problem? Mobile users are as good as any others, aren’t they?

Well, yes, but also a big, No.

Like most blog-parents I had been careful to choose a nice warm, mobile-responsive theme, so that my baby would look his best on any browser, but I was beginning to suspect that it wasn’t enough. When I started looking at my analytics for visitor engagement, I found a disturbing dark shadow on the X-Ray.

Although my desktop stats were holding steady, mobile user-engagement was significantly lower. In fact, the figures were remarkably symmetrical.  Twenty percent of my visitors were reading twenty percent fewer pages and leaving twenty percent sooner than everybody else.

Except for one visitor, who spent 25 minutes browsing my blog on a Motorola phone. But I don’t think he counts. I think he was asleep!

Why don’t they like my baby?

I wanted to figure out why my content wasn’t working for mobile users, so I took a critical look using my own smartphone. I could see the problem straight away. Even though my nice, responsive theme was doing its best to optimise the presentation, there were bigger issues.

The site took too long to load, the font was difficult to read indoors and impossible in daylight, the graphics were too big and the layout looked uninviting.  Clearly, my mobile readers were receiving a second rate experience. It was no surprise they were bouncing off to go and play Angry Birds.

I could see it was time for a change, but the real tipping point came when I read this piece by Amy Mischler at mobithinking.com

“Building a dotMobi site means that your URL will automatically feature on the ‘zone files’ that we maintain for ICANN, which are regularly requested by mobile search engines, directories and other sites as ‘seed lists’ for the indexing of mobile-centric web sites.

 In other words, the use of a dotMobi domain will automate the beginnings of your search engine and directory submission process – in fact each month these log files are requested by around 5,000 interested parties.”

Does that smell like free traffic to you?  Bear in mind that was written in 2008, so imagine how much opportunity there is now!

Note: Dot mobi is a top level domain (TLD), just like dot com or dot org, which was introduced in 2006. It is intended to allow sites to differentiate themselves from their desktop counterparts and indicate that they are focused on a mobile audience.  You can register a dot mobi domain with any of the usual domain name providers.

Can Anybody Help Me?

So I began looking around for advice on how to ‘go mobile’. Surely, I thought, there must be plenty of other bloggers who are way ahead of me on this one. Mustn’t there? Well, as it turned out, there weren’t. What I found was lots of advice in two areas. Neither of which was much help.

Firstly, there were dozens of articles advising the use of responsive themes and secondly, I found plenty of suggestions for apps allowing me to post on the move. Since I already had a responsive theme and no desire to write my articles from the inside of a whale’s belly, I was disappointed.

Nowhere could I find anybody talking about things like user engagement, mobile content optimisation or multi-media repurposing, except as a means of building backlinks. It seemed I was on my own.

But then I discovered something even more shocking.

Someone is stealing my money!

Image courtesy of chanpipat FreeDigitalPhotos.net

Let’s see if you can spot it too. Here’s a little challenge for you. If you have a responsive theme on your blog, take look at it on your smartphone. Looks nice doesn’t it?

All your posts neatly lined up, one on top of the other.  Lovely, slidey, scrolly action.   See those front-page extracts whizzing past your fingers.  Wheee!

Now look a little closer. Notice anything missing?  No? Are you sure?

OK, I’ll give you a clue. Think of the word ‘sidebar’. Are you getting it now? Where is your sidebar? Not there is it? I don’t know which responsive theme you’re using, but every single one I’ve tried has dumped my sidebars like a cheap date, as soon as it spots a hot, new smart-phone.

And what are the three most important things that most bloggers keep in their sidebars?

  • Recent posts widgets
  • Opt-in forms
  • AdSense ads and banners

Those clever boffins who designed your, oh-so-elegant, responsive theme have completely forgotten to include the three most important elements of your blog; the elements responsible for reader engagement, visitor retention and monetization.

Programmers are pilfering our pocket money! Of course, it’s not deliberate. I hope. But it is bad design. It solves one problem but creates a bigger one.

Really! Can Anyone Help Me?

Once again, I turned to the heavy hitters to find some answers. Surely, the big bloggers are not so dumb as to let 20% of their readers go by without showing them a single ad? They must be doing something really creative to get round this problem. Mustn’t they?

Well, once again, not exactly. Out of five big names chosen at random and viewed on my smartphone, three showed less than ten percent of their normal number of ads and two of them had no ads at all!  Sorry, Problogger, I’m afraid you are one of the latter. The ones who did manage to squeeze some in, were usually settling for a single banner at the top of the front page and maybe a box ad at the bottom of each post.

The most effective solution I came across was to make the advert into a post. That way it would appear as part of the front page scroll and carry the same visual weight as a post I’ve since discovered this is called ‘native advertising’, though I’m not sure why.

Despite these small pockets of advancement, it was clear that the mobile interface is a problem that we’re all wrestling with. What we need is an action plan to inoculate our babies against SASS.  Since no one else seems to have got round to it yet, here’s mine.

Mobile Action Plan – Mark 1

Speed

Optimise everything; mobile users may have slow, 3G connections

  • Cut down the number of images
  • Compress the ones you keep
  • Install a caching plugin and learn how to configure it
  • Compress your CSS and JS code by installing Minify and Gzip .  Don’t worry.  I know that sounds like a technical nightmare, but it is really easily achieved with a couple of plugins

Content

You probably don’t want to write two sets of content, so use the same posts as on your main site, but mobile-ise them, like this:

  • Write a three bullet summary at the top of each post in a larger font.  This will appear in the post extract, so mobile users can see immediately what they’re getting
  • Offer them different ways to consume the post
  • How about a recorded version so they can listen while they drive?
  • Give them the option to email the post to themselves and read it later – that way they can sign up to your email list at the same time
  • Or turn the post into slides or a video, upload it to Slideshare or YouTube and embed the player on your blog – that way you get a couple of backlinks into the bargain

Monetization

Get clever with your adverts

  • Find out if you can configure your theme to display sidebar content to mobile users
  • If not work out ways to embed ads into the body of your posts
  • Turn the ads into posts ; advertorial style is great for product reviews or A vs B, type content. That way they will have the same visual weight as any other post and show up in the middle of the front-page scroll
  • Find smart ways to integrate your money links into the body of your content – it’s more compelling that way anyway and you may well find that click-through rates increase.

Visitor retention and list building

  • Buy some low-cost PLR ebooks and offer a new one every week or month, as an opt-in gift.  Then you can write a review post of each book, with your opt-in box in the middle of the text.  (PLR stands for Private Label Rights and basically means you buy a licence to do what you want with the book – sell it, give it away or even pretend you wrote it.)
  • Try embedding your opt-in form into other posts as well, so that it shows up a couple of times a week

Access

Ultimately, mobile users should really have their own gateway

  • At the very least you should install a responsive theme and test it on a smart-phone
  • Think seriously about building a satellite blog on a dot mobi domain, with an auto-switching plugin that detects the visitor’s device and serves up the most appropriate version.
  • Consider building an app as well as, or even instead of, your blog.  This has cost implications, but also advantages.  An app is a walled garden that engenders loyalty and push notification blows email out of the water, when it comes to open rates (up to 60% for push vs around 20% for email).

Once you put your mind to it, the mobile challenge starts to throw up all sorts of new opportunities and new ways to deliver good content.  In fact some of those ideas might work well on your main site too.

Cured?

The real question is; will doing all this cure our babies and let them grow big and strong again? The simple answer is, I don’t know. But we have to try something, or blogging as we know it, is in danger of disappearing.

Maybe the future blogging model is virtual and distributed, rather than site-centric. Imagine that your content is everywhere and readers simply access it via an app which draws in articles, slides, videos and audio files from all the different places you uploaded them.

Rather than getting hung up on the framework of our site, we should be focused on creating multi-purpose content, ready to be delivered, via whatever medium comes along. Right now we’re thinking about mobile. Next year it might be a wristwatch, or Google’s Glasses or a flexible screen sewn into your jacket.

Ultimately, the biggest lesson for content providers is that we need to separate the intellectual property from the real estate. Whatever it looks like, people will still want content and we need to be ready to give it to them.  Or someone else will. For a list of useful test sites, plugins and tools to help you go mobile, you’ll find a page called ‘Mobile Resources’ on my blog.

Let us know what you think.  What steps have you taken to mobile-ise?  What solutions have you come up with to monetise on smartphones?

Andrew Grant is the owner and author of The Freedom Blog a site where aspiring bloggers and internet marketer can find inspiration, practical advice and food for thought.

Common Creativity: Understanding the Rules and Rights Around “Free” Images on the Web

We’re all familiar with the old adage: a picture is worth a thousand words. In some cases, a picture is worth a thousand dollars. Luckily, for those of us not interested in investing a small fortune for the use of an image on a small scale, there are options.

Creative commons

Image by Jayel Aheram, licensed under Creative Commons

Sites offering free copyright images are gaining in popularity throughout the blogging and web design communities alike, but they are by no means created equal.

In fact, “free” does not necessarily mean “without cost” or even relate to price. For example, “royalty free” simply means that once you pay for the photo, you are “free” to use it however you like.

When words don’t even mean what they are supposed to mean, how are we to know the rules and rights surrounding “free” images on the web?  And if payment is a prerequisite to all of that freedom, are any pictures truly free?

Now, you may be asking yourself “who really cares?” After all, what are the chances that some artist is going to go to the trouble of tracking you down to sue you for “illegally” downloading their work? Besides, they put it out there on the Internet so it’s really fair game, right?

Wrong.

No matter how small the risk of your getting caught may seem (depending, of course, on how flagrant you are with what you have “stolen”), the simple fact is that improper use of protected works is a crime and is actually prosecuted more often than you might think.

The bottom line is simple: do you really want the risk of prosecution hanging over your head ready to come down on you at any time? If you’re serious about your future in blogging, the answer is no.

Okay, fine, you get it: you don’t want to break the law. But you’re not a copyright attorney and the nuances of intellectual property laws are so tricky, even those guys seem confused a lot of the time! If only there was a way for you to honor the law and easily understand the right and wrong ways to navigate the choppy waters of copyright protection all at the same time…

Enter: the world of Creative Commons licenses. Thanks to sites like Flickr, morgueFile, Wikimedia, and Pixabay (just to name a few), thousands of free images are at your fingertips. Creative Commons licenses have made legal use of images on the web simple for anyone—even if he or she is not an attorney.

However, there are still various levels of “freedom” within the licenses and a keen comprehension of those is necessary if you wish to use the images without fear of legal repercussion.

The licenses

There are six basic licenses within the Creative Commons library, linked together with one common thread: proper credit, or attribution, must be given to the original creator. Their individual designations, followed by short-hand codes and real-world examples, are explained below.

Attribution: CC BY

This is the least restrictive and most accommodating grant of permission to the public. Basically, it lets others do as they please with the creator’s work (distribute, remix, tweak, alter, and profit commercially), provided the originator receives proper attribution.

Attribution-ShareAlike: CC BY-SA

This license offers the same rights as an Attribution license (others may distribute, remix, tweak, alter, and profit commercially) with the added stipulation that all subsequent forms of the work carry identical terms.

In other words, if the work starts out under this license, it must have this license forever and cannot change to a basic Attribution license somewhere down the line.

Example:Wikimedia uses this license and it is recommended for all similar sites that share and incorporate various bits of information.

Attribution-NoDerivs: CC BY-ND

Under this license, the work itself may be reused, but it must remain identical to the way you found it—no tweaking, altering or remixing allowed. However, you may still redistribute and profit commercially from it, provided, as always, that you properly attribute the originator.

Example: This is a good one for web designers and bloggers who have found something great that they want to incorporate “as is” for use in creations that earn them money, i.e. a website or blog.

Attribution-NonCommercial: CC BY-NC.

This license provides that others may do as they wish to a creation (alter, tweak, remix, etc.) as long as it is done in a non-commercial context.

You might look at this one as “permission to do what you will to the creation, but not what you will with the creation.”  Additionally, as long as this non-commercial new work gives proper credit, it need not be licensed under the same terms.

Example: You might look for this license if you were preparing a school project or creating something for your own personal use.

Attribution-NonCommercial-ShareAlike: CC BY-NC-SA

This is the same as Attribution-NonCommercial (may be altered and used in a non-commercial setting); however, the new version must be licensed in exactly the same manner as the source work.

Example: This license might apply to an image or a song that someone has altered and passed along to friends, provided it carries the same license and does not profit the “tweaker.”

Attribution-NonCommercial-NoDerivs: CC BY-NC-ND

Of the six main licenses, this one carries the most restrictions with it. Under this, you are only allowed to download and share the work, with absolutely no modification or profit along the way.

If you are a web designer or a blogger and you see this license designation, back away … unless, of course, you are interested in facing an accusation of copyright violation.

How to give proper attribution.

Now that we have discussed the various types of licenses and we know that all of them require the proper attribution of the creator, how exactly do we do that?

The folks at Creative Commons have created a nifty little pack that explains the different ways you can attribute, along with examples, but the basics are simple and flexible:

  • you should credit the creator
  • provide the title and host URL of the work
  • indicate the type of CC license it takes (along with a link for others to follow)
  • keep any copyright notices intact.

For an example, see the image I included at the top of this post.

Some final “legal” notes…

This post is not a law review article, nor is it intended to be a treatise on the ins and outs of copyright law. But I do want to shed some light on a few basic aspects of copyright protection for bloggers.

First, this licensure actually protects the user, not the creator.

This statement doesn’t seem so crazy when you consider that a basic truth of intellectual property law is that all works are automatically copyright-protected (thus, enforceable against the user) upon their creation—it’s literally a legal “given.”

Since this is true, if you are ever sued for copyright infringement, the burden is automatically upon you, the defendant, to prove that you did not violate the copyright and, in fact, the creator granted you permission (of some sort). This is how Creative Commons licenses have succeeded in making grants of permission easy to understand and flexible.

Although the Creative Commons licenses are considered flexible in the world of copyright laws, it is important to keep in mind that they still retain legal force. Indeed, they are not US-specific and are supported, promoted and honored in over 70 jurisdictions throughout the world. For specific affiliates and jurisdictions, visit http://wiki.creativecommons.org/CC_Affiliate_Network.

If these licenses are abused, they are forfeited: if someone violates the terms of the license, that person is no longer protected and may be sued by the work’s originator and held liable in a court of law.

Along the same lines, once the originator has granted permission through one of the licenses, her work is out of her hands. As long as the person using the work does so according to the license terms, the creator has no legal remedy if she does not like the way the new person uses her work (there are some exceptions, but that is another article entirely).

Finally, even though the Creative Commons licenses carry legal weight, they were designed with flexibility in mind. If you have a particular use in mind for a work, but the originator has not licensed it for the purpose you intend, contact them.

And whatever you do, make sure you get any special permission in writing. That email or piece of paper, like the license itself, is your ticket to verify you covered all of your bases. As long as you have done your part to respect the rights of others, there is no end to the creativity waiting right around the corner.

So, let’s hear it. What are some of the ways you have seen CC licenses in action? Do you think they “work” or do you have suggestions on how they could be better? Offer more protection? Tell me in the comments.

Contributing author Thomas Ford is the Marketing Director of www.123Print.com, a leading supplier of business cards and a wide variety of business and office supplies. Tom writes on a range of topics of interest to bloggers and business people.

Blog Design For ROI: Keep On Fixing, Keep On Fixing

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

If you choose to redesign your whole blog in one go instead of adopting little improvements on a regular basis, the odds are that your redesign will be a brutal chore.

Blog redesign

Instead, I’d like to encourage you to review the posts in this series on Blog Design for ROI and pick one area in which you’d like to improve. We’ve covered literally every area of the blog, from your homepage to category pages to posts, to individual elements like sidebars and social aspects like your community, so there’s bound to be something to appeal to you:

Once you’ve chosen where you’d like to improve, do the following.

  • Measure where you stand currently. For example:
    • Use usability testing with three friends to see if they can find your email subscription, and get their feedback on how appealing it is to sign up to your newsletter.
    • To simplify your sidebar, header or navigation use Feng-GUI to get an idea how visually loud they are.
    • Try a tool like CrazyEgg to measure how much and where people are clicking your archive pages, as well as how far they’re scrolling.
  • Write down your theory of why your performance is at its current level.
  • Brainstorm different ways to improve and write all the ideas down (don’t reject ideas at this point, as that will discourage creativity). See which of the tactics in the above articles you can apply, and how.
  • Choose one option to improve and test it out.
  • Measure results and repeat the above.

From my own experience, I can tell you that testing numerous small things and making incremental progress is a much easier—and more effective way—of improving your blog’s design, in comparison to the traditional ‘grand redesign’ method. Similarly, the crowd at Wider Funnel make a good case for the “Evolutionary Site Redesign” process instead of the “Revolutionary Site Redesign” process.

Now it’s your turn: in the comments, tell us which area of your blog’s design are you going to focus on improving? Why did you pick that? And what changes are you thinking of making? Share your goals with us in the comments.

Gab Goldenberg and Internet Marketing Ninjas are developing a book based on this series – get your free copy at http://seoroi.com/blog-design-for-roi/ . You can also get a free chapter of Goldenberg’s The Advanced SEO Book.

 

Blog Accessibility Essentials: The Complete Guide

This guest post is by Steff Green of the Disabled Shop Blog.

Digital content has opened up a whole new world of possibility for people with print disabilities.

Previously, very little printed material was available in a format that blind and low vision people can access, (Braille, audio or large print), and these formats were costly and time-consuming to produce. But now, adaptive software has meant that content available electronically can be accessed by practically anyone.

With more resources than ever moving online or to electronic formats such as ebooks, people like me with low vision have access to more content than we could ever imagine.

It is estimated that there are around 25 million adults with significant sight loss) in the US today, and more than 285 million people around the world. That’s not including people with other disabilities who use adaptive software to access information, such as learning disabilities or motor impairments.

All these people could be reading your blog, so it stands to reason that you want to make sure they’re able to enjoy everything you have to offer.

A blog is never going to be perfect for everyone. There are so many conditions and disabilities in the world that it’s impossible to cater to all of them. That’s why many people who have disabilities use adaptive technology to help them access the web—they have to create the optimum conditions for themselves.

When creating an accessible website, what you’re trying to do is create a site that’s both easily viewable in its normal state and optimized to perform well when viewed with adaptive software.

As a bonus, an accessible website also happens to be extremely user-friendly for your whole readership, as well as being great for SEO.

What is adaptive equipment?

Adaptive equipment is any type of device that helps an individual perform an activity that they would not otherwise be able to perform due to a physical or mental condition or disability.

A blind person cannot access your blog in the normal way, so they must use some kind of adaptive equipment in order to enjoy your content. The most common piece of adaptive software is a screen reader: a program that reads out websites using synthetic speech for people with vision problems. A person can use keyboard commands to navigate through the site (since using a mouse is impractical).

Other adaptive software includes: zoom software, such as Zoomtext (I used to use this, but since switching to Mac, all the necessary software is inbuilt), Dragon Naturally Speaking. and a refreshable Braille display.

Blind and low-vision users aren’t the only people who need accessible websites. Other users have motor skill issues that make using a mouse difficult, or might have dyslexia and have difficulty understanding text when they read it. Adaptive equipment such as switches and keyboards controlled by the feet, head or other input methods can be used.

Making a blog post accessible

So how do you ensure that your blog is accessible? It may surprise you to learn that creating accessible blog posts is easy, and you’re probably doing a pretty good job already.

But understanding why you format blog posts in a certain way will help ensure that you continue to create accessible blog posts.

Headings

Heading levels are an important part of the functionality of adaptive software. The screen reader can navigate through headings, much like skipping through the chapters in a book. This enables the reader to choose the content they want to read.

Problems arise when bloggers don’t use the heading tags correctly—usually by bolding a heading instead of using an h1, h2, h3, or h4 tag, or by failing to use headings in a cohesive way.

Adaptive software retains the hierarchy of headings, so a user can navigate through post titles (h1) or subtitles within a post (h2) or headings underneath a subtitle (h3-5). But if you don’t use these headings consistently, the reader will become confused.

How can you improve?

  • Always use the heading levels to denote headings—don’t simply place headings in bold.
  • Nest headings correctly, so the heading hierarchy makes sense in a screen reader.

Images

You might wonder how adaptive software deals with images. Screen readers read out the alternative or alt text, and this tells the listener what’s in the image.

So to make your images accessible, you need to ensure each and every one has an alternative text description that explains what’s in the image. It doesn’t have to be long and wordy: “infographic displaying social media stats” is fine, as most of the info will be in the text surrounding that image.

SEO gurus recommend putting your keywords into the alt text, which is definitely a good idea, but only if they make sense in the context of the image.

How can you improve?

  • Ensure every image has an alt text description.
  • Use descriptions to explain what is happening in the text, not just to add keywords.
  • Add titles to your images (this helps with navigation, though it isn’t necessary).

Links

Hyperlinks within your post (and across your whole blog) should be able to be easily read and understood on their own. This is because screen readers can give the user a list of the hyperlinks on a page. Having ten hyperlinks reading “here” doesn’t help the listener figure out where she wants to go.

Meaningful hyperlinks (especially those containing keywords) are also good for SEO, so it’s a good practice to get into.

Links should also open in the same window, as opening extra windows can make navigation cumbersome. On WordPress, you can do this easily by setting the Target at “Open in this Window/Frame” in the Link box.

And, finally, when designing your blog, make sure links stand out from the text. Use bold, underline, and different fonts or colors to distinguish links from your main text. This helps everyone locate your links with ease.

How can you improve?

  • Avoid links like “Click here” and “NOW” and “More”.
  • Ensure the text of hyperlinks provides a meaningful phrase when read out of content.
  • Make sure links are easily visible—by being a different color, bold, and/or underlined.
  • Ensure links open in the same window.

Tiny links and icons

Tiny things are cute: tiny houses, tiny hands and feet, and tiny kittens. But tiny links and icons are just plain difficult. If you have some vision, like me, you may spend several minutes looking for a link or icon on a page, when you’d have found it easily if only it were a little larger.

One of the hardest things to find are those little “X”s or “close” links in the corners of those pop-up boxes (which I also loathe, but more on those in the next section). On some sites, these are practically impossible to see. I’ll click away if I can’t get rid of that box without straining my eyes.

Tiny links are also difficult for people with poor motor control to locate. Likewise, having lots of tiny links close together, such as social media keys on a navigation panel, means your visitors are often clicking the wrong thing by accident. This is frustrating and often forces readers to look for information elsewhere.

How can you improve?

  • Look at your site. Are you links identified visually? Can you easily determine where you are and what the focus of each page is?
  • Can you make hyperlinks longer than one symbol/word so they’re more obvious?
  • Can you make icons larger and use more space between them?

Dynamic elements

Pop-up boxes, slide out menus and other dynamic elements may look great, but they are extremely difficult to navigate.

If you’re slow on the mouse, the panels can disappear before you’ve clicked on the link you require. And those pop-up “sign up to my newsletter” boxes are extremely frustrating, but I understand why some bloggers are reluctant to get rid of them.

How can you improve?

  • Think carefully before using dynamic elements on your website.
  • Test your site by attempting to navigate it using the mouse in your non-dominant hand. If you’re struggling with navigation menus and tiny icons, maybe it’s time to improve your design.
  • Ensure your site is coded correctly so adaptive software users can easily skip past or stop dynamic elements such as menus or updating Twitter feeds.

Captcha

Okay, captcha services are one of my pet accessibility peeves. They seem to be getting progressively illegible, with letters layered on top of one another, squashed up like they’ve gone through a sausage machine, or struck through with so many lines and swirls they’re impossible to read.

You might say, “Oh, but there’s that audio button beside it. That makes captcha accessible.” Which is a fair comment. Except, have you ever tried to use the audio function? Half the time it doesn’t work, and the rest of the time it’s so garbled it’s impossible to understand.

How can you improve?

  • Choose captcha screens that are readable: letters and numbers spaced apart with a non-distracting background, and small letters instead of capitals.
  • Choose services without sloping letters.
  • Use a tick-box that says “Uncheck if you’re human,” or another, non-captcha method of determining spam from legitimate comments.

Other tips for improving blog accessibility

  • Have you created an audio or video post? It would be awesome if you could also provide a transcript and captions, so that everyone could enjoy the information in their preferred format.
  • Using blockquotes to identify longer quotes helps those using a screen reader to distinguish between your voice and someone else’s.
  • Instead of using the dash—or other symbols—to show items in a list, use the ordered or unordered list tags. The screen reader can then tell the listener that the items are in a list.
  • Unplug your mouse. Now try to navigate through your site. Can you do it? Where do you get stuck? That’s the same place that will trip up adaptive software.

By following these simple rules, you’re creating accessibility best practice on your blog, and ensuring that more people are able to access and enjoy your content.

It only takes a few extra minutes to check that your blog posts are accessible, and after a few weeks, accessibility will become second nature.

The more you learn about accessibility, the more you come to understand and appreciate how different people access information, and this makes you a better—and more considerate—blogger.

Accessibility resources

Steff Green is a legally blind freelance writer, blogger and illustrator. She writes about disability news, adaptive equipment and advocacy for the Disabled Shop Blog. Check out her latest post on Christmas Gift Ideas: Children’s Books about Disability.

Blog Design For ROI Rule #7: Blend Ads With Content & Encourage Comments

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

What happens when someone comes to the end of your post? Their eyes keep reading downwards, so it’s wise to optimize the area with advertorials and an encouraging comment area.

Advertorials

What do I mean by advertorials? And why should they be present at the end of a post specifically?

In the news-media world, there’s traditionally been a distinction between “editorial content” and ads.

An advertorial is an ad designed to look like regular, non-sponsored content. Advertorial design aims to increase readership by avoiding traditional ad blindness.

As you can imagine, advertorials’ appearance varies according to the media they appear in, to better look like the content they’re designed after. Traditionally advertorials looked like news articles.

Today, Facebook offers “sponsored stories” in the News Feed, which are essentially advertorials:

Advertorial

Likewise Twitter offers “promoted account” suggestions and sponsored tweets, that are a modern variant of advertorials:

Twitter advertorial

What’s the key takeaway?

As Fred Wilson writes on AVC:

“In both examples, the ad unit is the same atomic unit of content as the users create in the service.”

The takeaway for bloggers is that advertorials for blogs need to look like blog posts, or at least inhouse content.

And what better place on a blog for an advertorial than where people are most likely to read it—after another post?

In other words, place the advertorial either after a few posts on a category page (where it looks like another post in the category page’s list) or after a blog post on its own page. In both cases your placement contributes to the impression that the advertorial is regular, non-paid content.

Some of the top marketing blogs use this area for advertorial promotions, be it for inhouse marketing (most commonly), or also for other people’s products.

Social Media Examiner uses their branded cartoon-jungle-explorer style for their newsletter promotion:

SM Examiner

And MediaBistro make their promo’s background the same as the background behind links to related content:

Media Bistro

And of course Problogger does this as well, featuring affiliate marketing for the Genesis WordPress framework. The advertorial uses the Problogger-brand-orange in the advertorial title and the light-blue of the related content box above the advertorial, having it blend in easily with the rest of Problogger content.

Problogger

Summary On Below-The-Post Ads

Style the ad like your content by featuring elements of your branding. These can include design styles like a border – visible in SocialMediaExaminer’s worn jungle map style and on Chris Brogan’s jagged-border advertorials – or your brand colours, or the background color used for some of your content blocks, like MediaBistro’s previous-link and next-link blocks.

Another approach that I struggled to find an example of but that can be even more impactful is adopting the exact styles of your post for the advertorial.

If you have graphics indicating the start of a post (following Blog Design For ROI Rule #4: Make Posts Easy To Read), you can repeat these at the end of your post to start your advertorial. This maximizes the impression that there’s more editorial content following the post … exactly as intended with the whole idea behind advertorials.

(NB: You need to indicate that the content is an ad, if promoting a third-party. However, leave the notice to the end, as Facebook and Twitter do, because if you immediately tell people that what follows is an ad, you may as well say “the following content is useless, so skip it.” The goal in using the advertorial approach is to overcome this obstacle. You then disclose that the content was sponsored at the end, so that people can decide for themselves what to think of the ad.)

Persuasive, easy-to-use comment design

As business bloggers, we want the most comments possible, of the best quality possible, so as to generate a vibrant community that helps build their repeat visitor traffic. Yet comment design rarely does anything to encourage this behaviour, being seen as a merely functional element rather than a serious opportunity.

Tell people Why they should comment

Tell them about incentives

It’s true that many people don’t comment for lack of time or for lack of anything to say.

Yet I know from giving away links to people who left thoughtful comments on my SEO ROI blog, that incentives can get some of these otherwise-passive readers to comment. And I know that SEOmoz, which has probably the richest, most thoughtful comments on the web, owes their success in part to rewarding participation with points, recognition (e.g. speaking engagements at events they run), and free memberships.

So offer a reward, and write a brief blurb near the comments saying so. For example, a while ago I saw a blog offering a monthly cash prize for its most prolific and best commenters.

Tell people about author engagement

If you’re able to, commit to responding to every single comment left on your blog. While it’s common knowledge that responding to blog comments encourages others to comment, that’s only for people who bother to read the comment section.

What if the first thing you see is that there lots of comments, though? Chances are you don’t expect the author to respond to each comment, in which case there’s less incentive to comment. No one likes talking to a brick wall.

So to answer people’s concern, you can explicitly state that you respond to all comments (say, except for “I agrees”).

For blogs that take contributions from multiple authors, you can either ask authors to commit to responding to all comments or even show what percentage of comments got a response from the post’s author.

An upper limit might also be appropriate in such a case, such as “I Gab Goldenberg commit to responding to the first 50 comments that state something beyond ‘I agree’. (Early thanks goes to those who comment just to show appreciation.)”

Tell them about rewards

If you run contests or offer prizes for reaching fixed participation levels, don’t hide the information elsewhere. State it explicitly above the comments area!

Auto-complete commenter names

The 80-20 rule applies to comments. 80% of comments come from 20% of the audience. Why not save time for repeat commenters by asking, once they’ve submitted their comment, if they’d like their names to be stored for future-auto-completion? Similarly you can get them to register at the same time, and use this for community rankings as described in “Shower Love On Your Blog Community.”

Display people’s profile thumbnails

It may seem obvious, yet most blogs still don’t show a thumbnail photo of their commenters. Probably this is partly because of non-registration, since most people don’t want to register separately for a blog (it’s yet another thing to register for…).

You can get around this by using Facebook for comments, since most people are registered on Facebook, and Facebook comments include thumbnails. This also gets you auto-completion of people’s names if they’re logged in to Facebook while browsing your site and it also has the advantage of…

Threaded comments

While it’s ironically not possible in regular status-update discussions within Facebook.com, Facebook-powered comments on third party sites use threaded comments. Threaded comments mean that you can respond to the first comment on a post without the comment appearing beneath all the intervening comments, which enables discussion that would otherwise be fragmented and unwieldy.Threaded comments

In addition to threading comments, Facebook-powered comments have the advantage of auto-filling in commenters’ names if the commenter is logged in to Facebook at the same time (e.g. in another browser tab).

So should you just switch to Facebook comments?

As of this writing, there seems to be a bit of technical savvy required, and the WordPress plugins I found for this have mixed reviews. If you have a suggestion in this regard, then please do. In any case, if you can implement it technically, then Facebook comments offer the above advantages as well as some others. And if you use FBXML, you can ensure the comments are indexed by Google, for optimal SEO.

In conclusion

At the end of your post, don’t just abandon the reader with nothing to read or do – show them an advertorial.

Ideally, have it adopt the appearance of your post, complete with header font and colors, category links etc. This will help maximize the percentage of people who read your message, as opposed to skipping it as just another ad.

If you’re advertising a third party’s wares, you should disclose this – at the end of the advertisement.

With regards to your comments, add an area above the comments section where you tell people the incentives to comment. Let them know that all comments are read and responded to.

And as to providing an optimal user experience, you’d be well advised to integrate Facebook comments, as they auto-complete the user’s name and profile picture, while threading discussions.

Gab Goldenberg and Internet Marketing Ninjas are developing a book based on this series – get your free copy at http://seoroi.com/blog-design-for-roi/ . You can also get a free chapter of Goldenberg’s The Advanced SEO Book.

How—and Why—to Make Your Blog Print-friendly

This guest post is by Dunya Carter.

When crafting your blog, it is easy to neglect how it might look to someone who wants to print your articles and posts.

After all, with huge monitors, smart phones, tablets, and the bevy of other ways people can access your content, who’d want to print it out on a piece of paper like it’s 2004?

Well, it’s the hallmark of a good designer to not assume how someone will want to digest what you have to offer, and it’s so easy to make your blog print-friendly that there is really no reason not to.

You’d be surprised by how many people will choose to print useful articles, especially if they contain some useful information that they would like to refer to when they’re not near a computer.

Printing from scratch

For the code-skittish, there are some special tools and plugins you can use to help get your print-ready blog set up, and we’ll get to those shortly. If you want to customize it exactly how you want—for example, adding a print-only message to the bottom of the page—the best way to do it is coding it yourself with CSS.

Start in the file called header.php in your theme, and look for the line below:

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

That line tells the browser what style it should use based on the way the user is viewing the page. Most of the time, it will be viewed on a screen. Below that line, add this one:

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/print.css” type=”text/css” media=”print” />

This directs the browser to use a different stylesheet, called print.css, if the content is being printed. Of course, print.css does not exist yet, so open up your favorite text editor and save a new file called print.css, dropping it into your theme’s directory (the same place you can find your theme’s main stylesheet).

If someone is printing your article, they want just the content of the article. Excessive images that don’t add real value to the content usually wreak havoc on printers and ink supplies, so you’ll want to remove your site’s header, menus, and advertisements (you won’t be making any cash from printed out Internet ads, anyway).

How can you do this? Take a look at your page code, and find the div id of the section you would like to remove (e.g. <div id=”comments”>). Then, simply add the following rule to your print.css file:

#comments {display:none;}

If the code begins with div class (e.g. <div class=”comments”>, the rule should be .comments {display:none;}, not #comments {display:none;}.

The reader wants the article formatted to fit the piece of paper it is being printed on, so scrap any sidebars and footers that might cause unnecessary white space and extra pages.

Finally, remove anything that a reader of a printed sheet cannot use. This includes comment sections (as we’ve just seen), navigation bars, and anything else that requires some sort of user action, like related articles links.

You can test your stylesheet as you modify it using your browser’s print preview function. Just keep removing stuff until it looks like something you’d want to come out of the printer!

Using tools and plugins

WordPress and Blogger are the two most popular blogging platforms, and for those who are not comfortable digging into code and writing a stylesheet themselves, both platforms have plugins that can quickly get you a serviceable print-ready page for every article on your blog.

For WordPress, the easiest option is WP-Print.

A very simple plugin, it gives you a few basic options about how your print page should look, including which links to include, what images should stay in the page, how to handle videos, and an option for a disclaimer.

Your user will simply see a Print button next to your articles exactly where they expect it to. Some other, more complicated tools might offer other functionality, such as printing a page to a PDF, emailing it to friends, or integration with social media like Twitter and Facebook.

If you run a Blogger site, the website printfriendly.com asks you to make a few simple choices, such as the appearance of your Print button and the inclusion or exclusion of features like email and PDF printing. It then gives you a link to download a Blogger widget you can install directly on your site, as well as code you can copy and paste directly where you want the button to show up.

Looking good … in print!

In the end, whatever method you choose, you will have an attractive print-friendly version of every page on your site with only a few minutes’ work.

It might not be the most used feature you ever offer, but for the occasions when a visitor does want to print out something you wrote, they will undoubtedly appreciate that you spent the time to accommodate them.

This article was written by Dunya Carter. Dunya is a marketing consultant from Brisbane, Australia who works for Ink Station, an Australian online ink toner shop. She also writes articles on tech and business for several websites and blogs.

A New Theme, Part 2: When Your New Theme Crashes Your Blog

This guest post is by Ayelet Weisz of All Colores.

Yesterday, we talked about preparing your blog for a theme upgrade. You read it, worked through all the steps, and now you’re ready to go.

So you get up on Saturday morning and sit down to work, a breeze coming through the window. You turn on some music as you browse through potential new themes for your blog. You find one and click Install.

Excited that you’ve found the perfect match for your blog, you click Activate.

Then you see this message:

Fatal error: Call to undefined function wp_get_theme() in /home/colores/public_html/allcolores.com/wp-content/themes/path/library/functions/utility.php on line 119

You think to yourself, “Fatal error?! I better refresh the page!”

Then you discover that fatal means fatal. Not only do visitors have no ability to access your blog—you have no ability to access your dashboard!

Not even if you left an additional tab of it open. Moving backward in your browser might work, yet any other function you attempt takes you right back to the fatal error message. Is your blog lost for good?

Why would a site crash on theme installation?

Like houses, some themes are built better than others. Files in the theme might have been tempered with or coded incorrectly, or the theme might require a more updated WordPress version than you’re using.

As you browse through themes online and explore their demo sites, there is no way for you to guess which theme would cause your blog to crash. In fact, the tech support agent in the hosting company I use said there’s some chance that the same theme that crashed one site would work fine on another one.

Either way, unless you’re the one who created the theme, it’s likely not your fault that this happened.

The best times to crash your site

Let’s face it—there is never a good time to crash your site.

However, if it must happen, the least harmful times are:

1. When your largest audience is asleep

If you can experiment with your blog when it is night time or very early in the morning in the time zone of your largest audience, that would be best. This way, the majority of your visitors won’t be bothered by bizarre, constant changes to your blog, and the quality of their stay won’t be ruined. Moreover, these visitors might never know something had ever gone wrong with your theme upgrade.

2. When your second-largest audience is enjoying a weekend

A weekend in one country might not fall at the same time as a weekend in another country. Weekend days in the United States, for example, are Saturday and Sunday. In Israel, on the other hand, the weekend starts on Friday evening and ends on Saturday evening. Folks get up early and go to work on Sundays.

If you plan to do any kind of work on your site and you can’t work on everyone’s night time—or anyone’s night time, for that matter—make sure you do your blog changes on a weekend. Some people, though not all, spend less time on their computer on weekends. Instead, they hang out with other people who have the day or two off … leaving you to take care of your blog.

Now that you’ve picked a good time to flip the switch, let’s see what you can do to minimize downtime that arises if your installation goes wrong.

If it all goes wrong

If your site crashes after you installed or activated a theme, there are a few things you can do.

Option #1. Put on the tech hat

Since the theme caused your website to crash, you need to erase the theme from your dashboard.

However, if you’ve lost access to your dashboard, you need to log in to your control panel on the hosting company’s website and erase it there.

Following that, reactivate WordPress’s basic theme—the one that showed up when you first installed WordPress. It’s either Twenty Ten or Twenty Eleven.

You data is usually safe in this case—the fatal error turns out not to be so fatal after all. Once you switch back to the basic theme, you’ll be able to log in both to your blog and your dashboard. Switch back to the theme you had earlier, before you tried changing it, and everything will be back to normal.

This process will undoubtedly require you to delve into technical tasks. If you are not tech-oriented and fear you might cause a truly fatal error, check out option #2.

Option #2. Contact your hosting company’s tech support team

The challenge you’re facing was caused due to a WordPress theme. Therefore, it might make sense to contact the theme’s creator or WordPress.org. It might—but contact your hosting company’s tech support anyway.

It took only ten minutes for my theme issue to be resolved once I started an online chat with a representative from my web host.

Note that you might need to provide your billing email address and password for security verification purposes. Then, the agent will do what was specified in the previous section—she or he will remove the malfunctioning theme from your system and reactivate the basic WordPress theme that came with your blog when you first launched it.

Make sure to ask the person assisting you to stay on the line while you verify that returning to your previously-regular theme causes no issues, and then go off on your merry way.

Fatal doesn’t always mean fatal

The most important part of this process is, of course, to breathe. Remember that there are plenty of sources to get information and support. Blogs like ProBlogger, WordPress message boards, Facebook and LinkedIn groups for bloggers, good ol’ Google and your hosting company are just a few examples.

Mishaps happen. Hopefully, a little quick research and asking for help will help you resolve them in no time—and you might even gain new knowledge and tools along the way.

And once the issue at hand is resolved, don’t forget to do a happy dance.

Has a theme ever crashed your blog? What did you do to fix the problem? Share your tips with us in the comments.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

A New Theme, Part 1: 11 Ways to Prepare for Your Blog Theme Upgrade

This guest post is by Ayelet Weisz of All Colores.

You’ve been reading all about the importance of a good blog design while struggling with your basic WordPress theme.

You’ve been frustrated with the limitations of this basic theme, yet you don’t have enough tech knowledge to create a new theme—or the budget to hire someone to create your dream design for you.

You drool over other blogs’ themes, and you search online for alternatives. Are you even ready for a change?

You are?

Well, maybe it’s time to tackle a theme upgrade! Today and tomorrow, I’ll share some tips from my own experience doing this to help you avoid the pitfalls—and the panic when something goes wrong.

First up, it’s important to get prepared. Once you find a premium theme you love at an affordable price, follow these guidelines before upgrading your blog’s design.

1. Verify the theme you’re purchasing is blog-friendly

Not every spectacular premium theme you fall in love with will be a good fit for your blog. Some themes are created specifically with online stores or static websites in mind. While those can sometimes be adjusted to blog format, the end result could be very different than the vision for which you pulled out your credit card or PayPal account.

Check to make sure that the theme is blog-friendly, perhaps by looking at implementations of it on other blogs before you buy.

2. Make sure it has a full refund policy

Some premium theme purchases can be canceled within 30 days (or more), and their makers offer a full refund—no questions asked.

If you’ve never upgraded your blog to a premium theme before, or even if you have, it’s a great idea to make sure you can change your mind later on. The fact that the purchase is almost risk-free might just give you the courage to finally take this step.

3. Read the terms and conditions

Some companies offer premium themes that you pay for once and keep for a lifetime. Some let you use that same theme on as many websites as you like.

Others offer premiums themes that you pay for once and can only use on one website, or you pay for once a year and can use on one or limitless number of websites. Some offer multiple themes for the same price as a single theme in a different company.

These are some of the considerations you’ll face when you’re upgrading a to a premium blog theme. Read what the deal includes and what it doesn’t, and life will be easier after you type in your credit card information and make the purchase.

4. Know what you want in advance—or at least have an idea

Build a list of features you love on other blogs’ designs. Brainstorm colors. Read blog design tutorials.

All this will help you choose your premium design, and make tweaking the theme after installation faster and easier.

5. Know when to switch themes

Traffic to many blogs decreases on weekends, holidays, and at night. If you’re willing to work when others are asleep or vacationing, you can make sure as small a number of readers as possible will be annoyed from the constant changes that take place while you’re working on improving your blog’s design.

If you need to take a long break and you’re not done tweaking, sometimes it’s best to save your changes and temporarily switch back to your previous theme. You’re upgrading your blog to a premium theme so that readers’ experience will be improved—make sure not to bug them on the way to that improvement.

6. Make time

Blog themes, especially premium ones, are made to suit different types of blogs and bloggers. They offer all kinds of options, and it will take you time to tweak the theme you choose so that it looks exactly as you want it to. It might also take time to adjust to the interface or respond to any surprises that might come up. You may even want to make changes you never imagined before.

Make sure you set aside time for this process in your calendar, and make sure you allow a bit more time than you think you need.

7. Take tech support into consideration

Before making your purchase, realize that you may need to use the blog theme company’s tech support team. Learn in advance how you can access this team and when, as well whether tech support is included in the price you pay for the theme.

Will the team be available 24/7, or does it only work during office hours? Is its time zone completely different than yours? Will you have to skip sleep to talk to them? Will the call be expensive? Does the company offer tech support via chat, email, or message boards? How fast can you expect a reply in these forms? If the tech support is given on a message board, can you stay anonymous if you want to, and still get help?

Make sure you know what you can expect in the way of support before you start switching themes.

8. Be willing to play with code—or get help

Some tech support teams prefer to guide you through the process; others take your information, log in and make the changes themselves. At times, it will be a combination of both, with a tech representative taking over only when guiding you through the process isn’t helping.

This, of course, can be an opportunity. Usually, tech representatives won’t ask you to do something too complex, and you’ll have good reason to acknowledge yourself for overcoming your fear of technology.

If you are not willing to play with code, or if you want to make sure there’ll be someone who’ll take over and help you out if you get in tech trouble, find out the company’s policies in advance by sending it an email or calling their customer service department.

9. Be willing to ask questions

The only way to get answers and to eliminate some of the unknowns is to ask questions. Don’t worry about looking silly or as if you have no clue. Tech support representatives get hundreds of strange and silly questions a day, and it’s very unlikely they’ll remember yours as the strangest or silliest one of all.

Remember, this isn’t about what they think, anyway. It’s about you giving your blog the best you’ve got—and expanding your comfort zone at the same time.

10. Get a recommendation

If you can find blogs that use your desired premium theme, email their owners and ask about their experiences with that theme. Some will give you the pros and cons of their experience, others will simply reassure you that the theme creation company exists and maybe even fulfills its promises of service or refunds.

If you don’t know anyone who’s purchased a premium theme where you want to buy one, look up reviews online or find Facebook groups dedicated to blogging, either in your niche or in general. Surely someone there will be able to share her or his experience with you, or refer you to someone who can.

11. Know that things will go wrong

Tweaking your blog’s new theme will take longer than you expect, or will take more work than you expect. You might find yourself dealing with tech challenges, or with a frustrated reader or two. The end result might not be as you pleased. Mostly, you might miss your writing and want to get this tech stuff done with already.

Take a deep breath and remind yourself why you started this part of your journey. Remind yourself of the benefits. Let go of perfectionism. Embrace your time in the uncomfortable zone. You’ll have a better blog once you’re finished.

Do you have additional suggestions for surviving a blog theme upgrade? Let us know in the comments, and don’t forget to check back tomorrow, when we’ll look at what you can do if something goes wrong with your theme upgrade.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

Use These 5 Design Elements to Create the Optimum Blog User Experience

This post is by Mark Acsay III of Webby Thoughts.

One of the main unacknowledged problems with today’s websites is that many just follow the favorite design of the month. When Flash was born, we got bombarded by Flash-based sites that took forever to load. When sliding banners came along, almost everybody wanted to have one too.

Many bloggers and business websites today only focus on search engine optimization, trying to make their way to top rankings just to get a chunk of traffic. Yet when they do, they waste a lot of that traffic and lose the confidence of their potential audience through of bad user experience.

Websites must not only be optimized for designs and for search engines but also for “visitors’ thought sequences.”

We need to understand that every time there’s a visitor on our website, we must answer the thought conversations that they have while navigating our sites. Take this thought sequence as an example:

  1. Where am I?
  2. Where should I begin?
  3. Where did they put the ___?
  4. What is the most important thing on this page?
  5. Why did they call it that?

If your site does not answer most of those questions, then you are not giving the best experience for your users. It means that you are not guiding them to accomplish their objectives on your blog.  Fortunately, there are five primary web design elements, and we can use them with the intention of guiding the visitors through a clear sequence of thoughts.

What are the five primary web design elements?

  1. Size: Size does matter. We use size to emphasize something. Whether it’s the font, image, or shape, we instinctively understand that the bigger it is, the more important it is, and vice versa. Just like when we speak, the louder the sound, the more we emphasize.
  2. Shape: Shapes are among the first things we learn as toddlers and they have an innate connection to all of us. Shapes direct and communicate. They have a big appeal to our emotions and thoughts. Just seeing a heart shape gives many of us an impression of love. It is said that shapes are processed by the brain many times faster than words.
  3. Color: We all know the suggestive power of colors. This is one of the most powerful elements of design. Red is known to induce appetite, which is why it’s used by many restaurants.  By using colors to guide the thought sequences of a visitor to accomplish your main objective, you get to increase your conversions and give your users a better experience.
  4. Position: This element is one of the trickiest if it’s not carefully implemented. It is obvious that when you put something above the fold of the website, it’s important—but not all the time. Since we usually skim web content instead of reading it, positioning should be based on the eye movement patterns of your visitors. So position your most important messages and navigational cues where the eyes are scanning the page.
  5. Motion: The effective combination of shape, color, size and position to create motion in directing the focus of visitor’s attention dramatically impacts the user behavior. A simple .gif arrow moving back and forth and pointing to the “Subscribe Now” form can impact sign ups.

Now that we have an overview of the design elements, let’s put them into practice and see how we can use them to, firstly, guide visitors’ thought sequences; and secondly, focus the attention of visitors to achieve their—and your—objectives, while giving them the best user experience they could ask for.

As a note, I cherry-picked these example sites from different niches so we can learn how they applied the elements of design to serve a better user experience.

The design elements in practice

1. Emphasize the most important objective

Let’s take a look at what UPrinting.com did for their Black Friday campaign. UPrinting is one of the top printing companies in the US.

Uprinting

Let’s see how they used the design elements here.

Size

Since it was Black Friday, the designers put the biggest banner in front of the site’s visitors. Look at the size of the word “sale”; they also used the number 20% to emphasize their main objective.

Shape

They used a rectangle to identify the banner ad. Notice also the green button, which led visitors to a page where the offers were, and where interested people can learn more about the sale.

Color

I really like the way they used color contrast here. A black background was aligned with the theme, Black Friday. Then they used the contrasting color of white to emphasize the word “sale”. Finally, the use of red behind the words “20% off everything” automatically drives our eyes to this message, and eventually to the green Learn more button.

Why use green instead of the usual red or orange? This might signal to users that clicking the button is safe to do, and that there’s more on the next page. Green is also the color of their logo at the upper left hand corner. The subliminal message here—that when I click on that button, I will find things that are about printing and learn more about the promo—is very clever.

Position

Obviously, this ad is above the fold. But the position of the green button does not distract from the other messages in the banner. It’s at a spot where, after your eyes have scanned the whole message about the sale, you will naturally end up.

So here’s how the thought sequences are answered in this page:

  1. Where am I? The logo at the top-left says you’re at UPrinting’s site.
  2. Where should I begin? Begin with this large banner that says SALE, 20% off everything.
  3. Where did they put the button? Right beneath the 20% off message.
  4. What is the most important thing in this page? The Black Friday discount sale.
  5. What printing services are discounted by 20%? Click the button to learn more about the offer.

2. Use just the right number of design elements

Let’s take a look at what Amazon did for their Cyber Monday promotion. Amazon is the largest online retail store in the world—they could really give us some great lessons in design.

Amazon

  • The business emphasized their Kindle Fire sale because it was Cyber Monday.
  • Despite the volume of products they sell, they limit the elements above the fold to reduce the noise and to focus visitors’ attention on what’s important.
  • By reducing the clutter and highlighting their own product—Kindle Fire—in the top position, they leave you no other option but to first consider it. When you leave your visitors on their own to try to work out what’s most important, it slows down the buying thought sequence, because they have to stop to make meaning of the options.
  • Giving a lot of options to the potential buyer can actually reduce conversions. If you have to give more than one option, be sure to guide users’ thought patterns to decide on the best one for them.

3. Make effective use of balance

SEOMoz is one of the most prominent organizations in the SEO and inbound marketing community. Let’s look at what they do with balance.

Seomoz

  1. SEOMoz’s design uses the right contrast and a color combination that’s easy on the eyes.
  2. There is symmetry between the text on the left and the image on the right, except for the hiring ad banner that temporarily interrupts that flow, and grabs the attention.
  3. A strong emphasis was also given to the Free trial button.

4. Communicate the right messages effectively

Let’s analyze the how ThinkTraffic.net communicates its key messages about attracting traffic.

thinktraffic

  1. Think Traffic presents a consistent brand message: think about your traffic. Obviously, they want to attract users who need more traffic for their sites.
  2. To display the brand’s unique selling proposition, the designers used a box to highlight relevant questions for users. They used shapes and colors in the background to show an upward trend, which reflects the fact that users want to have an upward trend in their traffic.
  3. In the third box, the designers used an arrow to communicate that the solution to the traffic problem is to fill out the form. Users just have to enter their email addresses to get a traffic toolkit.
  4. Then, they used the right color combination, with just right to contrast, to present the call to action, “Let’s do it”—a message that conveys, “We can help you. Let’s work together.”

5. Use the right flow

Recently I updated Adobe Flash Player and after everything was done, I was redirected to an installation success page that contains a banner for Adobe‘s newest Photoshop Elements packages. Let’s take a look.

Flash

  1. Color: The designers used color saturation to guide my eyes to the button at the right-hand side. My attention was drawn seamlessly right to the button.
  2. Size: They used font size to emphasize the availability of their new Photoshop Elements product.
  3. Balance and the right combination of design elements were carefully mixed to guide visitors’ thought sequences, from the moment they see the “Now available” message. This leads them to the Adobe Photoshop Elements II message, then to the leftmost box, then back to the leaping person, which points to the “Learn more” button.

Are you using the design elements on your blog?

When you work on your blog’s design, don’t just optimize it for search engines or for a fashionable design. Think of how you can best serve your visitors by giving them the best user experience.

You can do this by guiding them through the sequence of their own thoughts. This approach builds trust in your site and helps you communicate your message clearly, which supports higher conversions.

People buy from people. Talk to your users through these design elements.

Do you have other ideas you can share based on the examples I’ve mentioned here?

+Mark Acsay III is an online marketing consultant, the owner of Webby Thoughts blog that talks about inbound marketing topics.