Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Responsive Web Testing: 3 Common Mistakes

DZone's Guide to

Responsive Web Testing: 3 Common Mistakes

Your latest web site is awesome and, of course, it is responsive. But have you committed one of these three common mistakes during testing? Find out in this article.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Over the past year, one new statistic made it clear that the mobile web should be a priority for every business. Half of global web traffic now comes from a mobile device, according to reports from both Google and IBM.

Combine that with the fact that four out of 10 purchases in the U.S. now involve multiple devices, and it's no surprise that top businesses in retail, media, banking and travel are adopting a responsive web design approach to deliver a consistent website user experience across smartphones, tablets, and desktops.

Read our New Comprehensive Guide to Building a Responsive Web Testing Strategy

However, developing responsive websites—and, of course, putting them through rigorous visual testing—is an elaborate process with potential pitfalls.

With that said, here are three mistakes developers and testers should avoid when working on responsive websites.

You Forget That Mobile Devices Are Not All the Same Size

Image title

When doing responsive design, developers define breakpoints (the points at which a site is not displaying information correctly on certain screen sizes) and base their layouts on these breakpoints. There's a layout for phone, one for tablet and one for

Using the same RWD layout for iPhone 4 and iPhone 6+ is going to cause website text and images to display incorrectly.

When you're designing your responsive website for a smartphone, always consider the smallest screen size in a size range. If your breakpoints say choose Layout A between width of 250px and 450px, be sure to test on the smaller end of the range simply because images tend to get cut off or misaligned on smaller screens. Smaller devices do tend to be older, but that's no reason to neglect them in your RWD process.


Responsive web design misalignment.

You Don't Test on Real Mobile Devices

As mentioned, mobile devices come with various screen sizes and resolutions and are up against a daily grind of ever-changing user conditions like switching networks, phone call interruptions, and heavy user load. All of these factors will affect how your website appears on the screen.

First and foremost, you need to define the most important devices for your company to test on and then for the reasons listed above you need to test on the actual devices, either manually or through a cloud service.

Emulators are good for basic testing, but do not mimic the true web user experience on a real smartphone or tablet. They lack the hardware modifications that affect the viewport size and, therefore, the visual correctness of the site. A website may appear fine on an emulator, but in reality, will go over breakpoints and generate a different layout.

You Rely Solely on Functional Testing

Functional tests confirm that website features work according to the code. But these tests do not validate that buttons and links are aligned correctly on the page on all browsers and devices.

If you ran a Selenium test to click on different links and buttons on a page, the test would say everything works, but in reality, the buttons and links are only partially visible or misaligned. These issues are difficult to validate with Selenium alone. You need to confirm the website appears correctly on all browsers and devices with visual testing that validates the site's look and feel and covers font changes, color changes, text changes, position changes from portrait to landscape mode and anything else that's visible to the user.

responsive web testing strategy






Want to learn more about RWD? Check out our upcoming webinar, "Deliver a Great UX with Responsive Web Design Testing", taking place Tuesday, April 5 at 2:00 pm EST. Register here

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
web dev ,responsive design ,responsive ,testing ,mobile

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}