The amount of different platforms we can design for increases every day. When we think we’ve gotten a grasp on a specific mobile device, everything changes again. Mobile-friendly websites are important to the success of a site and developers and designers should aim to become familiar with all platforms. In our quest to become accessible to everyone, we neglect our oldest, and most-used platform—the desktop.
Here are five tactics you can use to upgrade your website for desktop users:
1) Rollover animations can reinforce the tone of your website
Rollover animation gives designers an extra opportunity to emphasize the website’s overall look and feel. Rollover animations not only look good, but it gives your users a useful UX-based interaction. Mobile browsers don’t support rollovers. It’s only a matter of time before this “endangered species” becomes extinct.
Rollovers should feature a strong visual cue, give hints, and signal an important interaction. Don’t use them for every link on your website.
2) Atmospheric animations can add life to your website
Various forms of animation are supported by most major browsers. Why not implement a spinning globe, smoke rising from a fire, or leaves blowing in the wind if you can? You can make your animations as simple as an embedded looping video or as complicated as a WebGL landscape. These animations are subtle and they actively engage your users.
Too much of a good thing is almost always bad. Keep animations in moderation. Not everything needs to flash, move, blink, or dance. Be aware of the load time, the user’s processor, and make sure to kill the animations when a section of the page isn’t the focus.
3) Drag and drop allows designers to simplify critical user interactions
The HTML5 drag and drop function is becoming more and more preferred to Flash’s. Drag and drop simplifies interactions that would be cumbersome to complete, like navigating a map or reordering your to-do list.
Users can become frustrated when dragging and dropping isn’t the evident interaction. You should always provide an alternate way for the user to interact with the content.
4) Right-click context menus provide users with hidden navigation
Right now, right-click context menus aren’t fully supported by most browsers. However, it’s easy enough to enable with JavaScript. Right-click context menus are great because they give the user more options.
5) SVG is compatible with all platforms
There are many benefits to vector graphics. It’s smaller than its raster counterparts, it’s supported by all platforms, and it scales well. Most browsers support both SVG fonts and Synchronized Multimedia Integration Language that allows you to animate your SVG elements. SVG can make your designs more efficient. They’ll look good across all devices.
The desktop experience is just as important as the mobile experience. We can continue to push the boundaries of what we want the internet to be.