At this stage, our site would be optimized and tested for performance, but what about compatibility?
Although a wide range of available browsers have remained relatively static (at least for the ones in mainstream use), the functionality they offer is constantly changing; this makes it difficult for developers and designers to handle all of the nuances required to support each browser.
In addition, the wide range makes it costly to support. In an ideal world, we would support every device available, but this is impossible; instead, we must use analytical software to determine which devices are being used for our site and therefore worthy of support.
If we test our site on a device such as an iPhone 6, there is a good chance it will work as well on other Apple devices, such as iPads. The same can be said for testing on a mobile device such as a Samsung Galaxy S4; we can use this principle to help prioritize support for particular mobile devices, if they require more tweaks to be made than in comparison to other devices.
Ultimately though, we must use analytical software to determine who visits our site; the information such as browser, source, OS, and device used will help determine what our target audience should be. This does not mean we completely neglect other devices; we should try to ensure they work with our site too, but this will not be a priority during development.
A key point to note is that we should not attempt to support every device; this is too costly to manage, and we would never keep up with all of the devices available for sale! Instead, we can use our analytics software to determine which devices are being used by our visitors; we can then test a number of different properties:
Once we've determined which devices we should be supporting, then there are a range of tools available for us to use, to test browser compatibility. These include physical devices (ideal, but expensive to maintain), emulators, or online services (these can be commercial or free). Let's take a look at a selection of what is available, to help us with testing browser compatibility.
When we plan to test a mobile or responsive website, there are factors which we need to consider before we start testing, to help deliver a website which looks consistent across all the devices and browsers. These factors include answering these three questions:
To help test our sites, we can use any one of several tools available (either paid or free); a key point to note though, is that we can already get a good idea of how well our sites work, by simply using the Developer toolbar that is available in most browsers!
Granted, it's not something we should absolutely rely on, but it provides a perfect starting point. We can always move up to a commercial option when we've outgrown the capabilities offered in a browser. Let's take a brief look at what's available:
We can easily emulate a mobile device within Chrome, by pressing Ctrl + Shift + M ; Chrome displays a toolbar at the top of the window, which allows us to select different devices:
If we click on the menu entry (currently showing iPhone 6 Plus) and change it to Edit, we can add new devices; this allows us to set specific dimensions, user agent strings, and whether the device supports high-resolution images:
Let's switch now, and take a look at the options available in Firefox.
The responsive design view option is available using the same Ctrl + Shift + M option as Chrome; we can also access it by navigating to Tools | Web Developer | Responsive Design Mode from the menu.
When the mode is activated in Firefox, we can switch between different screen sizes:
Although browsers can go some way in providing an indication of how well our site works, they can only cater to a limited range of views. Sometimes, we need to take things a step further and use commercial solutions to test our sites across multiple browsers at the same time. Let's take a look at some of the options available commercially.
If you've spent any time developing code, then there is a good chance you may already be aware of Browserstack (from https://www.browserstack.com). Other options include the following:
If, however, all we need to do is check our site for its level of responsiveness, then we don't need to use paid options. There are a number of sites that allow us to check, without needing to install plugins or additional tools:
We can also use bookmarklets to check to see how well our sites work on different devices—a couple of examples to try are at http://codebomber.com/jquery/resizer and http://responsive.victorcoulon.fr/; it is worth noting that the current browsers already include this functionality, making the bookmarklets less attractive as an option.