Increasing numbers of visitors to our website – currently around a third but its rising all the time – visit on a “mobile device” such as a smartphone or tablet. The website really wasn’t designed with such devices in mind and doesn’t work very well on them – but we’re making changes to improve this.
First off is a new main menu. Previously the menu was a “hover” type menu – you hovered over the top links to show the items underneath. Obviously hovering doesn’t work well on touch screens! This meant that selecting the item you wanted was tricky. The new menu that has just “gone live” today is a “click” menu – you have to click the top link to show the items under it. This is much better for touch screens and better for accessibility generally – even if you move the pointer, or your finger, off the menu it stays open until you click to close it, open another menu, or click somewhere else on the web page.
The menu also “collapses” into a so-called “hamburger” style on small screens. You will have seen these on other websites if you browse on mobile devices – an icon with three horizontal bars that you click on to reveal the menu. This also improves the experience on mobile devices.
We have to give credit for the inspiration and the basic code to Tania Rascia’s blog post Responsive Dropdown Navigation Bar.
Look out for further “mobile friendly” changes soon!