Standards compliance has improved in modern web-browsers, removing a major source of frustration for any developer attempting to build websites for different browsers and devices. Gone are the days of chasing bizarre Internet Explorer 5 bugs long into the night. Google Chrome, Mozilla Firefox, Apple Safari, and even the much maligned Internet Explorer, have all raised the bar for standards compliance in their support for HTML, CSS, JavaScript and the W3C Document Object Model (DOM).
A common starting point for deciding which browsers and devices to support has been the graded browser support guidelines provided by Yahoo! The technical specification for any web project would often include a browser support table very similar to this. The target browsers, platforms and resolutions are laid out in a grid for the developer, and these form the basis of the user acceptance testing.
However, in recent years the challenge has evolved. While it is important to pay attention to general browser statistics and trends, it is perhaps more important to look at the figures for your own website. Google Chrome may be forging ahead in the battle for the desktop, but if your content is geared towards the user on the move, it’s far more likely that they’ll be reading it on Mobile Safari or WebKit for Android or Kindle.
Google Analytics is still the most widely used web statistics package, and now provides a wealth of information on browsers, operating systems and screen resolutions for your visitors, far beyond the traditional desktop. This is an invaluable tool for putting together an effective testing strategy.
With smartphone sales now comfortably outstripping the global demand for desktop PCs, and only likely to increase, mobile design and forward planning must be at the forefront of any website build. But with the range of devices used to view the internet growing exponentially, along with rapid improvements in screen resolutions, font rendering and bandwidth capabilities, how can you possibly hope to provide the same browsing experience to everyone?
Responsive and Progressive
The concept of responsive web design is an attempt to cope with the myriad capabilities of a fragmented browser market by using fluid or adaptive layouts to present content. Put simply, when you change the size of your web browser, the content resizes to fit. Responsive web design does this by using CSS media queries to determine the resolution of the device the page is being served on.
Responsive design is often associated with the concept of progressive enhancement. Here, the focus is firmly on content and functionality, rather than the peculiarities of any one device or browser. There is a clean separation of content (HTML), presentation (CSS) and behaviour (JavaScript), which means that enhanced functionality can be ‘layered’ on top of the basic level of user experience provided to everyone.
Test, Test and Test Again…
The popularity of responsive design and progressive enhancement techniques over recent years has meant that the developer no longer has to strive for a pixel perfect rendition of a design across as many web browsers as possible. It is acceptable for a site to appear without rounded corners and gradients in Internet Explorer 6 for example, so long as the content is readable and all of the links are navigable.
Nevertheless, websites should be tested as widely as possible and there are numerous tools available to help with this. Microsoft Expression Web SuperPreview, Adobe BrowserLab, BrowserStack and Screenfly all provide adequate methods for viewing your website across a wide range of device and browser combinations. However, nothing beats testing on the real thing, and often virtual machines running legacy browsers and a box of kindly donated old smartphones provide the best coverage.
