Open non-essential links in a new tab

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.

Or Don’t – 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.

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.

#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.