Isaac Keyet

A few days ago we went live with some new user menus for the IntenseDebate plugin. I’ve made the design of course, and while they’re meant to resemble the looks of the old menus in a lot of ways, there are some notable differences. The most striking change is of course the avatar being a part of the popup as this was not the case before. An enlarged avatar gives the reader a more personal and complete insight in a user profile.

The goal for the redesign was to remove non-vital elements from the menu, items that you’re probably not interested in until you know the other stuff anyway. It now shows the username in large letters, along with the reputation meter. If you have enabled your latest twitter messages, and have a description as well, now both will show – not one or the other like it was before. This is true for the IntenseDebate.com profile as well.

Of course I’m going for pixel-perfect, clean, and with fancy effects once you notice them. Hint: The “border” around the avatar is actually a semi-transparent sweet-looking box, and all buttons have fancy :hover and :active effects. All in a single CSS sprite of course. Hope you like it!

So this is pretty cool… The Wordpress platform was nominated in the Webware awards anno 2009. If you love WordPress as much as I do, you don’t hesitate to go vote for your champ!

Seriously though, I’m proud. The whole team behind WordPress is truly amazing.

Just read about this, Swedish official iPhone carrier Telia will soon offer an application that, for the first time, makes MMS messaging possible with the iPhone. The company that has developed this iPhone app is called Mobispine AB, and their press release of the product looks promising. Apparently it’s a white-label solution that Telia will get in on.

While many people argue that you might as well send an email with the image you just took, fact is most older phones don’t support email reading in a manageable fashion, plus most users would not set up an email account anyway.

This was news to me. I stumbled across this article about Chosr, a web based command like interface that works just like Quicksilver. (Read more about Quicksilver here.) The idea is that as soon as you open a new tab in your browser, the startpage (Chosr) appears and lets you type in what you want to do next. This alleviates the problem of always changing input medium (keyboard/mouse), and you can do more just using the keyboard.

Let’s take an example. You are watching the election closely, and want to see his latest ad that aired on several TV stations yesterday. Normally you would open a new tab, move your cursor to the address field, click, type in “youtube.com”, wait for it to load, move your cursor to the search field, type in “obama ad”, press enter and wait for the search results, click your preferred video, wait for it to load, then watch it. (I’m fully aware that there are several other ways to speed up this process, I’m using search keywords myself, for instance.)

If you were using Chosr though, you would do the following. Open up a new tab, type in “obama ad”, tab to the next box, type youtube, hit enter to load the list of results, then enter again to play the video. A much faster process, just because you don’t have to go back and forth from the keyboard and the mouse.

You don’t even have to sign up to give it a test run. Just go to www.chosr.com and take it for a spin! They also have a bunch of tremendous videos that teach you about the possibilities of the startpage interface.

I found this awesome site that compares market shares globally between browsers. As of 2008-10-01, these are the biggest browsers in the world:

46% – Microsoft Internet Explorer 7
25% – Microsoft Internet Explorer 6
19% – Mozilla Firefox, any version
7% – Safari, any version (most likely including other browsers built on WebKit, such as Camino)
3% – Other browsers (Google Chrome, Opera, Netscape, etc)

Notable is also that Safari versions below 3.0 are at less than 0,02% of total market share.

Click here to go to marketshare.hitslink.com to read more.

At least in my job, knowing what browser your customers use to browse the web is crucial. Yet, you hear many different numbers from many sources, and you end up just making up your own numbers that seem somewhat correct. Different sites can be browsed by completely different browser users. For websites aimed at very tech-savvy people (think digg.com) generally Firefox has a much larger market share, whereas a site like myspace.com probably has less Firefox users than even the overall average market share of the browser.

When making a web service, it’s very important to recognize your limitations – but also your possibilites. Modern browsers support features older browsers don’t, and if you know that 75% of your audience uses a modern browser (such as Internet Explorer 7+, Firefox 2+, Safari 2+), it’s sometimes acceptable to design a feature aimed at these people, and doing a light version for the others. For me as a designer, a classic example is PNG-24 images, semi-transparent wonders that makes IE6 totally crap out. Therefore I do a less pretty version of the semi-transparent images for that browser, and most people that actually cares are happy in the end.

It’s an interesting and forever evolving topic, that’s for sure.

Today, IntenseDebate officially got acquired by the fabulous company Automattic, the makers of both WordPress.com and WordPress.org!

Here’s IntenseDebate’s Tom Keller and Toni Schneider talking about the acquisition at the SF TechStars event:

I’m super excited about the deal, and starting to work for Automattic. I feel like this is what we’ve been working for for the past 1.5 years, and now we’re finally there… And it’s an amazing feeling.

I’m off to have some champagne. Yay for us, IntenseDebate Team!

Go read Jon’s Blog Post about the acquisition, and TechCrunch, and the TechStars Blog, and Andrew Hyde’s Blog, and Mashable, and Matt Mullenwegs blog, and Toni Schneider’s blog (CEO Automattic), and IntenseDebate’s own blog post about the acquisition, and… Many more.

I’ve had this problem for a while, that Mac OS X Mail (the native mail client in OS X) sends emails that other email clients don’t recognize as attachments, but as embedded pictures. This has been really frustrating, because if I’m sending an image to a client that needs to be saved on the client’s computer, he or she is unable to do so because the image is not a “real attachment”.

So, here are the facts: Wether an image is embedded in the email or not, it’s still an attachment. Thus, OS X Mail does nothing wrong when it embeds the image, other clients simply doesn’t want to understand that it’s still an attachment. The clients (read: “Outlook”) offer no way to save the image other than to right click it inside the email, but that only generates a .bmp that’s scaled down to the email size in pixel width.

Please note that it doesn’t matter if you click the Attachment button in the main taskbar or simply drag the images to the email body.

The solution:
The reason my images were getting embedded was because I was using some signatures with colors in them. As soon as you set the font, a color or similar, Mail turns the email into a “Rich Text” email, which basically means it’s a HTML email. So when you attach images to such an email, Mail generates an tag for that image, thus embedding it into the email itself. You can avoid this easily by just using Plain Text emails (see screenshot).

You can also try to simply don’t use any formatting in the email, including your signature.

Hope this helps.

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

I just got done with it, and it’s just for fun. If you look in this blog’s sidebar you’ll see a shiny iPhone with my latest visitors in it.

The reason I did it was just because the new MBL widget looks so much like an iPhone. Especially if you’re using a black and white color scheme for it, which I did. Anyway, I hope you like it!

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

• Facebook:
• Last.fm:
• CNN:
• Yahoo!:
• Twitter:

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

1. Enter root web adress in your browsers adress field: http://www.sitename.com
2. Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
3. Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!