Michel Jansen

17 July, 2012

Misunderstanding Minimalism

Microsoft has historically not been known for their strong design and taste, but in the age of Metro it’s too easy to say they fundamentally don’t care about design. In fact, the Metro Design Language, with its focus on content first, strong typography and minimalistic chrome, may have been one of the best things to come out of Microsoft in a long time. Allowing Metro to escape the dying Zune and redefine the Windows Phone User Experience was a great idea and may very well have saved Microsoft’s Mobile presence from the shipwreck that was Windows Mobile.

Continue reading →

8 May, 2012

Dynamically Generated CSS Images in LESS

In solving some of the problems needed to create my pure CSS progress bars with rounded corners, I ended up using a combination of two backgrounds: a background-color and a background-image. Unfortunately, images are rather static, inflexible things. They require you to make a new image every time you want to use a slightly different colour… or do they?

While playing with different colours in my design (I like to prototype in code), the inability to change the colour of the image on the fly didn’t sit well with me. After all, it’s just a bunch of bytes being parsed by the browser before being rendered on the screen. If we can provide that data in CSS as a data-uri, as I already showed in my previous article, then surely we can have some level of control over what that data represents. I got a bit obsessed about this and over the weekend I managed to get this insanity to work. By dynamically generating a data-uri, we can have a 1-pixel image of any colour we want.

The result is available on Github. Check out the demo to see it in action.

Continue reading →

5 May, 2012

CSS Progress Bars with Rounded Corners

I love rounded corners as much as the next guy and CSS3 makes it really easy to use them on the web. Unfortunately, there are some weird quirks and bugs that can spoil the fun. This week, I wanted to style something with to look like a progress bar and those rounded corners really bit me in the ass. Put simply, I wanted to create something that looked roughly like the figure below:

The target: a rounded rectangle with a flat progress bar inside

It turned out that it’s not as easy as it looks to style an element to behave like that. The difficult part is the fact that the progress bar is flat, but fits nicely in the rounded corners of the containing shape. As it turns out, there are some bugs in Webkit and thus Chrome and Safari when it comes to the clipping of child elements of elements with rounded corners, that make it hard to get this to look like in the picture. I finally found a creative solution. If you’re just interested in the source, check out the demo page. Otherwise, do read on!

Continue reading →

4 May, 2012

Faster iPad Text Navigation

Tablets are not just for consuming content, but navigating the cursor in text to make changes, correct mistakes and so on is still kind of painful. Daniel Hooper was frustrated by how tedious text editing is on an iPad and decided to do something about it. As he remarks “Apple says the iPad is the future of the Post-PC world; if it’s going to be my primary keyboard, I want a better way to edit text!”. He came up with a clever solution involving gestures on the keyboard, as the video below illustrates.
Continue reading →

2 February, 2012

Test on mobile devices during development

I’m currently working on making Nestoria more friendly to users on mobile devices and one of the biggest challenges was easily testing on real mobile devices. This is important, because there is no such thing as mobile WebKit. Apple provides a pretty decent simulator for the iPhone and there are AVDs for nearly every Android device on the market, but there is only so much testing you can do on an emulator. On a real device, things tend to be ever so subtly different and more importantly, you get to see things on a real device in the real scale and in a real context, which happens to matter a lot.
iPhone Simulator
Continue reading →

28 September, 2011

The Magical 7 inch

Amazon finally released its long awaited Android-based tablet today: The Kindle Fire. It’s a true tablet, with a gorgeous IPS colour touch screen and enough power to run apps and play movies. This in itself is interesting enough, but what I find truly interesting is the form factor Amazon chose for its newest baby: 7 inch.
Continue reading →