By: Andy Haskins
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.
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.
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 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.
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.
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.
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 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.
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:
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.
CONVERSION RATE NEWSLETTER 📧
Free Bonus - 30 Quick Conversion Rate Wins Ebook
Join 10,000+ Brands getting tips, tricks and insights every week.
Free Bonus - 30 Quick Conversion Rate Wins Ebook