Being a WordPress Agency.
Form follows function – the mantra runs deep in our culture and we’re striving to improve our digital services.
The last batch of testing was centered around the User Experience on differing devices and it came as no surprise that old-fashioned desktop fonts don’t always work as well on different devices.
The areas that needed attention were:
- Page Layout. Despite working really well on widescreen large format devices (that’s desktops to you and me), the layout got very busy and “scrolly” on narrow format devices.
- Readability. Reading on a narrow format device creates challenges for multi-column web-sites like ours. It squeezes the line length and increases the number of “right-left” scans required by the eye.
After a great deal of testing and evaluation, we came up with a number of core changes to layout, typography and content.
Not jumping gun
With WordPress, it’s sometimes too easy to make changes just for the sake of it. In fact the testing phase on our staging server went through nearly 20 different revisions before we settled for a top 3.
Next up was a user test. An external user group was created with a clear brief to test each of the variations when attempting to complete a given set of tasks.
They were also asked for a subjective opinion. The testers were not shown, nor were allowed to compare the new variations against the existing site. After all, there was still a chance that the current site was actually better than the contenders.
Only time will really tell if the revisions have worked, but we’re expecting increased visit times and greater user depth per visit. In the past this has proven to increase enquiry volume and quality.
Modified Page Layouts
We’re built 100% on WordPress (we eat what we cook) so making site-wide layout changes is straightforward. This gave the opportunity to re-factor the core pages to use a small, local, navigation at the top left. This is easy to use and performs three functions:
- Allows a simple “jump” for the reader to micro-navigate the page. This was designed to work optimally on both narrow-format devices (by being at the top of the page) and standing out on wide format devices but sitting in a column by itself.
- Creates more whitespace to reduce the eye strain associated when moving off the end of the line to start of the next.
- A local index for the page. By listing the contents on the page, in testing it increased the page stickiness and provided a greater confidence that the reader was on the right page.
As part of the layout changes, we also reduced the use of inverted (white on black) text blocks that was drawing too much attention to themselves and, consequently distracting from the actual content.
Font Changes
With the increase of narrow-format devices, we had the challenge of reducing the overall width of the font and at the same time increase readability. Not as easy as it seems.
Since 1996 we’re used two 2 fonts for body text. For the first 12 years we used Verdana as is was accepted as the best compromise between readbability and load-speed (it came standard on most computers).
With the widespread adoption of web-fonts in the late noughties we made the leap to use Open Sans, served from Googlefonts server. It was a big improvement in readability, yet the “width” of the font is a problem on multi-column websites.
To fix this, we’ve adopted Roboto – it nicely complements our use of Roboto Slab for headings and standout items and is about 15% narrower, reducing the number of line breaks and hence making it easier to read.
It works really well on mobile, too. Which is important. We’d love to hear your thoughts and opinions.
