It's time for a change

This website has served me very well for quite some time, but now it’s starting to look rather dated and doesn’t really give away much about me, my interests or my personality.

That’s changing slowly, and I’m writing this entry to explain and chronicle how my approach of ‘Cultured Localisation’ is informing the reimagining of and the design and engineering decisions I’m having to make.

I’m also taking a ‘Mobile First’ approach to the design, with the idea that no matter what device you visit this site on, you’ll always get the best possible experience.

What is Cultured Localisation?

I spoke at ScotRUG recently about a subject that’s quite close to my heart – localisation and how we need to understand other people’s cultures better before trying to ‘get into’ their market and start selling to them.

The video is available here if you want to watch it (thanks EdgeCase for hosting the video). I’ve got a tidied up version of the slides up on SlideShare so you can play along at home.

I’ve expanded on this a lot recently, coming up with an idea which I’m calling ‘Cultured Localisation’. The idea itself is nothing new or revolutionary. Simply, it outlines an approach to internationalising and localising an application which puts an important emphasis on the cultural differences between two different peoples; not just the linguistic ones.

The reasoning behind this is that in my experience, the parties performing the localisation or the parties instructing the work have the ‘wrong’ view on localisation and internationalisation. It’s a far deeper problem than just specifying dates, currency and number formatting or doing straightforward ‘swap this text for that text’.

Nuances to do with shapes and colours, prevalent tastes on how people consume information, how content is generally presented and the language used are all common stumbling blocks. To me, these are the challenges of localisation.

Cultured Localisation is about taking these things into account first, and building them into planning. It’s about disregarding assumptions and prejudices and learning first about your target audience and engaging with the problem in a human way rather than a technical one.

Challenges faced so far

The biggest initial challenge for the design of the new website was due to my decision to go ‘Mobile First’ – by designing initially for legibility on small screens, which meant putting a lot more thought than I usually do into typography. Luckily, Robbie Manson (@rougebert) was on hand to give his expert advice.

In the end, I picked Museo and Marie for the content on the English and French versions and Helvetica Neue / Arial for the Japanese version. The reason for the difference is largely aesthetic; when the kana and kanji of the Japanese text are rendered next to English text, the sans-serif look just works better.

I’m not a designer, but Twitter’s Bootstrap’s fluid grid seemed like a good place to start, so I used it and a cut down version of their browser reset as a basis for the CSS. That and a lot of testing with various mobile phones and tablet PCs.

I also had to pay close attention to the colours and textures used. I’ve picked muted, light and simple textures and general shades of white, grey and blue to keep the contrast quite high between the background and the presentation. This makes things much easier to read on a mobile device.

Colours themselves have a lot of cultural baggage associated with them. Depending on where you’re from; green, for example, can convey the idea of “good”, “money” or even “death”. The shades of blue and grey used were picked specifically for their lack of such ‘baggage’.

The important thing was to let the text speak for itself and convey the appropriate tone and meaning.

When thinking about how the text flows on the page; I had to give thought to how Japanese text can be presented. For content on the Internet, Japanese text generally flows from left to right horizontally.

Japanese text can also be written vertically, intended to be read from right to left and from top to bottom. While this is rare on the internet, switching the flow of text is common on real-world media like magazines and newspapers.

I’ll be writing a further post about how I’m displaying Japanese content, since it warrants a post of its own.

On the backend, the Radiant CMS has served me very well for years. It has quite limited support for multilingual content, but thankfully is very easy to extend. The existing multilingual plugin didn’t really do what I needed; so instead, I’m building (and currently testing) an extension which:

  • Looks for [lang].domain.tld – Using the ISO 639-1 language code, so fr for French, ja for Japanese and en for English.
  • Defaults to en
  • Loads the pages tagged by the appropriate lang
  • Lets me tag pages with the appropriate lang when editing them
  • Lets me have a homepage and hierarchy for each lang so I can more easily section off Content. This is particularly cumbersome and will probably need more work in the future – but will do for now!

For the sake of not repeating myself, I based some of the code on the multi site extension by Sean Cribbs and will be releasing the extension as soon as it’s ready.

Since the potential audience of my website could increase by an estimated 403,000,000 reference (but isn’t likely to); I decided the time was right to move whatever static assets I needed to serve, like CSS, javascript and images on to a CDN (in this case, Amazon’s CloudFront) to ensure that visitors who aren’t here in the UK won’t need to wait for these assets to travel the world to get to them.

Why am I doing this now?

This website first went online nearly 5 years ago. Since then it’s been a dumping ground for far too much stuff that I’ve shoe-horned in over the years with no real thought about sustainability in the long run.

Long, text-heavy posts like this one are largely unreadable, which is a big problem for a blog, and the existing site really doesn’t convey much about me, my passion for languages or my writing.

The current version also doesn’t have a consistent way to embed or style images, block quotes or objects in the content, since I never considered that I’d want to. Now I’ve had to think explicitly about how these should be handled, because of the ‘Mobile First’ approach I’m taking.