A little over one year ago, Spark Logix Studios made the switch to responsive web design (RWD), and we’ve devoted several of our recent posts to explaining its benefits. For instance, RWD sites make it possible for you to simultaneously accommodate both static and mobile users, as the pages automatically adjust and resize according to the viewer’s screen size. Because of its built-in “intelligence” and easy management, RWD has proven the ideal solution for site owners wanting to stay connected to the burgeoning mobile audience.
Still, RWD is not without its challenges and, of course, it will cause you to change some of your current practices. One prominent example is how you conduct your web analytics, since the variations in how your pages appear (based on the viewing device) may change the ways users respond and engage with your content.
How to Perform Analytics with RWD
For the most part, the majority of your analytics practices will stay the same; however, RWD does demand a few different steps to accurately determine how visitors are interacting with your pages.
Track results based on page dimensions (e.g. break point, screen size, orientation)
Although responsive sites modify their layout to deliver the optimal viewing experience, sometimes this rearrangement can have the unintended consequence of hampering your conversion rate if, for example, your call to action button which, let’s say, appears in the top margin on larger screens is demoted to the bottom of the page on small screens. Thus, it’s important to test how your site renders on various devices, and then analyze if any of the differences (no matter how minute) result in better or worse user responses.
Three particularly important variations to look at are break point, screen size, and orientation, as each of these variables can dramatically alter how a person views your page. There are several analytic programs that can help you isolate these variables, but you may need to tinker with the code somewhat to capture the exact dimension you’re after.
For each of the three variations, track how it affects visitors’ path down the conversion funnel. For instance, if you’re analyzing screen size, do people abandon the funnel at higher rates on a 960×640 screen as compared to a 1280×1024 screen? If so, something is obviously amiss on the mobile-size screen and it warrants better optimization. You can get a better idea of what visitors are experiencing by going through your pages on actual devices (as many as possible) or, at the very least, using a quality simulator. By doing so you can more easily pinpoint if a flaw in your RWD is causing the problem or something else.
Monitor “full site” link
Have you ever gotten frustrated with a mobile website and begrudgingly hit the “full site” link when you couldn’t find what you were after? In such a situation, obviously the mobile pages failed in their delivery, and even though you didn’t abandon the interaction altogether, your action shows the mobile site was largely pointless. How might conversions increase if the mobile pages actually provided a worthwhile user experience?
Although most RWD sites don’t have a link offering to take users to the “full site,” this is still an issue that plagues mobile optimization in general and, even with RWD, you may realize you have a similar scenario if you have a landing page people are intentionally leaving because they can’t find what they want.
As an analyst you need to determine what drove a user to your page in the first place and pinpoint under what context they clicked away (i.e. was there a problem in your RWD execution or was it something else, such as low-quality content?)
Don’t forget about big screens
With the growing popularity of internet-ready smart TVs and game consoles (and with some folks even using HDTVs as their computer monitors), RWD designers have to contend with screen sizes much larger than the average desktop screen. Unfortunately, most web designers don’t know what to do with the extra space, so more often than not users are left with super-wide margins — not the most attractive or efficient use of website real estate.
While the mobile audience is still bigger than the “internet TV” audience, don’t overlook this group, since the early adopters (those getting onboard now) are typically more tech-savvy and generally more apt to shop online than other consumers.
Besides, analyzing how your site displays on a jumbo screen, also consider how users will navigate your pages. For instance, is your navigation too cumbersome for a remote or game controller to handle? If so, consider simplifying how visitors move through your pages.
Pixel density
Desktop screens come in varying sizes, but most have similar pixel densities (DPI). On the other hand, mobile devices are all over the map in regards to DPI, with some gadgets cramming many more pixels into the same amount of physical space as compared to their competitors.
What this means for RWD designers is if you create a button based on pixels size, that button could appear in drastically different proportions based on the viewing device. And, if rendered too small, the button could become difficult to click (especially with touch screens), causing conversions to suffer.
There are ways of coding your site so buttons will scale independently of DPI, but again, always test your touch targets on real devices to ensure they aren’t contributing to a high bounce rate.
In Conclusion
It’s worth noting that there three basic types of RWD layouts: basic fluid, adaptive, and responsive. Depending on what style you choose, your particular analytics needs will vary somewhat. Regardless, the most important things to consider are how visitors will see and interact with your pages. Put yourselves in their shoes, travel through your own conversion funnel, and pinpoint any areas that would dissuade a consumer. Use these clues along with numerical data to formulate a plan for your responsive site’s optimization.
The post Responsive Web Design’s Effect on Analytics appeared first on Spark Logix Studios.