Landing Page Design 102: Sidebars
Welcome back to another issue of Working It Out!
Last issue I took a break from landing pages and went in-depth about WordPress and how to install and configure it. Now I’d like to jump back into landing page design and finish up where we left off …
… Two issues ago I discussed some essential basic elements to consider when laying out a landing page for the web. This week I’m going to expand on that concept and discuss some examples of effective sidebars and other graphics related techniques.
In this issue:
- How my poor dating habits can help you build a better sales page …
- Four examples of effective side bars …
- A list of things NOT to do when putting images on your site.
- And much, much more …
Sidebar Basics
When I sit down and design a sidebar I try to always remember that someone is reading this thing and my goal is to steer them in a particular direction.
In some cases I ask them to do something, a call-to-action, like signing up for my e-zine or buying my products.
In other cases I just want to give them an addition to the running copy providing more detail and giving some eye relief.
Let me explain what I mean by eye relief. When you have a large dense portion of copy, it’s important to make it as easy as possible for the reader. Now compelling copy is 95% of the struggle but the delivery of the copy is an important factor.
When a person is diving into your copy it’s important to give them the chance to come up for air as they go through the page …
It is difficult to read a continuous block of text and thus the need for eye relief surfaces. Eye relief, simply put, is a break in the copy to allow your eyes a quick rest.
You can accomplish this break many different ways including, shorter line lengths and paragraphs and also sidebars and images.
Now back to the steering process of your landing page …
Think of it as a relationship and this is the first date.
So here I am all excited about going out on the date.
This is the element of reading an interesting banner that compels me to click on it for more information.
Now I casually, confidently meander to the door … I knock politely, loud enough so she can hear me but, not too loud as to be domineering or overly eager … I’m playing it cool my friends …
All right my interest is piqued so I click on the banner.
And there she is, just as drop dead gorgeous as when I saw her earlier that day … Inwardly I’m nervous and a bit intimidated but I act fast … Quickly I smile and present the first of many witty banters this evening will see …
The Landing Page Headline jumps out at me and quickly catches my interest. I’m pleased to see that the banner did not misrepresent my hopes of what the page would be.
It’s time for to see if this relationship can go anywhere … And I press on through my inward struggles of our first encounter …
So I strike a witty conversation with my companion in where I discuss the State of the Union and how I was the real mastermind behind the Internet … It’s a bold move but my confidence grows with every sip of champagne …
This is the point where the copywriter shows their worth by giving me a convincing yet compelling argument while establishing themselves as someone I can trust, making me all the more interested in buying.
Now I carefully discuss religion and politics (I always like to choose easy going fun topics that no one is too opinionated on during a first date)
At key times during our heated conversations she thinks of leaving but, is drawn back by my witty remarks and clarification of my crazy view points.
As I’m reading through the sales argument I notice that at several key points throughout the article when my reading needs a quick break or clarification on a tough topic, there are sidebars and pictures to provide them.
After an exquisite night, I casually but effectively guide her toward the exit … Teasing along, we leave for our next venture …
I have finished the meat of the copy and now I’m ready to read the offer.
I’ll censor and omit the details but, in the end she’s not falling for my crap …
After reading the landing page it turns out the offer isn’t any good.
So now I return to my apartment, crushed and begin the arduous task of finding yet another date, keeping my head up and persevering through the turbulent dating crisis that is my life.
I hit back on my browser and keep surfing the net
So what have we learned from our dating analogy (Other than that I am single for good reason)?
We learned that sidebars and images don’t make the final decision but, they do help the reader continue through the landing page. And in the end not even glorious sidebars and images can overcome a bad offer.
My job is to provide eye relief and make the copy pleasing to the eye; it’s the copywriter’s job to come up with a compelling argument and a strong offer to seal the deal.
Newtson I’m looking at you …
Our Goals
Our goals become very simple when you break it down:
- Make everything as readable as possible.
- Break up the running copy to provide some eye relief.
I harp on this not so complicated issue often, readability is our goal!
In our pursuit of readable, useful sidebars I have come across a few problems to look out for before presenting the sidebars to others.
Here are a few of the biggest things I run across, that are bad ideas in general for most sidebars:
- Making the sidebar text too small. Anything less than 10 point bold is too small. Maybe you can read everything just fine but, you must always consider your audience. If you can read 8 point fonts just fine than you can definitely read 10 point fonts but, it’s not necessarily true for the opposite case. So why chance it?
- Be consistent within the sidebar with your colors. This isn’t always able to be accomplished but in general … make all your headlines and subhead one color and all your running text another color. I’m a big fan of a dark red for the headlines and subheads and black or a dark blue for the running text.
- Use reverse text in small doses. Reverse text can work just fine but, in long spans it becomes hard on the eyes to read. Every now and then it seems to work with a particular theme but for the most part it’s something to avoid.
- Make sure there is proper padding between the text and borders of the sidebar. I personally like to have at least 5 pixels between the running text in a sidebar and the border.
- Make sure that the border of your sidebar works well and is consistent with your headlines and subheads. Now they don’t have to be exact but, they should flow together well enough. For example, A dark blue for the headlines and a lighter blue for the border is OK but, don’t make the border bright red and then the subheads bright blue.
- Make sure that your sidebar is relevant and located in the correct spot in the copy. Now this of course varies from landing page to landing page but, it’s important to make sure that as a designer you are aware of the relationship your side bar has with the running copy.
For example, if I have a large area of the running copy that discusses ingredients of my product, it makes sense to put a more in-depth explanation of ingredients in that area. It does not make sense to put this explanation further down in an unrelated section.
So that about covers some of the biggest mistakes I try and correct right out of the shoot. And while critting others’ work this is the checklist of red flags I refer to as I read over the copy.
Positioning is a Key Factor in an Effective Sidebar
Now that we are pretty happy with our sidebars let’s take a minute to confirm their position in the piece.
Of course positioning varies depending on several factors … but two large factors to keep in mind are whether the piece is advertorial in nature or more offer driven.
An advertorial landing page is usually meant to establish a relationship and credibility for a prospect that is less familiar with either your product or yourself. My failed first date above would be more advertorial in nature as I try to establish a feel for who I am …
In the case of an advertorial landing page it is essential that you have catchy and relevant eye relief while you establish your relationship … You want to be careful not to introduce call-to-action elements before you have properly romanced the prospect.
A good rule of thumb is be sure not to introduce any sidebars or images that involve the offer itself until you have presented the offer in the running copy. So don’t tell people to act now and click here until they know what they are clicking for.
Now in the case of an offer driven landing page things are bit different.
An example of an offer driven landing page is a long copy landing page from a shopping cart.
In this case you want to give a quick out at anytime that person is ready to buy. A fair rule of thumb here is to make sure that they have a call-to-action about every two to three screens as you read through the page …
That means if there is a visible call-to-action sidebar or image I shouldn’t be able to press page down on my keyboard more than twice before seeing another call-to-action.
Of course these aren’t set in stone but, they are good guidelines to start with. You can always test a few different panels with varying call-to-action positions to achieve maximum effectiveness in your particular scenario.
Before I show you some of my favorite sidebars I’d like to touch on image placement and flourishing.
Image Creation
The biggest difference I see between a professional looking landing page and not so professional looking page is the level of effort one puts into their images.
Let’s start with reports …
The first time you mention a report you should have a relatively small image representing the report. In most cases this is just the cover of the report …
Here is where the extra effort shows through. The easy way is to take a picture of the report and just stick into the page and shrink it down until it looks about right.
The professional way is to size the report exactly the size you intend to show. That means if you have 330 x 280 picture but, you want to show a smaller representation of 150 x 95 in a particular spot, pull the image into an image editor and resize it to be 150 x 95 or the closest possible size that maintains the correct aspect ratio.
Put a drop shadow on the picture, dress is up a bit by cropping the edges to be an oval instead of just a rectangle … maybe put the report on a slight angle to give it some feel.
The point is, do something to it to give it some style, you don’t have to go over the top but show that you care enough to at least resize the picture correctly.
Finally a quick blurb about pictures of people …
If you’re reading this article, odds are you’re a person. Since people invariably bond with other people, pictures of people can really drive home the tempo and feel of a page while providing a very real bonding tool.
If your page is meant to build happiness then show happy people, that love your product. If your page is meant to show frustration, do so with frustrated images.
When placing a picture of a person into a page, be sure that the person is facing the bulk of the copy. You always want people facing into the article as if to say “Where are you going? The parties over here, I’m looking right at it.”
Four examples of effective side bars …
Here are some examples we did for Health Resources. These were mainly advertorial in nature but, they have a dual purpose of creating sign-ups and sales.
Take a look at them and they might just give you some inspiration on your promotion!
-
Super CoQ10: This one has some great examples of how to make reports a little more interesting.
-
Ultimate Vision: More examples of effective eye relief.
-
Pure Potency: More examples!
-
Advanced Joint Relief: This is one one of our first efforts so the code is a little shaky in some spots and we had some problems with different browsers but, it’s still an excellent example of powerfull sidebars and images.
Unfortunately, that brings our conversation to a close for this week. I truly hope you enjoyed our discussion and picked up a few ideas that help. I can’t wait to hear what you have to say …
And finally good luck and happy hunting to all you would-be daters out there, I hope you have better luck than I did!
Thanks and have a great weekend!
Editor, Working IT Out
THE TOTAL PACKAGE
Looking for resources related to this article? Try some of these.
Looking for more of David’s articles? Check these out.
Looking for past issues of The Total Package? Click here for our archives.
 |
Want to share or reprint this article? Feel free. Just give us full attribution and a link to our Home Page when you do. |
Attribution Statement: This article was first published in The Total Package. To sign-up to receive your own FREE subscription to The Total Package and claim four FREE money making e-books go to www.makepeacetotalpackage.com.
Related posts
1 Comment »
Join the Discussion!
Let us know what you think. Or ask us anything. Or offer your own sage advice.
The only rule: RESPECT THIS HOUSE! Postings that contain abusive language and/or personal attacks will be cheerfully VAPORIZED. One cross word and – POOF! – your well-thought-out post will be gone in a puff of smoke.
– Clayton
Comment by John C. A. Manley — July 31, 2007 @ 5:37 am
I really appreciated this piece. I\’ve working a lot with improving the design of both my print and online ventures.
I must say, working off line, design-wise always feels more stable.
Yours examples look great, though i found it depended on which size my browser (Firefox) was viewing at. Otherwise, text and side-bars started clashing.
I\’ve been doing more just a straight left or right sidebar, simply because it avoids this problem, and also keeps the line lengths shorter throughout the entire body copy.
Maybe you could address some of these issues in a future issue, or an EasyWriters webinar.
Thanks!
John
P.S. Thanks for posting the links. I\’ll read/study the copy/design, and probably hand copy a few of them (got a whole book of longhand copy of Clayton\’s stuff). Adapted his magalog format for some of my own projects, with great results. My Easy Writers Marketing Club membership has already paid for itself several times over.