Responsive web design allows your website to adapt whether you're on a computer or cell phone. The goal is to make sure your website looks and works effectively depending on the device your users are using. The design of the page will adjust according to the width of the screen.
Setup a responsive Snapshot
By default, Crazy Egg will track responsive pages. To setup a responsive Snapshot, follow these steps:
- Create a new snapshot.
- Under Screenshot Device, select the Desktop icon.
- Under Traffic Traffic From, select all of the options - Desktop, Tablet and Phone.
Review your responsive Snapshot
Once you've generated a Snapshot with enough data, it's time to look at the report. To visualize visitor behavior by device, open the Snapshot.
- Click on Confetti.
- Go to the legend - select Device Type.
Here's an example of where we pulled a Confetti page.
You can see splatters of red dots all over the page. Each red dot represents a click where someone used their desktop computer. Check and uncheck the options between Desktop, Tablet, and Mobile to visualize where people click depending on the device.
Another option is to use the Overlay Report.
- Click on Overlay.
- Find an element that you are interested in, click on the plus (+) marker.
For example, I've created a Snapshot to see if people click on the Enter your URL input field. Markers that are colored red are elements that are more popular and have received more clicks than markers that are colored blue.
This Snapshot shows that 95% of the clicks on the Enter your URL input field came from a desktop computer.