This is part two of two of the best tips for landing page design for use in integrated cross media marketing campaigns.
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 fi xed 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. If you are coding, use elastic!