You are browsing Hot Tips featuring:
Landing Page lessons related to the navigation area or browsing experience.
Hot Tip #11 is to remove your main website navigation.
If your Landing Page sits within a bigger website, hiding your navigation will prevent a potential customer from wandering.
Your Landing Page has only one objective — sending visitors to another page is not it.
Hot Tip #25 is to integrate a sticky header navigation if your Landing Page is long.
A sticky header can make it easier for visitors to navigate page sections and keeps that CTA button visible at all times.
Hot Tip #27 is to step into your visitor's shoes.
📱 Load your Landing Page on mobile
💬 Read the text aloud
👆 Use the navigation
💳 Checkout successfully
Doing the above will expose conversion friction points in your Landing Page.
Once confident, see Hot Tip #18.
Hot Tip #66 is to open non-essential links in a new tab.
Set links to documentation, support, privacy, and demos to open a new browser tab, keeping the primary Landing Page within a tab's reach.
New Window Links - A strong Counterargument by Jesse including several use-cases and additional UX reads. Always healthy to question UX decisions. I still vote for opening demos, support portals and blogs in new tabs - all 3 in my experience offer poor navigations to return to the primary page.
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.
Accessible Color Generator - Useful to find the nearest accessible-passing color based on your color inputs (that are failing).
Contrast for Mac - Great tool I've been using to to ensure my text color hierarchies are within Accessibility standards.
Focus Styles - Solid article by Eric Bailey covering :focus and :active CSS selectors.
Lighthouse - Instructions how to run an accessibility audit for your Landing Page in Google Chrome.
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.
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.
CSS Scroll Compatibility - How it ranks across all browser versions.
Smooth Scroll Inspiration - A collection of 2000+ Landing Pages I've curated featuring smooth scroll.
