Welcome to the ‘Landing Page From Scratch Series’, where we’ll be taking you from zero to hero and crafting a high converting landing page from the ground up.

In each lesson we’ll take you through the core principles required to formulate the perfect page and get your campaign off to a strong start.

Welcome to part 3 of the ‘Landing Pages from Scratch’ series. In part 1 and 2, we covered the planning and designing stages of the process to help determine your user base, their intent, where they’re coming from and how you’re going to target them.

Now comes the fun part! We’re going to start structuring and designing your landing page so that it speaks to your visitor and gets them taking that all important action.

Optimise your load speed

Load speed optimisation is crucial on a landing page, you can put all the hard work that exists in the entire world into your design and then it could end up being a waste of time if your page doesn’t load fast enough. If you’re also spending money on advertising and using PPC then every click counts. Did you know that 47 percent of consumers expect a web page to load in two seconds or less? Furthermore 40 percent of consumers will wait no more than three seconds for a web page to render before abandoning the site.

So load speed… pretty important!

Two services you can use to test your load speed as well as local testing are:
GTMetrix and Pingdom.

These websites analyse your page or website and give you some recommendations such as optimising images, coding changes etc in order to get your load speed down to the lowest possible time.

Now we’ve got load speed covered, let’s move onto responsive optimisation.

Responsive Optimisation.

Mobile Optimisation!!! That’s all. No seriously, don’t let your page just be transferred from desktop to mobile, make sure you take the time to actually plan out the mobile version of your website so it looks tailored to that specific device and it makes sense.

Make sure everything displays as it should – fonts are loading, padding is correct, images are in the right place, buttons and links are functioning. Go through your page as if you were your customer and go through the journey and ensure it makes sense and that the mobile version of your website follows the AIDA principle also. To read more about the AIDA Principle click here.

Cross-browser compatibility

Cross browser compatibility is essential if you want to make sure everybody can view your website in the same way. You could be losing out on sales or enquiries if some visitors can’t access some or all of the features of your website. Some popular browser’s include Google Chrome, Safari, Firefox, Samsung Internet, Opera etc. https://www.browserstack.com/ is a great website you can use to test your website across all browsers.

Clean and Lightweight Code

This is so important as it has a knock on effect to everything that we’ve gone through above – the base of your code effects everything from load speed, responsiveness, cross-browser compatibility etc. We offer you a small but very important piece of advice in terms of coding – don’t put in any code that doesn’t need to be there or that you don’t use. Don’t bloat the code and don’t keep something in there for the sake of it being in there. You can use a validator such as WC3 Validator to check your code for conflicts, however we will warn you to not get too hung up on this as you may get conflicts due to third party scripts or plug-ins etc. Generally, the less conflicts you can get on your code then the better.

Meta Information

This is something that can be missed on some websites, but it’s a very quick and simple way to ensure that you are more visible on SERP’s (Search Engine Results Pages).

Metadata and information is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

Your meta information includes things like your favicon and webpage title, logo etc – making sure they all match, using the same logo for your favicon as you do on your website, using the same webpage title as your tagline etc.

Watch the video above for a more detailed explanation into the correct use of Meta Information.

Use Dynamic Effects

Dynamic effects are really good to use – they have a positive impact on the way users react with a page. As long as they are not adding to the weight of the code then that’s great! Go ahead!

So what are dynamic effects?
Dynamic effects can include anything and everything but here are some examples:
– A button changing colour when your mouse scrolls over it
– Elements and sections loading whilst you are scrolling down the page
– Having your terms and conditions in a ‘lightbox’ pop up window so when the user wants/needs to read it they DON’T NEED TO LEAVE THE PAGE. Which we will keep drilling into you throughout our blogs as its so important.

Watch the video above to see some of these dynamic effects in action.

Fix your CTA whilst scrolling

Fix your call-to-action button to your users mobile screen whilst they scroll – the positioning we recommend fixing the button is at the bottom of the screen as this is close to the user’s thumbs and makes taking action even easier for your customer.

Form Validation

This will mainly be useful for you have created a lead generation landing page, but it’s also still relevant on all pages and is really good to know because at some point you might want a form on your website or page.

Here are our tips for Form Validation:
Get rid of those bog-standard javascript prompts, highlight fields with user friendly messages instead (using the correct amount of digits in a Phone Number field, entering the Date of Birth within a specific window if they have to be over a certain age etc). Validate.JS is a great library you can use to validate Javascript objects, we highly recommend using this.

You’re almost at the end of your Landing Pages from Scratch journey, there’s only one more blog left until you’ll be creating a masterpiece.

Next blog in the series will be coming soon!

If you’ve enjoyed reading this blog and you don’t want to miss out on any information and tips like this in the future join our newsletter here.

We send out one email every month with all the information you need to make your website/landing page successful.