How To: Create Landing Page Images That Convert Customers
As a web designer and someone who generally browses the internet often, it should come as no surprise that I very often ‘judge a book by its cover’, so to speak.
I am of course referring to Landing Pages, the first visual impression that your website makes on your visitors. It is important to understand that this is the cover to your book. This is the window to your store front. This is the brand that you are displaying to the world and if your first impression is mediocre the customer will think your company is mediocre. Don’t be mediocre. This article will focus on a few tips that will generally improve your landing page and help show your visitors that your company is what they need.
Find The Right Photo
This is arguably the most important step there is. We are choosing the first thing a potential customer sees when they open your site. The right image says that you understand your customers needs, but also expresses more about who you are as a brand.
To find photos you can google search for free stock photos, or use a service such as bigstock.com to purchase photos of your own. In my personal experience, bigstock.com typically has better stock photography.
Add Effects to Image
Some people might find effects cheesy, but I am not one of those people. Adding overlays, tones, and adjusting other photo properties may help the stock image you just bought seem a bit more like a professionally edited photo.
I would recommend using an application like Adobe Photoshop, however there are a lot of free alternatives and even iPhone apps that can handle the task.
SPEED SPEED SPEED
The loading speed of your Landing Page can be the difference between a customer clicking through or bouncing before the they can even see what you have to offer. The obvious goal here is to be as fast as possible, as we don’t want to lose customers before they even know what we offer. To check your website’s load speed, you can use the link below:
https://developers.google.com/speed/pagespeed/insights
Choosing the Right Dimensions
Page dimension varies depending on the display that it is being viewed on. For the most part however, most desktops will run with a width 900 to 1200 px. What does this mean for us? Well, that image that you uploaded that’s 4000px wide is still going to be loaded when you refresh your page, even if you told HTML to scale it down.
The best way to avoid this unnecessary extra work is to scale your images down before you upload it to the site and avoid using HTML to resize your photos.
Resizing an Image
Once you have determined the dimensions you want to use, simply open up an image editor such as Photoshop and adjust the image size.
If you do not have Photoshop there are lots of free image resizing tools that you can find through google.
Resizing an Image for Social Media
As we now know smaller image sizes result in better load times. As a result, most social media platforms have set pixel dimensions that your photos must meet when sharing your landing page on the web.
Here are the Details:
Facebook images should be at least 600 x 315px.
Twitter recommends the image be larger than 60 x 60px.
LinkedIn images should be equal to or smaller than 180 x 110px.
Compressing Files
Perhaps the most effective way to increase a website’s loading speed is to compress the image files you use. This will shrink the overall size of your site and increase overall usability.
I recommend using a site like http://tinypng.com/ as they allow you to compress .jpg and .png files directly from your web browser.
Conclusion
There is no question that a well crafted Landing Page can be the difference between success and failure for a business’ website. By follow these steps to ensure creativity and speed your website will be well on it’s way to converting customers.
