
Which union websites work well on smartphones, tablets and widescreens?
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:
Union | Website performance on smaller devices and widescreens | Maximum width | Seperate mobile website | Responsive design |
Designed to be smartphone, tablet and widescreen friendly with responsive design: | ||||
Community | Very good - responsive design automatically adjusts to the smaller devices. Works very well on widescreens too. | 1280px | No | Yes |
NGSU | Very good - responsive design automatically adjusts to the smaller devices. Works very well on widescreens too. | 1140px | No | Yes |
UCATT | Very good - responsive design automatically adjusts to the smaller devices. Works very well on widescreens too. | 1170px | No | Yes |
Designed to be smartphone and tablet friendly with responsive design, but does not adjust for widescreens: | ||||
GMB | Good - responsive design automatically adjusts to the smaller devices. | 960px | No | Yes |
NACO | Good - responsive design automatically adjusts to the smaller devices. | 960px | No | Yes |
NASUWT | Good - responsive design automatically adjusts to the smaller devices. | 973px | No | Yes |
RMT | Good - responsive design automatically adjusts to the smaller devices. | 992px | No | Yes |
TSSA | Pretty Good. Responsive design automatically adjusts to the smaller devices, but the navigation is at the bottom of the page, making it unintuitive to find. | 995px | No | Yes |
Unity | Good - responsive design automatically adjusts to the smaller devices. | 960px | No | Yes |
Responsive design for smartphones and tablets, but with significant problems undermining the design: | ||||
Chartered Society of Physiotherapy | Mixed. There is a great responsive version for smartphones which works very well, but it doesn't adjust to tablet resolutions. This is made worse as the drop down navigation does not work properly on touch screens. As a result, this website is great for smartphones but almost unusable on the tablet. | 968px | No | Yes |
FBU | Poor. This is a strange website design, as even though the design is responsive, the hover menus don't work on touch screens so very difficult to navigate on smaller devices, undermining the responsive design. | 940px | No | Yes |
A dedicated, separate mobile version of the website: | ||||
UCAC | Limited. A dedicated mobile site. Only a small amount of content available on the mobile site and link to full site doesn't work so can't access most of the website content on the smaller devices. | 815px | Yes | No |
Made with widescreens in mind, but not smartphones or tablets: | ||||
BECTU | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. Works very well on widescreens though. | 1195px | No | No |
SURGE | Poor on smaller devices. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. Works well on widescreens though. | 1242px | No | No |
Designed for the old 1028x768 (or even older) standard, but still works OK on other screen sizes: | ||||
Advance | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 975px | No | No |
ATL | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 960px | No | No |
BACM Team | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 100% with margin | No | No |
BALPA | OK to Poor. Navigation hover menus don't work on tablet or smartphones, but there is another navigation option, so the site can still be used. | 957px | No | No |
BDA | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 810px | No | No |
BFAWU | OK to Poor. Navigation hover menus don't work on tablet or smartphones, but there is another navigation option, so the site can still be used. | 990px | No | No |
BIOS | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 919px | No | No |
BSU | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 750px | No | No |
CWU | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 959px | No | No |
EIS | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. Drop-down menu works on touch screens. | 980px | No | No |
Equity | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 980px | No | No |
FDA | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. However, as the width is set to 100%, the site expands too much on a widescreen, making it difficult to read the main page text. | 100% | No | No |
HCSA | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 940px | No | No |
Musicians’ Union | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 975px | No | No |
NACODS | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 100% | No | No |
NASS | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 970px | No | No |
Nautilus | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 950px | No | No |
NUJ | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 960px | No | No |
NUT | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 994px | No | No |
PCS | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out.. | 979px | No | No |
POA | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 960px | No | No |
Prospect | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 920px | No | No |
Society of Chiropodists and Podiatrists | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 940px | No | No |
UCU | OK to Poor. Navigation hover menus don't work on tablet or smartphones, but there is another navigation option, so the site can still be used. | 800px | No | No |
UNISON | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. Cannot get rid of the annoying cookie pop up warning on smartphone though. | 962px | No | No |
UNITE | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 1002px | No | No |
USDAW | OK. No problems, but not made with smaller devices in mind, so plenty of hand scrolling needed to zoom in and out. | 960px | No | No |
Websites that don't work properly on smartphones and tablets: | ||||
Accord | Poor. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. | 942px | No | No |
Aegis | Poor. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. | 840px | No | No |
AEP | Poor. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. | 800px | No | No |
ASLEF | Poor. Not made with smaller devices in mind and drop down hover menus don't work on touch screens so very difficult to navigate. | 770px | No | No |
FBU | Poor. This is a strange website design, as even though the design is responsive, the hover menus don't work on touch screens so very difficult to navigate on touch screen devices. | 940px | No | Yes |
NAPO | Poor. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. | 920px | No | No |
NUM | Poor. Not made with smaller devices in mind. Site contains Flash technology which cannot be displayed on most smaller devices. | 960px | No | No |
Society of Radiographers | Poor. Not made with smaller devices in mind and drop down 'mega menu' does not appear on touch screen devices and so can't navigate to most of the content. | 960px | No | No |
SURGE | Poor on smaller devices. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. Works well on widescreens though. | 1242px | No | No |
URTU | Poor. Not made with smaller devices in mind and hover menus don't work on touch screens so very difficult to navigate. | 750px | No | No |
The Writers’ Guild of Great Britain | Poor. Not made with smaller devices in mind and drop down hover menus don't work on touch screens so very difficult to navigate. | 980px | No | No |
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.
Comments
The new UCATT website which…
The new UCATT website which has only been up and running for a fortnight is already generating 30% extra traffic. We have had very positive feedback from members, who now have the opportunity to view it while on breaks at work on their smartphones.