The first useful ad

I was actually pleasantly surprised when I discovered this new advertisement type on YouTube the other day, it’s a large bar that goes across the bottom of the video that tells the name of the song, displays some artwork if available AND links to services where you can buy and download the song. How awesome is that? Go YouTube!

YouTube music advertisement screenshot

MMS Comes to the iPhone


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.

Review Of Chosr, A “Quicksilver” Startpage

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.

Tips on Using the Outline CSS Property

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!

Get perfect Web 2.0 16x16px icons quickly!

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: favicon
  • Last.fm: favicon
  • CNN: favicon
  • Yahoo!: favicon
  • Twitter: favicon

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!

Twitter

It was finally time to check out Twitter. I started using my account actively a week or so ago, and it’s been a blast. Although there are whole new chemics I need to learn about the in Twitter community (and especially the Boulder scene), I feel like almost everything is accepted, so possible mistakes goes unnoticed.

Intense Debate incorporated Twitter today. It’s either your latest tweets or a personal message that can go in your avatar menu now. I suggest you head over to the Intense Debate Blog right away and read more. Plus there’s a shiny screenshot there!

Pure CSS animated menu

I’ve had this idea for a long time, to create a menu that would look animated but still being all CSS. The trick is to use the movement of the mouse over different objects to trigger other elements to change. Thanks to normal child selectors, nested elements and some padding animation is actually possible. The theory behind this is that the 1st element sets the size of the visible menu item, the 2nd changes this to a higher value, and so forth. You can also put in color changes and whatever else CSS you might want!

This is just a proof of concept, and I have no idea if it actually works in all browsers. I’ve developed this little example for Firefox 2. Mouse over the menu slowly and see what happens…

Confusing? I put in some borders in the example below, in an attempt to show off the theory behind it..

Hope you like it 🙂