Best Practices for Landing Page Design

Landing pages are a powerful tool that can be used to serve specific and relevant content to visitors gathered from a variety of marketing channels. They are especially powerful for individuals who need to make adjustments to the web but may not access to the corporate web site. Although often associated with paid search or PURLs, landing pages (or generic URLs – GURLs) can be used with newspaper or magazine ads, radio and television spots, print collaterals, or carrier pigeons.

To get the most out of your landing page campaigns, try these tips.

1. Different medium, different rules

One of the most important items to consider when designing any web page is that the web has an entirely different set of rules than print. Make sure you have a designer who is very familiar with the differences between designing for the web and print. This includes keeping page load times in mind when adding graphics, to the problems around fixed heights, web safe fonts, screen resolutions, and the eccentricities of browsers. Even if your print designer won’t be coding the page, they must have an understanding of the opportunities and limitations within this complicated medium in order to deliver a professional, up to date design that will work cross browser and will not cause additional hours of work for the web designer.

2. Use a strong call to action

Web pages often enthusiastically over-inform the prospect about every last detail up front, forgetting that the main purpose of the page is to get the prospect to opt-in to be contacted.

• Does your offer stand out, or is it drowning in a sea of copy? List the relevant information and save the details for the follow up.
• Is your offer both appealing and relevant to the vertical and demographic? It takes quite a bit of trust for someone to submit their personal information, even when pre-populated.
• Is your offer interesting and relevant to the needs and interests of your prospect? You only have a few seconds to grab their attention, so make it count.

3. Critical information "above the fold"

The main purpose of most PURL marketing campaigns to get the PURL respondent to opt in to your survey, register for an event, or ask for a sales rep to contact them for more information. The survey should be short and easily finished in a few moments. The survey should be above the page break and immediately visible; the prospect should not have to scroll "below the fold".

4. Maintain good organization and visual appeal

Current design standards employ a clean modern layout with large fonts, easy to read navigation menus, plenty of white space around elements, and a small number of high quality graphics. Remove the clutter and your message will stand out.

5. Maximize Variable Content

If your list has information such as gender, age, occupation, industry, or other demographic/vertical specific information, why not use it to personalize the landing page with artwork and copy that is specific to their needs and interests? VDP Web allows for 6 custom fi elds that act as "tags" which can serve variable images, text, and flash. As long as it is in the database, it will serve up a page that is personally tailored to each prospect. Make sure to have a "default" setup possible in case a person does not type in their PURL, so no opportunity is ever lost.

6. Maintain consistent brand identity

You can be creative, but make sure to maintain the fit and feel of your corporate brand across print, web site, and landing page. While there definitely needs to be some obvious links to the mail piece that the client received, it is a good practice to incorporate the fit and feel of your existing corporate web site as closely possible. Web visitors will often leave the landing page and visit your home site in order to find out more about your company. Uniformity of fit and feel is the cornerstone of all corporate branding. If you currently have a web site that you like, try and keep as much of the shell as possible – strip down the navigation and side links so there aren't too many options to leave the landing page – and then incorporate the graphics and information from the direct mail piece into the body of the design. With a bit of planning it is easy to keep to the corporate fit and feel while still relating to the mail piece.

7. Employ a proper link strategy

In the first Unless the landing page is intended as an online resource for articles and white papers, large amounts of links only succeed in directing visitors away from the submit button. Keep navigation minimal or remove it altogether. If you build a micro-site, try and have a small contact form on every page to make it easy for the prospect to submit.

8. Consider your recipients screen size

With screen sizes getting bigger all the time, the standard maximum size has been 800px. If your design is 600px,likely your fonts are tiny and it will appear dated as well as hard to read. Likewise, if your site maxes out past 1000px, individuals with lower screen resolutions may have to scroll horizontally to get all the information. While it is accepted that designers can safely go up to 1000px for most verticals, we recommend staying between 850-950px for now. Make sure to keep the font sizes big enough for all readers to see with ease. Remember, web safe fonts only!

9. To Flair or not to Flair

Everyone knows from the movie Office Space about the 13 pieces of flair. Using gadgets for the gadgets' sake may detract from your content. If using video, sound, or a cartoon spokesperson helps engage the client to your message, fine. More than likely, a poorly planned piece of flair will be a distraction. Once you go down that road, it might be good to split test and see for yourself if the media affects conversion, so you can judge if you are really getting ROI. If you use video or other rich media, make sure it is well made and there aren’t more than 2 items on the landing page, otherwise your site can sound like the sales floor at Best Buy.

10. "I have Dreamweaver, so the code must be right...right?"

Hand Coding vs Generated Code: There are two common practices used when making web pages that often cause more trouble than save time. Many print designers will import their design from Illustrator or Photoshop into Dreamweaver (or other similar programs),which generates the code automatically. Another practice is to open Dreamweaver and draw out the site out in design view, which also produces generated HTML and CSS.

Though Dreamweaver is a very powerful, high cost program, it is similar to owning a Porsche - ownership does not mean you can immediately drive on the race track without crashing. Generated code, whether coming from programs such as Illustrator or drawn out in Design View in Dreamweaver is the “good enough” option; it kind of works, pretty much, part of the time. However, this practice makes it easy to develop bad habits such as nested tables, inline styling, div swamps, and a host of problems that can be very diffi cult to debug if your site develops a problem – not to mention that these programs can output some funky code unless you have a ninja hand.

While the appeal of generated code is that you don't have to take the time to learn how to code HTML and CSS yourself, this is a short sighted view, as the time savings are on the back end when inevitably one of the web sites fall apart and countless hours are then required to fix a pile of unfamiliar spaghetti code. It is worth educating oneself or one’s employee’s if you plan to make web design a part of your business model. Otherwise, plan on some late nights. Knowing standards based XHTML and CSS will save time, money, and keep yourself on the same page as other industry professionals. For more information, try http://www.w3c.org or http://www.alistapart.com.

11. Keep Dynamic Content in Mind

Design for the web has a completely different set of rules than for print. Make sure the design will stretch with content that changes in height or width when the user interacts with it. One of the most common design mistakes is to draw a fixed height box in Photoshop or Illustrator, and expect the web content to fit inside this box – we often see this done with surveys which contain dynamic content. If you are designing and want a box element around the survey, make sure the background surrounding the box is a uniform color and not a photo image or complex pattern, as the box may have to be coded to expand and contract in height due to dynamic content which can break your background image.