Design Killer Website Landing Pages

Last week, FEI marketing guru Marka gave marketing greenhorn Lucy some tips on writing better landing pages for FEI’s marketing campaigns. This week, the landing page discussion continues as the focus shifts to design. Remember, fire = print.

One afternoon, Marka and Lucy met in Marka’s office to gobble down a takeout gyro lunch. Eager to move forward with FEI’s postcard/landing page campaign, they’d decided to work through lunch and review what Lucy had written.

Marka looked over Lucy’s landing page. “This copy will definitely help convert prospects who arrive at our page into new customers,” she began, “but the page doesn’t follow best design practices. The Web is a visual medium. Good design will support our landing page’s content and guide prospects through our message toward a sale.”

“But I’m not a designer,” Lucy protested. “I’m a copywriter.”

“Anyone who does landing page marketing should know and understand best practices for designing them,” Marka asserted. “Here are some design tips that even a greenhorn like you will find useful.” [She grabbed a piece of coal and scribbled on her office whiteboard.]

• Put your most important landing-page elements in the upper 300 pixels of the page.

“Studies have shown that site visitors spend 80 percent of their time ‘above the fold,’” Marka explained. “You can’t assume viewers will scroll down to read more. Landing pages must be designed to get right to the point. Make sure to include all important elements within those upper 300 pixels—our value proposition, a call to action, any appropriate pictures, etc.”

(O-puter Note: 300 pixels will easily be seen even on old monitors.)

• Keep it simple.

“Include lots of white space and ample margins in your page’s design,” Marka continued. “Avoid cluttering the sidebars with irrelevant links or images. Good landing pages are focused on one goal and one goal only: getting readers to take a specific action. Any design elements that don’t support that goal should be excised.”

“Your copy should also be displayed simply,” Marka added. “Long blocks of copy simply don’t get read. A good rule of thumb—keep paragraphs to five lines, not sentences, at most.”

“This next one’s my favorite,” Marka said, scribbling away.

• Format your page according to the “F” pattern.

“What the F?” Lucy asked.

“Web readers tend to track through content in a roughly F-shaped pattern,” Marka explained. “They read through most, if not all, of the upper-page content, then scroll down, reading slightly less across the page the lower they go. That means important elements—such as key selling propositions, call to actions, etc.—should be included in the top-left portion of the landing page. Make sure important graphics are flush-left on the page.”

“By Zeus, this is helpful,” Lucy said. “I’ll redesign our landing page with these principles in mind and get back with you in a couple of days.”

That Friday, Lucy showed Marka a new version of the comp. “This is fantastic,” Marka said. “I think we’re ready to send the postcard off to the presses.”

FIRE! Point
The Web is a visual medium. Good design supports your landing page’s content, guiding visitors through your message toward a sale. A few landing-page design tips: put the most important landing-page elements in the upper 300 pixels of the page, keep it simple, and format the page according to the “F” pattern.

FIRE! in Action: Business Objects/SAP Redesigns Landing Pages to Improve Conversion Rates
The B2B software company redesigned its key landing pages and increased conversion rates by 32.5 percent (download PDF).

Next week: How to Measure Your Landing Page’s Success