Ever since we began creating video tutorials on how to create a landing page, we seemed to always get one similar question: How to make a landing page that’s versatile, yet mimics the offer page. I dismissed this question quickly because I figured that it was a hasty question and that with a quick Google search that they would find the answer to their question in an instant.

But recently I was brought back to the first time I found out about how to use a screen capture in collaboration with some Photoshop, when suddenly a myriad of landing pages flew into my lap. It opened my eyes and now I never split-test landing pages without including at least one “mimicked” landing page. So in a belated attempt to answer the above question, I created the video below. In this video tutorial, I show you how you too can create personalized and versatile landing pages that still maintain quality elements of your offer pages.

Click below to follow along!

Side Note: As a small freebie, below is the CTA button template which I use in the video and never leave home without. I hope you can make just as much use out of it as I have!

When I was trying to think of alternatives for creating a landing page which I could provide for the readers here, my initial thought was “speed”. But since I had already provided an easy-to-follow video which had already covered one quick way to create a landing page, I wanted to focus more on providing you with some tips focusing more on the Loading Speed of your landers. So with that in mind, I gave you Part 1 of How to Create Lightning-Fast Landing Pages in which I explain Dreamweaver’s Hotspots. I then followed that post with Part 2 where I showed you how to create landing pages using Photoshop’s slicing tool.

However, while there are surely other methods and tips on how to create faster landing pages, I wanted to take a break from those methods and provide you with some tools which you should use to gauge the speed and appearance of your landing pages across a broad platform. With that in mind, I would like to introduce you to Adobe’s Browserlab, GTmetrix, and PageSpeed Insights. These three tools are a great way to observe how fast your landing pages are, and what you can do to improve their speed. Let’s discuss this further…

Page Speed

PageSpeed Insights

You may have been wondering what kind of metrics I’ve been using to check how the load time of a landing page using hotspots or slicing up an image with Photoshop. Well, with the array of apps available today, you can find out exactly how long your landing page takes to load, taking the guess work out of the equation. The first tool is a neat app called PageSpeed Insights. PageSpeed Insights is an easy-to-use browser extension which when installed in your Firefox or Chrome browsers can inform you of the speed of your landing page and even give you suggestions on ways to make it faster.

Below is a screenshot of PageSpeed Insights doing just that:

As you can see, the landing page used in the above example has a few suggestions which will hypothetically increase the speed of my landing page. This is useful because it quickly tells you what can be optimized while maintaining quality. Also, while the tool itself does not speed up your landing pages, it provides you with the information to make the changes on your own.

GTmetrix Optimization

But what if you wanted a comprehensive comparison showing the speed of various types of landing pages all at once? Enter: GTmetrix. This great app allows you to check out what’s slowing down your landing page and what’s keeping it fast by providing a graded list of all of the elements and images within your landing page. What separates GTmetrix from a lot of speed testers out there, is that GTmetrix provides you with even more information on things to avoid when creating a fast landing page, as well as an updated report on your landing pages which includes page sizes, load times, request counts, the region in which your landing page is tested, and your YSlow score.

Below is a screenshot of a comparative test provided by GTmetrix which includes 3 different landing pages -one landing page was created using hotspots, another was created using image slicing, while the third was created using neither method.

As you can see, the design of this tool makes it very easy to use and very easy to understand; which is why I like to use it, and would recommend you to do the same.

Appearance Across Browsers

If you’ve tried slicing your background image using the image-mapping technique, you may have noticed that in certain browsers your landing page has appeared sloppy or spaced out. This can be troublesome if you’re unaware of the affects a browser can have on your landing page’s appearance. Luckily, Adobe created an app that allows you to check the appearance and behavior of (among other things) your compiled sliced images. Adobe’s Browserlabs App allows you to compare the appearance of your landing page across whichever two browsers of your choosing. While this app is great for viewing the appearance of your landing pages, it has little to do with the overall performance of your landing page in regards to speed like the two aforementioned tools.

So for that reason, I’m not going into all of the features provided by Adobe’s Browserlabs in this post. I just wanted to quickly mention it before wrapping up this post as a reminder to check your landing pages across numerous browsers, especially when using the slicing method

So keep these tips and tools in mind when you’re creating your next landing page; and keep an eye out for Part 3 of Lightning-Fast Landing Pages!

In last week’s video, I demonstrated how easy it was to take one large image and create a FAST, EASY, and EFFECTIVE landing page using Dreamweaver’s “hotspot” tool and little else. This week, I wanted to show you how to do something very similar. However, instead of using hotspots to select which areas of your landing page will redirect the user to the offer page, I wanted to show you how you can create fast landing pages using Photoshop’s Slicing tool. This method enables you to create a landing page with multiple hyperlinks, giving the user multiple opportunities to advance to the offer page. This method is useful because it requires very little html knowledge and can still create fast, effective landing pages for all of your offers.

Click on the video below to see how you can create fast landing pages!