Which union websites work well on smartphones, tablets and widescreens?

by / Tuesday, 15 October 2013 / Published in Blog
widescreen

 

UCATT responsive website

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 1024×768 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 1024×728 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 1028×768 (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 1024×768 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.

One Response to “Which union websites work well on smartphones, tablets and widescreens?”

  1. 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.

Leave a Reply

TOP