How to Test Responsive Web Design Cross-Browser Compatibility

HTML is an inherently fluid medium. Text and containers expand horizontally and vertically to use the available space. That fluidity made complex designs more difficult, so by the turn of the millennium, many sites adopted a fixed-width based on popular screen sizes.

The process remained viable as screen sizes kept increasing from 800×600 to 1024×768 and beyond. However, the rise of smartphones and the iPhone launch in 2007 reversed that trend. Today, more than half of users access web pages on a smaller mobile device.

Note: Technically, smartphones often have a higher resolution than many monitors, but individual pixels become invisible. An iPhone 11 Max translates its 2688 x 1242 hardware resolution to a more practical 896 × 414 logical resolution. Each logical pixel maps to a grid of 3×3 real pixels, which enables smoother fonts and increased image detail.

The initial workaround was two sites: one for desktop and one for mobile, often with user agent sniffing to redirect as necessary. This rapidly became impractical as the variety of devices grew exponentially.

Finally, the term Responsive Web Design (RWD) was devised by Ethan Marcotte in 2010. The technique allowed the same site to work on any device regardless of screen size or viewport dimensions.

How Does RWD Work?

There’s no single RWD approach or technology.

First, you must determine how a site design will react to differently sized displays. This is a challenge, and many of the first RWD sites took an existing desktop layout and removed sections as screen dimensions reduced.

A better technique was mobile first. It started with a linear mobile view, which worked on all devices then rearranged or adapted content as more space and supported browser features became available. More recently, many sites have adopted simpler layouts, where the mobile and desktop experience is mostly similar.

A typical example of RWD in action is the hamburger menu. Those on smaller screens can click an icon to view navigation links, while those with larger screens may see all the options in a horizontal list.

The following sections provide a number of technical implementation options.

HTML `viewport` Meta Tag

Regardless of any RWD technique, the following tag must be set in your HTML <head>:

<meta name="viewport" content="width=device-width,initial-scale=1">

The width=device-width setting ensures mobile browsers scale logical CSS pixels to the width of the screen. Without this, the browser will presume it’s rendering a desktop site and scale it accordingly so it can be panned and zoomed.

Media Queries

Media queries were the primary basis of the first RWD sites. They allow CSS to target specific ranges of viewport dimension. For example:

/* styles applied to all views */
p {
  font-size: 1rem;
}

/* styles applied to viewports
   with a width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {

  p {
    font-size: 1.5rem;
  }

}

Media queries are still used, although less explicit options are now available.

`<picture>` Elements

The HTML <picture> element uses media query syntax to control which image is displayed from a choice of <source> options. This is typically used for art direction in order to display a suitable image for device viewport. For example:

<picture>

  <!-- image shown when viewport
       width is greater than the height -->
  <source  srcset="landscape.jpg"
            media="(min-aspect-ratio:1/1)"
              alt="landscape" />

  <!-- default image -->
  <img src="portrait.jpg" alt="portrait" />

</picture>

CSS Viewport Units

The vw and vh CSS units represent 1% of the viewport’s width and height respectively. vmin is 1% of the smallest dimension, and vmax is 1% of the largest dimension.

These permit RWD flexibility, especially when used in conjunction with calc. For example:

/* font size increases with viewport width */
p {
  font-size: 1rem + 0.5vw;
}

CSS Columns

CSS multi-column layouts provide a way to create multiple text columns as the dimensions of a container increase. For example:

/*
columns must be a minimum width of 12rem
with a gap of 2rem between each
*/
.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

CSS Flexbox and Grid

CSS Flexbox and CSS Grid provide modern techniques which lay out child elements depending on their content and the space available. The primary difference:

Flexbox is used for one-dimensional layouts. Elements can wrap (or not) to the next line as necessary so columns may not line up.
Grid is for two-dimensional layouts, usually with identifiable rows and columns.

Either can be used to create an intrinsic layout (a term devised by Jen Simmons). In essence, elements are sized according to the viewport dimensions without the need for media queries. For example:

/*
Child elements will be at least 20rem and fill the row.
Displays smaller than 20rem will have elements sized to 1fr
(100% of the available width).

A 1rem gap will always surround elements.
*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

JavaScript RWD Options

JavaScript can also be used to determine viewport dimensions and react accordingly. For example:

// get viewport width and height
const
  vw = window.innerWidth,
  vh = window.innerHeight;

Similarly, the dimensions of an individual element can be examined with offsetWidth and offsetHeight, although the getBoundingClientRect() method can return more information including fractions of a pixel:

const
  element = document.getElementById('myelement'),
  rect    = element.getBoundingClientRect(),
  ew      = rect.width,
  eh      = rect.height;

Window and element dimensions can change as a device is rotated or the browser window is resized. The matchMedia API can parse CSS media queries and trigger change events:

// media query
const mql = window.matchMedia('(min-width: 600px)');

// initial check
mqTest(mql);

// call mqTest when media query changes
mql.addListener(mqTest);

// media query testing function
function mqTest(e) {

  if (e.matches) {
    console.log('viewport is at least 600px width');
  }
  else {
    console.log('viewport is less than 600px width');
  }

}

Browser Support

The RWD technologies above all offer good browser support. The most recent option — CSS Grid — is supported by almost 95% of browsers in use today. However, it’s still necessary to test your site across a range of devices, resolutions, and browsers…

In-browser Testing

Resizing your browser window is a reasonable testing strategy for a few hours, but it rapidly becomes inaccurate and cumbersome. Most browsers offer a Responsive Design Mode which lets you select a device and user agent, rotate it, choose a resolution, alter the pixel density, throttle bandwidth, emulate touch, and take screenshots.

In Firefox, select Responsive Design Mode from the Web Developer menu or press Ctrl | Cmd + Shift + M:

Firefox Responsive Design Mode

In Chromium-based browsers, open Developer tools from the More tools menu or press Ctrl | Cmd + Shift + I. Then click the Toggle device toolbar icon:

Firefox Responsive Design Mode

Switch back to the browser tab to view the resized site:

Chrome device toolbar

In Safari, enable the Show Develop menu in menu bar option from the Advanced tab of the browser Preferences. Load a page and choose Enter Responsive Design Mode from the Develop menu.

However, be aware that these tools only imitate a device’s screen dimensions and user agent. They cannot accurately emulate the following:

Rendering capabilities

The browser will use its own rendering engine — not that of the emulated device. A CSS feature that works in Firefox would “work” on its emulated iPhone view regardless of actual support. That said, Chrome desktop will show a reasonable approximation to Android Chrome, and macOS Safari will be similar to the iPhone because they’re based on the same rendering engines.
Older devices

Testing the iPhone browser view on the latest version of Safari cannot accurately represent older devices with legacy operating systems and software.
High-density displays

You’re limited to your PC monitor’s physical pixels, so a site may look better or worse on a real device.
Touch

A mouse or trackpad has finer control than a touch-screen device with a small display. It may be impossible to view effects applied on-hover.
Processing speed

Your PC is likely to have a faster network and processing speed than a mobile device.

Mobile OS Emulators

Running an Android or iOS virtual machine on your device allows you to install and run real mobile browsers and use their actual rendering engines.

Android emulators include:

Genymotion: free and commercial cloud options, all Android versions for Windows, macOS, and Linux
Android Studio (and Emulator): free, Windows, macOS, and Linux
Visual Studio Xamarin (and Emulators): commercial, Windows and macOS
Bliss OS: free, Android 9 for Windows, Linux, and Chrome OS
Phoenix OS: free, Android 7.1 or 5.1 for Windows and macOS
Android-x86: free Android ISOs for any virtual machine platform.

Chrome is the obvious browser choice for Android, but you can also install Opera Mini, which is prominent on lower-powered feature phones.

Options for iOS are more limited:

Apple Xcode (and Emulator): commercial, macOS
Electric Mobile Studio: commercial, Windows
iPadian simulator: commercial, Windows

These emulators still have downsides:

The software requires some technical expertise and uses considerable system resources.
Many iOS options are simulators. They adapt another rendering engine and will not always be accurate.

Online Testing Services

This segment was created in partnership with LambdaTest. Thank you for supporting the partners who make SitePoint possible.

Several online services allow you to test responsive pages on mobile browsers over the Web. In essence, you rent time on a real device and can view its screen in your browser. There’s no software to set up or maintain.

As well as live testing, some services include automated testing APIs which allow you to run scripts and check for styling regressions or broken user interfaces.

LambdaTest provides more than 2,000 combinations of device, OS, and browser. Features include:

testing localhost pages running on your development PC
debugging with integrated developer tools
geolocation testing from different locations
automatically generated, full-page screenshots across multiple devices
a built-in issue tracker
LT Browser software (Windows, macOS, Linux) to test and compare devices with auto-reload and scroll sync
Selenium-based automated test APIs
24/7 support
a free plan with unlimited access from $15 per month.

Sign up for a free LambdaTest account …

LambdaTest live view

Alternative services which also provide live and automated mobile testing include:

Real Device Testing

Finally, there’s no substitute for testing on real devices. It’s the best way to assess actual processing speed, touch control, and your site’s responsive web design.

Ideally, you should test as many devices as possible, but your own recent smartphone may not be indicative of average hardware. Try to obtain mid-range devices that are a year or two old, such as a second-hand Moto G7 or iPhone 8.

Devices on the same network can access your PC’s server by entering its IP address in the browser. This can be obtained with ifconfig on macOS and Linux or ipconfig on Windows.

You can also connect a smartphone to your PC with a USB cable. This allows you to remote-control the device and easily access its developer tool panels for debugging. The technique varies across platforms but, to debug Android Chrome on the desktop edition of the browser:

On the Android device, select Developer options from the Settings and enable USB debugging.
Connect the device to your computer using an appropriate USB cable. The first time you attempt this, you may be prompted to confirm actions on one or both devices.
Launch Chrome on your PC and open in a new tab. Ensure Discover USB devices is enabled.
Optionally, set Port forwarding — for example, port 8888 on the remote device can be forwarded to localhost:8888.
Your device should appear in the list. You can now inspect a new or existing tab which opens the device’s developer tools:

remote device DevTools

To debug Safari for iPhone, do the following:

Connect your phone to your Apple computer.
Open the web page you want to debug in Safari on your iPhone.
Launch Safari on your computer.
In Safari on the computer, go to Develop > [your iPhone] > [website to inspect]. This will open Safari’s developer tools on your computer, allowing you to debug the site on your iPhone.

One Site, Many Views

Responsive Web Design technologies allow you to create a single website which can be viewed by anyone on any device regardless of technical limitations and boundaries. Making it a great user experience is another matter, but the range and capabilities of testing tools continues to improve.

Frequently Asked Questions on Responsive Web Design and Cross-Browser Compatibility

What is the importance of responsive web design in today’s digital landscape?

Responsive web design is crucial in today’s digital landscape due to the proliferation of various devices with different screen sizes. It ensures that your website provides an optimal viewing experience across a wide range of devices, from desktop computers to mobile phones. This means that no matter what device a user is using, they can easily read and navigate your website with minimal resizing, panning, and scrolling. This enhances user experience, which can lead to increased customer engagement, higher conversion rates, and improved search engine rankings.

How does cross-browser compatibility affect the performance of a website?

Cross-browser compatibility is about making your website or web application function correctly in different web browsers. It ensures that your website’s features and functionalities work as intended, regardless of the browser used by the visitor. This is important because not all browsers interpret code in the same way. If your website is not cross-browser compatible, it may not function properly or look the same in all browsers, which can negatively impact user experience and your website’s overall performance.

What are the common issues encountered in responsive design and cross-browser compatibility?

Some common issues in responsive design include images not resizing correctly, text becoming unreadable on smaller screens, and navigation menus not functioning properly. For cross-browser compatibility, issues may arise from different browsers interpreting code differently. This can result in inconsistencies in how your website looks and functions across different browsers. These issues can be addressed through thorough testing and using standardized code that is compatible with all major browsers.

How can I test my website for responsive design and cross-browser compatibility?

There are various tools available for testing your website’s responsiveness and cross-browser compatibility. For responsive design, you can use tools like Google’s Mobile-Friendly Test or Responsively App. These tools allow you to see how your website looks on different screen sizes. For cross-browser compatibility, tools like BrowserStack or the testing features in modern web development environments can be used. These tools allow you to test your website in different browsers and identify any issues that need to be addressed.

What are some best practices for ensuring responsive design and cross-browser compatibility?

Some best practices for ensuring responsive design include using flexible layouts, flexible images, and CSS media queries. Flexible layouts and images ensure that your website content resizes correctly on different screen sizes, while CSS media queries allow you to apply different styles for different devices. For cross-browser compatibility, it’s important to use standardized code and avoid browser-specific features. It’s also recommended to test your website in different browsers regularly to identify and fix any issues.

How does responsive design and cross-browser compatibility affect SEO?

Responsive design and cross-browser compatibility can significantly impact your website’s SEO. Google has stated that it uses mobile-friendliness as a ranking factor, so having a responsive design can improve your website’s search engine rankings. Similarly, if your website is not cross-browser compatible, it may not function properly for all users, which can lead to a higher bounce rate and negatively impact your SEO.

What is the role of CSS in responsive design and cross-browser compatibility?

CSS plays a crucial role in both responsive design and cross-browser compatibility. In responsive design, CSS media queries are used to apply different styles for different devices, ensuring that your website looks good on all screen sizes. For cross-browser compatibility, using standardized CSS code helps ensure that your website looks and functions the same in all major browsers.

Can I use JavaScript to enhance responsive design and cross-browser compatibility?

Yes, JavaScript can be used to enhance both responsive design and cross-browser compatibility. For responsive design, JavaScript can be used to dynamically adjust content based on the screen size. For cross-browser compatibility, JavaScript can be used to detect the user’s browser and apply browser-specific fixes if necessary. However, it’s important to use JavaScript judiciously as excessive use can slow down your website and negatively impact user experience.

How can I ensure that my website’s images are responsive?

To ensure that your website’s images are responsive, you can use CSS to control the width and height of the images. By setting the width to 100% and the height to auto, the images will scale correctly based on the screen size. You can also use the picture element or srcset attribute in HTML to serve different images based on the screen size.

What are some common mistakes to avoid in responsive design and cross-browser compatibility?

Some common mistakes to avoid in responsive design include not testing your website on different devices, not considering touch interfaces, and not optimizing images for different screen sizes. For cross-browser compatibility, common mistakes include not testing your website in different browsers, using browser-specific features, and not keeping up with the latest browser updates. Avoiding these mistakes can help ensure that your website provides a consistent and optimal user experience across all devices and browsers.