Over a million developers have joined DZone.

Is There a Difference Between ''Responsive Web Testing'' and ''Cross Browser Testing''?

When you test your web application, do you differentiate between Responsive Web Testing and Cross Browser Testing?

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

When you test your web application, do you differentiate between “Responsive Web Testing” and “Cross Browser Testing”?

What Is Responsive Web Design?

I think people still argue about "Responsive Web Design." I use the term to mean how the website responds to different rendering environments.

You can read more about responsive web design here:
For my purposes, I’m going to say that Responsive Web Design is responding to the size of the screen. This might be done via CSS or JavaScript or server-side based on browser headers.
So, how do we test it?

How we test depends on how it is implemented.

Very often I find people test on multiple devices because their organization has chosen to "support" those devices.

And that’s it.

Different implementations expose us to different risks, and therefore different test approaches.

“Cross Browser” Testing

Often the risk decision-making criteria comes down to "we need to test it on this device because we want to say we support this device."

The decision about what to test on the device wasn’t based on the risk that the device presents. It was based on the risk that the marketing might not be accurate.

Issues with this strategy?
  • It will take too long, we have to test everything on each of the devices.
  • it still leaves us exposed to technical risk on devices that don’t come into scope.
If we take a technical decision about risk mitigation then we might stand a chance of reducing testing scope and therefore the time it takes to test.

We should look at the implementation approach in order to understand the risks around it.

Risk of Media Queries

Media queries have been around for a long time. Can I Use reports a pretty high browser support percentage for media queries. (How accurate is this? I don’t know!)

All of this, I could take to mean that CSS media queries represent a pretty low-risk responsive strategy.

Clearly it depends on what parts of media queries we use:

If it is essential that the functionality implemented using Hover works, then you probably want to make sure that Firefox and IE are part of your test browser environment, if you use Can I Use as your risk assessment tool, since Can I Use reports Firefox and IE 11 as having issues with CSS Hover. Your use case might actually work, even if the browsers are not viewed as completely compatible. (Certainly, I use Hover on my main website and I haven’t seen any issues with the Hover on Firefox and IE.)

Cross-browser becomes important and viable when we have an identified risk with that browser platform.

If we architect our applications to reduce risk, then that provides an even better risk mitigation strategy than testing since we can choose implementation solutions that are low risk.

Regardless, technical decisions around implementation can guide our testing.

Other than platform implementation, what else do we take into account?

Media Queries Create Screensized Breakpoints

@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 5 tiles */
   .thumbCell {
      width: 20%;
      padding-bottom: 20%;
   }
}
I took the above media query from the CSS used on “everybody’s favourite test consultancy” website.
 
The above query gives us a couple of breakpoints to work with and use those in our testing. How could we test those?
  • Choose devices that cover those sizes.
  • Resize the browser.
  • Use a responsive test tool with iframes set to those sizes.
  • Use the browser dev tools capabilities e.g., Chrome’s Device Toolbar.
 Are there risks in choosing one strategy above another?
  • What if we test on a device but it doesn’t report the size we think it should?
  • What if we don’t have devices of the right size?
  • What if there are bugs in the tools we use?
  • what if the browser has bugs?
 So many risks. But really.

  • If the device implements the standard for media query screen sizing.
  • If the browser sizes properly.
  • And assuming that the CSS validates against the standard.
  • And that the CSS validator validates correctly.
Do we really need to check the media query on a device? If you think so, then what additional risk did you identify that you will focus on with your testing?

Responsive Web Testing vs. Cross-Browser Testing Summary

  • Use cross-browser testing to target specifically identified platform risks.
  • Use responsive testing tools and browser features to target specific responsive web design standard features.
  • Validate your CSS.
  • Find multiple trusted knowledge sources to help you assess risk.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:
responsive ,assessment ,risk ,responsive web design ,testing ,browser

Published at DZone with permission of Alan Richardson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}