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.

#78 - Design Tips, UX Tips

Define a visual hierarchy

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:

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.

Visual Hierarchies Explained – Webflow published on visual hierarchies if you would like to learn more.

#79 - Conversion Tips, Decluttering Tips

Remove inactive social media accounts

Hot Tip #79 is to remove inactive social media accounts.

Launching your Landing Page with social media icons linking to new profiles with low followers is perfectly fine.

Linking to social accounts last updated 3 years ago gives the impression the product or service is either poorly supported or even abandoned.

This tip is particularly important for subscription pricing Landing Pages, where the potential customer is in a deeper research phase before the big commitment.

#80 - Design Tips

Wrap it in a device

Hot Tip #80 is to wrap your screenshots in a device.

A device mock-up, with a subtle drop shadow, can really bring your digital product to life:

If your software caters for multi-device usability, consider showcasing the screenshots within a family of devices. This emphasizes the remote-working possibilities too:

Devices by Facebook Design – Monster collection of mock-up devices in both PNG and Sketch. Ridiculous this is free.
Shotsnapp – Brilliant device mock-up tool that works in your browser.
Device Mock-Up Inspiration – A collection of 250+ Landing Pages I’ve curated featuring device mock-ups.
Lstore Graphics – Quality device mock-up resource that includes presentation kits and even animated mock-ups.
Supply.Family – The highest quality device mock-ups online. Includes laptops, phones, tablets, TV screens. Prices are premium, which is a good thing as your purchase won’t be overly used elsewhere.
Creative Market – The device mock-ups category is filled with unique options by their community. I always draw inspiration how the mock-ups are presented here. Noting colors and backdrops.