The Te Ara Redesign

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.

That’s enough from me, go browse the site, read a short story, read a full story or two, explore the images and media, and come back here and let us know what you think.

6 comments have been added so far

  1. Comment made by Miriam || October 3rd, 2011

    I love the new look! It’s much easier for young learners like the kids at my school to get straight to the content that’s right for them (i.e. the Short stories 🙂 And I think the new keyword browsing will open them up to a whole lot of stories they may not have found before.

  2. Comment made by mafalda || October 3rd, 2011

    Congratulations for the new site!
    It’s really easier to navigate and read, and prettier 🙂

    So far I just can point out few things I don’t like:
    – The home page master head (banner) is too big! It uses almost half of my screen, pushing down key content
    – Not sure about the back to top icon located on the left hand side, labelled as ‘Page top’, and placed in the footer rather than at the bottom of the content.

    Apart from that, well done guys!

  3. Comment made by Heath Sadlier || October 3rd, 2011

    Thanks Miriam! The keyword browser also takes people straight to The Short Story, so it’s also the easiest to navigate to. Glad you like it!

  4. Comment made by Heath Sadlier || October 3rd, 2011

    Thanks Mafalda! The size of header on the homepage was debated at length. It’s the one place we can grab new users and explain to them what this Te Ara thing is.

    We realised it would potentially frustrate regular users. We’re already looking at making some changes to the homepage, so we’ll do some more testing. In the meantime you could bookmark:

    We’ll also have a look at the ‘Page Top’ link.

    Thanks again!

  5. Comment made by Jim || October 3rd, 2011

    Congrats – choice work! Great new content layout and overall simplification is well done. Not sure if it’s new or not but whoever worked the Te Ara logo into a favicon deserves a pat on the back 😉

  6. Comment made by malcolm || October 3rd, 2011

    I think the redesign is great . . . . so don’t put too much weight on my raising just one issue . . . but . . . can the search tool for the 1966 encyclopedia be modified – when you search under 1966, results for Te Ara display on the screen and are highlighted, with 1966 simply listed. Compare this with searching from DNZB: DNZB search results are highlighetd.

Leave a comment

By posting comments you signify that agree to and accept the Terms and Conditions of this Blog.