responsive design Archives | CrossBrowserTesting.com

The Past, Present, and Future of Testing Responsive Design

October 23, 2017 By Alex McPeak Leave a Comment

The Inception of Responsive Design

Ethan Marcotte coined the term “Responsive Web Design” when he published an article outlining its definition and components in 2010.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

In Marcotte’s responsive design article, he made a case for combining media queries, flexible widths, and flexible images to respond to different devices rather than creating multiple versions of a website.

But what exactly are these elements that Marcotte say make up responsive design?

Media queries – The rules that tell content to behave differently on different screen resolutions and adapt to conditions by defining style rules and breakpoints in CSS.
Fluid grids – Content inside the wrapper of a fluid grid has percentage widths and proportional values in CSS that adjust to different screen sizes rather than a static layout.
Flexible images – Images and other media that resize with ratios and percentages in CSS depending on how large the window or screen is to keep images in container widths.

While many designers had previously utilized these properties on their own, none had thought to integrate the methods to make a website responsive as Marcotte exemplified.

Combining these practices is what revolutionized the idea of responsive design as we think of it today to achieve optimal user experience on every device and browser.

The Need for Responsive Design

Once upon a time, when first iPhone was released in 2007, the idea of accessing the internet on a mobile device was revolutionary. Having a web app that people could access on their phones was a huge competitive edge for companies that were trying to make their products and services stand out.

Luckily, once people had the design and development part down, testing was fairly uncomplicated in the early years of mobile technology. There were only a few different smartphones on the market and equally minimal operating systems, which meant that testing could be taken care of by going through a few different devices. This also meant that a lot of companies could get away with creating one static mobile website and one desktop version.

As time went on, however, designing for the mobile web became more competitive, and most businesses had a mobile website. Additionally, more choices of phones, versions of operating systems, and browser options also made the user experience more diverse.

This meant that just having two websites no longer made sense; the only way to survive on a mobile web viewed on various screen sizes and resolutions was to optimize for all of them at once. Thus the need for Marcotte’s concept of responsive web design in order to respond, react, and adapt to different screens.

Fast forward a few more years and today there are even more fragmented ways to access the web. As of 2015, there were over 24,000 unique Android phones, which is 6 times more than in 2012. Since then, new devices and operating system updates have still been consistently released, leaving us only to guess how many more have been added.

Of course, this means responsive design is more important than ever, but it’s also more complex. While the concept of responsive design maintains the same, testing on all the necessary machines has become a lofty goal, and maintaining extensive and expensive device labs to cover all these options and keep up with emerging ones is becoming more and more difficult for organizations.

The Future of Responsive Design

As we watch a continuous proliferation of devices, we can only expect this will continue in the future, and devices will become more fragmented. If you think developing and testing for responsiveness became difficult with the sheer number of phones on the market, it’s sure to become more difficult as the devices themselves become more distinct.

For example, as most mobile phones followed the lead of Apple’s original iPhone design to some extent, upcoming device releases are starting to follow new trends. For example, the Google Pixel 2XL, iPhone X, Galaxy S8, and Huawei Mate 10 are all showing that big screens and small bezels will be the preferred style as customers choose to upgrade.

When small devices are getting larger and large devices are going smaller, hardware companies are trying to gain a competitive edge with unique, breakthrough models, making it tougher to predict just how we’ll design applications to be truly responsive in the coming years.

Take the iPhone X, for example, the front of which is virtually entirely touchscreen except for one notch containing vital functionality components. Upon first look, the newest iPhone seems innovative and sleek. But for those who have to design with the notch in mind of UI/UX, it calls into question how we can make applications responsive to devices that will not fit the customary smartphone mold.

Additionally, while there’s certainly a number of different kinds of devices to choose from now — phones, tablets, desktops, laptops, notebooks, watches, etc. — it’s presumed that we’ll be connected to even more types of screens in the future with a projected 34 billion devices connecting to the internet by 2020, up from 10 billion in 2015.

Not to mention, screens may take different forms than the flat objects we’re used to now; they could be foldable, bendable, or expandable. As we begin to see new devices becoming more and more unique, it’s almost impossible to determine how we will meet the needs of futuristic responsive design.

So, how can testers continue to consider responsive design well into the future? Our advice is to gather device configurations as they’re released, master the balance between manual and automated testing, and follow a set mobile testing strategy.

Created with Canva

What it Takes to Build Your Own Mobile Device Testing Lab

May 16, 2017 By Alex McPeak Leave a Comment

Whether you’re a freelance designer or a full-time QA engineer at a large company, you know the value of cross-browser and mobile device testing. If you decide to DIY, you might be considering building a mobile device testing lab to ensure breadth, quality, and functionality across multiple devices. While we’d rather you use a platform like CrossBrowserTesting, and believe there are countless advantages, some companies have budget constraints or simply can’t take their testing to the cloud for other purposes.

But, before you go in headfirst and buy all brand new iPhones and Androids, there are a few questions you need to ask, steps you need to take, and follow-up procedures you need to prepare for.

Mobile Device Testing Lab Basics

What is a device lab? – A device lab is an environment where physical devices such as PCs, smartphones, and tablets are held and maintained to support testing and development needs.

Who uses device labs? – Anyone who is concerned with a website or application including web designers, developers, product managers, testers, and other software QA engineers or teams.

Why do I need a device lab? – Users aren’t on all the same high-performing devices that developers know to use. Having real, physical devices is pretty much the best method for conducting testing that represents a wide user base and accounts for responsive design. It’s also good to throw some emulators and simulators in the mix.

When should I use a device lab? – Having a device lab is necessary once you realize you need to be testing on more than one device and is a more accurate alternative to virtual machines.

Once you decide that a device lab is necessary to your testing strategy, you have to evaluate how it will benefit you and your team in order to consider more specific requirements.

Planning and Research

Buying a mobile device testing lab isn’t cheap. In fact, the average Android cost about $670, while iPhones come in at around $700. Just a few mobile devices will already put you in the thousands, but a more expansive device lab can put quite the dent in a company’s allowance.

Before anything, you need to decide on a budget for the amount of devices you’re going to buy, but it’s crucial that you first learn what devices your actual users are on so you don’t waste your time and money on the wrong devices.

The easiest and most effective way to see the devices, operating systems, and browsers your users are on is with Google Analytics. Google Analytics data shows the preferences of your majority traffic so you can test the exact devices visitors are accessing your web application on without the guesswork.

Furthermore, when testers largely live by the mantra to expect the unexpected, you should throw in a few older device and browser configurations for good measure, since that’s where the bugs are.

Additionally, you have to consider complementary expenses, since unforeseen costs can add up quickly. Maintenance costs, electricity, and Wi-Fi are just a few of the components that should be examined in cost evaluation.

For example, while putting all your devices on a general Wi-Fi network could affect performance and give inaccurate results, it may be best to have a designated device lab Wi-Fi if you have a good number of devices. Meanwhile, having all those devices running and consistently charging will surely rack up the electric bill.

Organizing and Maintaining Devices

Your work isn’t done after the logistics are all sorted; the fun has just begun!

Your device lab will require substantial organization and maintenance to prove useful, especially if it’s being accessed by multiple team members.

First of all, the degree of security your device lab requires depends on how many people will be using it.

For example, if an entire company can access a lab, you want to make sure the Wi-Fi network and devices are password protected so that only authorized users can get into them. You also need to have some sort of documentation or security to record who uses them to prevent theft or abuse.

There are also less severe breaches that will affect your test results if you don’t pay attention to the details. You want to make sure that each device is set so that its operating system doesn’t automatically update as they’re usually programmed to and that device lab users don’t initiate updates.

You also have to make sure the mobile device testing lab is organized for easy use. Labeling features of devices including make, model, screen resolution, and operating system will ensure they don’t get mixed up. Meanwhile, grouping devices by provider, size, or operating system will make it easier to find what you need when you need it.

Additionally, you need to find a setup that works to hold your devices. Whether that be a custom-made bookshelf like Etsy or a dish rack (an old CrossBrowserTesting technique), all devices should have designated place to stand and charge.

Last but certainly not least, you need to be revisiting that user traffic data on a semi-regular basis. This is because as new devices, operating systems, and browsers are released or gain popularity, you may want to include them in your device lab. Alternatively, it would be surprising if your user traffic data stays completely persistent over a number of months, so you want to make sure you are staying on top of those statistics and updating your devices.

Manual and Automated Testing

As we’ve stated before, there’s a time and place for both manual and automated testing, and your mobile device testing lab will have to work for both.

A device lab is an easier asset for anyone that primarily does manual testing. Having a selection of physical devices at-hand for UI testing will give you highly accurate insights into how users are interacting with your web application

However, if you want to try your hand at parallel testing to make things a bit speedier, a Selenium grid is the answer for running regression tests on multiple devices simultaneously.

If maintaining a lab becomes too much upkeep, it’s also worth considering a third-party cloud platform to complement or replace browser testing.

To learn more about building vs. buying a device lab, check out our eBook.

Read Now

How Android Fragmentation Complicates Application Quality

May 10, 2017 By Alex McPeak Leave a Comment

Android fragmentation map (Image credit: OpenSignal)

When there are more than 24,000 unique Android devices, fragmentation favors the consumer who loves choices but creates a massive headache for developers.

We already know that responsive design is a recurring challenge — we constantly need to be checking, testing, and optimizing web applications across desktops, tablets, and smartphones. When even the smallest discrepancies in screen size and resolution can impact the quality of the user’s experience, fragmentation creates problems for QA teams who know they need to test multiple devices.

But what is Android fragmentation exactly, and how does it affect software testing development? Let’s look at the statistics.

iPhone vs Android

If you look at the iOS device series history, the variations between Apple iPhones are minute. While an effective testing strategy should include a few iPhone versions, there are still only some models that haven’t gone obsolete. If you’re looking at majority, where iPhones older than the 4 only hold about .03 percent of the smartphone market.

However, though iPhone has lead the way for the look and build of today’s smartphones, the Android market does not match Apple’s consistency.

Between Samsung, Google, LG, HTC, Motorola, Blackberry, and Nokia (to name a few of the thousand brands), the range of manufacturers on its own ensures that these devices will not render developer code the same way.

While there’s already far more Android brands and models, this also means that new Androids devices are shipping 90 times more often than the one or two iPhones released every year. And, unlike the iPhone, Android user preferences among all these choices are not limited a couple of comparable devices but vary state to state and country to country.

Additionally, since iOS updates are automatic or otherwise prompted, most iPhone users are on either iOS 9 or 10. Meanwhile, Android users are on OS 2 to 6 and ever decimal in between (a.k.a. Gingerbread, Jellybean, KitKat, Lollipop, Marshmallow, etc.). In fact, only 1.2 percent of Android devices use the latest OS.

Android OS fragmentation Image via OpenSignal

Android OS fragmentation via OpenSignal

Android Fragmentation and Testing

Despite all of the shortcomings in fragmentation for developers, Android operating systems capture the majority of the market share for smartphones and tablets.

This makes sense, of course. Consumers are often drawn to Androids since they’re usually more cost effective. Meanwhile, companies like Samsung and Google have been releasing more competitive technology to peak buyer interest.

Moreover, because there are more models and more choices, the Android user base simply reflects the number of Androids.

While Android application design may be something software engineers want to avoid, the popularity of the devices proves that testing for this fragmented user base is imperative.

In this way, Android fragmentation truly emphasizes the need for cross-browser testing. Because the operating system versions, hardware specifications, screen sizes, and system UI all differ from device to device and brand to brand, test results will vary in the same way.

Having a device lab, or outsourcing test automation to a third-party cloud for parallel testing, is truly the only way to optimize usability for various Android devices in order to be inclusive of your current market as well as your potential market of mobile users. To learn more, check out our developer’s guide to cross-browser testing.

How you execute UI testing on all these different mobile devices? Tell us in the comments!

What to Avoid When Designing a Responsive Web Application

May 3, 2017 By Alex McPeak Leave a Comment

Remember the days when everyone had the same clunky desktop computer? Entire families shared time on one screen and dialed-up the internet; the Nokia 3310 was the norm, while Mac computers were a luxury.

However, today we have a countless number of options for communicating, browsing the internet, and completing tasks online, whether you’re loyal to Apple, or have come to prefer Android smartphones, Amazon tablets, and Microsoft PCs.

In many ways, this is a great thing — we’re convinced of our choices and hold our devices dear, although it has created a significant issue for our web designer friends. When every device, operating system, and browser responds to design differently, accommodating aesthetics on a countless number of configurations can be overwhelming.

Nonetheless, the multi-screen user demands responsive web design, so here are a few factors testers should keep an eye out for when cross-browser testing.

Readability

Smaller screens mean content will be naturally harder to read, especially if it’s not designed for different devices. Responsive web design means not just fitting a site to a screen, but optimizing it for that specific user’s experience.

No one wants to have to zoom in to view content. Instead, it should follow a layout that makes sense for varying screen sizes. Especially for older users or users with disabilities, if text content is too small, they’re probably not going to spend much time trying to figure out what your site says.

Ads and Popups

Too many times site owners will implement some kind of advertisement without making sure it’s responsive. As a result, customers end up visiting pages and encountering pop-ups that don’t explicitly allow them to exit or even continue using the page.

While pop-up call-to-actions and paid ads may be an integral part of your marketing strategy, consumers won’t buy if they physically can’t use the site — that’s just common sense. If your testing shows that pop-ups make it impossible for visitors to shop, it’s probably time to take another look at some elements of code in your overlay.

UX

It’s easy to think of responsive web design just in terms of visual layout, but to be truly responsive you have to consider the way a user interacts with different devices.

Simply put, on a laptop, you’re using a cursor and keyboard, while on most phones and tablets you’re using your fingertips. This is going to create an entirely different user experience as your point of touch is larger and less precise when you’re using your fingers on a smaller screen. This means that many of the functions, navigation buttons, and links that work for users on laptops and desktops might have to be altered to satisfy the mobile user

Rotation

Feeling overwhelmed by the number of devices, browsers, and screen resolutions you have to test for responsive web design? Bet you forgot about screen rotation.

That’s right, not only do you have to optimize your website for users on small, vertically positioned smartphones, you also have to test for what happens when someone turns their phone or tablet on its side to view content horizontally.

Additionally, there’s nothing that will turn a user away faster than telling them they have to turn their phone screen a certain to way view content. If you’re asking users to do this, you haven’t made your website responsive enough.

A word of advice — don’t make your application an obstacle course by requiring users to alter their preferences to accommodate your site.

Layout

When text, images, and other elements aren’t properly optimized for responsive web design, there are a few common annoyances that occur.

Wrapping – You know when a navigation bar or a word in a headline goes off-screen and continues on the next line? Yeah, that doesn’t look good to your users.
Spacing – Extensive white space between elements, unaligned text and images, and seemingly endless scrolling do not contribute to a happy mobile user.
Overlapping – Text and image overlapping is not only atrocious and unprofessional to look at, it’s also notably harder to read.
Distortion – When a text or image tries to fit a space it’s not designed for, your website will start to look like it went through a fun house where content stretches and condenses to try to fit.
Disappearances – Even less fortunate than wrapping and distorted elements, portions of fixed width images tend to disappear completely if they don’t fit onto the page.

Testing Responsive Web Design

While this may seem like a lot to take in if you haven’t yet approached responsive web design, it is crucial to test for these details.

While many of our shopping habits have predominantly moved online, marketers have realized the value of a mobile-first mindset, and responsive design is a requirement for retailers who want to keep customers on their site.

At the end of the day, no matter how a visitor gets to your page, they should all be afforded the same usability across devices and browsers. To learn more about designing for cross-compatibility, check out our designer’s resource.

What are the worst responsive design disasters you’ve experienced? Tell us about it in the comments!

The 5 Reasons Why Customers Leave Your Website

March 25, 2017 By Alex McPeak Leave a Comment

The numbers for your website don’t look too bad — you’re definitely getting visitors to your site, and the traffic seems to be increasing weekly. However, your bounce rate still makes you cringe, and it seems like you’re having trouble keeping customers on your page.

While a heavy traffic flow might make it seem like your engagement numbers are heading in the right direction, a high click-away diminishes attractive analytics.

Studies show you have 59 seconds to appeal to your visitors before they leave, so consider the common reasons customers might abandon your website after the minute’s up.

Distracting Design

Obviously, you want your website to look nice, but the bottom line is you want it to attract and retain customers, not deter them. Flashy colors, overloads of information, distasteful font choice and awkward layouts are just going to make a user abandon the site, even if the information is pertinent and the product is impeccable.

Not only does a good web design and clear navigation make the experience easier for the user, it also is the first impression you make on visitors. When 75 percent of users make judgments on a company’s credibility based on its website design, it’s imperative that your site is simple, visually pleasing and easy to use.

Neglecting Mobile

We largely consider a “mobile-first” approach necessary when considering the modern user. However, many site owners still fail to truly optimize responsive design for their mobile user’s experience. According to a Google survey, 67 percent of visitors were more likely to buy from a mobile-friendly website, while 61 percent were likely to leave if the site wasn’t mobile friendly. 74 percent said they were more likely to return to the website if the experience was mobile friendly the first time.

There really is no reason to ignore mobile users, and if you do, you’ll quickly see it affecting sales, conversion rates and site traffic. See your site across hundreds of different mobile devices with CrossBrowserTesting. You can learn more about designing for cross-browser compatibility here.

Overbearing Advertising

Whether it’s self-promotional pop-ups or paid features, an abundance of advertising is going to cost more money than it makes you when you find that customers are quickly deserting your web pages. The only thing worse than too many ads is video advertisement that automatically begins blasting sound, which will have visitors exiting out of their browser window before they think to pause or mute.

And speak of mobile-friendly web design, it’s crucial to make sure that the ads on your site don’t make it impossible to use on a smartphone, or users will have no choice but to leave.

Lagging Performance

Speed is a huge factor in today’s digital world that will either make or break your site’s performance stats. Today’s users don’t have the patience to wait around for your site to load. Instead, they’re more likely to go to a competitor when they experience lagging performance. In fact, 57 percent of people will abandon a page that takes more than 3 seconds to load and 51 percent of people say that it’s the number one reason they’d abandon a site.

Don’t let speed take a back seat to design, and make sure that interested customers are afforded a quick and easy experience so that they can effortlessly accomplish all their goals without being tempted to leave your page.

Irrelevant Content and Inconsistent Information

Like we said, high traffic numbers won’t do you any good if you have a high bounce rate to match. This is important to keep in mind when marketing your organization. Instead of trying to draw everyone to your site with click-bait that implies content you don’t actually answer, refine your message to communicate purpose for a specific audience.

By selecting a target market, optimizing SEO, and focusing on your brand rather than trying to offer information that can apply to everyone, the people who visit your page are more likely to find the product or information they sought out and won’t feel the need to look elsewhere.

This infographic was created by Performance Card Service.