Annoying Navigation CSS

Here’s a quick, little CodePen showcasing two annoying bits of CSS that many developers, sadly, are guilty of writing. It’s interactive, so make sure you hover and click around:

    
    Check out this CodePen!

What’s going on here?

This is a User Experience or Accessibility issue. Anything we can do to make our users feel like we’re taking care of them should be pursued, and this is no exception. In fact, by not creating block links in these navigation list scenarios, these mistakes are potentially driving away clicks in situations where the padding is relatively thick and users try to click, but nothing happens. The everyday user doesn’t know that the developer has forgotten to do this for them, and could easily think that the intended purpose was nothing, when in fact we’ve got some juicy content behind that link.

Don’t throw away your visitors!

Check me out on CodePen, if you you’ve got some spare time. I highly recommend taking part in the Pattern Rodeo if your motivation needs a kick up the rear!