Hot Tip #21 is to avoid animation overkill.

Gratuitous scroll transitions no longer impress. Subtle animations are timeless and show intent.

Just because you can, doesn’t mean you should.

Hot Tip #25 is to integrate a sticky header navigation if your Landing Page is long.

CleanShot X

A sticky header can make it easier for visitors to navigate page sections and keeps that CTA button visible at all times.

Hot Tip #39 is to place copy before images on mobile.

Having a legible responsive design is great, but are you ordering your content for a seamless scrolling experience on mobile?

✅ Intro copy before main image
✅ Feature copy before demo image

Landing Page images without context are difficult to decipher:

P.S. Don’t be afraid to hide images (or text) that add nothing to the mobile experience.

Hot Tip #46 is to remove obstacles in the way of demoing your product.

Carrd allows a full website build before asking for an email address.

You are confident your SaaS offering will satisfy your potential customer. Why not get visitors to experience it as soon as possible?

Hot Tip #68 is to add a hint to scroll.

Sometimes, I see long-scrolling Landing Pages with spacious content above the fold, but no indication there is more information further down.

Here are 4 solutions:

1. Add a subtle down arrow, positioned at the bottom of the introduction.

2. Add a Learn More CTA button that kicks off the page scroll.

3. Avoid a 100% window height introduction section, bringing the second section up.

4. Allow the hero elements to flow into the second section, suggesting storytelling.

The original Ghost Memberships Landing Page does point #4 really well:

Hot Tip #69 is to make it accessible.

Providing people with health conditions or impairments, the ability to read and navigate your Landing Page easily is the right thing to do.

Here are five small tasks that can go a long way:

1. Create a clear :focus state like this - keep hitting tab on your keyboard and see what happens in your Landing Page.

2. Ensure your text color contrast isn't weak - this text against this background - has a decent AAA accessibility score of 8.99.

3. Increase your browser font size and see if your Landing Page layout breaks or anything become illegible.

4. Correctly assign and order semantic headings (H1, H2, H3) - disabling your stylesheet or using a screen reader will quickly surface issues with your hierarchy.

5. Describe all your non-decorative images using the alt tag - if an image is only there for graphic purpose you can let the screen reader skip it.

One hour tackling the above, could saves hundreds of frustrating hours for others.

The exercise will also strengthen your Landing Page by surfacing fundamental development issues.

Hot Tip #74 is to steer clear of a header carousel aka header slider.

A Landing Page journey should always start with intro copy that the visitor identifies with.

Some will read it fast, some will read it slowly, and some will even read it a few times to fully grasp the offering. This copy is not meant to dance off the side of the page mid-sentence:

A product slideshow or smart feature carousel can work mid-page, but the header is out of bounds.

Hot Tip #77 is to implement smooth scroll in your long-scrolling Landing Page.

Clicking on a navigation pricing link and jumping to a Landing Page pricing section can feel like a fast page load to your visitor.

Implementing smooth scroll will gracefully transport them to the relevant section while reminding them about additional content. It can even prevent them from hitting the back button.

To integrate smooth scroll, simply add this CSS code to your body class:

While native scroll-behavior has come a long way, Safari still needs to come to the party. I’m hoping it’s soon.

Hot Tip #78 is to define a clear visual hierarchy.

Step back from your Landing Page, squint your eyes, and take note of the content that appears most prominently. Is this prominent content more important?

A visual hierarchy orders content by significance and also suggests the order to follow. If all content was of equal size and weight, we wouldn’t know where to start. Naturally, we want our introduction headline text to be the most prominent as it’s where the visitor’s journey begins:

Heavyweight

A visitor’s eyes are also trained to follow a Z-pattern:

1 - 2

3 - 4

Note how you probably followed a Z-pattern when looking at the above image:

A good rule-of-thumb is to increase the prominence of your more important content while decreasing the less important.

Hot Tip #87 is to focus on form UX.

The importance of good form usability is overlooked in Landing Pages. Fancy layouts with too many required fields will drop conversions.

✅ Arrange fields in one column
✅ Keep required fields to a minimum
✅ Position labels near the top-left of fields
✅ Tab in the correct order

Investing in a user-friendly form experience is worth every cent for your Landing Page.