Add visual cues to your site

It's annoying for website users to click on a link only to find that the web page isn't of interest, wasting their time. Using a picture in the page background is a great way to give users an indication of what to expect from a link before committing to loading the page. You can see a great example of this technique in use on the Ivan Aivazvsky life site (save any inspiration you gather in cloud storage).

Using the page background can also help dyslexic readers or those who speak English as an additional language. In these cases you can communicate additional information to the user without overloading them with too much text.

<!DOCTYPE html>
<html>
<head>
<title>Navigation Background</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src=”code.js”></script>
</head>
<body data-theme>
*** STEP 2
</body>
</html>

<nav id=”mainNav”>
<a href=”#” title="Page 1">Page 1</a>
<a href=”#” title="Page 2">Page 2</a>
<a href=”#” title="Page 3">Page 3</a>
</nav>

html,body{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
  color: #000; }

[data-theme]{
  transition: background 1s;
  background: no-repeat center center;
  background-size: cover; }

[data-theme="Page 1"]{
  background-image: url(image1.jpg);
}
[data-theme="Page 2"]{
  background-image: url(image2.jpg);
}
[data-theme="Page 3"]{
  background-image: url(image3.jpg);
}

#mainNav{
  display: block;
  width: 50%;
  margin: 0 auto 0 auto; }

#mainNav a{
  display: block;
  width: 100%;
  background: rgba(255,255,255,.3);
  color: #000;
  padding: 1em;
  margin-top: .5em;
  border: 1px solid; }
#mainNav a:hover{
  background: rgba(0,0,0,.5);
  color: #fff; }

window.addEventListener("load", function(){
  var nodes = document.querySelectorAll("#mainNav a");
  for(var i=0; i<nodes.length; i++){
  nodes[i].addEventListener("mouseover", function(){
  document.body.setAttribute("data-theme", this.getAttribute("title"));
  });
  }
});

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.

Add visual cues to your site

01. Create the HTML document

02. Add navigation HTML

03. Initiate the CSS file

04. Set rules for visuals

05. Design the theme

06. Add a navigation container

07. Style navigation links

08. Link event listeners

Related articles