Strategic insights
Some of the Magic Behind Baekdal.mobi

Written by Thomas Baekdal on August 19, 2008

After releasing baekdal.mobi I promised I would write an article about how I made it... but I ran into a problem. Every time I tried to write it, I always ended up with an extremely technical and complex article. And I don't want that on Baekdal.com.

After writing a lot about AJAX and XMLHTTPrequest in 2005, I made a decision to change my site and remove the technical nature of it. I don't see myself as a developer, I see myself as one who defines the strategies. I turned away from the technical articles and decided to focus on why you should create great products from a business, strategy and conceptional point of view.

So, I find myself in a bit a dilemma. On one hand I promised to write about how I made baekdal.mobi, and I am sure that many of you would like to read about it. On the other hand I don't want to publish a technical article on baekdal.com, because it moves my site in a direction I am trying to get away from.

Not that the technical parts isn't exciting. It does enable us to create really cool things. It is a bit like this. The technology and software that the animators use at Pixar is astounding. But it is not the software that makes the movies. A great movie is about the story, the feeling you get inside. It is about the laughter between you and your friends and the sad moments where you almost cry.

How something is made, matters very little. It can enhance a sensation, but it cannot create it.

What to keep in mind

What I am going to do, is to very shortly summarize what you should keep in mind when you are making a mobile site.

It is not a different internet

Everyone that has created mobile sites in the past also knows that the traditional mobile internet is very unlike the full internet. You cannot use the same code, you cannot do the same things. it is alltogether different and more difficult.

But the new mobile internet, the one you get on an iPhone and using Opera Mobile 9.5 (on Windows Mobiles) is exactly the same as the normal internet. You got full XHTML and CSS. You have full JavaScript support. Everything is the same.

Creating a mobile site today is more or less as simple as creating a site with a width of about 320px. You don't really have to learn new things - and in fact Baekdal.mobi is 99% identical to baekdal.com. I did not create a new site; I merely restyled it (and tweaked the menu).

There are, however, a few things to be aware of.

It is the ultimate fluid website

After creating my report on browser sizes, people began to discuss the fixed vs. fluid layout. On a mobile platform you don't really have a choice. A mobile phone is the ultimate fluid layout.

You might think that it is a fixed sized screen, and in part it is, but then you got the difference in orientation. If people rotate the screen, the width suddenly expands 66% and the height collapse into only a quarter of the original height.

Trying to design a page that works well with such drastic size changes is very difficult.

Then you have the additional problem that not all mobile phones have the same screen size.

I decided to design baekdal.mobi to work with both the iPhone and all other browser's capable of a full web experience (which is currently only phones with Opera Mobile 9.5). And the screen on my HTC Touch diamond is not the same size as the one on the iPhone.

Text and readability

Another problem you will face is that the physical resolution of mobile phones as not as predictable as on a computer. You pretty much know that 12px text is readable on your laptop, but it is not readable on an iPhone.

You need to scale up the text quite a bit to make something readable. On baekdal.mobi the text has a base size of 15px to look more less the same as on my laptop.

But, again you are facing the problem that this is unique to the iPhone. Other phones may need a different text size too.

Images

A very important thing is how to deal with images. You don't want to force people to download the original "big" image from your normal website. It is a waste of bandwidth and since many don't have a flat-rate data plan, it costs money too.

You need to upload a picture designed specifically for the mobile phone. On baekdal.mobi this means that I have a normal web image at 588px wide, an iPhone image at 300px and a HTC Touch image at 220px.

Of course, I don't actually create 3 images. I upload one high-quality image, and then use an image scaling component (ASPJPEG) to automatically resize the image (LIVE) depending on what device you are using.

Videos

Videos are a pain in the a... The problem is that they do not support flash video, and most of the video on the net relies on that format.

For instance, if you embed a video from YouTube, that video will not work on the iPhone. As with images, you need to upload a different video for the iPhone. And more importantly, you also need to change your site to show the right video depending on the device.

Note: You can convert video to an iPhone friendly format using either QuickTime Pro or one of the many video converters on the internet. I got 6 different converters: QuickTime Pro, Total Video Converter, Aimersoft Video Converter, Free video to iPhone converter, On2 Flix pro, and Replay AV. + a ton of different codecs to be able to convert anything to anything else...

.mobi

I also host baekdal.mobi on the dedicated mobile domain ".mobi". The advantage of doing this is that mobile devices will treat your site as "mobile" by default. Apple, among others, claim to handle .mobi domain this way.

It theory this sounds great, but I have not been able to tell the difference between a page rendered on a .mobi domain and a .com domain.

Navigation vs. Javascript/CSS

Another important thing to remember is that while the iPhone supports JavaScript, people navigate an entirely different way.

You don't have onmouseover or :hover. So a lot of the normal visual feedback does not exist. You need to rethink how to provide feedback when people are interaction with your page. This is especially important if you are making mobile web applications.

Also, while the iPhone is impressive, it is not fast. It is about 4 times slower when doing JavaScript computations and between 10-20 times slower when changing the interface. Be careful when creating sliding panels, expanding boxes or changing the position of the content.

Cache

The last thing I am going to talk about is Cache. In the desktop browser the cache is very large (several megabytes). This means that your page is going to be loaded fairly quickly. But the iPhone has a fixed cache at 25kb.

If your page and everything on it is above 25kb, then it is going to be reloaded from scratch every time people see it.

Almost all pages on baekdal.mobi are above 25kb because of the many images I put on them. It is most noticeable when you click the back button. On my HTC Touch Diamond it goes back instantly - while the entire page is reloaded on the iPhone from scratch.

It doesn't matter much for a website, but it may have a huge speed impact on mobile web application. So keep this in mind. Size matters a lot... and small is good!