It was then that Thomas (Byttebier) mentioned what a big pile of shit SVG was. He was working on a responsive website for some friends who own a B&B named “Sleepstreet“. Because this site was responsive it seemed natural to use an SVG for the logo. Razor-sharp resizing was the game and Illustrator was there to blame!

It felt logical to create a logo in Illustrator and export it as an SVG, but how do you implement this cross browser? Just copy paste the barfed-up SVG code from Illustrator? Hell no!

Javascript to the rescue!

After weeks of sleepless nights, few possibilities were left and Thomas put all his faith in this RaphaelJS library. This seemed to be the best solution possible. Only drawback was that Thomas had to rewrite the entire SVG with Javascript, using Cufon as well for the custom font. This wasn’t logical at all, so I proposed to build an online SVG editor. But as most promises made in a bar, this one too died a silent death… Until now!

If he wasn’t a designer, this would be where the story ends. However…. Take a look a the logo and the different scaling zones:

the red zones should resize in a different way than the center. The center should always stay as big as possible whereas the 2 ribbons can resize to at least a minimum width of the actual ribbon. I know it all sounds a bit complicated but if you see how it works you’ll understand why this should behave like this. Check the sleepstreet website and resize your browser to see the logo scale

Now, the problem is that all the coding for this is done by hand, it’s not rocket science, but enough to have some sleepless nights coding this up. Therefore we started playing with the idea to build an online SVG editor to generate this kind of SVG in a very easy and user-friendly kind of way. Now it’s my job te make it actually happen, and oh boy, I feel as excited as 16 year old waiting on a saturday night to attend hist first party ever.

I know the very basics of illustrator and I must say I hate most of it. I have some ideas about the interface, etc… but this will be posted in an article later this week.

Most of the mobile browsers use webkit as render engine, there are however some exceptions. Besides the render engine, the viewport is another bottleneck. So how do you deal with that? My first thought was to focus solely on the iphone. Using the iPhone SDK and the iPhone emulator that comes with it, I could easily test sites on my mac. The latest iPhone SDK even has an iPad emulator! So making sure everything works on those 2 devices was sometimes a pain in the ass… So after optimizing for iphone and ipad came the actual testing, not on-screen, but on my iPhone / iPad using my fingers to flick, tap, scroll, zoom and pinch my way around. A good help for making sure everything was usable were the iPhone human interface guidelines.

So now I had my projects working on only 2 mobile devices, whereof one not sold (yet) in Belgium. Hooray… Therefore I tried installing the Android SDK so I could mess around with their emulator. And then what? Install another SDK for nokia, blackberry (nowadays they use webkit),… Some time ago, someone on the fronteers irc channel mentioned  Adobe Device Central. They offer a lot of platforms to test, but it seems a bit too flash minded and doesn’t always work the way I want.

Another great tip came in from Jon Hicks: Liveview, for Mobile Application Design & Prototyping Tool.

The point is: I’m kind of stuck with mobile testing, I can test on iPod touch, iPhone and iPad which seems ok for an apple fanboy like me, but off course, there is the harsh truth that not everybody is using one of those mobile devices… So what’s your secret setup for mobile testing?