Step 6: Interactivity

1. Interactivity

Interactivity in the web world means that when a someone is on your site, their actions create a reaction on your page. Things such as rollovers, "like" buttons, photo sliders, and drop-down menus all fall under this category.

Some other examples of interactivity are adding comments to blog posts, taking part in polls or surveys, interacting directly with someone at a company using “live chat,” and contributing to forums on social networks. Interactivity appears to be linked to credibility. If you want people to believe your website, increase the amount of interactivity.

2. Hover States (Pseudo-Classes)

The most obvious elements of interactivity are links that change when you hover over them. Links can change color, underline, weight, and even typeface or background color. These are important clues for the site user that suggest the image or text is a link and the changes that will happen to the page if clicked.

Use this CSS code to establish these types of links:

a {
    font-size: 0.9em;
    color: #FFFFFF;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: 300;
    margin-right: 4px;
}

a:visited {
    color: #FFFFFF;
    font-weight: bold;
}

a:hover {
    color: #EAEAEA;
    text-decoration: underline;
    cursor: pointer;
}

a:active {
    color: #3d9997;
    cursor: pointer;
}
            

Remember, it must be done in this order:

• a
• a:visited
• a:hover
• a:active

3. CSS Transitions

CSS transitions are a very handy tool for interactivity. They can be used instead of JavaScript or jQuery to change objects or links from one state to another smoothly.

For example, if I want my link to be white in the normal state and blue in the hover state, I can use a CSS transition to smoothly change the color over two seconds when someone hovers over that link.

CSS Transition Properties:

• transition: A shorthand property for setting the four transition properties into a single property.
• transition-delay: Specifies a delay (in seconds) for the transition effect.
• transition-duration: Specifies how many seconds or milliseconds the transition effect takes to complete.
• transition-property: Specifies the name of the CSS property the transition effect is for.
• transition-timing-function: Specifies the speed curve of the transition effect.

4. jQuery

Due to online security concerns, jQuery is not used much anymore. However, it is still an excellent reference. Any jQuery code can be copied and stored locally as a JavaScript file to alleviate security concerns.

jQuery acts like a reference library designed to simplify client-side scripting of HTML. It is free, open-source software and the most widely used JavaScript library by a large margin.

jQuery’s syntax is designed to make it easier to navigate documents, select elements, create animations, handle events, and develop applications.

5. JavaScript

JavaScript is used in web design to implement interactivity. It is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.

JavaScript is used for dynamic web pages and applications, video game development, desktop and mobile applications, and server-side network programming.