… is unlikely. But we’re working hard on it. That’s why we’re looking for a Web Application Developer who helps us build the sexiest translation workflow tool in the world. One that will scare the bejesus out of XTM, Wordbee and MyGengo.

Our Team:

We’re a team of 10 people from Switzerland, Germany, Italy, France and the Philippines. Two of us work in IT. So you will be number 3. We currently have three open positions, which means that we’ll count 12-14 people at the end of this year. Our annual growth rate has come to over 50% ever since we were founded in 2006.

The Company

When we started five years ago, we were the first copywriting agency on the internet. As we grew, we expanded into the translation business that now generates the majority of our work. Our office is located in the heart of Zurich, in the hot Kreis 5 area.

Our Technology:

Fairly straightforward ASP.NET 4.0 Web App with MySQL backend. We are currently migrating from WebForms to MVC and replacing UpdatePanels with jQuery.

Our app handles everything from the order management, handling of translation jobs, crm, billing, etc. We currently have three portals; one for us, one for the customers and one for our freelance translators.

What’s missing is either a good integration with a 3^rd party translation tool or our own implementation of some basic features. Likely, it will be a combination of both.

Your Job

We’re looking for an experienced web developer, but since we are a small company, your job will be very versatile. This means you’ll be working on the following things:

• Frontend with HTML, CSS and jQuery, including some UI/Usability design
• Backend in ASP.NET in C#
• REST API with the ASP.MVC Web API
• MySQL Database development and maintenance
• The occasional client projects (CMS export, file format conversion, etc.)
• Some desktop utility tools or scripts

Willingness to relocate to Zürich is a must. But after all, this is the city with one of the highest living standards in the world.

If you are interested, send your application to remy AT supertext DOT ch.

We have multiple customers that are using Contao CMS (formerly TYPOlight). Unfortunately there is no good export/import tool to get the content in and out for translations. We have a plugin for Drupal and Typo3. WordPress is in development, Contao in the evaluation phase.

In the meantime what we often get are Microsoft Word files. This works perfectly for us, but is cumbersome for the client. We recommend to send us the raw HTML code. This way there is no copy&paste and modify necessary. All formats stay as the were.

Click on the HTML button in the Contao Editor Toolbar (as seen above). This will open the plain text HTML editor.

Just copy&paste this text into a normal text file and send it to us.

You will get it back in the exact same format and everything you have to do, is paste it back into this editor. Done.

If you need to translate multiple pages or your whole website, we can export all your pages automatically and reimport them again afterwards. This involves no manual work for you at all. Just contact us.

For our Orders, Jobs and Documents pages we switched from using tables to using lists (ul/li) with left floating div’s. This is nice in terms of modern CSS driven HTML and is easier to adopt to the iPhone. But it does bring a few issues with it. For example that the div’s tend to drop below the one on their left if the content is too large and they have no size attribute.

I’ve built a page where I tried out different ways to prevent this with example code.

Float Drop Examples

What we used at Supertext is to have the 2nd column with a fixed position. But this is only possible if you have only 2 columns and if the width of the first column is fixed too.

<div>        
    <div>Test</div>
    <div style="position: absolute; left: 40px;">
        <b>Long Text and very long Text. Long Text and very long Text. Long Text and very long Text.</b><br />
    </div>
</div>

Let me know if you have a better solution!

According to webdesignpractices, about 45% all all major websites use Breadcrumbs in some way. Either to help navigation or to indicate some type of progress.

At Supertext we didn’t do anything like this so far. During the ordering process, we just had a title to tell the user at which step he was and some info about the order on the right column.

So we tried a simple approach by just adding some text breadcrumbs into the title bar this like this:

But this example is bad for multiple reasons:

1. No indication where the user is at the moment. Address should be highlighted or in a different color.
2. No information about the following steps
3. Look and feel is poor

We’ve now decided on something like this:

Just look at the new part below the title. There some other changes on this mockup too. Just ignore them. They will go online later this year. What do you think? It covers pretty much all issues that I mentioned above. No?

We modeled it after the example from swiss airlines:

Here are some other examples we looked at:

Doodle with their KISS approach. Not really breadcrumbs, but gives a progress indication too. Just not much more.

Did you find them? On the upper right corner. Yeah, I had to search for them too. But it’s all there. Where I am, next step, last step. But it does have some potential for improvments

Another nice example is Amazon with the cart indicating where I am. Maybe we could use a pencil for Supertext?

Not very surprising, Apple also delivers with a simple yet elegant solution.

Another article that covers some of these topics is 12 Tips For Designing an Excellent Checkout Process on Smashing Magazin.

On a lot of pages you see a Print link, which then opens the print window. This can be achieved very easy:

window.print()

Or built into a Link:

<a href="javascript:window.print()">
Click to print this page
</a>

If you put the print() command into the onload event of the body tag, the print command will fire automatically. This is handy if you want to format your page differently for print than for the browser.

I’ve built a little live example here.

For all non-english speaking developers that are constantly fighting with umlauts and other funny language specific characters, here is a tool that might help:

HTML Entity Character Lookup

You type in one Character and it spills out all versions that are somewhat similar to it with the appropriate HTML entity.

E.g. for a, you get â ã ã and more. Including the entity code like for example &auml.

Pretty helpful.