Category: Web Misc

Categories
Web Misc

Good and Bad Examples of Localization

I bought some opera tickets online the other day. For an opera in Vienna.

The website that took care of the booking was in German by default, but provided an English option. Being a web developer that specializes in building user interfaces, this intrigued me.

You see, I’ve spent a fair amount of time worrying about localization; the art (and science!) of ensuring an interface is accessible in multiple languages. It’s a tricky problem. There are a lot of pitfalls for the naive coder.

What I’ve spent much less time doing is actually using localized websites.

So as I worked my way through the booking process, I took note of what the Wiener Staatsoper did to make sure their user experience didn’t suffer when translated from German to English. Here are the results:

Good: The Layout didn’t Break.

English-German is an especially interesting translation because German words tend to be so much more… verbose than their English counterparts.

This can provide a lot of headaches for developers and designers. Yes, “speed limit” fits very nicely within the confines of that pretty tab in the stylish, narrow header. You know what won’t fit so well?Geschwindigkeitsbegrenzung.

In web design, if you’re not careful with your overflow, or you’re sloppy with your floats, or you just plain didn’t think to test real, translated strings when working on an international product, you’re in a lot of trouble.

I’m glad to report that despite my paying very, very close attention, the Staatsoper website didn’t have any awkward gaps or fields/labels that were needlessly long. This may sound obvious, but it’s a very important first step in creating a well-localized product.

Bad: Non-translated strings.

I was surprised this was such a problem. Especially since English and German are the only languages the site supports, it seems like it would be perfectly reasonable to keep both string tables up-to-date.

Alas, I found many instances of German text on English pages. Yes, some were show names and proper nouns, but just as many were not.

This feels unprofessional. As a user, I’m not expecting to see a whole lot of German after I select English. Every instance is a fault, and may cause confusion.

Good: Matching tone.

A website for something like an opera should stray on the side of elegance and formality. While I can’t vouch for the quality of the German copy, I can say that this message came through on the English side.

One specific example:

I originally attempted to complete the entire checkout in German. As I was filling in personal information, I noticed the standard * definition at the bottom of the page, letting me know that marked fields are mandatory. The description was about 6 words long!

“In English, we just say required”, I mumbled to myself.

Lo and behold, when I arrived at the same page in my native tongue, it didn’t say “required” at all. It said “These fields need to be filled in.”

A little wordy, sure, but that’s the point. This is an opera house. They aren’t targeting their copy at superusers who instantly know that * == mandatory. A fuller definition was entirely more appropriate, and the presumably-matching tone was both appreciated, and likely intentional.

Bad: Typos.

I can’t believe I even need to mention this, but: Get your strings proofread!

I spotted a handful of typos and very basic spelling/grammatical errors towards the end of the checkout process. This is just plain painful. If you’re going to go to all the trouble of adding support for a new language, go all the way and get your strings double-checked!

Typos and poor spelling/grammar look lazy and unprofessional. This is a really easy problem to avoid, and your users will thank you for it.

Good: Automatically adjusted region labels.

This was by and large the most impressive part of the Staatsoper’s localization effort. If you take only one piece of advice from this article, let it be this one.

I noticed something interesting while filling out address information. Without me taking any action whatsoever, the labels were already Canada-friendly.

Province instead of State. Postal Code instead of ZIP. Proper long-distance region already filled in. Canada at the top of the country drop-down, preselected.

I was blown away.

Granted, your average user isn’t a web developer, and won’t consider how much extra effort you put in to craft that exact experience specifically for your users, but this is something to strive for! Helping your users breeze through a form is no small feat, and playing localization to your advantage is a stellar way to improve their experience.

Overall, the Wiener Staatsoper did a more than decent job translating their user interface from German to English. The use of localized labels, matching tone, and proper layout techniques were very considerate and helped me considerably. The minor annoyances of missed and improperly-translated strings could easily be fixed, and would help make the translation an even better case study.

Now, was any of this helpful? What can you take away for your own projects?

Categories
Web Misc

The Problem with Instant News, starring Osama bin Laden

Do you know how many tweets have gone out about Osama bin Laden since his death, roughly 30 hours ago?

I’m going to go ahead and peg that number close to 100 million. Why? Because Twitter counted an average of 3440 tweets mentioning Osama per second for nearly 2 hours straight (source). That’s over 24 million on its own.

Everyone is a News Agency

Networks like Twitter (and Facebook, and YouTube, and Tumblr) are a great way for content to spread. Add to that their ubiquity, along with the growing popularity of smartphones and near-constant internet access. In short: it’s never been easier to share a message with twenty-thousand of your closest friends.

A few corollaries here:

  • News spreads quickly online. Instantly, even.
  • Rumours spread just as easily.
  • Bigger news will get more people talking.

When you have all three of these, like Osama, the volume of messages increases exponentially. Partly because so many people care so much about the topic, but also largely due to the economics of scale: the more messages, the more likely some information is false, which causes more messages due to debate, vilification, etc.

Add all this together, and we have tens of millions of people all anxious to share the latest news with their network. And that’s great!

But it’s also really annoying, because we’re all doing it at the same time.

“Latest” and “News” are Ambiguous

The morning after Osama’s death, it probably seemed like breaking news to a lot of people. That was at least twelve hours after the fact, though, so much of the internet had already been talking about it for (digital) ages. Then there’s everyone that found out around lunchtime, or later that evening, along with everyone that won’t find out until later this week.

The problem is that everyone wants to tell someone the second they find out. So they post it! This creates a mess of duplicate information. Social networks, blogs, IM, email; all of them are suddenly and perpetually inundated with a constant stream of updates. All saying the same thing.

Not only is it boring seeing the same few links everywhere you look, but this overdose of useless information also drowns out whatever you were hoping to find from your network in the first place.

Traditional News Outlets are Getting it Right

The key difference between the big players and everyone else is that organizations like CNN can control their updates. This is a refreshing change from the masses. Compare a single voice — providing timely information and only repeating itself when warranted — to the voices of everyone else around you, all yelling the same thing at the same time.

Which would you rather listen to?

This is a rare circumstance where I feel the old-fashioned news networks are nailing it, and us hipsters with our Twitters have a lot to learn.

What can we take away from this for next time?

Categories
Web Misc

aaand crash.

MIX was exhausting, but a whole lot of fun.

The flight back was interesting because I was super-smart and booked a red-eye with two stopovers and about 7 hours of in-flight time. This meant staying up for nearly 30 consecutive hours and spending almost half that time in airports/on planes.

Yeah. Exhausting.

I met a lot of great people, and wrote some hopefully-useful posts for my workplace’s blog about what I learned. If you missed them, they can be found here.

I had a couple of other thoughts that didn’t quite make it into any posts, so in no particular order, here are my many meandering musings re: MIX 2011.

Microsoft Really Cares about Windows Phone 7

The amount of excitement and volume behind WP7 and the new Mango update was almost overwhelming.

Windows Phone 7 was the main focus of the day-two keynote, which was the main event for the entire show. Joe Belfiore spent a solid twenty minutes apologizing for the hassles from the recent update before diving into the new stuff. I could really see some passion here; he clearly wanted to fix the process and see the platform succeed.

Azure is Probably Doing Pretty Well

There wasn’t much talk about Azure. A couple of panels, but very little else. My sneaking suspicion is that this means Azure is hitting its targets and Microsoft is happy with how it’s going.

My boss, Mr. Tony Hooper, was kind enough to point out to me that the crowd at MIX isn’t really the target market for Azure, and that we would probably hear a lot more about it at TechEd.

He’s probably right.

But that doesn’t mean I’m wrong :)

Silverlight 5 is All About Developers

Somewhere in the past 5 years or so, the world went from “Microsoft thinking they had the best dev tools around” to “Microsoft actually having some really sweet kit for building web experiences.”

Silverlight 5 is pushing this advantage. The new features available in the upcoming release are nice, but the improvements to their dev tools are even better. There were sessions focused on boosting performance and how to use the new features, and everyone was talking about how much they crave debugging for bindings.

There was a lot of positive energy around the tools and those using them. As a developer, this was nice to see.

IE10 was Launched!

Ok, so it’s just the platform preview for now, but that’s still something. IE9 only went official a month ago, so it’s great-great-great to see Microsoft finally putting a serious push behind the Internet Explorer team.

Yes, I realize most people probably aren’t as excited about this as I am. That’s just me, I’m a self-confessed browser geek. Still, I really felt special being at a keynote where a new version of a major browser was announced; I don’t think we’ll see many more browser updates unveiled with such gusto.

§

MIX was a really fun experience. It was my first major conference, and I’m glad I was able to attend. Here’s to hoping there are many more exciting events in my future!

Categories
Web Misc

“Newspapers Have No Future”

A tweet caught my eye this afternoon:

I knew there was a fire nearby work this morning… Check out the video. http://bit.ly/gJY60rless than a minute ago via webSarah Tolledo
sarahtolledo

Open the link and watch the video. Cars on fire are pretty cool, right? But do you know what amazed me even more?

That video was shot by some office employee, standing around in the company lounge. And now it’s on this major newspaper’s website, part of an entire city’s local news. That level of cooperation between news organization and regular person is awesome. The news company wasn’t there when it happened, but that guy was. So one of them reached out to the other and now that video can be shared with everyone. No egos, no red tape, just people helping each other out.

And look how fast it went up! That post went live shortly after 2pm. The fire happened at 9am, only five hours earlier. Rather than waiting until tomorrow, the newspaper got to work pushing that update right away. The days of delivering the news first thing in the morning, or even in the evening, are long gone. We want the news as it happens, especially when it’s local news.

Ignoring the video for a moment, look at the post accompanying the story. Is it full of ads? Does it span six pages? Of course not — it’s short and sweet. Only the details we care about, and nothing more. The content is concise because the newspaper understands what internet users want. We have no attention span; just give us what we care about, and maybe some pretty pictures (or in this case, an awesome video).

Oh, and did I mention that this same newspaper just released an iPad app? And that it’s gorgeous, and free, and I use it all the time?

§

For all the clambering about how newspapers and other print media don’t have a future, here’s one that seems to be doing just fine.

Categories
Web Misc

No Love for <noscript>

I’m currently implementing a web front-end that has to work in a very secure environment. One of the things we can’t count on is that users will have JavaScript enabled, simply because it’s often a vector of attack on the web. While this has been a great learning experience overall, last Tuesday I learned a bit more than I’d planned on:

Apparently before I’d left the office Monday evening, I was doing some testing with JavaScript disabled. I’d also forgotten to turn JavaScript back on. And how long did it take me to realize this error the following morning?

Two hours.

Because apparently somewhere between CSS 1 and web 2.0, everybody forgot about <noscript>.

And I don’t just mean people like you and me — we’re talking big names here. Do you know what Google Reader looks like with JavaScript turned off? Try it. It’s just a logo that says Google Reader and a blank white page. It looks like a server issue.

My task management software didn’t fare much better. It simply sat there on its loading icon, perpetually promising me my todo-list, yet never delivering. How many times did I hit F5 thinking it was “just a slow server”? Tons.

Then there’s Yammer, probable the worst offender of the bunch. It managed to load everything except my timeline, the only bit that matters. What good is navigation if I can’t navigate to anything?

Finally, Grooveshark got it right. The recently HTML-ified music-streaming app displayed a prominent message alerting me of my ineptitude, triggering a sudden light bulb and all that jazz. But this raised an interesting question:

Who’s responsibility is it to tell users when they have JavaScript disabled?

Obviously the easy one is to blame is the user. If I turned off JavaScript support, I probably did it on purpose and it’s my responsibility to remember to turn it back on. But let’s say I forgot, or I did it by accident with some bizarre hotkey incantation. What then? There are two entities that can help me:

As in my recent case, web applications can use <noscript> to give me a heads up that I can’t enjoy their content given my current browser settings. Big names like Google should especially do this. They could even go the extra mile and detect my browser version, and as long as I’m not running something horribly old (Netscape 1?), or something excessively insecure (cheap shot at IE6! Yes!), provide me with a kind reminder that I probably did this myself, oh and here’s how to fix it in whatever browser my user-agent suggests I’m using.

And that brings me to my second point, and the bigger one in my eyes. Where was Firefox on this one? Let’s look at the various data points Firefox had but didn’t manage to connect:

  1. That webapp sure does have a lot of JavaScript in its headers/mime-types/mark-up.
  2. Hey, this is one of Dan’s bookmarks; it’s all over his browsing history.
  3. Dan always has JavaScipt enabled, except the other day when he was mostly hitting localhost.

There was plenty of information there that Firefox could have used to deduce that I probably wanted to run JavaScript. A friendly reminder would have done just fine: “Hey, this site that you visit all the time uses a lot of JavaScript; if you want to run it, click here.” Is that expecting too much?

I think I’ll write more about this soon.

I really am learning quite a bit about taking JavaScript-less users into account in complex web applications. And next time I’ll be sure to share something more productive, instead of just bashing a few of my favourite things.

Stay tuned!

Categories
Web Misc

Thinking About SEO Makes Me Dizzy

You know what I find confusing? Search engine optimization (SEO). Let me explain what that is in case you don’t already know:

A brief introduction to search engines.

Say you run a website that sells aprons. When you first publish your website online, it automatically gets indexed by search engines like Google and Bing, and then your website will show up in their search result pages (SERPs). So when someone punches “buy aprons online!” into Google, your website might come up. A couple of important factors here:

  • You want your website to show up near the top of the list.
  • Google wants to order the results it shows by how relevant they are.

These two “wants” don’t always line up. So, one day someone realized that by tweaking how content is organized online, you can change how it ranks in Google’s results. This is called SEO, since you are optimizing your website (the one that sells aprons) so that it looks as attractive as possible to search engines like Google.

(Of course, there are good and bad ways to do this. I’m not going to discuss ethics here. What I’m more interested in is simply making sense of it all.)

What does Google do?

Should Google assign more or less weight to sites that are trying harder to get noticed? Well, it depends. Remember that Google’s job, which it takes very seriously, is to rank the most relevant links first. So Google is constantly tweaking its algorithm to find better and more accurate ways to identify the best results for any given query.

You could almost say that Google is optimizing its search algorithm for finding the most relevant content.

So, who’s optimizing for who?

Now we have SEO-types that are optimizing apron sites so that they rank better in Google, and Google constantly optimizing its search algorithm to find the best apron sites. Since the criteria for what defines the most relevant apron site is set by Google, and constantly changing, SEO-types are always aiming for a moving target (and likewise for Google, since new websites, some of which are bound to be about aprons, pop up every day).

Part of me thinks that SEO and search algorithms should converge. If SEO-types are working to get pages better recognition and Google is working to recognize pages more easily, shouldn’t they someday bridge that gap from opposite sides? But then who really wins? The user is getting the best-optimized pages in Google’s best-optimized algorithm, which still might not be the most relevant matches — best-optimized is not guaranteed to be most relevant.

And what about Bing?

Bing has it’s own search algorithm, and it’s picking up a bit of market share. Are SEO-types going to start optimizing their pages specifically for Internet Explorer Bing? And how does Bing tweak it’s algorithm? If all the SEO-types are already optimizing for Google’s search anyway, wouldn’t it be in Bing’s best interest to aim for picking up pages matching that style of optimization?

Then what’s the end-game? Returning the same results as Google? I mean, if Google is working to return the best possible results and Bing is also trying to do that, aren’t they sort of shooting for the same goal? You can get into how Google and Bing might have different definitions of “best”, but is that really true? It’s the same users they’re fighting over, and they’re indexing the same content; logically there is only one truly ideal way to order their results.

The whole thing is a giant mess to me.

I have a lot of respect for what SEO-types do, and obviously I’m very thankful for the work search engines are doing to make my life easier, but what a fascinating and perplexing industry! I can’t really tell who’s on who’s side, and it seems like everything (the tactics, the goals, the products) is perpetually changing. Does anyone really understand how it all works?

What’s your take on all this? Am I the only one that finds SEO kind of crazy?

Categories
Web Misc

Building an Audience with Feature Pieces

Lately I’ve become a big fan of “feature” pieces. Let me give you a few examples to show you what I mean:

Every weekend, Outspoken Media posts their weekend coffee links. It’s a list of interesting one-off links from that week — links that have nothing to do with branding or SEO, the blog’s typical topics.

There are a couple of things I like about this. First, it gives Outspoken’s readers something to look forward to; every Saturday, there will be some neat links. This builds loyalty (people will keep coming back), and it’s predictable (since the same readers will tune in every week). Second, it’s probably a nice break for Outspoken’s full-time blogger. The weekend coffee links give Lisa a chance to be a bit more lax, and I bet those posts are pretty fun to write.

Of course, a regular piece doesn’t always have to be off-topic. Smashing Magazine’s monthly desktop wallpaper calendar series is right on-topic with what they do (promote and share good design). Still, it’s very effective; downloading a new calendar wallpaper is one of my top priorities at the start of each month — right up there with paying rent.

Similarly, posts in a series don’t necessarily need a predictable schedule. Take College Humor’s Prank War, for example. Sometimes the updates are over a year apart, but you’d better believe people are waiting for them. Obviously this won’t grant the same reliability bonus of a weekly or monthly feature, but it definitely builds dedicated fans. The people that love these videos really love them.

This is something I’m going to try to do a bit more of around here. In fact, starting this Friday, I’ll be doing a bi-weekly (every second Friday) update for what I’m doing this semester with OCRI. I’m interested to see how it goes — both how much I enjoy writing it, and what kind of a response it effects from you. Likewise, I’m going to play around with a few other infrequent series bits as I mentioned in last week’s one-year anniversary summary. It just feels like a fun thing to do, and I’m excited to see how it goes.

How do you feel about all this?

I haven’t really given much thought to feature pieces until very recently. Is this something you enjoy too? What are some of your favourites?

Categories
Web Misc

Elsewhere: HTML5 and Browser Testing

I wrote a couple of posts for work last week:

Hopefully those will be of interest to you if you’re into techie web stuff.

This week’s post for this blog is a bit more opinionated than usual, and is taking longer as a result. It probably won’t be up until tomorrow. But it’s going to be my first post (ever!) about copyright, which is something I can get a bit touchy about, so you don’t want to miss it.

Categories
Web Misc

Be Your Own Ambassador

These days, your identity on the web can be quite broad. You might have a blog, you almost certainly have a Facebook account, you’ve probably at least heard of Twitter and LinkedIn, and at the very least, you watch YouTube videos and read other people’s blogs. To make things seem even more spread out, many interactions in these spaces tend to be very short — and I don’t just mean Twitter, I bet your comments on Facebook and several other social tools are usually a few hundred characters or less.

With such a wide set of places to leave your mark, and these interactions tending to be shorter and shorter, it’s easy to make a lot of them and its easy to make them without thinking too hard. Lately I’ve been trying to put more thought into comments I leave on people’s blogs and tweets that I’ve whipped up on the spot, and the other day I realized something: Every tweet, every status update, every forum post, and every comment I leave online, anywhere, is an opportunity to make a good first impression.

Pause and consider that for a moment. Every time you submit any content online, someone else is meeting you for the first time. Sometimes it might really only be one person, but often it’s dozens, hundreds, or even thousands of people. Now imagine meeting this many new people in person rather than through a screen. Would you still just blurt out a quick statement without thinking? What kind of first impression would that leave?

Think of this from a branding point of view. Every time you write a quick, pointless statement online, you’re wasting a chance to properly introduce yourself to a handful of new people. Why not seize every opportunity to make a strong first impression — something people will remember?

Some tips for making those first impressions count:

When you post on a blog or forum, link your name to something. There are plenty of options: your blog, your twitter, your shared items in Google Reader, anything you have that says more about you. If I like what you have to say, I’m going to want to know where I can go to listen to more of you.

Please (please, please, please!) don’t just write “great post!” when you comment on someone’s blog. That doesn’t tell me anything about you. Mention why the post is great: what do you like about it? Do you have a similar experience to share? Does it remind you of something funny/stupid/unique? If you’re going to take the time to leave a comment, leave something worth reading — or better yet, something worth re-reading.

Along the same lines, when commenting on something in Facebook, don’t just say “lol” or “epic!”. That’s what the Like button is for. If you’re going to comment on someone’s status, add a bit of personality. You never know who might gain value from your reply, and something heartfelt and sincere could really make the original poster’s day.

Try to be helpful. This doesn’t just apply to question-answer sites like Stack Overflow; people are asking for help all the time, using every tool available to them. This includes the obvious ones like Twitter and most forums, but the same goes for blogs and Facebook/MySpace/Yammer. You probably know all kinds of things that others don’t — share that knowledge!

Be personal. Remember that you’re interacting with one or more human beings. Don’t spam us to death (I’m looking at you, LinkedIn “power users” and Twitter “experts”) and try to talk like you would talk to someone you’re meeting at a park or grocery store. Be humble and respectful, and don’t just talk about yourself.

Proofread before hitting submit. Those typos and basic grammatical mistakes that ruin otherwise great resumés can also sabotage thoughtful comments. Don’t let easily-correctable errors distract me from what you have to say.

Finally, practice makes perfect. This post isn’t meant to scare anyone away from online interactions. Make lots of them; just remember that each and every one is a chance for you to show the world how great you are.

Categories
Web Misc

Modern YouTube meets Retro Firefox

A quick bonus-Friday-post to help get your Friday rolling:

I’m doing some web development at my day job for a site that simply must work in Firefox 1. It’s not as bad as it sounds (we’re also supporting IE6, which is a far bigger hassle) and every once in a while using a really old browser provides a bit of comic relief. For example, when I accidentally opened a YouTube video using Firefox 1, here is what I saw:




(click image to enlarge)

The text reads: “Hey there, this is not a commercial interruption. You’re using an outdated browser, which YouTube no longer supports. Some features on YouTube may not work.”

How ironic that the outdated-browser warning message is nearly unreadable in outdated browsers! It looks like even the brilliant minds at Google occasionally struggle with legacy-browser support, just like the rest of us ;)

Have a good weekend!