Five Interactive Elements to Boost Website Engagement

Your website has the potential to be so much more than a brochure. Here are five ideas for presenting content in a way that elevates your brand and establishes credibility by moving past static copy and images.

1. Light Windows

A light window (also known as a modal window) is content that is overlaid on top of a regular page. It’s usually triggered by a tap/click, and can be closed to go back to the page.

Show Light Window!

Light windows are great for showing full-width content. They let your visitors decide what they want to engage with. And, you can put absolutely anything (including all the ideas below) in them.

Use these any time more information or a larger view is available. Unless absolutely necessary, only use them in situations when the user has asked for it to appear. (For more info on popups, see our article on website terminology).

Check out our go-to light window solution, Magnific Popup.

2. Interactive Panoramas

When individual photos fail to give the right sense of depth and scale, interactive panoramas provide an interactive, immersive option. They’re ideal for project profiles and case studies.

Keep in mind that these can be especially cool for your mobile visitors with touch screens and accelerometers. If your site receives a lot of mobile traffic, make sure and choose a solution that gives them a great experience too!

The best panorama tool we know of is Pannellum.

3. Before & After Sliders

When you need to show transformation of a space (or really any image), this is an efficient solution. It’s a nice way to communicate success on a project that’s fun for visitors to interact with!

Photo by Juhan Sonin.

The folks at ZURB have created a lovely plugin for just this function: TwentyTwenty.

4. 360 Models

360 Models are a sibling to interactive panoramas. The interaction feels similar, but the use case is for standalone objects, buildings, etc. With the right rendering software, you can give users the ability to explore all angles of an object.

We built the example above using SpriteSpin. For a cool example in the AEC industry, check out Mortenson's US Bank Stadium page.

5. Maps

Show projects, offices, or any other data tied to geographic locations. Services like Mapbox and Google Maps allow deep customization to match your brand aesthetic, and integrate with your website to automatically generate maps.

For inspiration, check out this interactive map of every construction project in Seattle.

How can I add these to my website?

We thought you’d never ask. 

Most of these elements provide great documentation and multiple ways to integrate them on your site. But if you'd like it done for you, don't hesitate to get in touch with us!

Monthly newsletter: Interviews with experts, websites doing it right, and recommended tools.

Sign me up

Hire us: exceptional websites and a better project experience.

Get started today
× strategy-guide-graphic

Free eBook: The Website Strategy Guide

Develop an air-tight plan for a winning website.

Learn more