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.
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
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.
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