Willistrator: The why
It all started on a sunny day last year. I remember it well, it was pouring rain and freezing like hell. Therefore some friends and I were sitting in “de vooruit” in Ghent, talking about the revolutionary changes in the web scene: HTML5, CSS3, media queries, responsive design, SVG, etc…
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!
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.