Tag Archives: responsive web design

Check Performance Metrics across Form Factors In Google Analytics

Enabling Form Factors in Universal GA
Enabling Form Factors in Universal GA

Summary:

With the evaluation of responsive web designing, we need to advance our analytics too. We have techniques and tools to know the content breakpoints, but we are devoid of the form-factors based breakpoints. Let’s have a try to include them in our GA.

Intro:

When we design for responsive website, we not design for devices, but for the different form factors means we have to address various form factors by deciding their performance metrics. This is very true in case of UX designing because we want to accelerate and optimize the user experiences for a particular device or set of devices.

Form Factors

Unfortunately, we can’t address each device individually or set of devices one-by-one due to big fragmentation issues on hardware and OS fronts, whether it is iOS and iOS devices or Android OS or Android devices. However, we can address common form factors of the every device and can categorizing them according to their form factors. We can categorize form factors by identifying device experiences in following ways:

  • Through usage or posture
  • Through input methods
  • Through output or screen

These form factors enable us to use Google Analytics and other web and mobile analytics in our responsive designing and give perfect clues to iterate design in ongoing projects or through regular updates.

Form Factors in GA

There are WURFL.js used in the GA to measure its given form factors and we have to include it in to the source code of our responsive websites. Once we introduce WURFL.js into the page code, it creates a global object that you can access through JavaScript in GA and measure various form factors given by it like…

  • App
  • Smartphone
  • Tablet
  • Feature Phone
  • Other Mobiles
  • Desktop
  • Smart TV
  • Robot
  • Other Non-Mobile Devices including wearable

Thus, your Universal GA code would be…

/* Define the custom dimensions */

ga('send', 'pageview', {

'dimension1': WURFL.complete_device_name,

'dimension2': WURFL.form_factor,

'dimension3': WURFL.is_mobile

});

Once you write or re-write GA code in website template you have to go to GA account where you have to define custom dimensions in admin panel

Admin>Custom Definitions>Custom Dimensions

Enabling Form Factors in Universal GA

Now, Google server will collect the data and you need to analyze them through your GA account in your browser so you have to make some customization of your dashboard. Now, click on

Audience>Custom>Custom Variables

For Universal GA, your custom dimensions will available along with the other standard dimensions

By enabling form factor dimensions, we can measure bounce rate and pages per visit to get big picture of their behavior on the various devices. Thus, we can draw fine conclusions in our responsive web designing projects.

Creating Widgets

GA offers a best feature to get alerts when website performance changes for custom dimensions and that in form of Widgets on Dashboard. At first place we will create Pie-Chart widget to analyze how much your responsive website is being used by different form factors.

On Dashboard, click

Add Widget>Pie>Sessions>form factor>Custom Dimension

Here you will group sessions by the form factor variables one-by-one.

Secondly, create widgets for Visits and Bounce rate same the way. Thus, you will have big picture of changes in form factors that are taking place when you make any change in your website design or programming. Of course, you have to add some filters to standard metrics in these widgets and you can do is simply selecting timeline diagram and filter the data flow with your custom variables.

If you create one widget for each of your form factor, you need to watch, you will have good ideas for your responsive website design.

Lujayn has expert responsive web designers who have perfect knowledge of SEO and various SEO tools to use in their advance designing processes.

Advertisements

Heading towards Device Agnosticism by Responsive Web Designing Part 1

In years of 2012 and 2013, we were talking about the handheld devices like smartphone and tablet, but year 2014 is coming with some more awesome innovations in sense of electronic gadgets and communication devices in particular. For instance, Google glasses and Apple watches are coming trends with their own operating systems and bespoken software.

Think Beyond Desktop

Most of these innovations are web enable and have greater chances to display your web presence on them. Therefore, thinking about the mere desktop or laptop devices during initiating a website or web application project for personal or professional uses is thinking backwardness. In fact, we are heading towards multiple size screens and somewhat devices agnostic era where our websites wouldn’t only face the screen size fragmentation, but also hardware and even operating system fragmentation in particular.

In due course, we have limited options if we stick to the fix width or size website designing layouts or only mobile website designing considering some particular mobile devices. We are in fact heading toward device agnosticism where responsive web design is only viable and feasible solution. Let me explain it bit further.

Why We Should Be Responsive Designing Evangelists

Before few years, we had 800X600 screen resolutions on most of the desktops and our websites were performing well with table frame layouts with fixed size and minimum flexibility granted by percentage formulas in coding for height and width. Now, in present days tablelesss web design are ruling the web and CSS3 is the choice for majority of web developers. HTML mark up also becoming advance in many terms and offering awesome tags to access various hardware of different types of devices and integration of multimedia.

Device Preferences Changing

At other hand, the mood and taste of people also changing with pace of time and smartphones and tablets are now in-things and people have great addictions of such mobile devices. Therefore, recent PC market growth is stagnant and mobile devices market is doubling every year. People like to access web at any time and from anywhere even while on the go.

Therefore, addressing our customers or audiences through mobile devices is mandatory for our success. Be it on online or for brick-and-mortar businesses. This is  because our tech-savvy new generation first find out product and shop on their mobile web, and then burn pint of fuel only to reach at shop for final purchase, or order the home delivery without wasting their time further.

Responsive Design Only the Solution

In such, awful scenario missing the mobile presence is a sin at marketing point of view and responsive designing posing cost-effective solutions for all sorts of businesses including e-commerce storefronts. In next part, we will see how, and why, responsive designing solve or present problems and offer better promises for our bright future on the web with device agnosticism.