Posted by: David Dittman
June 30, 2007
Issue #165

Landing Page Design 101

I hope all you guys had a great week and are ready for another power packed installment of Working IT Out!

This issue is going to be nuts!

We’re diving head first into landing page design and how we can effectively use some simple guidelines to streamline our site.

In this issue:

• Hard earned secrets from Clayton himself …
  
• Why most landing pages don’t get the conversions they deserve …
  
• Some simple guidelines you can use to start making your landing pages better …
  
• And much, much more!

This week I’m going to give you the fly on the wall perspective of what Clayton and I talk about when discussing landing page layout.

One great thing about working with a copywriting legend is that you get little tidbits of information at every turn and often when you least expect it.

John and I sometimes shake our heads in amazement after Clayton comes down from a hard day at work and in no time flat, takes the problems that we had and reduces them to rubble with a seemingly easy solution.

Although easy is a relative word; what’s easy to him would’ve taken John and I all day, if ever to come up with.

My plan this week is to take a couple of the gems that I’ve learned about laying out a landing page for the Web.

One key concept that has really sunk in with me was that I had to always take into account the reader’s experience as they’re going through the webpage.

The Reader’s Experience is KEY

Taking into account the fact that readability is our biggest key, let’s identify a few different tactics that need to be practiced when you design your landing page.

Let’s start our project the best way I know how. Let’s come up with a readability plan.

Truly the key to all projects and designing a landing page isn’t any different, it’s that you have to have a plan. It’s OK to abandon the plan midstream or change it altogether but, having a good starting direction is the key because as we have all found out the hardest thing in most projects is starting it.

For me I usually go about this one of two ways.

1. Use print sample of what I want to turn into a webpage.
2. Find a webpage that I want to emulate.

Either way the goal here is not to steal somebody else’s design but, to give you a clear plan of attack and maybe push your mind into new directions along the way.

I usually find myself laying out a webpage that was originally a print version. So I’m going to go through the process I use when doing so.

The first thing we need to do is come up with the general layout of the webpage. As we think about our layout we have to go through the direct mail piece and find which parts we can and can’t use. We also have to come up with a list of what parts need to be redesigned.

For example, many direct-mail packages have entire pages devoted to testimonials. When you break up the running copy by spanning the testimonials across the whole page, you present the problem of breaking the natural flow of a reader and it’s usually more of a distraction and makes the transition back into the copy difficult.

An easy solution is to take the testimonials and use them in a sidebar.

The Sidebar Solution!

There is no law or standard that says you can’t have three, four or any specific number of columns but most people find that two columns are simple and easy to read on the web and typically what you’ll run into.

Alright, so we have a simple two column webpage design. A big question now is do I want to have the sidebar run the entire length of the page or break up and even move from the left side of the wide column to the right as the page flows?

This depends on your tastes but my favorite approach is to have multiple side bars that stay on the right for the most part and at times move to left.

The next step is to come up with a goal for the design, color scheme and overall look of your landing page.

The color scheme can be dependent on your product branding but if you don’t have any product branding or you like to vary things on your landing pages you can simply take the color scheme you like and apply it to the particular sales letter you’re trying to create.

So let’s recap what we have decided at this point:

• We have the original piece we are going to redesign or the copy of the new piece we are designing.
• We have the design picked out for our page by either using the existing sales letter or an existing webpage as a guide.
• We have decided that the sidebar will run the length of the page or be broken up throughout the page.

Now what we need to is put together a checklist of problems to look for after we drop the copy into our landing page. Let’s talk about a few of Clayton’s biggest pet peeves that I try to keep in mind when laying out our page.

1. Make sure that you don’t use Times New Roman or courier for the running text in the body or wide column of the page. Times New Roman and courier are examples of serif fonts, and are typically considered hard on the eyes in electronic format. You want to stick with non-serif fonts such as Arial or Verdana.
2. Reading a landing page should never be a vision test. A good rule of thumb is to stick with 12 points for your running copy, 14 points for your deck copy and subheads.
3. It’s best to stick with a few primary colors for your fonts. The key is to make sure that your font pops off the page and doesn’t blend in, in any way. I personally like maroon or a dark blue for headlines and subheads and black for the running text.

4. Make sure the overall width of your website is somewhere between 650 pixels in 850 pixels and do NOT use scaling.
   It all goes back to making it easy for your clients to use your page. Customer experience always needs to be thought of during your design. Like Newtson always says, “I hate it when people make it hard for me to pay.”

   Now some people think that it’s a good idea to have a scalable website. What scalable means is that when a person resizes their browser window the website itself also resizes. The theory here is that if you make its scalable than it will scale to the size of everybody’s individual tastes.

   What you sacrificed to make its scalable is that if a person uses a large resolution and your website opens to a full screen, then you’re going to have very long line lengths and that’s a problem.

   Line lengths are a very big issue to worry about, the last thing you need is somebody actually having sore eyes just from reading your copy. Eye fatigue is a sure way to get a potential client to close your page.

5. Always attempt to break your subheads into small readable expressions. This can’t always be done but you should always try when possible.

For example,

Uranium is shooting through the roof make sure you’re
on board

This is an example of a bad break we leave “on board ” orphaned all by itself. A better way to break this subhead is:

Uranium is shooting through the roof
make sure you’re on board

6. Make sure when you have a list that you have the proper leading in between the list items. Basically make sure you put a space in between each list item. When you have a long list and there is no space between each item, it’s very hard on the eyes.
7. Make sure that all text areas in your sidebars have titles and that the titles stick out with a primary color that pops off the page.

This is a
Call to Action!

Here is a handy dandy new product that will forever change your life but, act now!

Head for the chopper!

Do it NOW!

8. Make sure you introduce a “call to action” element on your page. What I mean by call to action is a graphic element that lets the reader know now it’s time to do something, like buy! (See my Arnold Schwarzenegger inspired example to the right)

These may seem like small issues when you’re designing a site but when you concentrate on readability, the overall conversion to a sale on your landing page will follow suit.

Well, there you have it, a short down and dirty list of the main elements you need to think about when laying out a page.

In my next article, I’m going to go in depth about some cool sidebar elements you can use to give your page some eye relief.

I hope you guys have a great weekend and I look forward to when next we meet!

Thanks and have a great weekend!

Editor, Working IT Out
THE TOTAL PACKAGE™

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

• The Invisible Force That Makes Web Marketing Work!
• One Giant Trade Show Model for Consistent Profits …
• Interview with Greg Marsden
• How I Bagged $5 Million In Internet Sales In 5 Short Weeks
• The Source of Your Creating Muse …

---

6 Comments »

1. Comment by Imtiaz — June 30, 2007 @ 7:19 am

   Hi David,

   Great articles. I always look forward to your IT tidbits of wisdom.
   I know you\’re a fan of Open Source and I\’d like to get your opinion on CRE Loadaed (the supercharged version of OSCommerce). I\’m about to implement an ecommerce site for my product, The Targetizer, and was wondering if you had any experience with CRE\’s version? Best wishes, Imtiaz

2. Comment by Caleb Osborne — June 30, 2007 @ 7:25 am

   Head for the chopper!

   Do it NOW!

3. Comment by Greg Thompson — June 30, 2007 @ 9:13 am

   LOL, head for the chopper. Nice.

   Instead of \”have a great weekend\” you should\’ve ended with \”I\’ll be back\”

4. Comment by David Dittman — July 1, 2007 @ 7:38 am

   I am not too familiar with CRE Loaded but, I did check out their website and it looks like a good product. I did notice however, that there are some add-on modules that you would probably want such as the CRE SEO URLs module which did not appear to be included in their base price and that live support was an additional fee but, if you are pretty comfortable with installing and maintaining open source apps then it looks like a robust solution for a relatively low price. Thanks for letting us know about it, I am definitely going to do some more exploring on it!

5. Comment by Imtiaz — October 8, 2007 @ 2:19 pm

   Hi David,
   I\’ve finally done it.
   The site is \’almost\’ finished and a working example is up at http://www.TheTargetizer.com
   Creloaded turned out to be a good product. There are some painful bits in configuring but once you get your head around it, it is very worthwhile. Plus you get great help at their forums and of course at the oscommerce forums (the platform that creloaded is built on). Let me know if you need any further info. I\’ll be happy to help.

6. Comment by The Baldchemist — March 31, 2008 @ 2:14 am

   Hello David.
   Thanks for your article.
   The key for us is that you already know who your audience is and what you need to recognise as being of interest for them.
   Most make the mistake of pitching everyone in general and no one in particular.
   Any page, whether in print or electronic, must have a this is directed at me message. I took this from our site. You may or may not find it of use.
   A compelling marketing strategy, delivers clearly and concisely a visceral welcome that the premium and super premium reader identify as being for them. Is this for me? That small, but ever so important question, is generated every time someone listens to your narrative, reads your copy or sights your message. Subliminally they ask themselves; is this mine? If the answer is no, or even not sure, your message gets switched off. It’s information for someone else. Selecting the right strategySelectivity is 90% of great media strategy (the rest is knowing how to use a reference book). Addressing everyone in general, you address no one in particular! That’s why a strategy containing loads of copy with flashing, kicking and screaming visuals, attempting to reach a mass audience will appear disorganised; and it won’t make any of the points you wish to articulate!There is more if you have use. Please feel free. The Baldchemist