A landing page must show a hero image, the full title, a subtitle, and the main call to action button in the first view. The user should not need to scroll to see these important elements.
By Pawan Nayar · from the LLOS AI Learning record
A landing page must show a hero image, the full title, a subtitle, and the main call to action button in the first view.
The user should not need to scroll to see these important elements.
The first view of any landing page must include four key parts. These are the main image or illustration, called the hero image. The full title of the page must be visible. A short subtitle, one or two lines long, is also needed. Finally, the main button that asks the user to do something, the primary call to action, must be seen. If any of these are hidden, the page is not working well.
A developer creates a new product page. The page title is very long. On a large computer screen, the title takes up too much space. This pushes the main button and part of the image below the screen's edge. A user visits the page and does not see the button. The user leaves the page without clicking the button.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A developer must make sure the main image, title, subtitle, and call to action are all seen in the first view. This is true for all screen sizes.
A developer must use plain language and avoid technical jargon. This applies to all communication and code comments.
A developer must put important content at the top of the page. This content should be visible without scrolling.
A developer must place key content in the first viewport. This includes a badge, title, subtitle, search bar, and themes.
A landing page must show a hero image, the full title, a subtitle, and the main call to action button in the first view. The user should not need to scroll to see these important elements.