Links in New Windows: Websites vs. Applications [en]

[fr] En 2011, c'est toujours pas bien de forcer les liens à ouvrir dans une nouvelle fenêtre. Sauf, on peut l'admettre, quand votre site est en fait une application web.

I was surprised recently to realize that in 2011, it wasn’t obvious to everybody that forcing links to open in a new window (with target="_blank") was not a good idea.

Actually, there are quite a few high-profile sites which force links to open in new windows, and I realized I actually don’t mind it that much: Twitter is one. I like that when I click on a link in Twitter, it opens in a new tab. I’ve learned that Twitter does this, and I now rely on it.

So, maybe links in new windows aren’t always a bad thing?

Here’s what I think: if your “site” is in fact an application, then it doesn’t matter much. People will learn to use the interface of your web application, and if links open in new windows, they will discover that and (hopefully) remember it. However, if your site is a real site, meaning it contains stuff that people are going to read, and that stuff might contain links to other stuff people might want to read or see, then it remains a Bad Thing.

Why is it a Bad Thing to force links to open in a new window (in your blog, for example)? Here’s the reasoning behind this.

  • Normal behavior is that links open in the same window.
  • When you force a link to open in a new window, you’re breaking that expectation — and there is no way to know, by looking at the link, that it’s going to spawn a new window.
  • Opening new windows is a user decision, not a website design decision. Windows are part of the browser, not the site.
  • A link can easily be opened in a new tab or window by holding down a modifier key before clicking on it (Cmd/Ctrl for example).
  • A link which is set to be opened in a new window cannot be opened in the same window if that’s what the reader would prefer.
  • Opening links in new windows may confuse the user (who might not notice the new window) and breaks the back button (to go back, you have to close the current window instead of hitting the back button — adding a different way to “go back”… more confusion).

Summary:

  • if your site is actually a web application, where links open is part of the application design, and forcing links to open in a new window can make sense in certain situations;
  • if your site is a “proper website” or a blog, don’t force links to open in a new window — where they open belongs to the way your reader chooses to use his browser, and not to the website design.

FriendFeed Appeals to Women, Too! [en]

[fr] Quelques commentaires sur FriendFeed, un nouveau service de lifestreaming. Et en réaction à une liste de "blogueurs élite" quasi entièrement masculine, allez -- une liste de femmes de mon entourage qui sont sur FriendFeed.

Scroll to the bottom of the post for The List.

Brian Solis on bub.blicio.us joins Louis Gray in commenting upon the fact that “elite bloggers” are joining FriendFeed in respectable numbers. FriendFeed is a lifestreaming service, which allows you to aggregate all your online presence and publications in one place.

The first such application I bumped into was Suprglu (just checked, it’s still running, wow!), two years ago. I was happy with it for some time, and then disappointed that it had too much of a lag (they didn’t have much resources, at least at the time).

Then came Jaiku, which I liked, but I never quite got used to the layout and the fact that only titles were posted. Tumblr entered my world at about the same time, and for a while, I wasn’t sure how to use both these tools without being redundant. I finally decided that Tumblr wasn’t for lifestreaming. At that point I was also on Facebook, and the newsfeed there was pretty nice as a lifestreaming service. Then the apps arrived and things started to get ugly — but I still like my newsfeed, particularly as it does some editing for me (selecting stories I’m likely to find relevant, based on a magic mix of criteria including my “thumbs up/thumbs down” ratings on existing newsfeed elements).

Lifestreaming has two purposes:

  • gather all my stuff in one place, so that I can point people to it
  • gather all the stuff of all my friends in one place, so that I can follow them all together (this is more presence-like).

For the first, nothing beats (to this day) Jeremy Keith’s lifestream in readability. I keep telling myself I need to grab the code and do it for myself.

For the second, I’m ambivalent. I like jaiku, but I find it not very readable. The Facebook newsfeed is more readable and is edited down to a readable amount of information, but not everybody is on Facebook, and it’s not public. FriendFeed is promising, in that it’s rather easy to set up, but I don’t find it very readable, and it would need some editing features (so I can filter out stuff manually, of course, but also some automatic editing which I could turn on and off).

So, I like FriendFeed. I wish they’d make it easier to add people, though. One quick example. Here is a screenshot of the listing of my “followers” (=people who have subscribed to me):

FriendFeed - People Subscribed to Me

There is no indication of if I’ve subscribed back or not. Compare with Twitter:

Twitter / People Who Follow stephtara

This, in my opinion, is a user interface problem that has been “solved”. If you create a new social tool, please don’t give us an interface which looks like it ignores existing solutions to obvious user headaches, like figuring out if you’re following back people who are following you (there is a higher chance that the people you want to follow will be amongst the people follow you already).

So, I’m looking forward to seeing where this will go. As such, I’m not actually using FriendFeed so much as sitting on it, waiting to see when it becomes usable.

Coming back to the two posts I mentioned at the beginning of this article, my initial reaction while going through the list of “elite bloggers” using FriendFeed was “hmm, I’m not in it”.

Well, of course. I mean, I’m quite lucid about the fact that all this blogging and online presence does have at stake (amongst other things) receiving a certain amount of recognition — and although I’m reasonably good at not letting this kind of motivation drive my activities. But it’s there, somewhere in the background. I’ve talked about this a lot in French, I realise — particularly in interviews I’ve given to the press and talks about blogging in general, but not much in English. Anyway, I’m not dwelling on this as it’s not my main point, but I always have this little secret hope (that I’m not overly proud of) that I’ll “make it” into this kind of listing. But enough with that.

My second reaction was: where are the women? Now, sorry to pull the whole “sexist” card — and those who know me are aware I’m far from a flag-carrying bra-burning feminist (though who knows, in another place and time, I might very well have ended up burning underwear in public) — but when lists of “influential/elite/top whatevers” show up and women are totally unrepresented in them, I think “ah, another guy who is mainly interested in what other guys have to say, and who might suggest at some point that we need to talk about the problem of ‘women in technology'”. (Nothing personal, Louis — this is more about my reaction than about who you are.)

So, in an attempt to encourage you to check out some of the women in my world which I have found on FriendFeed, here is a list of Some Women On FriendFeed. And yes, I’ve put myself in the list, of course. Oh yeah, this does have a taste of linkbait. But I won’t be offended if nobody picks it up. So, here goes.

Self-promotion: follow me on Twitter or FriendFeed and don’t forget to blog about Going Solo, or even register!

FOWA: Copy is Interface (Erika Hall) [en]

[fr] Notes prises à l'occasion de la conférence Future of Web Apps (FOWA) à Londres.

Here are my live notes of this Future of Web Apps (FOWA) session. They are probably incomplete and may contain mistakes, though I do my best to be accurate. Chances are I’ll be adding links to extra material and photos later on, so don’t hesitate to come back and check. Read Suw’s notes, too.

FOWA 2007 131

Words are the most important components of your user interface.

Caveat: interface language found in the wild… American. So, not talking about internationalisation, different versions of languages, cultural issues…

Exciting interfaces: gesture thing Tom Cruise is using, Wii, iPhone… But not yet for data/information stuff.

You don’t know how people are going to access your application. Nabaztag. Applications people love today are made from text. Even interacting with our TV with a text-based interface.

Language is an interface.

Dopplr philosophy. Device independant. User benefits by having direct access to information. In our everyday life, our priority isn’t shiny stuff, but things that work. steph-note: interpreting somewhat, here.

How will the application developer benefit?

Though it takes a lot of skill to use language well, it’s easy to iterate. People will freak out when you change the colours of your site, but won’t budge much if you change language.

5 ways to get words right:

  • be authentic; consumating vs. eharmony (Erika’s pet peeve: the “submit” button. If you change one piece of copy, change that. People don’t “submit” anything.) Twitter has good “we’re down” messages. Sounds like there are real people behind that application. steph-note: when putting a quote on a slide, read the quote in full.
  • be engaging; schoolofeverything.com, virgin-atlantic.com (“Hello gorgeous!”) Citybank: “Who was your arch rival when you were growing up?” as proposed security question. Pownce genders.
  • be specific with the language you use. emusic.com
  • be appropriate: it would be disconcerning if my bank tried to be my buddy. Amazon: “where’s my stuff?” Flickr “Talk Like a Pirate” day. But… some people were afraid the site had been hacked!
  • be polite: rude doesn’t get much forgiveness. Feedburner: “Activate Feed” and “Cancel and do not activate”, including type size to help you do what you want to do. subtraction.com: “remarks”. particletree.com adding “Everyone needs a hug” as default text in their comment box, when they were dealing with terrible flame wars.

Things that have gone wrong:

8 kinds of bad:

  • vague: basecamp, “file should be under 10Mb”; Apple: “some warnings occured. would you like to review them?”; Bank: “expand your relationship” (creepy!) Ask real people how they would call this thing they want to do.
  • passive
  • too clever/cute; “Murder your darlings.” Be ready to kill your pet phrases.
  • don’t be rude or stupid unhelpful.
  • oblivious to your surroundings: CNN — “Don’t miss: Bodies trapped in wreckage.”
  • inconsistent: the whole “my/your” inconsistency. Read your interface aloud to see if it sounds dumb.
  • don’t be presumptuous

You will still need designers. We’re sociable and entertaining, shouldn’t lose those skills when developing our application. Language isn’t going away. It will pay to pay a lot of attention to it.

WordPress Finally Has Tags! [en]

[fr] Après des années d'errance, WordPress implémente enfin un système de tags qui ne sont pas des catégories. Un billet un peu plus complet en français s'impose probablement. Qu'en pensez-vous?

I’ve known for some time that version 2.3 of WordPress would support real tagging. Today, Matt has just announced the deployment of tagging on WordPress.com.

From the start, I’ve been a very vocal supporter of the differentiation between tags and categories — and I really appreciate Matt acknowledging this in his announcement.

When I first met Matt offline for the first time nearly a year ago, at Blogtalk Reloaded in Vienna, I jumped on the occasion to pester him about tags and categories. He listened — but I don’t think he was convinced at the time.

A few months later, I was in San Francisco — and one of the first things Matt told me when we met again was “you know, I finally saw the light about tags and categories”. He told me version 2.3 would have both. I was overjoyed. I’ll never know exactly what role I played in Matt’s “seeing the light”, but I like to think I contributed 🙂

Looking back in time, Technorati started indexing tags in January 2005. They weren’t new for me then (I’d been tagging things on del.icio.us since May 2004 and on Flickr since October of the same year) but clearly, being able to tag posts was a great thing. You know me — my brain can’t sit still — two days later, I was rambling about some ways to combine tags in searches/sorting. Some of the stuff I talk about in there isn’t possible yet, but I hope it will someday.

Two days after that, I wrote my first WordPress plugin, Bunny’s Technorati Tags — which became quite popular and which I still use to this day.

I’m really glad to be able to retire this plugin, specially as Peter Westwood has written an importer for it. That means you should have no problems converting your bunny-tags into wp-tags. Thank you very much, Peter.

Bear with me while I dig though my archives: weighted tags by category is something I’d forgotten I’d wanted… does anything like that exist now?

My only gripe with the implementation of tags in WordPress, for the moment, is that they will be comma-separated. No! Please! We’ve been typing space-separated tags into Flickr and del.icio.us for three years now. Three years! When I chose space-separation for the tags in my plugin, it was because the existing interfaces for tags did it like that.

Spaces, please. Or at least an option to input them space-separated. Or a simple plugin. Tags separated by spaces, and multi-word tags between quotes.

I Might Be Switching to Google Reader [en]

[fr] J'aime Google Reader comme lecteur RSS. Surtout la facilité avec laquelle on peut partager des billets qui nous ont plu.

Robert loves Google Reader. Tempted me to try. I think I love it too.

I’ve been using Bloglines for quite some time now (still doesn’t make me a good blog reader). I find the interface for Google Reader clearer. It was easy to export my subscriptions as OPML from Bloglines to try Google Reader.

What really wins me over? How easy it is to share the stuff I’ve liked with you. I’ve even added it to my sidebar. See? Maybe Bloglines does it (I’m sure it does) but it wasn’t obvious enough and I never got around to doing it. With Google Reader, I just click on the “share” button at the end of each post I want to add to my share page.

Life and Trials of a Multilingual Weblog [en]

Here is an explanation of how I set up WordPress to manage my bilingual weblog. I give all the code I used to do it, and announce some of the things I’d like to implement. A “Multilingual blogging” TopicExchange channel is now open.

[fr] J'explique ici quelles sont les modifications que j'ai faites à WordPress pour gérer le bilinguisme de mon weblog -- code php et css à l'appui. Je mentionne également quelques innovations que j'ai en tête pour rendre ce weblog plus sympathique à mes lecteurs monolingues (ce résumé en est une!) Un canal pour le weblogging multilingue a été ouvert sur TopicExchange, et vous y trouverez peut-être d'autres écrits sur le même sujet. Utilisez-le (en envoyant un trackback) si vous écrivez des billets sur le multinguisme dans les weblogs!

My weblog is bilingual, and has been since November 2000. Already then, I knew that I wouldn’t be capable of producing a site which duplicates every entry in two languages.

I think this would defeat the whole idea of weblogging: lowering the “publication barrier”. I feel like writing something, I quickly type it out, press “Publish”, and there we are. Imposing upon myself to translate everything just pushes it back up again. I have seen people try this, but I have never seen somebody keep it up for anything nearing four years (this weblog is turning four on July 13).

This weblog is therefore happily bilingual, as I am — sometimes in English, sometimes in French. This post is about how I have adapted the blogging tools I use to my bilingualism, and more importantly, how I can accommodate my monolingual readers so that they also feel comfortable here.

First thing to note: although weblogging tools are now ready to be used by people speaking a variety of languages (thanks to a process named “localization”), they remain monolingual. Language is determined at weblog-level.

With Movable Type, I used categories to emulate post-level language awareness. This wasn’t satisfying at all: I ended up with to monstrous categories, Français and English, which didn’t help keep rebuild times down.

With WordPress, the solution is far more satisfying: I store the language information as Post Meta, or “custom field”. No more category exploitation for something they shouldn’t be used for.

Before I really got started doing the exciting stuff, I made a quick change to the WordPress admin interface. If I was going to be adding a “language” custom field to each and every post of mine, I didn’t want to be doing it with the (imho) rather clumsy “Custom Fields” form.

In edit.php, just after the categorydiv fieldset, I inserted the following:

<fieldset id="languagediv">
      <legend>< ?php _e('Language') ?></legend>
	  <div><input type="text" name="language" size="7"
                     tabindex="2" value="en" id="language" /></div>
</fieldset>

(You’ll probably have to move around your tabindex values so that the tabbing order makes sense to you.)

I also tweaked the wp-admin.css file a bit to keep it looking reasonably pretty, adding the rule below:

#languagediv {
	height: 3.5em;
	width: 5em;
}

and adding #languagediv everywhere I could see #poststatusdiv, so that they obeyed the same rules.

In this way, I have a small text field to edit to set the language. I pre-set it to “en”, and have just to change it to “fr” if I am writing in French.

We just need to add a little piece of code in the form processing script, post.php, just after the line that says add_meta($post_ID):

 // add language
	if(isset($_POST['language']))
	{
	$_POST['metakeyselect'] = 'language';
        $_POST['metavalue'] = $_POST['language'];
        add_meta($post_ID);
        }

The first thing I do with this language information is styling posts differently depending on the language. I do this by adding a lang attribute to my post <div>:

<div class="post" lang="<?php $post_language=get_post_custom_values("language"); $the_language=$post_language['0']; print($the_language); ?>">

In the CSS, I add these rules:

div.post:lang(fr) h2.post-title:before {
  content: " [fr] ";
  font-weight: normal;
}
div.post:lang(en) h2.post-title:before {
  content: " [en] ";
  font-weight: normal;
}
div.post:lang(fr)
{
background-color: #FAECE7;
}

I also make sure the language of the date matches the language of the post. For this, I added a new function, the_time_lg(), to my-hacks.php. I then use the following code to print the date: <?php the_time_lg($the_language); ?>.

Can more be done? Yes! I know I have readers who are not bilingual in the two languages I use. I know that at times I write a lot in one language and less in another, and my “monolingual” readers can get frustrated about this. During a between-session conversation at BlogTalk, I suddenly had an idea: I would provide an “other language” excerpt for each of my posts.

I’ve been writing excerpts for each of my posts for the last six months now, and it’s not something that raises the publishing barrier for me. Quickly writing a sentence or two about my post in the “other language” is something I can easily do, and it will at least give my readers an indication about what is said in the posts they can’t understand. This is the first post I’m trying this with.

So, as I did for language above, I added another “custom field” to my admin interface (in edit-form.php). Actually, I didn’t stop there. I also added the field for the excerpt to the “simple controls” posting page that I use (set that in Options > Writing), and another field for keywords, which I also store for each post as meta data. Use at your convenience:

<!-- BEGIN BUNNY HACK -->
<fieldset style="clear:both">
<legend><a href="http://wordpress.org/docs/reference/post/#excerpt"
title="<?php _e('Help with excerpts') ?>"><?php _e('Excerpt') ?></a></legend>
<div><textarea rows="1" cols="40" name="excerpt" tabindex="5" id="excerpt">
<?php echo $excerpt ?></textarea></div>
</fieldset>
<fieldset style="clear:both">
<legend><?php _e('Other Language Excerpt') ?></legend>
<div><textarea rows="1" cols="40" name="other-excerpt"
tabindex="6" id="other-excerpt"></textarea></div>
</fieldset>
<fieldset style="clear:both">
<legend><?php _e('Keywords') ?></legend>
<div><textarea rows="1" cols="40" name="keywords" tabindex="7" id="keywords">
<?php echo $keywords ?></textarea></div>
</fieldset>
<!-- I moved around some tabindex values too -->
<!-- END BUNNY HACK -->

I inserted these fields just below the “content” fieldset, and styled the #keywords and #other-excerpt textarea fields in exactly the same way as #excerpt. Practical translation: open wp-admin.css, search for “excerpt”, and modify the rules so that they look like this:

#excerpt, #keywords, #other-excerpt {
	height: 1.8em;
	width: 98%;
}

instead of simply this:

#excerpt {
	height: 1.8em;
	width: 98%;
}

I’m sure by now you’re curious about what my posting screen looks like!

To make sure the data in these fields is processed, we need to add the following code to post.php (as we did for the “language” field above):

// add keywords
	if(isset($_POST['keywords']))
	{
	$_POST['metakeyselect'] = 'keywords';
        $_POST['metavalue'] = $_POST['keywords'];
        add_meta($post_ID);
        }
   // add other excerpt
	if(isset($_POST['other-excerpt']))
	{
	$_POST['metakeyselect'] = 'other-excerpt';
        $_POST['metavalue'] = $_POST['other-excerpt'];
        add_meta($post_ID);
        }

Displaying the “other language excerpt” is done in this simple-but-not-too-elegant way:

<?php
$post_other_excerpt=get_post_custom_values("other-excerpt");
$the_other_excerpt=$post_other_excerpt['0'];
if($the_other_excerpt!="")
{
	if($the_language=="fr")
	{
	$the_other_language="en";
	}

	if($the_language=="en")
	{
	$the_other_language="fr";
	}
?>
    <div class="other-excerpt" lang="<?php print($the_other_language); ?>">
    <?php print($the_other_excerpt); ?>
    </div>
  <?php
  }
  ?>

accompanied by the following CSS:

div.other-excerpt:lang(fr)
{
background-color: #FAECE7;
}
div.other-excerpt:lang(en)
{
background-color: #FFF;
}
div.other-excerpt:before {
  content: " [" attr(lang) "] ";
  font-weight: normal;
}

Now that we’ve got the basics covered, what else can be done? Well, I’ve got some ideas. Mainly, I’d like visitors to be able to add “en” or “fr” at the end of any url to my weblog, and that would automatically filter out all the content which is not in that language — maybe using the trick Daniel describes? In addition to that, it would also change the language of what I call the “page furniture” — titles, footer, and even (let’s by ambitious) category names. Adding language sensitivity to trackbacks and comments could also be interesting.

A last thing I’ll mention in the multilingual department for this weblog is my styling of outgoing links if they are written in a language which is not my post language, using the hreflang attribute. It’s easy, and you should do it too!

Suw (who has just resumed blogging in Welsh) and I have just set up a “Multilingual blogging” channel on TopicExchange — please trackback it if you write about blogging in more than one language!