And so, today I want to describe the development of a landing page. The way it happens for me.
The idea for this post came about when I got a link to a web designer’s blog. Although, I would call him more a webmaster than a web designer. A person creates sites, mainly landing pages on WordPress. He does this using Visual Composer. I’ll explain right away…
Visual Composer is a WordPress plugin. This kind of visual page builder. With it, you can build pages without knowing HTML and CSS. This is done by simply dragging and dropping blocks.
I have nothing against such development of sites and landing pages. But for my customers, I prefer to create landing pages like custom whiteboard animation in a different way. Although, I confess, designers can save a lot of time.
Why we don’t work in constructors and builders
Voracity
It’s no secret that all the designers are gluttonous enough and give a high load on the server. This is not critical for a new site. Not a lot of content, traffic is small.
But as traffic or content increases, you may encounter a 508 Resource Limit Reached error…
This error occurs if your hosting account starts to exceed the set limits for the allocated resources.
There can be many reasons for this error, from DDoS attacks to heavily loading scripts and gluttonous plugins. DDoS attacks can be dealt with by blocking by ip and installing captcha. But if your site is too “heavy”, then it must either be optimized or switched to a more expensive hosting plan, which is not advisable.
In other words, an under-optimized site is an extra headache. And it’s better to think about it in advance…
Invalidity
The main disadvantage of the constructors is that the HTML code of the site will most likely be invalid.
Opinions vary on the impact of code cleanliness on search rankings. It is not fully known whether the invalid code affects the ranking results. But there is information that some errors in the code can lead to the flight of a page or site entirely from the index.
Extra code
When creating a site using the constructor, there are a lot of unnecessary divs with different classes in the code. Most SEOs are convinced that, as a percentage, there should be more content on a page than code. I have the same point of view.
Someone will now say that CSS and JavaScript can be compressed using services. There are even plugins to compress HTML. Okay, but how do you make changes later?
Yes, you can of course save yourself uncompressed versions. And, if necessary, make edits there, compress and fill again. But for me personally, this method is not convenient.
Advice
Of course, if a customer needs a landing page for 1 month, and it is planned to drive only paid traffic, then it makes sense to create a landing page on a constructor. But if the customer’s intentions are serious and he has come to the Internet for a long time, then it is better to do the landing page immediately with high quality. With a unique design, with clean code. Optimized, with customized micro-markup…
Stages of creating a landing page
I’ll tell you what stages I have in developing a one-page page…
Brief
The work begins with studying the brief. I have it in such a way that it covers all the basic questions you need to get started.
Some customers think that the brief is either a formality or unnecessary bureaucracy. And they approach filling out as an unsubscribe. In fact, every question is extremely important to me. Therefore, if the brief is not completely filled out, then you have to conduct additional correspondence with the customer in order to find out the missing details.
Competitors
After reading the brief, I start browsing competitors’ sites. I analyze them from the point of view of design, presentation of information, usability, etc. If I am familiar with a niche superficially, then I try to study the subject deeper. It is necessary to understand how to present information, taking into account the niche and target audience.
Text
You cannot work on a one-page without a ready-made text. And often, even in the finished text, you have to make edits as you work on the site.
This happens because not every copywriter provides all the nuances. For example, bullets in terms of text size should be approximately the same. The “facts” block should be concise.
Design
Further, references and color palette are selected. Then we decide on the style. Font pair and appearance of UI elements are selected.
And only after all this, work begins on the design in Figma. It can happen in two ways.
- The first. From top to bottom. This is when the design is rendered screen-by-screen, starting from the site header. That is, first, one screen is thought out in detail and drawn, then the next, and so on.
- Second. From more to less. In this case, the largest elements and text blocks are first thrown over the entire landing page. These are backgrounds, headers, and buttons. We go from more to less, adding more and more details. In this case, we immediately see how the landing page will look like. It turns out at first, a kind of prototype (wireframe), where you can clearly see how convenient the site will be for the perception of visitors.
Finally, as a bonus, I always render the favicon for the site. It’s a small icon in a browser tab.
Adaptive
When the main size design is complete, work on the responsive begins. It is also drawn according to the principle “from the largest to the smallest”. At this stage, you need to think about how each element will look on the small screen of your smartphone and tablet. We foresee what will happen to the text. How it will change its size, padding and so on.
If the landing page has an anchor menu, be sure to think over its change. Will it fold into a burger button or should it be removed altogether.
Layout
After the design for all major resolutions is completed, the landing page is typeset. We do not make the HTML version, but immediately pull the site onto the engine (in our case, WordPress). In this case, the customer will have the opportunity to independently change the texts and images on the site, if necessary.
Optimization and tuning
During the layout, all the nuances are taken into account. All Title and Description are registered, headers are enclosed in tags H1-H3, and micro-markup is done.
After the layout, the main setup and SEO optimization of the landing page are carried out. A robots.txt file is generated, an xml sitemap. Statistics counters are set.
Of course, no one will give you a guarantee that free traffic to your one-page page will flow like a river, but trust me, SEO pays off.
Even if not immediately, but let’s say, in a few months, there is a possibility that the site (thanks to competent text and correct optimization) will rise in the search results. This means that it will be stable, and most importantly, it will bring you additional visitors for free.
Conclusion
Thus, the landing page is well thought out in structure, technically correctly configured and convenient for further use.