Gone are days when pages on a site were one-size is viewed by all. Many sites have changed to have content shown based on the customer’s screen size. What this means is that content and more specifically call-to-actions may perform differently based on what the customer sees.

Having a good understanding of how a page performs based on screen size, defined breakpoints, device types, as well as orientation of device (portrait vs. landscape) is an important measurement component.

  • How are you measuring a page?
  • Are all pages treated equally if the content is shown differently?

Responsive design means that you need to be more engaged with the analytics to understand the nuances of how customers interact with the content device, screen size, and orientation of devices.

“First and foremost, don’t forget the customer and their experience with the content on the site.

Often the focus of responsive design is on small screen sizes, and how the content will appear to the customer, forgetting that the large screen size is just as important to the customer’s experience.”

Review your measurement objectives and goals for the site. This will help determine whether you include all site data into one report suite, profile, or account. If additional granularity of data is needed based on responsive design, segment the data into multiple report suites, profiles, or accounts.

There is plenty of advice available on how to track responsive sites for breakpoints, setup of specific categories and funnels to measure call-to-actions, but sometimes the rest of the content on the page is forgot. The rest of the content on the page, may help achieve the desired results, but without measurement will go unnoticed and not optimized.

You may find that you need to implement more advance measurement to track what information blocks that appear to the customer. This becomes important when a responsive design hides information blocks or reduces the amount of content based on screen size.

An example of reducing or minimizing content based on screen size is with fat footers. Often for larger browser sizes, a fat footer is provided as a navigation aid. For smaller screen sizes, the fat footer is omitted and only a few links are shown like trademarks, privacy links, or terms and conditions in the footer.

Cisco Fat Footer

Cisco’s fat footer includes a four column layout for navigation links. Visible to customers viewing the site with devices with larger screen sizes. www.cisco.com

Cisco iPhone Footer

Cisco’s fat footer is omitted for small screen viewing with only a few priority site links shown. Depending on the customer’s screen size, more links are added. www.cisco.com

Another example is how does your site’s navigation perform based on screen size? With smaller screen sizes, navigation is different. Is the use of navigation links the same or different based on screen size?

The data from the customer engagements within the information blocks, as well as the various funnels and categories that have been created may be used to optimize content performance as well as improve the customer’s overall experience on the site.