This week was the eight edition of the dConstruct conference in Brighton. It was a day of information overload and inspiration, and offered plenty of food for thought. From my notes, I have tried to distill the most important messages and lessons from the different talks.
Many times when making mockups or design illustrations, I have found myself wanting to include a cursor in the image to show what the user would click on. I have scoured Google Image search too many times, looking for a decent, transparent and preferably scalable vector version of a standard cursor and I never found one that I was quite happy with. The worst part of all of this, is that Mac OS X actually uses vector images for its cursors internally. Some of those cursors are hidden away in a system folder, where they are up for grabs. On OS X 10.7 (Lion) they are here, in all their beautiful vector glory:
/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/HIServices.framework/Versions/A/Resources/cursors
Unfortunately, the most important cursor is missing: the arrow. In this discussion on StackOverflow someone pointed out that the “contextualmenu” cursor has an arrow in it that bears striking resemblance to the one used as a regular pointer. All it takes is some cleaning up, and that’s just what I did.
It’s all vector, so it scales beautifully to whatever size you need and it looks best with a bit of drop shadow, like on the original.
Download the Mac OS X Vector Arrow Cursor for your own projects.
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.
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.
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:
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!
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
It has been very entertaining to follow the news around the infamous Samwer brothers – the German trio that set the standard for copying successful businesses. Like them or not, they were able to outrun a giant like Groupon and even snatch some cake from Amazon.
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.
Continue reading
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
