Translating Your Website

March 8th, 2010 · Web Design

I was involved in multi-lingual web development at Last.fm and on occasion am involved in such projects through my work on the team at Stink Digital. Both experiences represent very different problems, from translating a 15,000 word web site into 10 different languages, western and eastern, whilst the other providing a need to translate for both HTML and Flash. So what do you need and how do you go about getting your site translated?

Here are a few guides and tips for making the project as seamless as possible for you, your development team and your raft of translators and proof-readers:

Locale -The BIGGEST point of confusion, even on a small development team can be choosing your locale format. Locales are an ISO standard but everybody seems to have their own format whether country first and then language or vice versa, whether with hyphens or underscores, or even varying capitalisation. Simply choose one, then stick to it.
Character Encoding – Make sure that you are using UTF-8 or UTF-16 encoding type so that your documents can handle all of the required characters for your languages. The same will be required in your database and you will want to make sure your PHP, or other code, is set up to handle the right encoding so that you don’t jumble the text as you process it.
Use Standards – Rather than re-inventing the wheel, use an XML translation standard such as TMX, this means that you can use the same files across the board, whether in Flash, PHP, JS or even in the translation and proofing software. Seamless integration goes a long way.
Correct Assets – When working with fonts in Flash or using JS font replacement, you need to ensure that the fonts you are using include the right character sets. Fonts with both eastern and eastern character sets will obviously be MUCH larger in size.
Use Foreign Text Early – It’s super easy to develop a design that looks absolutely incredible in one language and hits the nail on the head, but taking that design and making it fluid enough to work with multiple languages is much harder, therefore take the opportunity to introduce foreign language into the design mix as soon as possible.
Translation Logic – Languages like Polish can have multiple versions of words for plurals dependent upon the number of items in the plural clause, therefore you will need to code with these things in mind, and bare it in mind when developing the design. Fluid options are a must, and try to avoid making your translators write code, however simple it might seem to you.
Connecting Content - In the design integrate a language selector, don’t use a language selector as a home/splash page. Also add META tags that alert Google and other search engine bots to the existence of alternate language copies of the page.
HTML Code – On top of connecting your content you will want to make sure that all the elements of the page that refer to a locale or language are optimised for that language from the head to the body.
Multiple Domains - A correct domain, combined with a proper language set up will ensure the right kind of visibility for your site in those foreign language search engines, therefore multiple local domains are the way to go for those interested in SEO-friendly multi-lingual setups.
Localised Images - To avoid the need for photoshop jobs down the road, and to maximise the benefit of SEO, place as MUCH text as possible in the HTML, and not into images. CSS can be loaded on a per locale basis, but having to do this saves time and increases site speed.

So there you have it. A few tips on making life easier for your entire dev, design and translation team. I hope you find them useful, and feel free to add your 2¢ below.

→ No Comments

Tips for Avoiding Slow Website Performance

March 7th, 2010 · Web Design

Having come across this article on Building43 “Excuses for Bad Web Performance“, I figured I would write up a quick guide to troubleshooting slow web site performance and some tips on avoiding it.

Why is this important? Well besides user-experience, and how people hate slow sites, it is also considered a factor in search engine ranking for sites, so here is my guide to optimisation:

Tools – Visualising Slowness

Use Y-Slow & Firebug: these 2 browser plug-ins are a great way to figure out why your site is so slow. Firebug has a net panel which shows you all the files downloaded for a page to load, the request times for them and the time it took to download them. These are obviously key pointers when the site doesn’t necessarily appear until a range of files are downloaded and in place.

Above and beyond these in browser plug-in you will want to consider using web site monitoring services that provide you with real-time charts and long-term analysis of your web sites performance from multiple locations around the world. Just because something is fast for you doesn’t mean the same will be the case for users everywhere!

Reduce File Requests

Reducing the number and size of requests, i.e. to pack as much JS and CSS into single files, and to optimise and minify the code is also a good idea to help improve speed of requests to load a page. Once the file has been downloaded the first time, the file will be cached int he end users browser, but there is always the initial hit.

To this end, there are hosted libraries on Google APIs which are being used across a lot of sites, to this end, you can potentially save yourself a request or two for these files by using these shared, remotely hosted files. Moreover, even if the files are not already cached in the site visitor’s browser, the fact the file comes from a remote host means that it will be downloaded concurrently, alongside other files from your servers, and help speed up the load time.

On the flip side, if any specific host is taking ages to respond to requests, you need to identify this and remove it from the mix as quickly as possible. On a high traffic site this could mean affecting hundred or thousands of visitors, though even on a single site with low volume traffic, it’s not nice to push your visitors away with blank browser windows for seconds and seconds.

Lazy Loading & Optimised Images

Lazy loading uses the idea that you do not load content into the page until the site visitor is ready to see it. Imagine a collection page with 250 images in the gallery and then trying to load them all in at once, despite the visitor only seeing 10 at a time. Why load in 3MB of data when you can load in 200KB for example. It’s doesn’t make sense, therefore use JS to load them in “on paging” as the gallery scrolls, or load the page and then load the images in via the background with JS.

On top of lazy loading you might want to consider optimising your images, not just by compressing them to a minimum without loss of recognisable quality but also by using sprites for common web site assets such as logos and buttons. Sprites are where you place multiple image assets on a single canvas and then use background position in CSS to display the required asset in the HTML element. A single image load is much fast er than 2-3-4-5-6 and so on.

Multiple Hosts & Fast Static Servers

Even if going to the same directories on the server, it is worth setting up multiple hostnames for example www.domain.com & assets.domain.com to allow some of the content to be downloaded from one and other content to be downloaded from the other concurrently.

In addition to these multiple hosts you will want to ensure that any static content, such as image assets, JS and CSS comes from the FAST source. Given that ZERO evaluation needs to be processed before sending the request optimising that side of the equation is key to getting MASSES of images out via the network ASAP. Pushing content to a content distribution system helps with this.

Caching Through The Nose

When your site is being pummeled by requests and the database is being overloaded you need to cache as much content as possible. To this end you can run a data caching layer in the form of Memcached and you can use HTML caching such as Squid. It’s all about the reduction of processor time to get the content “out the door” and over to your clients. This kind of best practice is useful when you are working with heavy data-sets and web services, such as those used for open APIs at museums.

…on the edge of your seat? Click here to solve the mystery.

→ No Comments

How Well is Your Company Really Doing?

March 5th, 2010 · Opinion

You might be turning over millions of dollars a year, but the question still stands: How well is your company really doing?

I ask the question because yesterday I and a previous work colleague, who happens to have just started working with on the team with me again at Stink Digital, PASSED another ex-colleague in the street. All the more odd because we had been talking about how little we had bumped into EX’s despite plenty being in the vicinity of work or home.

Anyhow, in the process of my thoughts this morning, it occurred to me: “How many of your employees would likely stay in touch if they all split the company today?”

Sure we have Facebook and the like which makes it super easy to stay in touch, but does that really mean they would stay properly in touch or just stay in the back of the mind on some deserted friends list or limited profile?

The fact that I have stayed in touch with my good friend Zen, a spiffy flash developer, and encouraged him to start working for Stink Digital proves that the friendship is more than merely superficial, which I can’t say for all my ex-colleagues that I am connected to on Facebook or other social networks.

So on that basis, wouldn’t the question: “How many current work colleagues would you stay in touch with if you left the company tomorrow?” acts as a pretty simple, quick and easy-to-take straw poll as a barometer of the state of personal relationships within your company.

Let’s take an average as a percentage of your company’s workforce and what does that tell you? How much do you employees value each other? Do they really like working together? How much productivity are you actually getting out of them? Can it be improved with better people skills? All great questions which could be answered relatively well by your so-called “Relationship Score”.

((Retained Relationships / Workforce)*100) = Relationship Score

Interesting thought no? So let me ask you again: how well is your company actually doing?

→ 1 Comment

Stndrd_ – Establishing Standards in Digital Production

March 5th, 2010 · Web Design

“An open source approach to establishing standards and practices in digital production” is the tagline for Stndrd_. A bold and commendable move but one that starts out with an incomprehensible and hard to remember name.

Why do we need to establish standards and practices? Well for the same reason that we need contracts to govern professional relationships, because it brings a structure and avoids any misunderstandings between production companies and their agency clients. It also makes things quicker and easier.

You wouldn’t start a project without a contract and without an outline of the work to be accomplished. So why not go a step further and pre-ordain any intention with an outline of the potential work so no stone can be left unturned in the aim to make sure all bases are covered.

Mid-Project Changes to Avoid

There’s nothing worse than being half way through a project and a client realising they didn’t think about something. Who fault is that? No ones’ but it cause a major headache, both in pain and money for the client, and in pain and disruption to the project flow for the production company.

What about every time you start a new project? When you, as a production company, engage with a new client, that is effectively what most are doing, because of the mismatch of knowledge. With Stndrd_’s memorandum of understanding, framework and new protocol for engagement, this takes a lot of the uncertainty out of that, as well as uncertainty going forward because both sides know that they have covered all bases and thought about every single aspect of the digital project.

The real boon for this is the quality of output. With few changes in the pipeline, production companies can then do the best for their clients, and ultimately for the digital end users and customers. Surely that’s the most important aspect of all these standards based approaches.

Teach & Learn

The real advantage of these documents and the standards based approach though is that producers will learn about the entire picture and think about it all the time. Even in this day and age you would be amazed at the number of people who work in the “digital” field who know so little about it. When digital production encompasses such a wide variety of areas from the web to iPhone apps to software at large for digital campaigns, you can no longer afford to know very little or a singular patch of digital territory.

Taking clients through the entire spectrum of possibility in discussing a project is a great way for you to discuss all the potential aspects, pitfalls and gains thereof, and share the wealth of information you have gained through years of digital production.

Integrating Stndrd_

These new documents, available openly and for free, are definitely worth reading, using and adjusting per your needs. Integrating them into any existing process of project costing and planning and engagement with clients is super simple, and if you haven’t already you should certainly consider it.

From my perspective I can see certain shortfalls in the content of the RFP and I am sure there are legal issues surrounding some of the content but, this is a great start and minor amends to the documents can be easily effected for your benefit, after which you can share them for the greater good!

You can find out more about Stndrd_ and download the documents from the stndrd.org web site.

→ 1 Comment

Creating Usable Forms

March 4th, 2010 · Web Design

Having read the following post “Mad Libs” Style Form Increases Conversion 25-40% I was both shocked and intrigued. On one hand they are talking about a massive increase in conversion rates, whilst at the same time creating a rather insanely formatted input form. Instinctively I don’t like this design they were touting at all. From the initial inspiration, which was light, airey and simple, to their design which is a lot heavier and textual. All this really got me thinking about what makes good form design?

Is It Just About Inline Inputs?

Having read Steve Krug’s Don’t Make Me Think and 37 Signals’ Defensive Design for the Web, the kind of form layout these guys are suggesting flies in the face of such schools of thought. What is more important? The standards-based approach or the “inherently readable”? And does this approach work every single time? Is it the answer to forms, the universe and everything?

In this case, I think it would be over-stating it if they said that, by creating an inline text fields form you can increase your conversion by 20-40%, simply because they restyled way more than just the text box fields. Not to denigrate their observations or results, but this is an undeniable fact. If they hadn’t change more than the layout of text boxes, would the conversation really have been as good?

Elements to a Good Form

The reality is that so many forms get butchered daily, and that every web form ever built is practically a re-invention of the wheel. As a front-end developer I see the basics of form requirements utterly disregarded frequently, not just in style but also in function, and if, in many of these cases they adhered to the basics, their form conversion would improve “just like that”.

So what constitutes a good form? Perhaps some of the following thoughts/elements would help:

Short & Simple – Keep it sweet and simple. Don’t ask for more than what is required. A user can always register and then come back later and and more detail, don’t go for the whole hog first time round.
Error Checking – Clearly denote what fields are required and which are optional. Provide inline and real-time error checking, which is obvious. Using input field borders and dynamic messages that are next to the entry box in question.
Instructions – Make space for instructions. These can be used in conjunction with the inline errors above. Additionally fields can be pre-populated with default examples.
Craft Proper HTML – Use all the elements provided in HTML for a form, from field sets and legends to attributes such a tab index and “for”. This not only makes the form more accessible and W3C compliant, but it makes for an all round better user experience.
Javascript? – Decide whether you should do server-side or client-side error checking, or in fact if you want to do both. Why does this matter? Well only if you want the form to work with JS disabled, perhaps 1% of cases, then you need server side validation. Proponents of graceful degradation will chase after you for this.

The Anatomy of a Good Form

I am not going to outline any HTML, CSS and JS now, but I will follow up this post with examples on my own site, and make the code available for anyone who cares to use it. Good form design and the elements for it shouldn’t be a closely guarded secret, and designers and developers also need to respect the rules of form design a lot more. So hopefully with this show and tell you and others can learn something from my approach to forms. More tomorrow on that!

Who Does A Good Form?

Like the kind of question you might be asked in a job interview, who does great forms online. To this end, in the past I have seen some interesting forms. The first one I was ever wowed by was the registration form on the consumer watch site, Which?, whilst more recently the revamped EasyJet web site flights ordering process I had found to be well pimped out and highly usable. For novices with zero experience of building HTML form, you can always hook into web site services such as Wufoo that help build some highly usable propositions for site visitors.

Test, Test, Test!

Anyhow, once you have rolled out your form, you need to compare it with the old form and see if sign-ups or conversions improve. Sampling a time frame of a week or two is a good way to track performance after roll out. Either that or some A/B split testing. Never just roll out a form design though and hope and pray for the best. ALWAYS try to learn from your experiences.

→ 2 Comments