How to Make a Landing Page For Your Website

A landing page is a web page where the goal is to either sell a product or capture some kind of information from the visitor like an email address. They are normally fairly concise with a call to action at the end.

For HTML Websites

Download a very simple HTML landing page I created. To edit the file you will need to open the landingPage.html file with Notepad or an HTML editor.

Please note that you will not be able to view the landingPage.html file properly until you extract it from the ZIP folder. So drag the internal folder called landingPage onto your Desktop and then open the folder to view the files.

Here is what the file looks like...

Customizing The Page

After you've extracted the folder, open the landingPage.html file by right-clicking it and "Open With" Notepad or a plain text editor.

At the top of the page you will see the CSS code that you can adjust to change the look of the page.

You can change the color, width, font size, font family, etc. of the web page by editing the CSS located in the HTML code.

Below I've shown how you can modify the color of the links by adjusing the a:link value to a color (red, blue, etc.) or hex color value. And you can change the width of the landing page by changing the width of the container as illustrated below. Super easy!

There's even a placeholder for inserting your own logo if you wish.

I've also created some Buy Now/Sign Up buttons you can use and I've provided the PSD files for the images if you want to edit them in Photoshop. There's a blank button if you want to add your own custom text. (Need a graphics program? GIMP is free.)

Landing Page Design Tips

Landing pages are created to convert as quickly as possible, so here are some tips to keep in mind as you create them.

1. Use Light/White Backgrounds

White backgrounds are clean, crisp and easy to read when used with dark text.

2. Break Up Paragraphs

Your paragraphs should not be more than 4 lines long. Remember, most people do not read every single line. They scan. Make them short so it's easier for your visitors eyes to scan.

Notice how this page uses very short paragraphs. Imagine if this was written in 20-line paragraphs with no breaks. It would be a nightmare to read.

Also make use of bullets and sub titles as often as you can. They also help break up lots of text.

3. Use Images to Add Color and Improve Readability

Add images between paragraphs to break up the text even more.

4. Use Large, Simple Fonts

Small text is hard to read, and small text with fancy fonts is even worse. Keep it simple. Try not to use fonts any smaller than 14px except for dislaimer text or the terms and conditions. I prefer to use 16px for the body.

5. Keep The Content Area Between 500 and 850 Pixels

Content that takes up the entire width of the screen is harder to scan. Keep the width of the content container small, and it will improve readability.