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:
- Screen size: This should encompass a variety of different resolutions for desktop and mobile devices.
- Connection speed: Testing across different connection speeds will help us understand how the site behaves and identify opportunities or weaknesses where we may need to effect changes.
- Pixel density: Some devices will support higher pixel density, which allows them to display higher resolution images or content. When designing sites (and particularly responsive ones), we clearly want to position our content in the right place on screen. The clarity afforded by high-resolution displays makes it easier to fine-tune how this content is displayed on screen; this will make it easier to view and fix any issues with displaying web content.
- Interaction style: The ability to view the Internet across different devices means that we should consider how our visitors interact with the site: is it purely on a desktop, or do they use tablets, smartphones, or gaming-based devices? It's most likely that the former two will be used to an extent, but the latter is not likely to feature as highly.
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:
- Does the website look good?
- Are there any known bugs or defects?
- Is our website really responsive?
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:
- GhostLab: https://www.vanamco.com/ghostlab/
- Muir: http://labs.iqfoundry.com/
- CrossBrowserTesting: http://www.crossbrowsertesting.com/
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:
- Am I Responsive: http://ami.responsive.is
- ScreenQueries: http://screenqueri.es
- Cybercrab's screen check facility: http://cybercrab.com/screencheck
- Remy Sharp's check site: http://responsivepx.com
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.