I recently developed a new website for UCATT, the union for construction workers. Most of their members do not work at a desktop PC - so it was vital for the website to display well on smartphones.

This is increasingly required for all websites, not just union sites. The biggest single change to website design over the last couple of years is driven by the increasing variety of screen sizes used to access them. Five years ago it was simple.

A website would be designed to perform well at a fixed size that fitted well with the average desktop screen of the day. Now, people are using smartphones and tablets of different sizes. Throw widescreen monitors into the mix and it’s clear that websites built for a single fixed width just don't cut the mustard any more. Research published by Adobe in March 2013 shows that on average 8% of website visitors use tablets while 7% use smartphones.

Other statistics show that in January 2013, 90% of screen sizes used to access websites were above 1024x768 resolution. While it’s now hard to buy any desktop screen that isn't a widescreen, an amazing proportion of websites are still fixed to around 950 pixels width, designed to display on old 1024x728 screens.

However, an increasing amount of websites (including this one) are using 'responsive' designs that automatically adjust to the different screen sizes. I thought I’d investigate how union websites are meeting this challenge. I tested the websites of 50 TUC affiliated unions.

The tests were done on a widescreen monitor, Google Nexus 7 tablet and Samsung Galaxy S3 smartphone. The full results are below: 

As you can see above, most union websites are still built to display on 1024x768 screens - which less than 90% of people are using - and so most union websites are yet to rise to the challenge.

This is understandable for older website designs, but less so for newer ones. However, some unions have taken the change in screen sizes on board. 11 of the 50 sites had some sort of responsive design, which is encouraging.

Responsive design enables a website to automatically adjust to different screen sizes, so, for example, when viewing the site on a smartphone, the content automatically fits the screen and does not require lots of zooming in and out.

Five of the fifty were built with widescreens in mind. Three of these (Community, NGSU and UCATT) had the optimal outcome of being responsive designs that worked well on both smaller devices and widescreen monitors.

Just one union, UCAC, had a dedicated, separate mobile site. This was a popular approach when smartphones first appeared, but dedicated  mobile sites have a number of problems which have since been overcome by responsive design.

See my mobile sites Vs responsive design article for more information. Eleven of the sites worked especially poorly on smaller devices. This was usually as a result of drop-down hover menus not designed to work on touchscreens, meaning that those users could not browse the site properly. In another five years’ time, I expect that almost all union websites will have a responsive design.

But unions must recognise how rapid the growth is in smartphone and tablet use. There is no excuse for members being unable to use their union's website on devices many of us use everyday.