We have the technology to add amazing interactions to our websites. With just a little bit of CSS or JavaScript, we can layer enhancements and animations onto our pages which allow our visitors to interact with our content in different ways. These enrichments, if used responsibly, can make our sites fun, memorable, and more enjoyable to use.

Examples of interactions we see range from common drop-down menus for navigation to interesting, in-depth transitions while hovering over links. Often, we rely on our mouse device to trigger actions on our sites. While we don’t want to lose these interactions, we also need to find solutions for our visitors without a mouse.

These days, we have users browsing our websites on desktops with a mouse, desktops that can touch, small screen mobile phones, large screen tablets, and more. Sometimes the endless possibilities for our audience might seem daunting, but we can find ways to make sure we optimize our site experience for the majority of our users without sacrificing our vision.

We’ll take a look at:

  • How interactions on your website affect your visitors
  • Ways to create meaningful and useful interactions with CSS animations and transitions
  • What happens to our actions and enhancements on mobile and touch devices
  • Options to make sure our interactions work well on all devices while maintaining design integrity