This post is a quick overview of the Te Ara redesign. If you have any questions, let us know in the comments below.
If you take a look at Te Ara today, you’ll find a few things have changed around here. We’ve had a redesign!
Last year we noticed people were having problems navigating through our stories and weren’t noticing some features. Also, anecdotal evidence suggested that many people loved reading Te Ara, but not on screen, which is a bit of a worry … for a website. A full site redesign is always going to be very time consuming and there is temptation to make radical changes. The danger is that radical changes can introduce as many issues as they solve.
However, a lot has changed in the world of the web since Te Ara was first launched in 2005, and we decided it was time for some improvements and a freshen-up.
The redesign keeps many elements from the original Te Ara design, but we made six main changes…
1) Improving the presentation of content
Enlarging the size of the content area meant the size of text could be increased. As well as increasing the font size, the stories now have larger margins, bigger line spacing and other changes that make the text easy to read or scan through. Also, the off-white background used in the redesign reduces eye-strain during long stints of reading, while maintaining ideal text contrast.
2) Better display for the main navigation
Te Ara has a really handy multi-column browser that allows you to find Te Ara’s stories through different categories. Chances are you didn’t know that, as only about 2% of users opened it. In the redesign the first column of categories is displayed as horizontal navigation items.
The categories take you to a new full-page browser that allows for much larger text and longer story names.
3) Better display for the ’short story’
Every story on Te Ara has a ’short story’ – an easy-to-read summary created for younger readers, but which also serves as a quick overview of the full story. The short story (like the browser) was hidden away and (also like the browser) only a small percentage of users found it. To simplify the structure of the stories – and to help people find the short story – we merged it with the story front page.
4) Improve usability
Improving usability was probably the most complicated of the changes. We were lucky to work with Optimal Usability, who helped us resolve some of the issues with the site. We made a lot of changes to the way you navigate each story and how your position in the story is displayed.
5) Modernise the look and feel
After attending Daniel Burka’s ‘Creating simple: Techniques for simplifying your UI and your CSS/HTML’ workshop at Webstock last year, I started considering ways of simplifying Te Ara. I could go into a lot of detail about the changes, but the main change I made to the design was to remove as many unnecessary elements as possible.
The old design had a lot of containers, highlighted above.
In the new design the only containers left outside the main article space are there to group menu elements and increase the text contrast. This goes a long way to making the design feel clean and simple, as well as help users make their way around the different sections of the page.
6) Simplify the HTML & CSS, and speed up the performance of the site
At the same workshop, Daniel showed us a way to use PHP to generate CSS, allowing the use of variables… whoops, I am getting a bit technical. The essence is that Te Ara’s 50 colour schemes could be generated in a much simpler way. We also moved to HTML5 and CSS3, which allow us to drastically reduce the amount of code – this makes the web pages load faster in your browser, and makes it easier for us to change things behind the scenes. CSS3 features such as opacity and rounded corners are only supported by the latest browsers, but degrade gracefully in older browsers.
There are a lot of other techniques we used to improve the performance of the site and we’re still looking at ways to better optimise the new design.