Responsive Web Design: Why one site can behave differently on different PCs and browsers

Most of us visit a few websites regularly, and our familiarity with those sites speeds up our use of them. A well-structured website is a pleasure to use with JAWS, thanks to all the navigation quick keys that provide for moving by common elements such as links, form controls and headings. You can also invoke lists of these elements, which may help you navigate the site more efficiently.

As we become more familiar with favorite sites, we have the option to customize our experience even further, using tools like place markers, Flexible Web and even scripts. These tools are particularly helpful when on the job, where it’s important to get at the exact information you need as quickly as possible.

One question we get asked regularly relates to seemingly odd behavior, where you use a different browser on the same system, or your usual browser on another machine, and the site doesn’t behave as you expect. Perhaps you have a desktop PC at work, and a Windows tablet for personal use, and the sites look and feel very different despite both PCs running the same version of Windows and JAWS.

That’s certainly confusing and frustrating. What causes it?

Before answering that specific question, let’s take a slightly wider view. When you visit a website, the experience you receive might vary depending on several factors. First, websites can receive information about the kind of browser you’re using to access them. While it’s becoming less common, some sites will still serve up a completely different, scaled-down site when a mobile browser, such as those found on Android and iOS, is detected. In that case, most mobile browsers provide for you to override this default behavior on the part of the website, and show you the full “desktop” site.

As for why you’re getting a dissimilar experience on the same operating system using different machines or browsers, the most common reason for the variation is a technique known as “Responsive Web Design” or RWD for short. For those interested in a more developer-friendly explanation of this concept, you can read this Wikipedia article.

In practical terms, RWD means that one website can serve a range of devices and device configurations. It’s great for the site’s developers and content creators because there is only one site to maintain. It’s a good thing for consumers because you don’t have to be concerned about whether a feature is available on the version of the site you’re visiting.

That said, RWD may cause some features to be invisible depending on your screen size. For example, let’s say you visit a site with a common menu of links to key sections of the site. If you visit with your window maximized and your zoom level set to 100%, the site may detect this, and expand the menu for you, making the links and text easier to locate. However, if your window isn’t maximized or your zoom level is lower than 100%, the site may make an intelligent decision to collapse that common set of links in the interests of best using the limited screen real-estate available. If the site makes appropriate use of text on its links, you’ll usually be able to locate a link to expand the menu. That’s fine when you know what’s going on, but if you search for content you know is there using a technique like the JAWS Find command or the links list, and you get told that the text isn’t found even though you definitely saw it there on another PC or browser, it can be disconcerting.

The solution is often a simple one. You can increase your chances of getting a consistent user experience across browsers and devices by following a couple of steps.

First and most important, make sure the zoom level in your browser is set to 100%. This can be done by tapping the ALT key and navigating whatever options are offered. Not all browsers offer a full menu bar nowadays, but a zoom option will be available. In Microsoft Edge, you can press control+0 to return to the default zoom level of 100%.

Second, if your browser supports it, it’s a good idea to maximize the browser window, ensuring you have the most screen real-estate possible.

Being aware of, and responsive to responsive web design can help you get the most consistent, easily-searchable experience across browsers.

Finally, as this is our last blog post for 2017, may I thank you for reading these posts, and wish you a safe and restful holiday season. We’re looking forward to being back with you in 2018 to bring you news from the cutting edge of assistive technology. There are going to be plenty of exciting developments to cover in the coming year.