Step 6 - Interactivity

1. Interactivity

Interactivity in the web world means that when someone is on your site, their actions create a reaction on your page. Examples include:

  • Rollovers
  • "Like" buttons
  • Photo sliders
  • Drop-down menus
  • Adding comments to blog posts
  • Taking part in polls or surveys
  • Interacting directly with someone at a company using "live chat"
  • 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)

Hover states are an obvious element of interactivity, allowing links to change when you hover over them. Links can show changes in:

  • Color
  • Underline
  • Weight
  • Typeface
  • Background color

Use this 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:

  1. a
  2. a:visited
  3. a:hover
  4. a:active

3. CSS Transitions

CSS Transitions are a handy tool for interactivity, often used instead of JavaScript or jQuery. They allow objects or links to change from one state to another smoothly, with control over the transition speed.

CSS Transition properties include:

  • 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 a 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 still serves as an excellent reference. Any jQuery code can be copied and stored locally in the js folder as a JavaScript page, alleviating security concerns.

jQuery is a free, open-source software designed to simplify client-side scripting of HTML. It provides capabilities for developers to create plug-ins and abstractions for low-level interaction and animation.

5. JavaScript

JavaScript is widely used in web design to implement interactivity. It's also used in:

  • PDF documents
  • Site-specific browsers
  • Desktop widgets
  • Server-side Web applications
  • Video-game development
  • Desktop and mobile applications
  • Server-side network programming