Add visual cues to your site

[Rss Bot 1]

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.

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.

• 10 steps to creating an engaging user experience

As with any effect that combines text with background images, make sure that your text remains readable at all times. This can be achieved by placing a semi-transparent colour on your navigation links. Also consider UX readability for issues such as colour blindness that affect how users are able to interpret coloured text.

Here's we'll show you how to create an interactive navigation display with useful and accessible visual cues.

Download the files for this tutorial here.

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website)

01. Create the HTML document

Create the main HTML document template, which consists of the HTML container storing the head and body section. 

The head section stores description information such as the document title, as well as links to external resources – ie CSS and JavaScript. 

The body stores the document content. A significant feature of the body is the 'data-theme' attribute it has applied – to be modified by JavaScript to trigger CSS presentation changes.

02. Add navigation HTML

The page content consists of a navigation container containing links. The navigation's ID and the titles of the child links will be used by JavaScript to listen for interactions and alter the 'data-theme' attribute defined as part of the body container.

03. Initiate the CSS file

The HTML content is now complete, so create a new file called 'styles.css'. This file stores the CSS formatting rules that control the visual presentation. Start this file with rules to present the HTML document and its body to appear across the full screen using a white background and black text.

04. Set rules for visuals

An important component for the effect is the use of the 'data-theme' attribute applied to the document body. A rule is set to define the data's default behaviour – which we'll use for background positioning and change transitioning. 

This avoids the need to repeat these rule definitions for each individual theme, which makes your web pages easier to maintain.

05. Design the theme

The design of each theme is set using the value of the data-theme attribute. 

To achieve the desired effect, we are setting a different background image for each version of the theme. The previous step takes care of all of the default settings that these themes will inherit.

06. Add a navigation container

The navigation container is used to make sure that links are presented with a consistent width placed in the middle of the screen. A width of 50% and auto calculation used for horizontal margining is applied. This approach provides a guarantee of consistency regardless of the user's screen resolution/size.

07. Style navigation links

The links inside the navigation container are to be displayed as blocks set to adapt to the width of the container. This means that their 100% width is defined by the container's width. Padding, borders and background colouring are also applied to make sure that they stand out from the background images.

08. Link event listeners

The CSS is now complete, so create a new file called 'code.js' for the JavaScript. 

The effect requires each link inside the navigation to listen and react to a mouseover event where the user hovers over a link. This listener applies the 'title' value of the link to the data-theme attribute of the document body – hence triggering styles in the CSS. 

After the page window had loaded, the navigation link nodes are placed into an array, upon which a for loop is used to apply the event listener.

This article originally appeared in Web Designer issue 262. Buy it here!

Related articles:

• 10 website navigation trends for 2017
• 10 steps to creating an engaging user experience
• Léonie Watson on why accessibility must be an integral part of the web design processes

View the full article