Hint to scroll

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:

Add a subtle down arrow, positioned at the bottom of the introduction.
Add a Learn More CTA button that kicks off the page scroll.
Avoid a 100% window height introduction section, bringing the second section up.
Allow the hero elements to flow into the second section, suggesting storytelling.

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

Scroll Hint Inspiration – A collection of 150+ Landing Pages I’ve curated integrating scroll hints.

Make it accessible

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:

Create a clear :focus state like this – keep hitting tab on your keyboard and see what happens in your Landing Page.
Ensure your text color contrast isn’t weak – this text against this background – has a decent AAA accessibility score of 8.99.
Increase your browser font size and see if your Landing Page layout breaks or anything become illegible.
Correctly assign and order semantic headings (H1, H2, H3) – disabling your stylesheet or using a screen reader will quickly surface issues with your hierarchy.
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.

Chrome Lighthouse – Instructions how to run an accessibility audit for your Landing Page in Google Chrome.
Contrast for Mac – Great tool I use to to ensure my text colors are within Accessibility standards.
Accessible Color Generator – Useful to find the nearest accessible-passing color based on your color inputs (that are failing).
Focusing on Focus Styles – Solid article by Eric Bailey covering :focus and :active CSS selectors.
10 Screen Readers – A curated round-up by UsabilityGeek.
UserWay – A website accessibility solution for ADA & WCAG Compliance. Their widget sits in the corner of the browser where users can customize their browsing experience.

#74 - UX Tips

Steer clear of a header carousel

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.

Carousal interrogation – Brad Frost goes into why carousals are a poor choice.

#77 - UX Tips

Implement smooth scroll

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.

Smooth Scroll Inspiration – A collection of 2000+ Landing Pages I’ve curated featuring smooth scroll.
Smooth Scroll Compatibility – How it ranks across all browser versions.