II. Rewarding Interaction

On a web page, interaction is dialogue with your users. Here are some simple ways to make your site more conversational:

Hover, focus, active, and tap states

Read more on Google Developers.

There are many ways to interact with an element, and you may want to react to these interactions differently. Elements can be hovered over (using a mouse), focused (using the tab key on your keyboard or a screenreader), made active (when pressed), or tapped (on a touch device). You can use pseudo-class selectors to style these states:

Default, hover, focus, and active states, from Google Developers.

.btn {

background-color: #0087F7

}

.btn:hover {

background-color: #006DDE

}

.btn:focus {

background-color: #0053C4

}

.btn:active {

background-color: #0039AA

}

On devices that allow this to be overridden, there is a highlight color that appears when you tap the element. Many choose to hide it entirely:

.btn {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

Left: Unaltered -webkit-tap-highlight-color on https://minimill.co. Right: The same site with a transparent highlight color.

Transitions

Read more on Mozilla Developer Network.

Once you have created different visual states for hover, focus, and active elements, it’s important to consider transitioning between these states. The most basic CSS transition syntax is as follows:

transition: [delay] [easing] [property];

For example, to put a subtle transition on all properties, you would include:

transition: 0.3s ease all;

Three buttons with different hover states and no transitions.

The same buttons with “transition: 0.3s ease all;”.

FastClick

Read more on FastClick.

Making your website fast and reactive on mobile devices is extremely important. One way to make every part of your site feel a little faster is to use FastClick, a JavaScript library that removes a 300ms delay between the physical touch of the screen and a click event being registered. Many touch browsers insert this delay in order to determine whether or not a touch is a tap, drag, or long press. For most of your site however, this won’t matter, and you can safely remove it.

Implementing FastClick is quick and easy:

<script src='/path/to/fastclick.js'></script>

<script>

window.addEventListener('load', function() {

new FastClick(document.body);

}, false);

</script>

Edit:

On some browsers, it is also possible to remove this delay by disabling zooming using meta tags, although this behavior is new and may not be reliable.

<meta name=”viewport” content=”width=device-width, ...">

<!-- OR -->

<meta name=”viewport” content=”user-scalable=no, ...">

Both using FastClick and meta tags disable double-tap to zoom, which may be an accessibility concern. Another option is to use the currently not well-supported touch-action property:

.btn {

touch-action: none;

}

Thanks to Chen Ye for this note!